Settings.jsx

Go to the documentation of this file.

import React, { useState, useEffect, useRef } from 'react';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import './Settings.css';
import { apiFetch } from '../lib/api';
import { isAdmin } from '../utils/auth';
import { notifySuccess, notifyError } from '../utils/notifications';
 
function Settings() {
  // selectedTenantId should come from props/context, not localStorage
  // Remove localStorage usage for tenant selection
  // -------------------------------
  // White Label Branding State
  // -------------------------------
  const [iconPreview, setIconPreview] = useState(null);
  const [iconUploading, setIconUploading] = useState(false);
  const [iconError, setIconError] = useState(null);
  const iconInputRef = useRef();
 
  // -------------------------------
  // Main Settings State
  // -------------------------------
  const [settings, setSettings] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [saving, setSaving] = useState(false);
 
  const [taxRate, setTaxRate] = useState(10);
  const [taxRateLoading, setTaxRateLoading] = useState(true);
 
  const [invoiceAdvanceDays, setInvoiceAdvanceDays] = useState(14);
  const [invoiceAdvanceDaysLoading, setInvoiceAdvanceDaysLoading] = useState(true);
 
  const [companySettings, setCompanySettings] = useState({
    abn: '',
    address: '',
    phone: '',
    email: ''
  });
  const [companySettingsLoading, setCompanySettingsLoading] = useState(true);
 
  const [users, setUsers] = useState([]);
  const [usersLoading, setUsersLoading] = useState(true);
  const [userError, setUserError] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
 
  const [newUser, setNewUser] = useState({
    name: '',
    email: '',
    role: 'staff',
    password: '',
    tenant_id: null
  });
  const [creatingUser, setCreatingUser] = useState(false);
 
  // User editing state
  const [editingUser, setEditingUser] = useState(null);
  const [editUserData, setEditUserData] = useState({
    name: '',
    email: '',
    role: ''
  });
  const [updatingUser, setUpdatingUser] = useState(false);
 
  // Create user modal state
  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
 
  const [currentRole, setCurrentRole] = useState(null);
  const [isRootUser, setIsRootUser] = useState(false);
 
  const [tenants, setTenants] = useState([]);
  const [tenantSearch, setTenantSearch] = useState('');
  const [filteredTenants, setFilteredTenants] = useState([]);
  const [tenantDropdownOpen, setTenantDropdownOpen] = useState(false);
  const [selectedTenant, setSelectedTenant] = useState(null);
  const [selectedTenantId, setSelectedTenantId] = useState('');
 
  // -------------------------------
  // WordPress Settings State (Root Tenant Only)
  // -------------------------------
  const [wordpressSettings, setWordpressSettings] = useState({
    database_password: '',
    spaces_access_key: '',
    spaces_secret_key: ''
  });
  const [wordpressLoading, setWordpressLoading] = useState(false);
  const [wordpressSaving, setWordpressSaving] = useState(false);
  const [wordpressError, setWordpressError] = useState(null);
  const [wordpressSuccess, setWordpressSuccess] = useState(false);
 
  // -------------------------------
  // Pax8 Integration State
  // -------------------------------
  const [pax8Settings, setPax8Settings] = useState({
    client_id: '',
    client_secret: '',
    pax8_company_id: ''
  });
  const [pax8Loading, setPax8Loading] = useState(false);
  const [pax8Saving, setPax8Saving] = useState(false);
  const [pax8Error, setPax8Error] = useState(null);
  const [pax8Success, setPax8Success] = useState(false);
  const [pax8Testing, setPax8Testing] = useState(false);
  const [pax8TestResult, setPax8TestResult] = useState(null);
  const [pax8Configured, setPax8Configured] = useState(false);
 
  // -------------------------------
  // Load Tenant Icon
  // -------------------------------
  useEffect(() => {
    if (!selectedTenantId) return;
 
    apiFetch(`/tenants/${selectedTenantId}/icon`)
      .then(res => res.ok ? res.blob() : null)
      .then(blob => {
        if (blob) setIconPreview(URL.createObjectURL(blob));
        else setIconPreview(null);
      });
  }, [selectedTenantId]);
 
  // -------------------------------
  // Set Favicon
  // -------------------------------
  useEffect(() => {
    if (!iconPreview) return;
 
    let link = document.querySelector("link[rel~='icon']");
    if (!link) {
      link = document.createElement('link');
      link.rel = 'icon';
      document.head.appendChild(link);
    }
    link.href = iconPreview;
 
    return () => {
      link.href = '/favicon.ico';
    };
  }, [iconPreview]);
 
  // -------------------------------
  // Icon Upload
  // -------------------------------
  const handleIconUpload = async (e) => {
    setIconUploading(true);
    setIconError(null);
 
    const file = e.target.files[0];
    if (!file) return;
 
    const formData = new FormData();
    formData.append('icon', file);
 
    try {
      const token = localStorage.getItem('token');
 
      const res = await apiFetch(`/tenants/${selectedTenantId}/icon`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` },
        body: formData
      });
 
      if (!res.ok) throw new Error('Upload failed');
 
      setIconPreview(URL.createObjectURL(file));
    } catch (err) {
      setIconError('Upload failed');
    } finally {
      setIconUploading(false);
    }
  };
 
  // -------------------------------
  // Tenant-aware Headers
  // -------------------------------
  const getTenantHeaders = async (base = {}) => {
    const token = localStorage.getItem('token');
    if (!token) return base;
 
    const headers = { ...base };
 
    try {
      const payload = JSON.parse(atob(token.split('.')[1]));
      const isMSP = payload.role === 'admin' || payload.role === 'msp';
 
      if (isMSP && selectedTenantId) {
        // No more subdomain header — JWT handles tenancy now
      }
    } catch { }
 
    return headers;
  };
 
  // -------------------------------
  // Fetch Users
  // -------------------------------
  const fetchUsers = async (search) => {
    setUsersLoading(true);
    try {
      const token = localStorage.getItem('token');
      let url = '/users';
      if (search?.trim()) url += `?search=${encodeURIComponent(search.trim())}`;
 
      const res = await apiFetch(url, {
        headers: { Authorization: `Bearer ${token}` }
      });
 
      if (!res.ok) throw new Error('Failed to load users');
 
      setUsers(await res.json());
      setUserError(null);
    } catch (err) {
      setUserError(err.message || 'Error');
    } finally {
      setUsersLoading(false);
    }
  };
 
  // -------------------------------
  // Fetch Settings, Tax, Company Info
  // -------------------------------
  useEffect(() => {
    const fetchAll = async () => {
      // ---- General Settings ----
      setLoading(true);
      try {
        const token = localStorage.getItem('token');
        const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
        const res = await apiFetch('/settings', { headers });
        if (!res.ok) throw new Error('Failed to load settings');
 
        const data = await res.json();
        setSettings(data);
        localStorage.setItem('app_settings', JSON.stringify(data));
        setError(null);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
 
      // ---- Tax ----
      setTaxRateLoading(true);
      try {
        const token = localStorage.getItem('token');
        const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
        const res = await apiFetch('/settings/default_tax_rate', { headers });
        if (res.ok) {
          const data = await res.json();
          setTaxRate(parseFloat(data.setting_value) || 10);
        }
      } finally {
        setTaxRateLoading(false);
      }
 
      // ---- Invoice Advance Days ----
      setInvoiceAdvanceDaysLoading(true);
      try {
        const token = localStorage.getItem('token');
        const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
        const res = await apiFetch('/settings/invoice_advance_days', { headers });
        if (res.ok) {
          const data = await res.json();
          setInvoiceAdvanceDays(parseInt(data.setting_value, 10) || 14);
        }
      } finally {
        setInvoiceAdvanceDaysLoading(false);
      }
 
      // ---- Company Info ----
      setCompanySettingsLoading(true);
      try {
        const token = localStorage.getItem('token');
        const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
        const [abn, address, phone, email] = await Promise.all([
          apiFetch('/settings/company_abn', { headers }),
          apiFetch('/settings/company_address', { headers }),
          apiFetch('/settings/company_phone', { headers }),
          apiFetch('/settings/company_email', { headers })
        ]);
 
        setCompanySettings({
          abn: abn.ok ? (await abn.json()).setting_value : '',
          address: address.ok ? (await address.json()).setting_value : '',
          phone: phone.ok ? (await phone.json()).setting_value : '',
          email: email.ok ? (await email.json()).setting_value : ''
        });
      } finally {
        setCompanySettingsLoading(false);
      }
    };
 
    fetchAll();
  }, [selectedTenantId]);
 
  // -------------------------------
  // Initial Load: Role, Root, Tenants, Users
  // -------------------------------
  useEffect(() => {
    const token = localStorage.getItem('token');
 
    // Role
    if (token) {
      try {
        const payload = JSON.parse(atob(token.split('.')[1]));
        setCurrentRole(payload.role);
      } catch { }
    }
 
    // Root check + Tenants
    const checkRoot = async () => {
      if (!token) return;
 
      try {
        const res = await apiFetch('/tenants', {
          headers: { Authorization: `Bearer ${token}` }
        });
 
        setIsRootUser(res.ok);
 
        if (res.ok) {
          const data = await res.json();
          setTenants(data.tenants || []);
          setFilteredTenants(data.tenants || []);
        }
      } catch {
        setIsRootUser(false);
      }
    };
 
    checkRoot();
    fetchUsers();
  }, []);
 
  // -------------------------------
  // Fetch WordPress Settings (Root Tenant Only)
  // -------------------------------
  const fetchWordPressSettings = async () => {
    if (!isRootUser) return; // Only fetch if root user
 
    setWordpressLoading(true);
    setWordpressError(null);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/settings/wordpress', {
        headers: { Authorization: `Bearer ${token}` }
      });
 
      if (res.ok) {
        const data = await res.json();
        setWordpressSettings(data);
      } else if (res.status === 403) {
        // Not root user, ignore
        console.log('Not root user, skipping WordPress settings');
      } else {
        throw new Error('Failed to load WordPress settings');
      }
    } catch (err) {
      console.error('Error fetching WordPress settings:', err);
      setWordpressError(err.message || 'Error loading WordPress settings');
    } finally {
      setWordpressLoading(false);
    }
  };
 
  // -------------------------------
  // Save WordPress Settings (Root Tenant Only)
  // -------------------------------
  const saveWordPressSettings = async () => {
    if (!wordpressSettings.database_password || !wordpressSettings.spaces_access_key || !wordpressSettings.spaces_secret_key) {
      setWordpressError('All fields are required');
      return;
    }
 
    setWordpressSaving(true);
    setWordpressError(null);
    setWordpressSuccess(false);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/settings/wordpress', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(wordpressSettings)
      });
 
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || 'Failed to save WordPress settings');
      }
 
      setWordpressSuccess(true);
      setTimeout(() => setWordpressSuccess(false), 3000);
    } catch (err) {
      console.error('Error saving WordPress settings:', err);
      setWordpressError(err.message || 'Error saving WordPress settings');
    } finally {
      setWordpressSaving(false);
    }
  };
 
  // Debounce search
  useEffect(() => {
    const t = setTimeout(() => fetchUsers(searchTerm), 300);
    return () => clearTimeout(t);
  }, [searchTerm]);
 
  // Tenant search filter
  useEffect(() => {
    if (!tenantSearch.trim()) {
      setFilteredTenants(tenants);
    } else {
      const s = tenantSearch.toLowerCase();
      setFilteredTenants(
        tenants.filter(t => t.name.toLowerCase().includes(s))
      );
    }
  }, [tenantSearch, tenants]);
 
  // Fetch WordPress settings when root user status is confirmed
  useEffect(() => {
    if (isRootUser) {
      fetchWordPressSettings();
    }
  }, [isRootUser]);
 
  // -------------------------------
  // Pax8 Integration Functions
  // -------------------------------
  const fetchPax8Config = async () => {
    setPax8Loading(true);
    setPax8Error(null);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/office365/config', {
        headers: { Authorization: `Bearer ${token}` }
      });
 
      if (res.ok) {
        const data = await res.json();
        if (data.configured) {
          setPax8Configured(true);
          setPax8Settings({
            client_id: data.config.client_id || '',
            client_secret: '', // Never send secret back  
            pax8_company_id: data.config.pax8_company_id || ''
          });
        } else {
          setPax8Configured(false);
        }
      }
    } catch (err) {
      console.error('Error fetching Pax8 config:', err);
      setPax8Error(err.message || 'Error loading Pax8 configuration');
    } finally {
      setPax8Loading(false);
    }
  };
 
  const savePax8Config = async () => {
    if (!pax8Settings.client_id || !pax8Settings.client_secret) {
      setPax8Error('Client ID and Client Secret are required');
      return;
    }
 
    setPax8Saving(true);
    setPax8Error(null);
    setPax8Success(false);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/office365/config', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(pax8Settings)
      });
 
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || 'Failed to save Pax8 configuration');
      }
 
      setPax8Success(true);
      setPax8Configured(true);
      setTimeout(() => setPax8Success(false), 3000);
    } catch (err) {
      console.error('Error saving Pax8 config:', err);
      setPax8Error(err.message || 'Error saving Pax8 configuration');
    } finally {
      setPax8Saving(false);
    }
  };
 
  const testPax8Connection = async () => {
    setPax8Testing(true);
    setPax8TestResult(null);
    setPax8Error(null);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/office365/config/test', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` }
      });
 
      const data = await res.json();
      if (res.ok && data.success) {
        setPax8TestResult({ success: true, message: 'Connection successful! Pax8 API is responding.' });
      } else {
        setPax8TestResult({ success: false, message: data.error || 'Connection test failed' });
      }
    } catch (err) {
      console.error('Error testing Pax8 connection:', err);
      setPax8TestResult({ success: false, message: err.message || 'Connection test failed' });
    } finally {
      setPax8Testing(false);
    }
  };
 
  // Fetch Pax8 config on load
  useEffect(() => {
    fetchPax8Config();
  }, [selectedTenantId]);
 
  // -------------------------------
  // Update User Function
  // -------------------------------
  const updateUser = async () => {
    if (!editingUser || !editUserData.name || !editUserData.email) {
      alert('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 errorText = await res.text();
        throw new Error(errorText || 'Update failed');
      }
 
      // Refresh users list
      await fetchUsers();
 
      // Close edit modal
      setEditingUser(null);
      setEditUserData({ name: '', email: '', role: '' });
 
      alert('User updated successfully');
    } catch (err) {
      alert('Failed to update user: ' + (err.message || err));
    } finally {
      setUpdatingUser(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 openCreateUserModal = () => {
    setShowCreateUserModal(true);
    
    // Pre-populate tenant if one is currently selected
    if (selectedTenantId && tenants.length > 0) {
      const currentTenant = tenants.find(t => t.tenant_id === selectedTenantId);
      if (currentTenant) {
        setSelectedTenant(currentTenant);
        setNewUser({
          name: '',
          email: '',
          role: 'staff',
          password: '',
          tenant_id: currentTenant.tenant_id
        });
        setTenantSearch('');
        return;
      }
    }
    
    // Default: no tenant pre-selected
    setNewUser({
      name: '',
      email: '',
      role: 'staff',
      password: '',
      tenant_id: null
    });
    setTenantSearch('');
    setSelectedTenant(null);
  };
 
  const closeCreateUserModal = () => {
    setShowCreateUserModal(false);
    setNewUser({
      name: '',
      email: '',
      role: 'staff',
      password: '',
      tenant_id: null
    });
    setTenantSearch('');
    setSelectedTenant(null);
  };
 
  // -------------------------------
  // Render
  // -------------------------------
  return (
    <MainLayout>
      <div className="settings-page">
 
        <h1>Settings</h1>
 
        {!isAdmin() && (
          <div style={{
            padding: '16px',
            backgroundColor: 'var(--warning-bg, #fff3cd)',
            border: '1px solid var(--warning, #ffc107)',
            borderRadius: '8px',
            marginBottom: '20px',
            color: 'var(--warning-text, #856404)'
          }}>
            <strong>⚠️ Read-Only Access:</strong> Staff users can view settings but cannot make changes. Only admin users can modify settings.
          </div>
        )}
 
        {loading && <div>Loading...</div>}
        {error && <div className="error">Error: {error}</div>}
 
        {settings && (
          <div className="settings-sections" style={{
            opacity: !isAdmin() ? 0.7 : 1,
            pointerEvents: !isAdmin() ? 'none' : 'auto',
            userSelect: !isAdmin() ? 'none' : 'auto'
          }}>
 
            {/* ------------------------------------------------ */}
            {/* 1. EMAIL AUTOMATION                              */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Email Automation</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Email Server Type</label>
                  <select
                    value={settings.emailAutomation?.serverType ?? 'imap'}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        serverType: e.target.value
                      }
                    }))}
                  >
                    <option value="imap">IMAP</option>
                    <option value="smtp">SMTP</option>
                  </select>
                </div>
 
                <div className="form-group">
                  <label>Server Host</label>
                  <input
                    type="text"
                    value={settings.emailAutomation?.host ?? ''}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        host: e.target.value
                      }
                    }))}
                    placeholder="mail.example.com"
                  />
                </div>
 
                <div className="form-group">
                  <label>Server Port</label>
                  <input
                    type="number"
                    value={settings.emailAutomation?.port ?? 993}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        port: parseInt(e.target.value || '993', 10)
                      }
                    }))}
                    placeholder="993"
                  />
                </div>
 
                <div className="form-group">
                  <label>Mailbox (e.g. INBOX)</label>
                  <input
                    type="text"
                    value={settings.emailAutomation?.mailbox ?? 'INBOX'}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        mailbox: e.target.value
                      }
                    }))}
                    placeholder="INBOX"
                  />
                </div>
 
                <div className="form-group">
                  <label>Email Username</label>
                  <input
                    type="text"
                    value={settings.emailAutomation?.username ?? ''}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        username: e.target.value
                      }
                    }))}
                    placeholder="user@example.com"
                  />
                </div>
 
                <div className="form-group">
                  <label>Email Password</label>
                  <input
                    type="password"
                    value={settings.emailAutomation?.password ?? ''}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        password: e.target.value
                      }
                    }))}
                    placeholder="••••••••"
                  />
                </div>
 
                <div className="form-group">
                  <label>Connection Security</label>
                  <select
                    value={settings.emailAutomation?.security ?? 'ssl'}
                    onChange={e => setSettings(s => ({
                      ...s,
                      emailAutomation: {
                        ...s.emailAutomation,
                        security: e.target.value
                      }
                    }))}
                  >
                    <option value="ssl">SSL/TLS</option>
                    <option value="starttls">STARTTLS</option>
                    <option value="none">None</option>
                  </select>
                </div>
 
                <div style={{ fontSize: 12, color: '#888', marginTop: 8 }}>
                  Configure email server connection for ticket automation. Credentials are stored securely per tenant.
                </div>
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 2. COMPANY INFORMATION                           */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Company Information (for Invoices)</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Company ABN</label>
                  <input
                    id="company-abn"
                    name="company-abn"
                    type="text"
                    value={companySettings.abn}
                    onChange={(e) => setCompanySettings(s => ({
                      ...s,
                      abn: e.target.value
                    }))}
                    disabled={companySettingsLoading}
                    placeholder="12 345 678 901"
                  />
                  <small style={{ display: 'block', marginTop: '4px', color: '#666' }}>
                    Your Australian Business Number (appears on invoices)
                  </small>
                </div>
 
                <div className="form-group">
                  <label>Business Address</label>
                  <input
                    id="company-address"
                    name="company-address"
                    type="text"
                    value={companySettings.address}
                    onChange={(e) => setCompanySettings(s => ({
                      ...s,
                      address: e.target.value
                    }))}
                    disabled={companySettingsLoading}
                    placeholder="123 Business St, City, State, Postcode"
                  />
                </div>
 
                <div className="form-group">
                  <label>Business Phone</label>
                  <input
                    id="company-phone"
                    name="company-phone"
                    type="text"
                    value={companySettings.phone}
                    onChange={(e) => setCompanySettings(s => ({
                      ...s,
                      phone: e.target.value
                    }))}
                    disabled={companySettingsLoading}
                    placeholder="(02) 1234 5678"
                  />
                </div>
 
                <div className="form-group">
                  <label>Business Email</label>
                  <input
                    id="company-email"
                    name="company-email"
                    type="email"
                    value={companySettings.email}
                    onChange={(e) => setCompanySettings(s => ({
                      ...s,
                      email: e.target.value
                    }))}
                    disabled={companySettingsLoading}
                    placeholder="info@yourcompany.com.au"
                  />
                </div>
 
                <button
                  className="btn primary"
                  onClick={async () => {
                    try {
                      const token = localStorage.getItem('token');
                      const headers = await getTenantHeaders({
                        'Content-Type': 'application/json',
                        Authorization: `Bearer ${token}`
                      });
 
                      await Promise.all([
                        apiFetch('/settings/company_abn', {
                          method: 'PUT',
                          headers,
                          body: JSON.stringify({
                            setting_value: companySettings.abn,
                            description: 'Company ABN'
                          })
                        }),
 
                        apiFetch('/settings/company_address', {
                          method: 'PUT',
                          headers,
                          body: JSON.stringify({
                            setting_value: companySettings.address,
                            description: 'Company Address'
                          })
                        }),
 
                        apiFetch('/settings/company_phone', {
                          method: 'PUT',
                          headers,
                          body: JSON.stringify({
                            setting_value: companySettings.phone,
                            description: 'Company Phone'
                          })
                        }),
 
                        apiFetch('/settings/company_email', {
                          method: 'PUT',
                          headers,
                          body: JSON.stringify({
                            setting_value: companySettings.email,
                            description: 'Company Email'
                          })
                        })
                      ]);
 
                      alert('Company information updated successfully');
 
                    } catch (err) {
                      console.error('Failed to update company information:', err);
                      alert('Failed to update company information: ' + err.message);
                    }
                  }}
                >
                  Save Company Information
                </button>
 
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 3. TAX SETTINGS                                  */}
            {/* ------------------------------------------------ */}
            {/* 3. BILLING & INVOICING SETTINGS                 */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Billing & Invoicing</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Default Tax Rate (GST %)</label>
                  <input
                    id="company-tax-rate"
                    name="company-tax-rate"
                    type="number"
                    step="0.01"
                    value={taxRate}
                    onChange={(e) =>
                      setTaxRate(parseFloat(e.target.value) || 0)
                    }
                    disabled={taxRateLoading}
                  />
                  <small style={{
                    display: 'block',
                    marginTop: '4px',
                    color: '#666'
                  }}>
                    Australia GST is 10%. This rate will be applied to all new invoices.
                  </small>
                </div>
 
                <div className="form-group">
                  <label>Invoice Advance Days</label>
                  <input
                    id="invoice-advance-days"
                    name="invoice-advance-days"
                    type="number"
                    min="0"
                    max="90"
                    step="1"
                    value={invoiceAdvanceDays}
                    onChange={(e) =>
                      setInvoiceAdvanceDays(parseInt(e.target.value, 10) || 0)
                    }
                    disabled={invoiceAdvanceDaysLoading}
                  />
                  <small style={{
                    display: 'block',
                    marginTop: '4px',
                    color: '#666'
                  }}>
                    Generate invoices this many days before renewal date. Default is 14 days. Applies to all contracts with auto-invoicing enabled.
                  </small>
                </div>
 
                <button
                  className="btn primary"
                  onClick={async () => {
                    try {
                      const token = localStorage.getItem('token');
                      const headers = await getTenantHeaders({
                        'Content-Type': 'application/json',
                        Authorization: `Bearer ${token}`
                      });
 
                      await Promise.all([
                        apiFetch('/settings/default_tax_rate', {
                          method: 'PUT',
                          headers,
                          body: JSON.stringify({
                            setting_value: taxRate.toString(),
                            description: 'Default GST/Tax rate percentage'
                          })
                        }),
                        apiFetch('/settings/invoice_advance_days', {
                          method: 'PUT',
                          headers,
                          body: JSON.stringify({
                            setting_value: invoiceAdvanceDays.toString(),
                            description: 'Days before renewal to generate invoice'
                          })
                        })
                      ]);
 
                      alert('Billing settings updated successfully');
 
                    } catch (err) {
                      alert('Failed to update billing settings: ' + err.message);
                    }
                  }}
                >
                  Save Billing Settings
                </button>
 
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 4. GENERAL SETTINGS                              */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>General Settings</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Company Name</label>
                  <input
                    id="company-name"
                    name="company-name"
                    type="text"
                    value={settings.general.companyName}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        general: {
                          ...s.general,
                          companyName: e.target.value
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Timezone</label>
                  <input
                    id="company-timezone"
                    name="company-timezone"
                    type="text"
                    value={settings.general.timezone}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        general: {
                          ...s.general,
                          timezone: e.target.value
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Date Format</label>
                  <input
                    id="company-date-format"
                    name="company-date-format"
                    type="text"
                    value={settings.general.dateFormat}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        general: {
                          ...s.general,
                          dateFormat: e.target.value
                        }
                      }))
                    }
                  />
                </div>
 
                <button
                  className="btn primary"
                  onClick={async () => {
                    setSaving(true);
                    try {
                      const token = localStorage.getItem('token');
                      const headers = await getTenantHeaders({
                        'Content-Type': 'application/json',
                        Authorization: `Bearer ${token}`
                      });
 
                      const res = await apiFetch('/settings', {
                        method: 'PUT',
                        headers,
                        body: JSON.stringify(settings)
                      });
 
                      if (!res.ok) {
                        const txt = await res.text();
                        throw new Error(txt || 'Failed to save settings');
                      }
 
                      const saved = await res.json();
                      setSettings(saved);
                      try {
                        localStorage.setItem('app_settings', JSON.stringify(saved));
                      } catch { }
 
                      try {
                        applyThemeFromSettings(saved);
                      } catch { }
 
                      window.dispatchEvent(
                        new CustomEvent('settingsUpdated', { detail: saved })
                      );
 
                      await notifySuccess('Settings Saved', 'General settings have been saved successfully');
 
                    } catch (err) {
                      await notifyError('Save Failed', err.message || 'Failed to save settings');
                    } finally {
                      setSaving(false);
                    }
                  }}
                  disabled={saving}
                >
                  {saving ? 'Saving...' : 'Save General Settings'}
                </button>
 
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 5. WHITE LABEL BRANDING                          */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>White Label Branding</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Company Icon (for installer & dashboard)</label>
 
                  <input
                    type="file"
                    accept="image/png,image/x-icon"
                    ref={iconInputRef}
                    onChange={handleIconUpload}
                    disabled={iconUploading}
                  />
 
                  {iconPreview && (
                    <div style={{ marginTop: 12 }}>
                      <img
                        src={iconPreview}
                        alt="Company Icon"
                        style={{
                          width: 64,
                          height: 64,
                          borderRadius: 8,
                          boxShadow: '0 0 4px #ccc'
                        }}
                      />
                      <div
                        style={{
                          fontSize: 12,
                          color: '#888',
                          marginTop: 4
                        }}
                      >
                        Preview
                      </div>
                    </div>
                  )}
 
                  {iconUploading && <div>Uploading...</div>}
                  {iconError && <div className="error">{iconError}</div>}
 
                  <div
                    style={{
                      fontSize: 12,
                      color: '#888',
                      marginTop: 8
                    }}
                  >
                    This icon will be used for your installer and dashboard browser tab.
                  </div>
                </div>
 
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 6. WORDPRESS SETTINGS (Root Tenant Only)         */}
            {/* ------------------------------------------------ */}
            {isRootUser && (
              <section className="settings-section">
                <h2>WordPress Settings (Global)</h2>
                <div style={{ fontSize: '14px', color: '#666', marginBottom: '16px' }}>
                  These credentials will be used automatically when creating new WordPress sites.
                  Only visible to root tenant administrators.
                </div>
 
                <div className="settings-form">
                  <div className="form-group">
                    <label htmlFor="wp-db-password">Database Password *</label>
                    <input
                      id="wp-db-password"
                      type="password"
                      value={wordpressSettings.database_password}
                      onChange={(e) => setWordpressSettings(prev => ({
                        ...prev,
                        database_password: e.target.value
                      }))}
                      placeholder="Strong database password"
                      disabled={wordpressLoading}
                    />
                    <div style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
                      MySQL database password for all WordPress sites
                    </div>
                  </div>
 
                  <div className="form-group">
                    <label htmlFor="wp-spaces-key">DO Spaces Access Key *</label>
                    <input
                      id="wp-spaces-key"
                      type="text"
                      value={wordpressSettings.spaces_access_key}
                      onChange={(e) => setWordpressSettings(prev => ({
                        ...prev,
                        spaces_access_key: e.target.value
                      }))}
                      placeholder="DO00..."
                      disabled={wordpressLoading}
                    />
                    <div style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
                      DigitalOcean Spaces access key for media storage
                    </div>
                  </div>
 
                  <div className="form-group">
                    <label htmlFor="wp-spaces-secret">DO Spaces Secret Key *</label>
                    <input
                      id="wp-spaces-secret"
                      type="password"
                      value={wordpressSettings.spaces_secret_key}
                      onChange={(e) => setWordpressSettings(prev => ({
                        ...prev,
                        spaces_secret_key: e.target.value
                      }))}
                      placeholder="Secret key"
                      disabled={wordpressLoading}
                    />
                    <div style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
                      DigitalOcean Spaces secret key for media storage
                    </div>
                  </div>
 
                  {wordpressError && (
                    <div style={{ padding: '12px', background: '#fee', border: '1px solid #fcc', borderRadius: '4px', color: '#c33', marginBottom: '12px' }}>
                      {wordpressError}
                    </div>
                  )}
 
                  {wordpressSuccess && (
                    <div style={{ padding: '12px', background: '#efe', border: '1px solid #cfc', borderRadius: '4px', color: '#3c3', marginBottom: '12px' }}>
                      WordPress settings saved successfully!
                    </div>
                  )}
 
                  <button
                    className="btn primary"
                    onClick={saveWordPressSettings}
                    disabled={wordpressSaving || wordpressLoading}
                  >
                    {wordpressSaving ? 'Saving...' : 'Save WordPress Settings'}
                  </button>
                </div>
              </section>
            )}
 
            {/* ------------------------------------------------ */}
            {/* 7. PAX8 MICROSOFT 365 INTEGRATION                */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Pax8 Microsoft 365 Integration</h2>
              
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '16px' }}>
                Configure Pax8 API credentials to enable Microsoft 365 license purchasing and management.
                {pax8Configured && (
                  <span style={{ color: '#3c3', marginLeft: '8px', fontWeight: 'bold' }}>
                    ✓ Configured
                  </span>
                )}
              </div>
 
              <div className="settings-form">
                <div className="form-group">
                  <label htmlFor="pax8-client-id">Pax8 Client ID *</label>
                  <input
                    id="pax8-client-id"
                    type="text"
                    value={pax8Settings.client_id}
                    onChange={(e) => setPax8Settings(prev => ({
                      ...prev,
                      client_id: e.target.value
                    }))}
                    placeholder="Enter Pax8 OAuth client ID"
                    disabled={pax8Loading}
                  />
                  <div style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
                    OAuth 2.0 client ID from Pax8 partner portal
                  </div>
                </div>
 
                <div className="form-group">
                  <label htmlFor="pax8-client-secret">Pax8 Client Secret *</label>
                  <input
                    id="pax8-client-secret"
                    type="password"
                    value={pax8Settings.client_secret}
                    onChange={(e) => setPax8Settings(prev => ({
                      ...prev,
                      client_secret: e.target.value
                    }))}
                    placeholder="Enter Pax8 OAuth client secret"
                    disabled={pax8Loading}
                  />
                  <div style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
                    OAuth 2.0 client secret (will be encrypted when saved)
                  </div>
                </div>
 
                <div className="form-group">
                  <label htmlFor="pax8-company-id">Pax8 Company ID (Optional)</label>
                  <input
                    id="pax8-company-id"
                    type="text"
                    value={pax8Settings.pax8_company_id}
                    onChange={(e) => setPax8Settings(prev => ({
                      ...prev,
                      pax8_company_id: e.target.value
                    }))}
                    placeholder="Your Pax8 company ID"
                    disabled={pax8Loading}
                  />
                  <div style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
                    Your partner company ID in Pax8 (optional)
                  </div>
                </div>
 
                {pax8Error && (
                  <div style={{ padding: '12px', background: '#fee', border: '1px solid #fcc', borderRadius: '4px', color: '#c33', marginBottom: '12px' }}>
                    {pax8Error}
                  </div>
                )}
 
                {pax8Success && (
                  <div style={{ padding: '12px', background: '#efe', border: '1px solid #cfc', borderRadius: '4px', color: '#3c3', marginBottom: '12px' }}>
                    Pax8 configuration saved successfully!
                  </div>
                )}
 
                {pax8TestResult && (
                  <div style={{ 
                    padding: '12px', 
                    background: pax8TestResult.success ? '#efe' : '#fee', 
                    border: pax8TestResult.success ? '1px solid #cfc' : '1px solid #fcc', 
                    borderRadius: '4px', 
                    color: pax8TestResult.success ? '#3c3' : '#c33', 
                    marginBottom: '12px' 
                  }}>
                    {pax8TestResult.message}
                  </div>
                )}
 
                <div style={{ display: 'flex', gap: '12px' }}>
                  <button
                    className="btn primary"
                    onClick={savePax8Config}
                    disabled={pax8Saving || pax8Loading}
                  >
                    {pax8Saving ? 'Saving...' : 'Save Configuration'}
                  </button>
 
                  <button
                    className="btn"
                    onClick={testPax8Connection}
                    disabled={pax8Testing || !pax8Configured}
                    title={!pax8Configured ? 'Save configuration first' : 'Test connection to Pax8 API'}
                  >
                    {pax8Testing ? 'Testing...' : 'Test Connection'}
                  </button>
                </div>
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 8. NOTIFICATION SETTINGS                         */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Notification Settings</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Email Notifications</label>
                  <input
                    id="notifications-email"
                    name="notifications-email"
                    type="checkbox"
                    checked={settings.notifications.emailEnabled}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        notifications: {
                          ...s.notifications,
                          emailEnabled: e.target.checked
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Slack Notifications</label>
                  <input
                    id="notifications-slack"
                    name="notifications-slack"
                    type="checkbox"
                    checked={settings.notifications.slackEnabled}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        notifications: {
                          ...s.notifications,
                          slackEnabled: e.target.checked
                        }
                      }))
                    }
                  />
                </div>
              </div>
 
              <h3>Alert Thresholds</h3>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>CPU Warning Level (%)</label>
                  <input
                    id="alert-cpu"
                    name="alert-cpu"
                    type="number"
                    value={settings.notifications.alertThresholds.cpu}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        notifications: {
                          ...s.notifications,
                          alertThresholds: {
                            ...s.notifications.alertThresholds,
                            cpu: parseInt(e.target.value || 0, 10)
                          }
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Memory Warning Level (%)</label>
                  <input
                    id="alert-memory"
                    name="alert-memory"
                    type="number"
                    value={settings.notifications.alertThresholds.memory}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        notifications: {
                          ...s.notifications,
                          alertThresholds: {
                            ...s.notifications.alertThresholds,
                            memory: parseInt(e.target.value || 0, 10)
                          }
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Disk Warning Level (%)</label>
                  <input
                    id="alert-disk"
                    name="alert-disk"
                    type="number"
                    value={settings.notifications.alertThresholds.disk}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        notifications: {
                          ...s.notifications,
                          alertThresholds: {
                            ...s.notifications.alertThresholds,
                            disk: parseInt(e.target.value || 0, 10)
                          }
                        }
                      }))
                    }
                  />
                </div>
 
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 7. DISPLAY SETTINGS                              */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Display Settings</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Items per Page</label>
                  <input
                    id="display-items-per-page"
                    name="display-items-per-page"
                    type="number"
                    value={settings.display.itemsPerPage}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        display: {
                          ...s.display,
                          itemsPerPage: parseInt(e.target.value || 10, 10)
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Theme</label>
                  <select
                    value={settings.display.theme}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        display: {
                          ...s.display,
                          theme: e.target.value
                        }
                      }))
                    }
                  >
                    <option value="default">Current (Default)</option>
                    <option value="light">Light</option>
                    <option value="dark">Dark</option>
                    <option value="blue">Blue</option>
                  </select>
                </div>
 
                <div className="form-group">
                  <label>Auto switch theme</label>
                  <input
                    id="display-auto-theme"
                    name="display-auto-theme"
                    type="checkbox"
                    checked={settings.display.autoTheme}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        display: {
                          ...s.display,
                          autoTheme: e.target.checked
                        }
                      }))
                    }
                  />
                </div>
 
              </div>
 
              <div style={{ marginTop: 12 }}>
                <button
                  className="btn"
                  onClick={async () => {
                    setSaving(true);
                    try {
                      const token = localStorage.getItem('token');
                      const headers = await getTenantHeaders({
                        'Content-Type': 'application/json',
                        Authorization: `Bearer ${token}`
                      });
 
                      const res = await apiFetch('/settings', {
                        method: 'PUT',
                        headers,
                        body: JSON.stringify(settings)
                      });
 
                      if (!res.ok) {
                        const txt = await res.text();
                        throw new Error(txt || 'Failed to save settings');
                      }
 
                      const saved = await res.json();
                      setSettings(saved);
 
                      try {
                        localStorage.setItem('app_settings', JSON.stringify(saved));
                      } catch { }
 
                      try {
                        applyThemeFromSettings(saved);
                      } catch { }
 
                      window.dispatchEvent(
                        new CustomEvent('settingsUpdated', { detail: saved })
                      );
 
                      await notifySuccess('Settings Saved', 'All settings have been saved successfully');
 
                    } catch (err) {
                      await notifyError('Save Failed', err.message || 'Failed to save settings');
                    } finally {
                      setSaving(false);
                    }
                  }}
                >
                  {saving ? 'Saving...' : 'Save Settings'}
                </button>
              </div>
 
            </section>
 
 
            {/* ------------------------------------------------ */}
            {/* 8. AUTOMATION & ALERTS                            */}
            {/* (This appears last in your requested order)       */}
            {/* ------------------------------------------------ */}
            <section className="settings-section">
              <h2>Automation & Alerts</h2>
 
              <div className="settings-form">
 
                <div className="form-group">
                  <label>Enable Automation</label>
                  <input
                    id="automation-enabled"
                    name="automation-enabled"
                    type="checkbox"
                    checked={settings.automation?.enabled ?? true}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          enabled: e.target.checked
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Job Queue Priority</label>
                  <select
                    id="automation-queue-priority"
                    name="automation-queue-priority"
                    value={settings.automation?.queuePriority ?? 'normal'}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          queuePriority: e.target.value
                        }
                      }))
                    }
                  >
                    <option value="high">High</option>
                    <option value="normal">Normal</option>
                    <option value="low">Low</option>
                  </select>
                </div>
 
                <div className="form-group">
                  <label>Auto-Retry Failed Jobs</label>
                  <input
                    id="automation-auto-retry"
                    name="automation-auto-retry"
                    type="checkbox"
                    checked={settings.automation?.autoRetry ?? true}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          autoRetry: e.target.checked
                        }
                      }))
                    }
                  />
                </div>
 
                {/* Automation Alerts */}
                <div className="form-group">
                  <label>Alert: Agent Offline</label>
                  <input
                    id="alert-agent-offline"
                    name="alert-agent-offline"
                    type="checkbox"
                    checked={settings.automation?.alerts?.agentOffline ?? true}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          alerts: {
                            ...s.automation?.alerts,
                            agentOffline: e.target.checked
                          }
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Alert: Contract Expiry</label>
                  <input
                    id="alert-contract-expiry"
                    name="alert-contract-expiry"
                    type="checkbox"
                    checked={settings.automation?.alerts?.contractExpiry ?? true}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          alerts: {
                            ...s.automation?.alerts,
                            contractExpiry: e.target.checked
                          }
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Alert: Ticket Idle (hours)</label>
                  <input
                    id="alert-ticket-idle"
                    name="alert-ticket-idle"
                    type="number"
                    min={1}
                    value={settings.automation?.alerts?.ticketIdleHours ?? 24}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          alerts: {
                            ...s.automation?.alerts,
                            ticketIdleHours: parseInt(e.target.value || 24, 10)
                          }
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Alert: Auto-Escalate Ticket (hours)</label>
                  <input
                    id="alert-auto-escalate"
                    name="alert-auto-escalate"
                    type="number"
                    min={1}
                    value={settings.automation?.alerts?.autoEscalateHours ?? 24}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          alerts: {
                            ...s.automation?.alerts,
                            autoEscalateHours: parseInt(e.target.value || 24, 10)
                          }
                        }
                      }))
                    }
                  />
                </div>
 
                <div className="form-group">
                  <label>Enable AI Ticket Suggestions</label>
                  <input
                    id="automation-ai-suggestions"
                    name="automation-ai-suggestions"
                    type="checkbox"
                    checked={settings.automation?.aiSuggestions ?? true}
                    onChange={(e) =>
                      setSettings(s => ({
                        ...s,
                        automation: {
                          ...s.automation,
                          aiSuggestions: e.target.checked
                        }
                      }))
                    }
                  />
                </div>
 
                <div style={{ fontSize: 12, color: '#888', marginTop: 8 }}>
                  Configure automation, alert rules, and queued job behaviour for this tenant.
                </div>
 
              </div>
            </section>
 
            {/* ------------------------------------------------ */}
            {/* 9. USER MANAGEMENT                               */}
            {/* ------------------------------------------------ */}
            <section className="settings-section full-width">
              <h2>
                <span className="material-symbols-outlined">group</span>
                User Management
              </h2>
 
              <div className="settings-form">
 
                {/* Search users */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ flex: 1 }}>
                    <label style={{ display: 'block', marginBottom: 6 }}>Search users</label>
                    <input
                      className="user-search"
                      id="user-search"
                      name="user-search"
                      type="text"
                      placeholder="Search by name or email"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                </div>
 
                <div style={{ marginTop: 8 }}>
                  {usersLoading ? (
                    <div>Loading users...</div>
                  ) : userError ? (
                    <div className="error">{userError}</div>
                  ) : (
                    <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>{u.role}</td>
                            <td>
                              <div className="action-buttons">
                                {currentRole === 'admin' && (
                                  <>
                                    {/* Edit user */}
                                    <button
                                      className="btn primary"
                                      onClick={() => startEditUser(u)}
                                    >
                                      Edit
                                    </button>
 
                                    {/* Reset Password */}
                                    <button
                                      className="btn"
                                      onClick={async () => {
                                        if (!confirm('Send password reset link to this user?')) return;
                                        try {
                                          const token = localStorage.getItem('token');
                                          const res = await apiFetch(`/users/${u.user_id}/reset-password`, {
                                            method: 'POST',
                                            headers: { Authorization: `Bearer ${token}` }
                                          });
                                          if (!res.ok) throw new Error('Reset failed');
                                          alert('Password reset email triggered (if email service configured).');
                                        } catch (err) {
                                          alert('Reset failed: ' + (err.message || err));
                                        }
                                      }}
                                    >
                                      Reset Password
                                    </button>
 
                                    {/* Delete user */}
                                    <button
                                      className="btn"
                                      onClick={async () => {
                                        if (!confirm('Delete user?')) return;
                                        try {
                                          const token = localStorage.getItem('token');
                                          const res = await apiFetch(`/users/${u.user_id}`, {
                                            method: 'DELETE',
                                            headers: { Authorization: `Bearer ${token}` }
                                          });
                                          if (!res.ok) throw new Error('Delete failed');
                                          fetchUsers();
                                        } catch (err) {
                                          alert('Delete failed: ' + (err.message || err));
                                        }
                                      }}
                                    >
                                      Delete
                                    </button>
                                  </>
                                )}
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  )}
                </div>
 
                {/* ------------------------------------------------ */}
                {/* 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(prev => ({ ...prev, name: e.target.value }))}
                          placeholder="Full name"
                        />
                      </div>
 
                      <div className="form-group">
                        <label>Email</label>
                        <input
                          type="email"
                          value={editUserData.email}
                          onChange={(e) => setEditUserData(prev => ({ ...prev, email: e.target.value }))}
                          placeholder="user@example.com"
                        />
                      </div>
 
                      <div className="form-group">
                        <label>Role</label>
                        <select
                          value={editUserData.role}
                          onChange={(e) => setEditUserData(prev => ({ ...prev, role: e.target.value }))}
                        >
                          <option value="staff">Staff</option>
                          <option value="admin">Admin</option>
                          <option value="msp">MSP</option>
                        </select>
                      </div>
 
                      <div className="modal-actions">
                        <button
                          className="btn"
                          onClick={cancelEditUser}
                          disabled={updatingUser}
                        >
                          Cancel
                        </button>
                        <button
                          className="btn primary"
                          onClick={updateUser}
                          disabled={updatingUser}
                        >
                          {updatingUser ? 'Updating...' : 'Save Changes'}
                        </button>
                      </div>
                    </div>
                  </div>
                )}
 
                {/* ------------------------------------------------ */}
                {/* Create New User                                  */}
                {/* ------------------------------------------------ */}
                <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <h3>User Management</h3>
                  {currentRole === 'admin' && (
                    <button
                      className="btn primary"
                      onClick={openCreateUserModal}
                      style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
                    >
                      <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span>
                      Create New User
                    </button>
                  )}
                </div>
 
                {!currentRole || currentRole !== 'admin' ? (
                  <div style={{ color: '#666', fontStyle: 'italic' }}>
                    Only admin users can create or delete users.
                  </div>
                ) : null}
 
                {/* ------------------------------------------------ */}
                {/* Create User Modal                                */}
                {/* ------------------------------------------------ */}
                {showCreateUserModal && (
                  <div className="edit-user-modal">
                    <div className="edit-user-modal-content">
                      <h3>Create New User</h3>
 
                      {/* Tenant selector (Root only) */}
                      {isRootUser && (
                        <div className="form-group" style={{ position: 'relative' }}>
                          <label>Tenant</label>
 
                          <input
                            id="tenant-search"
                            name="tenant-search"
                            type="text"
                            placeholder="Search and select tenant..."
                            value={
                              selectedTenant
                                ? `${selectedTenant.name} (${selectedTenant.subdomain})`
                                : tenantSearch
                            }
                            onChange={(e) => {
                              setTenantSearch(e.target.value);
                              setSelectedTenant(null);
                              setNewUser(n => ({ ...n, tenant_id: null }));
                              setTenantDropdownOpen(true);
                            }}
                            onFocus={() => setTenantDropdownOpen(true)}
                            onBlur={() => setTimeout(() => setTenantDropdownOpen(false), 200)}
                          />
 
                          {/* Dropdown */}
                          {tenantDropdownOpen && filteredTenants.length > 0 && (
                            <div
                              style={{
                                position: 'absolute',
                                top: '100%',
                                left: 0,
                                right: 0,
                                maxHeight: '200px',
                                overflowY: 'auto',
                                backgroundColor: 'white',
                                border: '1px solid #ddd',
                                borderRadius: '4px',
                                marginTop: '4px',
                                zIndex: 1000,
                                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                              }}
                            >
                              {filteredTenants.map(t => (
                                <div
                                  key={t.tenant_id}
                                  style={{
                                    padding: '8px 12px',
                                    cursor: 'pointer',
                                    borderBottom: '1px solid #f0f0f0',
                                    backgroundColor:
                                      selectedTenant?.tenant_id === t.tenant_id ? '#f0f0f0' : 'white'
                                  }}
                                  onMouseEnter={(e) => (e.target.style.backgroundColor = '#f5f5f5')}
                                  onMouseLeave={(e) =>
                                  (e.target.style.backgroundColor =
                                    selectedTenant?.tenant_id === t.tenant_id ? '#f0f0f0' : 'white')
                                  }
                                  onClick={() => {
                                    setSelectedTenant(t);
                                    setNewUser(n => ({ ...n, tenant_id: t.tenant_id }));
                                    setTenantSearch('');
                                    setTenantDropdownOpen(false);
                                  }}
                                >
                                  <div style={{ fontWeight: 500 }}>{t.name}</div>
                                  <div style={{ fontSize: '0.85em', color: '#666' }}>{t.name}</div>
                                </div>
                              ))}
                            </div>
                          )}
 
                          <small style={{ display: 'block', marginTop: 4, color: '#666' }}>
                            As a root user, you can create users in any tenant.
                            Leave blank to use your current tenant.
                          </small>
                        </div>
                      )}
 
                      {/* New user fields */}
                      <div className="form-group">
                        <label>Name</label>
                        <input
                          id="new-user-name"
                          name="new-user-name"
                          type="text"
                          value={newUser.name}
                          onChange={(e) =>
                            setNewUser(n => ({ ...n, name: e.target.value }))
                          }
                          placeholder="Full name"
                        />
                      </div>
 
                      <div className="form-group">
                        <label>Email</label>
                        <input
                          id="new-user-email"
                          name="new-user-email"
                          type="email"
                          value={newUser.email}
                          onChange={(e) =>
                            setNewUser(n => ({ ...n, email: e.target.value }))
                          }
                          placeholder="user@example.com"
                        />
                      </div>
 
                      <div className="form-group">
                        <label>Role</label>
                        <select
                          value={newUser.role}
                          onChange={(e) =>
                            setNewUser(n => ({ ...n, role: e.target.value }))
                          }
                        >
                          <option value="staff">Staff</option>
                          <option value="admin">Admin</option>
                          <option value="msp">MSP</option>
                        </select>
                      </div>
 
                      <div className="form-group">
                        <label>Password</label>
                        <input
                          id="new-user-password"
                          name="new-user-password"
                          type="password"
                          value={newUser.password}
                          onChange={(e) =>
                            setNewUser(n => ({ ...n, password: e.target.value }))
                          }
                          placeholder="Enter password"
                        />
                      </div>
 
                      <div className="modal-actions">
                        <button
                          className="btn"
                          onClick={closeCreateUserModal}
                          disabled={creatingUser}
                        >
                          Cancel
                        </button>
                        <button
                          className="btn primary"
                          onClick={async () => {
                            if (!newUser.name || !newUser.email || !newUser.password) {
                              alert('Please fill name, email and password');
                              return;
                            }
                            setCreatingUser(true);
                            try {
                              const token = localStorage.getItem('token');
                              const res = await apiFetch('/users/register', {
                                method: 'POST',
                                headers: {
                                  'Content-Type': 'application/json',
                                  Authorization: `Bearer ${token}`
                                },
                                body: JSON.stringify(newUser)
                              });
 
                              if (!res.ok) {
                                const txt = await res.text();
                                throw new Error(txt || 'Create user failed');
                              }
 
                              const created = await res.json();
 
                              closeCreateUserModal();
                              fetchUsers();
                              alert('User created: ' + created.email);
 
                            } catch (err) {
                              alert('Create user failed: ' + (err.message || err));
                            } finally {
                              setCreatingUser(false);
                            }
                          }}
                          disabled={creatingUser}
                        >
                          {creatingUser ? 'Creating...' : 'Create User'}
                        </button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </section>
 
 
          </div>
        )}
      </div>
    </MainLayout>
  );
}
 
export default Settings;