CustomerDetail.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 './Customers.css';
import DownloadAgentModal from "../components/DownloadAgentModal";
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError } from '../utils/notifications';
 
function CustomerDetail() {
  // Helper to decode JWT and extract tenantId
  function getTenantIdFromStorageOrJWT() {
    let tid = localStorage.getItem('selectedTenantId');
    if (tid) return tid.trim().replace(/['"]/g, '');
    const token = localStorage.getItem('token');
    if (token) {
      try {
        const payload = token.split('.')[1];
        const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        tid = decoded.tenantId || decoded.tenant_id || null;
        if (tid) {
          const sanitizedTid = String(tid).trim().replace(/['"]/g, '');
          localStorage.setItem('selectedTenantId', sanitizedTid);
          return sanitizedTid;
        }
        return tid;
      } catch (e) {
        return null;
      }
    }
    return null;
  }
  // Download Agent modal state for this customer
 
  const [showDownload, setShowDownload] = useState(false);
 
  const { id } = useParams();
  const navigate = useNavigate();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
 
  // Contact management state
  const [showContactForm, setShowContactForm] = useState(false);
  const [editingContact, setEditingContact] = useState(null);
  const [contactForm, setContactForm] = useState({
    name: '',
    role: '',
    email: '',
    phone: '',
    is_primary: false,
    notes: ''
  });
 
  // Portal user management state
  const [portalUsers, setPortalUsers] = useState([]);
  const [showPortalUserForm, setShowPortalUserForm] = useState(false);
  const [editingPortalUser, setEditingPortalUser] = useState(null);
  const [portalUserForm, setPortalUserForm] = useState({
    email: '',
    password: '',
    first_name: '',
    last_name: '',
    phone: '',
    is_primary: false
  });
  const [resetPasswordUserId, setResetPasswordUserId] = useState(null);
  const [newPassword, setNewPassword] = useState('');
 
  useEffect(() => {
    fetchDetail();
    fetchPortalUsers();
  }, [id]);
 
  async function fetchPortalUsers() {
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/customer-users?customer_id=${id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to load portal users');
      const json = await res.json();
      setPortalUsers(json.users || []);
    } catch (err) {
      console.error('Error fetching portal users:', err);
    }
  }
 
  async function handleSavePortalUser(e) {
    e.preventDefault();
    try {
      const token = localStorage.getItem('token');
      
      // Validation
      if (!portalUserForm.email) {
        await notifyError('Validation Error', 'Email is required');
        return;
      }
      
      if (!editingPortalUser && !portalUserForm.password) {
        await notifyError('Validation Error', 'Password is required for new users');
        return;
      }
 
      const body = {
        customer_id: parseInt(id),
        ...portalUserForm
      };
 
      const url = editingPortalUser
        ? `/customer-users/${editingPortalUser.customer_user_id}`
        : `/customer-users`;
      const method = editingPortalUser ? 'PUT' : 'POST';
 
      const res = await apiFetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(body)
      });
 
      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.error || 'Failed to save portal user');
      }
 
      // Reset form and refresh
      setShowPortalUserForm(false);
      setEditingPortalUser(null);
      setPortalUserForm({ email: '', password: '', first_name: '', last_name: '', phone: '', is_primary: false });
      await notifySuccess(
        editingPortalUser ? 'User Updated' : 'User Created',
        `Portal user has been ${editingPortalUser ? 'updated' : 'created'} successfully`
      );
      fetchPortalUsers();
    } catch (err) {
      console.error(err);
      await notifyError('Save Failed', err.message || 'Failed to save portal user');
    }
  }
 
  async function handleResetPassword() {
    if (!newPassword) {
      await notifyError('Validation Error', 'Please enter a new password');
      return;
    }
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/customer-users/${resetPasswordUserId}/reset-password`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ new_password: newPassword })
      });
 
      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.error || 'Failed to reset password');
      }
 
      await notifySuccess('Password Reset', 'Password has been reset successfully');
      setResetPasswordUserId(null);
      setNewPassword('');
    } catch (err) {
      console.error(err);
      await notifyError('Reset Failed', err.message || 'Failed to reset password');
    }
  }
 
  async function handleTogglePortalUserStatus(userId, currentStatus) {
    const newStatus = !currentStatus;
    const action = newStatus ? 'activate' : 'deactivate';
    
    if (!confirm(`Are you sure you want to ${action} this portal user?`)) return;
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/customer-users/${userId}/status`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ is_active: newStatus })
      });
 
      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.error || 'Failed to update status');
      }
 
      await notifySuccess('Status Updated', `User has been ${action}d successfully`);
      fetchPortalUsers();
    } catch (err) {
      console.error(err);
      await notifyError('Update Failed', err.message || 'Failed to update status');
    }
  }
 
  async function handleDeletePortalUser(userId) {
    if (!confirm('Permanently delete this portal user? This cannot be undone.')) return;
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/customer-users/${userId}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
 
      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.error || 'Failed to delete user');
      }
 
      await notifySuccess('User Deleted', 'Portal user has been deleted successfully');
      fetchPortalUsers();
    } catch (err) {
      console.error(err);
      await notifyError('Delete Failed', err.message || 'Failed to delete user');
    }
  }
 
  function startEditPortalUser(user) {
    setEditingPortalUser(user);
    setPortalUserForm({
      email: user.email || '',
      password: '', // Don't populate password for edit
      first_name: user.first_name || '',
      last_name: user.last_name || '',
      phone: user.phone || '',
      is_primary: user.is_primary || false
    });
    setShowPortalUserForm(true);
  }
 
  function cancelPortalUserForm() {
    setShowPortalUserForm(false);
    setEditingPortalUser(null);
    setPortalUserForm({ email: '', password: '', first_name: '', last_name: '', phone: '', is_primary: false });
  }
 
  useEffect(() => {
    fetchDetail();
  }, [id]);
 
  async function fetchDetail() {
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const url = `/customers/${id}`;
      const res = await apiFetch(url, { headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed to load customer');
      const json = await res.json();
      setData(json);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Load error');
    } finally {
      setLoading(false);
    }
  }
 
  async function handleSaveContact(e) {
    e.preventDefault();
    try {
      const token = localStorage.getItem('token');
      const url = editingContact
        ? `/customers/${id}/contacts/${editingContact.contact_id}`
        : `/customers/${id}/contacts`;
      const method = editingContact ? 'PUT' : 'POST';
      const res = await apiFetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(contactForm)
      });
      if (!res.ok) throw new Error('Failed to save contact');
      // Reset form and refresh data
      setShowContactForm(false);
      setEditingContact(null);
      setContactForm({ name: '', role: '', email: '', phone: '', is_primary: false, notes: '' });
      await notifySuccess(editingContact ? 'Contact Updated' : 'Contact Created', `Contact has been ${editingContact ? 'updated' : 'created'} successfully`);
      fetchDetail();
    } catch (err) {
      console.error(err);
      await notifyError('Save Failed', err.message || 'Failed to save contact');
    }
  }
 
  async function handleDeleteContact(contactId) {
    if (!confirm('Delete this contact?')) return;
    try {
      const token = localStorage.getItem('token');
      const url = `/customers/${id}/contacts/${contactId}`;
      const res = await apiFetch(url, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to delete contact');
      fetchDetail();
    } catch (err) {
      console.error(err);
      alert(err.message || 'Failed to delete contact');
    }
  }
 
  function startEditContact(contact) {
    setEditingContact(contact);
    setContactForm({
      name: contact.name || '',
      role: contact.role || '',
      email: contact.email || '',
      phone: contact.phone || '',
      is_primary: contact.is_primary || false,
      notes: contact.notes || ''
    });
    setShowContactForm(true);
  }
 
  function cancelContactForm() {
    setShowContactForm(false);
    setEditingContact(null);
    setContactForm({ name: '', role: '', email: '', phone: '', is_primary: false, notes: '' });
  }
 
  if (loading) return (
    <MainLayout>
      <div className="page-content"><div className="loading">Loading customer...</div></div>
    </MainLayout>
  );
 
  if (error) return (
    <MainLayout>
      <div className="page-content"><div className="error-message">{error}</div></div>
    </MainLayout>
  );
 
  if (!data) return null;
 
  const { customer, tickets = [], invoices = [], agents = [], contacts = [], contracts = [], domains = [], office365_subscriptions = [], hosting_apps = [] } = data;
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{customer.name}</h2>
          <div>
            <button className="btn" onClick={() => navigate(`/customers/${id}/edit`)}>
              <span className="material-symbols-outlined">edit</span> Edit Customer
            </button>
          </div>
        </div>
 
        <section className="dashboard-grid">
          {/* Customer Information Card */}
          <div className="dashboard-card">
            <h3>Customer Information</h3>
            <div style={{ display: 'grid', gap: '12px' }}>
              <div>
                <strong>Status:</strong>{' '}
                <span className={`status-badge status-${customer.status?.toLowerCase() || 'active'}`}>
                  {customer.status || 'Active'}
                </span>
              </div>
              {customer.abn && (
                <div><strong>ABN:</strong> {customer.abn}</div>
              )}
              <div><strong>Primary Contact:</strong> {customer.contact_name || 'N/A'}</div>
              <div><strong>Email:</strong> {customer.email || 'N/A'}</div>
              {customer.billing_email && (
                <div><strong>Billing Email:</strong> {customer.billing_email}</div>
              )}
              <div><strong>Phone:</strong> {customer.phone || 'N/A'}</div>
              <div style={{ marginTop: '8px' }}>
                <strong>Address:</strong>
                <div style={{ marginLeft: '8px', color: 'var(--text-muted)' }}>
                  {customer.address && <div>{customer.address}</div>}
                  {(customer.city || customer.state || customer.postal_code) && (
                    <div>{[customer.city, customer.state, customer.postal_code].filter(Boolean).join(', ')}</div>
                  )}
                  {customer.country && <div>{customer.country}</div>}
                </div>
              </div>
              {customer.notes && (
                <div style={{ marginTop: '8px' }}>
                  <strong>Notes:</strong>
                  <div style={{ marginLeft: '8px', color: 'var(--text-muted)', fontStyle: 'italic' }}>
                    {customer.notes}
                  </div>
                </div>
              )}
            </div>
          </div>
 
          {/* Contacts Card */}
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Contacts</h3>
              <button
                className="btn btn-sm"
                onClick={() => setShowContactForm(true)}
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span> Add Contact
              </button>
            </div>
 
            {showContactForm && (
              <form onSubmit={handleSaveContact} style={{
                marginBottom: '16px',
                padding: '12px',
                border: '1px solid var(--border)',
                borderRadius: '4px',
                backgroundColor: 'var(--bg-secondary)'
              }}>
                <h4 style={{ marginTop: 0 }}>{editingContact ? 'Edit Contact' : 'New Contact'}</h4>
                <div style={{ display: 'grid', gap: '8px' }}>
                  <input
                    type="text"
                    placeholder="Name *"
                    value={contactForm.name}
                    onChange={e => setContactForm({ ...contactForm, name: e.target.value })}
                    required
                    style={{ padding: '8px' }}
                  />
                  <input
                    type="text"
                    placeholder="Role (e.g., IT Manager)"
                    value={contactForm.role}
                    onChange={e => setContactForm({ ...contactForm, role: e.target.value })}
                    style={{ padding: '8px' }}
                  />
                  <input
                    type="email"
                    placeholder="Email"
                    value={contactForm.email}
                    onChange={e => setContactForm({ ...contactForm, email: e.target.value })}
                    style={{ padding: '8px' }}
                  />
                  <input
                    type="tel"
                    placeholder="Phone"
                    value={contactForm.phone}
                    onChange={e => setContactForm({ ...contactForm, phone: e.target.value })}
                    style={{ padding: '8px' }}
                  />
                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                      type="checkbox"
                      checked={contactForm.is_primary}
                      onChange={e => setContactForm({ ...contactForm, is_primary: e.target.checked })}
                    />
                    Set as Primary Contact
                  </label>
                  <textarea
                    placeholder="Notes"
                    value={contactForm.notes}
                    onChange={e => setContactForm({ ...contactForm, notes: e.target.value })}
                    rows="2"
                    style={{ padding: '8px' }}
                  />
                  <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
                    <button type="submit" className="btn btn-primary" style={{ flex: 1 }}>
                      {editingContact ? 'Update' : 'Create'}
                    </button>
                    <button type="button" className="btn" onClick={cancelContactForm} style={{ flex: 1 }}>
                      Cancel
                    </button>
                  </div>
                </div>
              </form>
            )}
 
            {contacts.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>No contacts added</div>
            ) : (
              <div style={{ display: 'grid', gap: '12px' }}>
                {contacts.map(contact => (
                  <div key={contact.contact_id} style={{
                    padding: '12px',
                    border: '1px solid var(--border)',
                    borderRadius: '4px',
                    backgroundColor: contact.is_primary ? 'var(--bg-hover)' : 'transparent'
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                          {contact.name}
                          {contact.is_primary && (
                            <span style={{
                              marginLeft: '8px',
                              fontSize: '0.7em',
                              padding: '2px 6px',
                              borderRadius: '3px',
                              backgroundColor: 'var(--primary)',
                              color: 'white'
                            }}>PRIMARY</span>
                          )}
                        </div>
                        {contact.role && (
                          <div style={{ fontSize: '0.9em', color: 'var(--text-muted)', marginBottom: '4px' }}>
                            {contact.role}
                          </div>
                        )}
                        {contact.email && (
                          <div style={{ fontSize: '0.9em' }}>📧 {contact.email}</div>
                        )}
                        {contact.phone && (
                          <div style={{ fontSize: '0.9em' }}>📞 {contact.phone}</div>
                        )}
                        {contact.notes && (
                          <div style={{ fontSize: '0.85em', color: 'var(--text-muted)', marginTop: '4px', fontStyle: 'italic' }}>
                            {contact.notes}
                          </div>
                        )}
                      </div>
                      <div style={{ display: 'flex', gap: '4px' }}>
                        <button
                          className="btn btn-sm"
                          onClick={() => startEditContact(contact)}
                          style={{ padding: '4px 8px' }}
                        >
                          <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>edit</span>
                        </button>
                        <button
                          className="btn btn-sm"
                          onClick={() => handleDeleteContact(contact.contact_id)}
                          style={{ padding: '4px 8px', color: 'var(--danger)' }}
                        >
                          <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>delete</span>
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
 
          {/* Portal Users Card */}
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Portal Users ({portalUsers.length})</h3>
              <button
                className="btn btn-sm"
                onClick={() => setShowPortalUserForm(true)}
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span> Add Portal User
              </button>
            </div>
 
            {showPortalUserForm && (
              <form onSubmit={handleSavePortalUser} style={{
                marginBottom: '16px',
                padding: '12px',
                border: '1px solid var(--border)',
                borderRadius: '4px',
                backgroundColor: 'var(--bg-secondary)'
              }}>
                <h4 style={{ margin: '0 0 12px 0' }}>{editingPortalUser ? 'Edit Portal User' : 'Create Portal User'}</h4>
                <div style={{ display: 'grid', gap: '8px' }}>
                  <input
                    type="email"
                    placeholder="Email (login username)"
                    value={portalUserForm.email}
                    onChange={e => setPortalUserForm({ ...portalUserForm, email: e.target.value })}
                    style={{ padding: '8px' }}
                    required
                  />
                  {!editingPortalUser && (
                    <input
                      type="password"
                      placeholder="Password (required for new users)"
                      value={portalUserForm.password}
                      onChange={e => setPortalUserForm({ ...portalUserForm, password: e.target.value })}
                      style={{ padding: '8px' }}
                      required
                    />
                  )}
                  <input
                    type="text"
                    placeholder="First Name"
                    value={portalUserForm.first_name}
                    onChange={e => setPortalUserForm({ ...portalUserForm, first_name: e.target.value })}
                    style={{ padding: '8px' }}
                  />
                  <input
                    type="text"
                    placeholder="Last Name"
                    value={portalUserForm.last_name}
                    onChange={e => setPortalUserForm({ ...portalUserForm, last_name: e.target.value })}
                    style={{ padding: '8px' }}
                  />
                  <input
                    type="tel"
                    placeholder="Phone"
                    value={portalUserForm.phone}
                    onChange={e => setPortalUserForm({ ...portalUserForm, phone: e.target.value })}
                    style={{ padding: '8px' }}
                  />
                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                      type="checkbox"
                      checked={portalUserForm.is_primary}
                      onChange={e => setPortalUserForm({ ...portalUserForm, is_primary: e.target.checked })}
                    />
                    Set as Primary Contact
                  </label>
                  {editingPortalUser && (
                    <div style={{ fontSize: '0.85em', color: 'var(--text-muted)', fontStyle: 'italic' }}>
                      To reset password, save changes and use the Reset Password button on the user card.
                    </div>
                  )}
                  <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
                    <button type="submit" className="btn btn-primary" style={{ flex: 1 }}>
                      {editingPortalUser ? 'Update' : 'Create'}
                    </button>
                    <button type="button" className="btn" onClick={cancelPortalUserForm} style={{ flex: 1 }}>
                      Cancel
                    </button>
                  </div>
                </div>
              </form>
            )}
 
            {portalUsers.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>
                No portal users created. Portal users can log in to view and manage their services, tickets, and invoices.
              </div>
            ) : (
              <div style={{ display: 'grid', gap: '12px' }}>
                {portalUsers.map(user => (
                  <div key={user.customer_user_id} style={{
                    padding: '12px',
                    border: '1px solid var(--border)',
                    borderRadius: '4px',
                    backgroundColor: user.is_primary ? 'var(--bg-hover)' : 'transparent',
                    opacity: user.is_active ? 1 : 0.6
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                          {user.first_name || user.last_name 
                            ? `${user.first_name || ''} ${user.last_name || ''}`.trim()
                            : user.email}
                          {user.is_primary && (
                            <span style={{
                              marginLeft: '8px',
                              fontSize: '0.7em',
                              padding: '2px 6px',
                              borderRadius: '3px',
                              backgroundColor: 'var(--primary)',
                              color: 'white'
                            }}>PRIMARY</span>
                          )}
                          {!user.is_active && (
                            <span style={{
                              marginLeft: '8px',
                              fontSize: '0.7em',
                              padding: '2px 6px',
                              borderRadius: '3px',
                              backgroundColor: 'var(--danger)',
                              color: 'white'
                            }}>DISABLED</span>
                          )}
                        </div>
                        <div style={{ fontSize: '0.9em' }}>📧 {user.email}</div>
                        {user.phone && (
                          <div style={{ fontSize: '0.9em' }}>📞 {user.phone}</div>
                        )}
                        {user.last_login && (
                          <div style={{ fontSize: '0.85em', color: 'var(--text-muted)', marginTop: '4px' }}>
                            Last login: {new Date(user.last_login).toLocaleString()}
                          </div>
                        )}
                        <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>
                          Created: {new Date(user.created_at).toLocaleDateString()}
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: '4px', flexDirection: 'column' }}>
                        <div style={{ display: 'flex', gap: '4px' }}>
                          <button
                            className="btn btn-sm"
                            onClick={() => startEditPortalUser(user)}
                            style={{ padding: '4px 8px' }}
                            title="Edit user"
                          >
                            <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>edit</span>
                          </button>
                          <button
                            className="btn btn-sm"
                            onClick={() => {
                              setResetPasswordUserId(user.customer_user_id);
                              setNewPassword('');
                            }}
                            style={{ padding: '4px 8px' }}
                            title="Reset password"
                          >
                            <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>lock_reset</span>
                          </button>
                        </div>
                        <div style={{ display: 'flex', gap: '4px' }}>
                          <button
                            className="btn btn-sm"
                            onClick={() => handleTogglePortalUserStatus(user.customer_user_id, user.is_active)}
                            style={{ 
                              padding: '4px 8px',
                              backgroundColor: user.is_active ? 'var(--warning)' : 'var(--success)',
                              color: 'white'
                            }}
                            title={user.is_active ? 'Disable user' : 'Enable user'}
                          >
                            <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>
                              {user.is_active ? 'block' : 'check_circle'}
                            </span>
                          </button>
                          <button
                            className="btn btn-sm"
                            onClick={() => handleDeletePortalUser(user.customer_user_id)}
                            style={{ padding: '4px 8px', color: 'var(--danger)' }}
                            title="Delete user permanently"
                          >
                            <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>delete</span>
                          </button>
                        </div>
                      </div>
                    </div>
                    
                    {/* Password Reset Form */}
                    {resetPasswordUserId === user.customer_user_id && (
                      <div style={{ 
                        marginTop: '12px', 
                        paddingTop: '12px', 
                        borderTop: '1px solid var(--border)' 
                      }}>
                        <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>Reset Password</div>
                        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                          <input
                            type="password"
                            placeholder="New password"
                            value={newPassword}
                            onChange={e => setNewPassword(e.target.value)}
                            style={{ flex: 1, padding: '6px' }}
                          />
                          <button
                            className="btn btn-sm btn-primary"
                            onClick={handleResetPassword}
                            style={{ padding: '6px 12px' }}
                          >
                            Reset
                          </button>
                          <button
                            className="btn btn-sm"
                            onClick={() => {
                              setResetPasswordUserId(null);
                              setNewPassword('');
                            }}
                            style={{ padding: '6px 12px' }}
                          >
                            Cancel
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
 
          {/* Contracts Card */}
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Contracts ({contracts.length})</h3>
              <button
                className="btn btn-sm"
                onClick={() => navigate('/contracts/new')}
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span> New
              </button>
            </div>
            {contracts.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>No contracts</div>
            ) : (
              <div style={{ display: 'grid', gap: '8px' }}>
                {contracts.map(contract => (
                  <div
                    key={contract.contract_id}
                    onClick={() => navigate(`/contracts/${contract.contract_id}`)}
                    style={{
                      padding: '10px',
                      border: '1px solid var(--border)',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      transition: 'all 0.2s'
                    }}
                    onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                    onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 'bold' }}>#{contract.contract_id} - {contract.contract_name || 'Untitled'}</div>
                        <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>
                          {contract.billing_interval} billing • ${parseFloat(contract.total_amount || 0).toFixed(2)} {contract.currency}
                        </div>
                      </div>
                      <span className={`status-badge status-${contract.status?.toLowerCase() || 'active'}`}>
                        {contract.status}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
 
          {/* Services Card */}
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Services</h3>
              <button
                className="btn btn-sm"
                onClick={() => navigate('/services')}
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>open_in_new</span> View All
              </button>
            </div>
            <div style={{ display: 'grid', gap: '8px' }}>
              <div
                onClick={() => navigate('/services')}
                style={{
                  padding: '10px',
                  border: '1px solid var(--border)',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center'
                }}
                onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--primary)', fontSize: '20px' }}>language</span>
                  <span>Domains</span>
                </div>
                <span className="status-badge">{domains.length}</span>
              </div>
              <div
                onClick={() => navigate('/services')}
                style={{
                  padding: '10px',
                  border: '1px solid var(--border)',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center'
                }}
                onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--primary)', fontSize: '20px' }}>cloud</span>
                  <span>Office 365 Licenses</span>
                </div>
                <span className="status-badge">{office365_subscriptions.length}</span>
              </div>
              <div
                onClick={() => navigate('/services')}
                style={{
                  padding: '10px',
                  border: '1px solid var(--border)',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center'
                }}
                onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span className="material-symbols-outlined" style={{ color: 'var(--primary)', fontSize: '20px' }}>dns</span>
                  <span>Web Hosting Apps</span>
                </div>
                <span className="status-badge">{hosting_apps.length}</span>
              </div>
            </div>
          </div>
 
          {/* Tickets Card */}
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Tickets ({tickets.length})</h3>
              <button
                className="btn btn-sm"
                onClick={() => navigate('/tickets/new')}
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span> New
              </button>
            </div>
            {tickets.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>No tickets</div>
            ) : (
              <div style={{ display: 'grid', gap: '8px' }}>
                {tickets.slice(0, 5).map(t => (
                  <div
                    key={t.ticket_id}
                    onClick={() => navigate(`/tickets/${t.ticket_id}`)}
                    style={{
                      padding: '10px',
                      border: '1px solid var(--border)',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      transition: 'all 0.2s'
                    }}
                    onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                    onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 'bold' }}>#{t.ticket_id} - {t.title}</div>
                        <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>
                          Priority: {t.priority} • Assigned: {t.assigned_to || 'Unassigned'}
                        </div>
                      </div>
                      <span className={`status-badge status-${t.status?.toLowerCase().replace(' ', '-') || 'open'}`}>
                        {t.status}
                      </span>
                    </div>
                  </div>
                ))}
                {tickets.length > 5 && (
                  <button
                    className="btn btn-sm"
                    onClick={() => navigate('/tickets')}
                    style={{ marginTop: '8px' }}
                  >
                    View All {tickets.length} Tickets
                  </button>
                )}
              </div>
            )}
          </div>
 
          {/* Invoices Card */}
          <div className="dashboard-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Invoices ({invoices.length})</h3>
              <button
                className="btn btn-sm"
                onClick={() => navigate('/invoices/new')}
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span> New
              </button>
            </div>
            {invoices.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>No invoices</div>
            ) : (
              <div style={{ display: 'grid', gap: '8px' }}>
                {invoices.slice(0, 5).map(inv => (
                  <div
                    key={inv.invoice_id}
                    onClick={() => navigate(`/invoices/${inv.invoice_id}`)}
                    style={{
                      padding: '10px',
                      border: '1px solid var(--border)',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      transition: 'all 0.2s'
                    }}
                    onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                    onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 'bold' }}>Invoice #{inv.invoice_id}</div>
                        <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>
                          ${parseFloat(inv.total || inv.amount || 0).toFixed(2)} {inv.currency}
                        </div>
                        <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>
                          Due: {inv.due_date ? new Date(inv.due_date).toLocaleDateString() : 'N/A'}
                        </div>
                      </div>
                      <span className={`status-badge status-${inv.status?.toLowerCase() || 'pending'}`}>
                        {inv.status}
                      </span>
                    </div>
                  </div>
                ))}
                {invoices.length > 5 && (
                  <button
                    className="btn btn-sm"
                    onClick={() => navigate('/invoices')}
                    style={{ marginTop: '8px' }}
                  >
                    View All {invoices.length} Invoices
                  </button>
                )}
              </div>
            )}
          </div>
 
          {/* Agents Card */}
          {/* Agents Card */}
          <div className="dashboard-card">
            <div className="dashboard-card-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h3 style={{ margin: 0 }}>Agents ({agents.length})</h3>
              <button
                className="btn btn-sm primary"
                onClick={() => setShowDownload(true)}
                title="Download Agent Installer"
                style={{ padding: '4px 12px', fontSize: '0.9em' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: 4 }}>
                  download
                </span>
                Download Agent
              </button>
            </div>
 
            {agents.length === 0 ? (
              <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>No agents registered</div>
            ) : (
              <div style={{ display: 'grid', gap: '8px' }}>
                {agents.map(a => (
                  <div
                    key={a.agent_id}
                    onClick={() => navigate(`/agents/${a.agent_id}`)}
                    style={{
                      padding: '10px',
                      border: '1px solid var(--border)',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      transition: 'all 0.2s'
                    }}
                    onMouseEnter={e => e.currentTarget.style.backgroundColor = 'var(--bg-hover)'}
                    onMouseLeave={e => e.currentTarget.style.backgroundColor = 'transparent'}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 'bold' }}>{a.name || a.hostname || 'Unknown'}</div>
                        <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>
                          {a.os_info || 'N/A'}
                        </div>
                        <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>
                          Last seen: {a.last_seen ? new Date(a.last_seen).toLocaleString() : 'Never'}
                        </div>
                      </div>
                      <span className={`status-badge status-${a.status?.toLowerCase() || 'offline'}`}>
                        {a.status}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            )}
 
            {/* Download Agent Modal (new unified version) */}
            {showDownload && (
              <DownloadAgentModal
                isOpen={showDownload}
                onClose={() => setShowDownload(false)}
                tenantId={getTenantIdFromStorageOrJWT() || customer?.tenant_id}
                customerId={customer?.id}
              />
            )}
          </div>
 
        </section>
      </div>
    </MainLayout>
  );
}
 
export default CustomerDetail;