Products.jsx

Go to the documentation of this file.

// import removed: TenantSelector
import { useState, useEffect } from 'react';
import MainLayout from '../components/Layout/MainLayout';
import { useNavigate } from 'react-router-dom';
import { apiFetch } from '../lib/api';
 
export default function Products() {
  const navigate = useNavigate();
  const [products, setProducts] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [limit] = useState(25);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState('');
  const [isMSP, setIsMSP] = useState(false);
  const [isRootAdmin, setIsRootAdmin] = useState(false);
  const [tenantsMap, setTenantsMap] = useState({});
  const token = localStorage.getItem('token');
  let tenantId = '';
  let subdomain = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      tenantId = decoded.tenant_id || decoded.tenantId || '';
      subdomain = decoded.subdomain || '';
    } catch { }
  }
 
  useEffect(() => {
    fetchProducts();
  }, [page, search, tenantId]);
 
  // Removed selectedTenantId effect
 
  // Detect MSP and load tenants for mapping, also check if root admin
  useEffect(() => {
    (async () => {
      try {
        const res = await apiFetch('/tenants', { method: 'GET', credentials: 'include' });
        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);
 
          // Check if user is root admin (subdomain = 'admin' or is_msp = true)
          if (token) {
            try {
              const payload = token.split('.')[1];
              const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
              const isRoot = decoded.subdomain === 'admin' || decoded.is_msp === true;
              setIsRootAdmin(isRoot);
            } catch { }
          }
        } else {
          setIsMSP(false);
          setIsRootAdmin(false);
        }
      } catch (e) {
        setIsMSP(false);
        setIsRootAdmin(false);
      }
    })();
  }, []);
 
  const fetchProducts = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set('page', page);
      params.set('limit', limit);
      if (search) params.set('search', search);
      const queryString = params.toString();
      const endpoint = queryString ? `/products?${queryString}` : '/products';
      console.log('[Products] Fetching:', endpoint);
      const res = await apiFetch(endpoint, { method: 'GET', credentials: 'include' });
      console.log('[Products] Response status:', res.status);
      if (!res.ok) {
        const text = await res.text();
        console.error('[Products] Fetch failed:', text);
        throw new Error(text || 'Fetch failed');
      }
      const data = await res.json();
      setProducts(data.products || []);
      setTotal(data.total || 0);
      setError(null);
    } catch (err) {
      console.error('[Products] Error:', err);
      setError('Failed to load products: ' + (err.message || err));
    } finally {
      setLoading(false);
    }
  };
 
  const handleDelete = async (productId, productName) => {
    if (!confirm(`Are you sure you want to delete "${productName}"? This action cannot be undone.`)) {
      return;
    }
 
    try {
      const res = await apiFetch(`/products/${productId}`, {
        method: 'DELETE',
        credentials: 'include'
      });
 
      if (res.status === 204) {
        // Success - refresh the products list
        fetchProducts();
      } else {
        // Try to parse JSON error message
        try {
          const errorData = await res.json();
          setError(errorData.message || errorData.error || 'Failed to delete product');
        } catch {
          const errorText = await res.text();
          setError(errorText || 'Failed to delete product');
        }
      }
    } catch (err) {
      console.error('[Products] Delete error:', err);
      setError('Failed to delete product: ' + (err.message || err));
    }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>Products</h2>
            <div className="header-actions">
              <div className="search-box">
                <span className="material-symbols-outlined">search</span>
                <input
                  placeholder="Search by name, supplier, or product codes"
                  value={search}
                  onChange={e => { setSearch(e.target.value); setPage(1); }}
                />
              </div>
              <button className="btn primary" onClick={() => navigate('/products/new')}>
                <span className="material-symbols-outlined">add</span>
                New Product
              </button>
            </div>
          </div>
        </div>
 
        {error && <div className="error-message">{error}</div>}
        {loading ? <div className="loading">Loading...</div> : (
          <div>
            <table className="data-table">
              <thead>
                <tr>
                  <th>Name</th>
                  {isMSP && <th>Tenant</th>}
                  <th>Supplier</th>
                  <th>Product Codes</th>
                  <th>Price</th>
                  <th>Stock</th>
                  <th>Type</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {products.map(p => (
                  <tr key={p.product_id}>
                    <td>{p.name}</td>
                    {isMSP && (
                      <td title={p.tenant_id ? `Tenant #${p.tenant_id}` : ''}>
                        {p.tenant_id === 1 ? 'Root Tenant' : (p.tenant_name || tenantsMap[p.tenant_id] || (p.tenant_id ? `#${p.tenant_id}` : '-'))}
                      </td>
                    )}
                    <td>{p.supplier}</td>
                    <td>
                      {p.upc && <div>UPC: {p.upc}</div>}
                      {p.ean && <div>EAN: {p.ean}</div>}
                      {p.supplier_code && <div>Supplier: {p.supplier_code}</div>}
                    </td>
                    <td>
                      ${Number(p.price_retail || p.price_ex_tax || 0).toFixed(2)}
                    </td>
                    <td>{p.is_stock ? `${p.stock_quantity}` : '-'}</td>
                    <td>
                      <span className={`status-badge status-${p.is_service ? 'pending' : 'active'}`}>
                        {p.is_service ? 'Service' : 'Product'}
                      </span>
                    </td>
                    <td>
                      <button
                        className="btn"
                        onClick={() => navigate(`/products/${p.product_id}`)}
                      >
                        <span className="material-symbols-outlined">edit</span>
                      </button>
                      {isRootAdmin && (
                        <button
                          className="btn btn-danger"
                          onClick={() => handleDelete(p.product_id, p.name)}
                          style={{ marginLeft: '8px' }}
                          title="Delete product"
                        >
                          <span className="material-symbols-outlined">delete</span>
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
 
            <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 {Math.ceil(total / limit)}</span>
              <button className="btn" disabled={products.length < limit} onClick={() => setPage(p => p + 1)}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}