Customers.jsx

Go to the documentation of this file.

import { apiFetch } from '../lib/api';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import '../styles/data-table.css';
import './Tickets.css';
import './Customers.css';
import DownloadAgentModal from "../components/DownloadAgentModal";
import CustomerMergeModal from "../components/CustomerMergeModal";
import { isAdmin } from '../utils/auth';
import { notifySuccess, notifyError } from '../utils/notifications';
 
function Customers() {
  // selectedTenantId should come from props/context, not localStorage
  // Remove all localStorage usage for tenant context
  // If needed, get tenantId from JWT in MainLayout and pass as prop
  const token = localStorage.getItem('token');
  let tenantId = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      tenantId = decoded.tenant_id || decoded.tenantId || '';
    } catch { }
  }
  const [showDownloadModal, setShowDownloadModal] = useState(false);
  const [publicUrl, setPublicUrl] = useState('');
  const navigate = useNavigate();
  const [customers, setCustomers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [isMSP, setIsMSP] = useState(false);
  const [tenantsMap, setTenantsMap] = useState({});
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [search, setSearch] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [showDownload, setShowDownload] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const [showMergeModal, setShowMergeModal] = useState(false);
 
  // Remove localStorage for filters, just use defaults
  const [filters, setFilters] = useState({
    status: 'all',
    date_from: '',
    date_to: ''
  });
  const perPage = 10;
 
  // ...no localStorage for filters...
 
  const fetchCustomers = async (fetchTenantId = tenantId) => {
    setLoading(true);
    try {
      let url = '/customers';
      const params = new URLSearchParams();
      params.set('page', page);
      params.set('limit', perPage);
      if (search) params.set('search', search);
      if (filters.status && filters.status !== 'all') params.set('status', filters.status);
      if (filters.date_from) params.set('date_from', filters.date_from);
      if (filters.date_to) params.set('date_to', filters.date_to);
      const queryString = params.toString();
      if (queryString) url += `?${queryString}`;
 
      const headers = { 'Content-Type': 'application/json' };
      const res = await apiFetch(url, { method: 'GET', headers });
      if (!res.ok) throw new Error('Failed to load customers');
 
      const data = await res.json();
      setCustomers(data.customers);
      setTotalPages(Math.ceil(data.total / perPage));
    } catch (err) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchCustomers(tenantId);
  }, [page, search, filters, tenantId]);
 
  // Detect MSP and load tenants list to map tenant_id -> name
  useEffect(() => {
    (async () => {
      try {
        const res = await apiFetch('/tenants');
        if (res.ok) {
          setIsMSP(true);
          const data = await res.json();
          const map = {};
          (data.tenants || data || []).forEach(t => { if (t.tenant_id) map[t.tenant_id] = t.name; });
          setTenantsMap(map);
        } else {
          setIsMSP(false);
        }
      } catch (e) {
        setIsMSP(false);
        console.error('[Customers] tenants API error:', e);
      }
    })();
  }, []);
 
  const handleCreateClick = () => {
    navigate('/customers/new');
  };
 
  const handleViewClick = (customerId) => {
    navigate(`/customers/${customerId}`);
  };
 
  const handleEditClick = (customerId) => {
    navigate(`/customers/${customerId}/edit`);
  };
 
  const handleFilterChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setPage(1);
  };
 
  const handleClearFilters = () => {
    const defaultFilters = { status: 'all', date_from: '', date_to: '' };
    setFilters(defaultFilters);
    setSearch('');
    setPage(1);
  };
 
  const handleDeleteCustomer = async (customerId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/customers/${customerId}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) {
        const errorData = await res.json();
        const errorMsg = errorData.error || 'Failed to delete customer';
        await notifyError('Delete Failed', errorMsg);
        throw new Error(errorMsg);
      }
      setDeleteConfirm(null);
      await notifySuccess('Customer Deleted', 'Customer has been deleted successfully');
      fetchCustomers(tenantId);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleDeleteClick = (customer) => {
    setDeleteConfirm(customer);
  };
 
  const hasActiveFilters = () => {
    return filters.status !== 'all' || filters.date_from || filters.date_to || search;
  };
 
  return (
    <MainLayout>
 
 
 
      <div className="page-content">
        <div className="page-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h2 style={{ margin: 0 }}>Customers</h2>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn primary" onClick={handleCreateClick}>
              <span className="material-symbols-outlined">add</span>
              Create Customer
            </button>
            {isAdmin() && (
              <button className="btn" onClick={() => setShowMergeModal(true)}>
                <span className="material-symbols-outlined">merge</span>
                Merge Customers
              </button>
            )}
            <button
              className="btn primary"
              onClick={() => {
                setSelectedCustomer(null);
                setShowDownload(true);
              }}
              title="Download Agent Installer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
            >
              <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
                download
              </span>
              Download Agent
            </button>
          </div>
        </div>
        {/* ...existing code... */}
 
        {/* Search and Filter Bar */}
        <div className="toolbar">
          <div className="toolbar-left">
            <div className="search-box">
              <span className="material-symbols-outlined">search</span>
              <input
                placeholder="Search customers by name, email, phone, city..."
                value={search}
                onChange={e => { setSearch(e.target.value); setPage(1); }}
              />
            </div>
          </div>
          <div className="toolbar-right">
            <button
              className={`btn ${showFilters ? 'active' : ''}`}
              onClick={() => setShowFilters(!showFilters)}
              title="Toggle filters"
            >
              <span className="material-symbols-outlined">tune</span>
              Filters
              {hasActiveFilters() && (
                <span className="badge">{Object.values(filters).filter(v => v && v !== 'all').length + (search ? 1 : 0)}</span>
              )}
            </button>
            {hasActiveFilters() && (
              <button className="btn" onClick={handleClearFilters}>
                <span className="material-symbols-outlined">clear_all</span>
                Clear All
              </button>
            )}
          </div>
        </div>
 
        {/* Filter Panel */}
        {showFilters && (
          <div className="filter-panel">
            <h3>Filter Options</h3>
            <div className="filter-grid">
              <div className="filter-group">
                <label>Status</label>
                <select
                  value={filters.status}
                  onChange={e => handleFilterChange('status', e.target.value)}
                >
                  <option value="all">All Statuses</option>
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
 
              <div className="filter-group">
                <label>Date From</label>
                <input
                  type="date"
                  value={filters.date_from}
                  onChange={e => handleFilterChange('date_from', e.target.value)}
                />
              </div>
 
              <div className="filter-group">
                <label>Date To</label>
                <input
                  type="date"
                  value={filters.date_to}
                  onChange={e => handleFilterChange('date_to', e.target.value)}
                />
              </div>
            </div>
 
            {hasActiveFilters() && (
              <div className="active-filters">
                <div className="active-filters-header">
                  <span className="filter-label">Active Filters:</span>
                </div>
                <div className="filter-tags">
                  {filters.status !== 'all' && (
                    <span className="filter-tag">
                      Status: {filters.status}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('status', 'all'); }}>×</button>
                    </span>
                  )}
                  {filters.date_from && (
                    <span className="filter-tag">
                      From: {filters.date_from}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('date_from', ''); }}>×</button>
                    </span>
                  )}
                  {filters.date_to && (
                    <span className="filter-tag">
                      To: {filters.date_to}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('date_to', ''); }}>×</button>
                    </span>
                  )}
                  {search && (
                    <span className="filter-tag">
                      Search: "{search}"
                      <button onClick={(e) => { e.stopPropagation(); setSearch(''); }}>×</button>
                    </span>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
 
        {error && <div className="error-message">{error}</div>}
 
        {loading ? (
          <div className="loading">Loading customers...</div>
        ) : (
          <>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>ID</th>
                    {isMSP && <th>Tenant</th>}
                    <th>Company Name</th>
                    <th>Email</th>
                    <th>Contact Name</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {customers.map(customer => (
                    <tr key={customer.customer_id}>
                      <td>
                        <a
                          href="#"
                          onClick={e => { e.preventDefault(); handleViewClick(customer.customer_id); }}
                          style={{ color: 'var(--primary)', textDecoration: 'none', cursor: 'pointer', fontWeight: 500 }}
                          onMouseEnter={e => e.target.style.textDecoration = 'underline'}
                          onMouseLeave={e => e.target.style.textDecoration = 'none'}
                        >
                          View
                        </a>
                        <span style={{ marginLeft: 6, color: '#888', fontSize: '0.95em' }}>#{customer.customer_id}</span>
                      </td>
                      {isMSP && (
                        <td title={customer.tenant_id ? `Tenant #${customer.tenant_id}` : ''}>
                          {customer.tenant_id === 1 ? 'Root Tenant' : (customer.tenant_name || tenantsMap[customer.tenant_id] || (customer.tenant_id ? `#${customer.tenant_id}` : '-'))}
                        </td>
                      )}
                      <td>
                        <a
                          href="#"
                          onClick={(e) => { e.preventDefault(); handleViewClick(customer.customer_id); }}
                          style={{ color: 'var(--primary)', textDecoration: 'none', cursor: 'pointer' }}
                          onMouseEnter={(e) => e.target.style.textDecoration = 'underline'}
                          onMouseLeave={(e) => e.target.style.textDecoration = 'none'}
                        >
                          {customer.name}
                        </a>
                      </td>
                      <td>{customer.email}</td>
                      <td>{customer.contact_name}</td>
                      <td>
                        <span className={`status-badge ${customer.status}`}>
                          {customer.status}
                        </span>
                      </td>
                      <td>
                        <button
                          className="btn"
                          onClick={() => handleEditClick(customer.customer_id)}
                          style={{ marginRight: '8px' }}
                        >
                          <span className="material-symbols-outlined">edit</span>
                        </button>
                        <button
                          className="btn btn-sm primary"
                          onClick={() => {
                            setSelectedCustomer(customer);
                            setShowDownload(true);
                          }}
                          title="Download Agent Installer"
                          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginRight: '8px' }}
                        >
                          <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
                            download
                          </span>
                          Agent
                        </button>
                        {isAdmin() && (
                          <button
                            className="btn danger"
                            onClick={() => handleDeleteClick(customer)}
                            title="Delete Customer"
                          >
                            <span className="material-symbols-outlined">delete</span>
                          </button>
                        )}
 
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
 
            <div className="pagination">
              <button className="btn" disabled={page === 1} onClick={() => setPage(p => Math.max(1, p - 1))}>
                <span className="material-symbols-outlined">navigate_before</span>
              </button>
              <span>
                Page {page} of {totalPages}
              </span>
              <button className="btn" disabled={page === totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </>
        )}
 
        {showDownload && selectedCustomer && (
          <DownloadAgentModal
            onClose={() => setShowDownload(false)}
            customerId={selectedCustomer.customer_id}
            customerName={selectedCustomer.name}
          />
        )}
 
        {deleteConfirm && (
          <div className="modal-overlay" onClick={() => setDeleteConfirm(null)}>
            <div className="modal-content" onClick={e => e.stopPropagation()}>
              <div className="modal-header">
                <h3>Confirm Delete</h3>
                <button
                  className="btn"
                  onClick={() => setDeleteConfirm(null)}
                  style={{ padding: '4px', minWidth: 'auto' }}
                >
                  <span className="material-symbols-outlined">close</span>
                </button>
              </div>
              <div className="modal-body">
                <p>Are you sure you want to delete the customer:</p>
                <p><strong>"{deleteConfirm.name}"</strong></p>
                <p style={{ color: 'var(--error)', fontSize: '0.9em' }}>
                  This action cannot be undone. This will fail if the customer has existing tickets or invoices.
                </p>
              </div>
              <div className="modal-footer">
                <button
                  className="btn"
                  onClick={() => setDeleteConfirm(null)}
                  style={{ marginRight: '8px' }}
                >
                  Cancel
                </button>
                <button
                  className="btn danger"
                  onClick={() => handleDeleteCustomer(deleteConfirm.customer_id)}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        )}
 
        {/* Customer Merge Modal */}
        <CustomerMergeModal
          isOpen={showMergeModal}
          onClose={() => setShowMergeModal(false)}
          onMergeComplete={() => fetchCustomers(tenantId)}
          customers={customers}
        />
 
      </div>
    </MainLayout>
  );
}
 
export default Customers;