PurchaseOrders.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { apiFetch } from '../lib/api';
 
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
 
export default function PurchaseOrders() {
  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 navigate = useNavigate();
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [limit] = useState(25);
  const [status, setStatus] = useState('');
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [isRootTenant, setIsRootTenant] = useState(false);
  const [tenantMap, setTenantMap] = useState({});
  const [isAdmin, setIsAdmin] = useState(false);
 
  // Detect if user is admin
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      try {
        const payload = token.split('.')[1];
        const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        setIsAdmin(decoded.role === 'admin');
      } catch { }
    }
  }, []);
 
  // Detect if user is root tenant (MSP)
  useEffect(() => {
    const detectRootTenant = async () => {
      try {
        const token = localStorage.getItem('token');
        const res = await apiFetch('/tenants', {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (res.ok) {
          setIsRootTenant(true);
          const data = await res.json();
          const map = {};
          data.tenants?.forEach(t => {
            map[t.tenant_id] = t.name;
          });
          setTenantMap(map);
        }
      } catch (err) {
        // Silently fail - 403 is expected for non-MSP users
      }
    };
    detectRootTenant();
  }, []);
 
  useEffect(() => {
    fetchList(tenantId);
  }, [page, status, search, tenantId]);
  useEffect(() => {
    fetchList(tenantId);
  }, [page, status, search, tenantId]);
 
  async function fetchList(fetchTenantId = tenantId) {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      let url = '/purchase-orders';
      const params = new URLSearchParams();
      params.set('page', page);
      params.set('limit', limit);
      if (status) params.set('status', status);
      if (search) params.set('search', search);
      const queryString = params.toString();
      if (queryString) url += `?${queryString}`;
      const res = await apiFetch(url, { headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed to load');
      const data = await res.json();
      setItems(data.purchase_orders || []);
      setTotal(data.total || 0);
      setError(null);
    } catch (err) {
      setError(err.message || 'Failed to load');
    } finally {
      setLoading(false);
    }
  }
 
  async function handleDelete(po) {
    if (!confirm(`Are you sure you want to delete purchase order ${po.po_number || 'this item'}? This action cannot be undone.`)) {
      return;
    }
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/purchase-orders/${po.purchase_order_id}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
 
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || 'Failed to delete');
      }
 
      // Refresh the list
      fetchList(tenantId);
    } catch (err) {
      alert(`Delete failed: ${err.message}`);
    }
  }
 
  return (
    <MainLayout>
 
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>Purchase Orders</h2>
            <div className="header-actions">
              <div className="search-box">
                <span className="material-symbols-outlined">search</span>
                <input placeholder="Search by PO number or supplier" value={search} onChange={e => { setSearch(e.target.value); setPage(1); }} />
              </div>
              <select value={status} onChange={e => { setStatus(e.target.value); setPage(1); }}>
                <option value="">All Statuses</option>
                <option value="draft">Draft</option>
                <option value="submitted">Submitted</option>
                <option value="received">Received</option>
                <option value="cancelled">Cancelled</option>
              </select>
              <button className="btn primary" onClick={() => navigate('/purchase-orders/new')}>
                <span className="material-symbols-outlined">add</span>
                New Purchase Order
              </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>PO Number</th>
                  {isRootTenant && <th>Tenant</th>}
                  <th>Supplier</th>
                  <th>Status</th>
                  <th>Related Customer</th>
                  <th>Created</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {items.map(po => (
                  <tr key={po.purchase_order_id}>
                    <td>{po.po_number || '-'}</td>
                    {isRootTenant && <td>{po.tenant_id === 1 ? 'Root Tenant' : (po.tenant_name || tenantMap[po.tenant_id] || '-')}</td>}
                    <td>{po.supplier || '-'}</td>
                    <td><span className={`status-badge status-${po.status}`}>{po.status}</span></td>
                    <td>{po.related_customer_id || '-'}</td>
                    <td>{new Date(po.created_at).toLocaleString()}</td>
                    <td>
                      <button className="btn" onClick={() => navigate(`/purchase-orders/${po.purchase_order_id}`)}>
                        <span className="material-symbols-outlined">visibility</span>
                      </button>
                      <button className="btn" onClick={() => navigate(`/purchase-orders/${po.purchase_order_id}/edit`)}>
                        <span className="material-symbols-outlined">edit</span>
                      </button>
                      {isAdmin && (
                        <button
                          className="btn"
                          onClick={() => handleDelete(po)}
                          style={{ color: '#f44336' }}
                          title="Delete (Admin Only)"
                        >
                          <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) || 1}</span>
              <button className="btn" disabled={items.length < limit} onClick={() => setPage(p => p + 1)}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}