Orders.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import { apiFetch } from '../lib/api';
 
export default function Orders() {
  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 [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [isMSP, setIsMSP] = useState(false);
  const [tenantsMap, setTenantsMap] = useState({});
 
  useEffect(() => {
    fetchData(tenantId);
  }, [tenantId]);
 
  async function fetchData(fetchTenantId = tenantId) {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      let url = '/products/reorder';
      if (tenantId) {
        url += `?tenant_id=${tenantId}`;
      }
      const res = await apiFetch(url, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to load reorder list');
      const data = await res.json();
      setItems(data.products || []);
      setError(null);
    } catch (err) {
      console.error(err);
      setError(err.message || 'Failed to load');
    } finally {
      setLoading(false);
    }
  }
 
  useEffect(() => {
    (async () => {
      try {
        const token = localStorage.getItem('token');
        if (!token) return;
  const res = await apiFetch('/tenants', { headers: { Authorization: `Bearer ${token}` } });
        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) { 
        // Silently fail - 403 is expected for non-MSP users
        setIsMSP(false); 
      }
    })();
  }, []);
 
  return (
    <MainLayout>
  
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>Orders</h2>
            <div className="header-actions">
              <button className="btn" onClick={fetchData}>
                <span className="material-symbols-outlined">refresh</span>
                Refresh
              </button>
              <button
                className="btn primary"
                onClick={() => {
                  if (!items || items.length === 0) return;
                  // For MVP, pass all items to PO form; future: group by supplier
                  const lines = items.map(p => ({
                    product_id: p.product_id,
                    sku: p.sku || p.upc || p.ean || '',
                    name: p.name,
                    description: p.name,
                    needed_qty: p.needed_qty,
                    price_retail: p.price_retail || p.price_ex_tax || 0
                  }));
                  navigate('/purchase-orders/new', { state: { lines } });
                }}
                disabled={!items || items.length === 0}
              >
                <span className="material-symbols-outlined">local_shipping</span>
                Create Purchase Order
              </button>
            </div>
          </div>
        </div>
        {error && <div className="error-message">{error}</div>}
        {loading ? (
          <div className="loading">Loading...</div>
        ) : (
          <div>
            {items.length === 0 ? (
              <div className="empty-state">
                <span className="material-symbols-outlined" style={{ fontSize: 48, color: '#888' }}>inventory_2</span>
                <div style={{ marginTop: 8 }}>All stocked products are above minimum levels.</div>
              </div>
            ) : (
              <table className="data-table">
                <thead>
                  <tr>
                    {isMSP && <th>Tenant</th>}
                    <th>Name</th>
                    <th>Supplier</th>
                    <th>Current Stock</th>
                    <th>Min Stock</th>
                    <th>Needed Qty</th>
                    <th>Price</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map(p => (
                    <tr key={p.product_id}>
                      {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.name}</td>
                      <td>{p.supplier || '-'}</td>
                      <td>{p.stock_quantity}</td>
                      <td>{p.min_stock}</td>
                      <td>
                        <span className="status-badge status-warning">{p.needed_qty}</span>
                      </td>
                      <td>${Number(p.price_retail || p.price_ex_tax || 0).toFixed(2)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}
      </div>
    </MainLayout>
  );
}