PurchaseOrderForm.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import './PurchaseOrderForm.css';
import { apiFetch } from '../lib/api';
 
export default function PurchaseOrderForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const location = useLocation();
  const prefillLines = location.state?.lines || [];
  const [selectedTenantId, setSelectedTenantId] = useState('');
 
  const [header, setHeader] = useState({
    po_number: '',
    supplier: '',
    bill_to: '',
    ship_to: '',
    internal_notes: '',
    status: 'draft',
    related_ticket_id: '',
    related_customer_id: ''
  });
  const [lines, setLines] = useState(prefillLines.length ? prefillLines.map(l => ({ sku: l.sku || '', description: l.description || l.name || '', qty_ordered: l.needed_qty || 1, unit_price: l.price_retail || 0, product_id: l.product_id })) : [{ sku: '', description: '', qty_ordered: 1, unit_price: 0 }]);
  const [loading, setLoading] = useState(false);
  const [loadingData, setLoadingData] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    if (id) fetchPO();
  }, [id, selectedTenantId]);
 
  const getTenantHeaders = async (baseHeaders = {}) => {
    const headers = { ...baseHeaders };
    if (selectedTenantId) {
      const token = localStorage.getItem('token');
  const tenantRes = await apiFetch('/tenants', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
      if (tenantRes.ok) {
        const data = await tenantRes.json();
        const tenants = Array.isArray(data) ? data : (data.tenants || []);
        const tenant = tenants.find(t => t.tenant_id === parseInt(selectedTenantId));
        if (tenant) {
          headers['X-Tenant-Subdomain'] = tenant.subdomain;
        }
      }
    }
    return headers;
  };
 
  async function fetchPO() {
    setLoadingData(true);
    try {
      const token = localStorage.getItem('token');
  const url = `/purchase-orders/${id}`;
  const res = await apiFetch(url, { headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed to load');
      const data = await res.json();
      // Auto-select the tenant if the PO belongs to a different tenant
      if (data.purchase_order.tenant_id && !selectedTenantId) {
        setSelectedTenantId(String(data.purchase_order.tenant_id));
      }
      setHeader({
        po_number: data.purchase_order.po_number || '',
        supplier: data.purchase_order.supplier || '',
        bill_to: data.purchase_order.bill_to || '',
        ship_to: data.purchase_order.ship_to || '',
        internal_notes: data.purchase_order.internal_notes || '',
        status: data.purchase_order.status || 'draft',
        related_ticket_id: data.purchase_order.related_ticket_id || '',
        related_customer_id: data.purchase_order.related_customer_id || ''
      });
      setLines((data.lines || []).map(l => ({
        po_line_id: l.po_line_id,
        product_id: l.product_id,
        sku: l.sku || '',
        description: l.description || '',
        qty_ordered: l.qty_ordered || 1,
        unit_price: l.unit_price || 0
      })));
      setError(null);
    } catch (err) {
      setError(err.message || 'Failed to load');
    } finally {
      setLoadingData(false);
    }
  }
 
  function updateLine(idx, patch) {
    setLines(prev => prev.map((l, i) => i === idx ? { ...l, ...patch } : l));
  }
 
  function addLine() {
    setLines(prev => [...prev, { sku: '', description: '', qty_ordered: 1, unit_price: 0 }]);
  }
 
  function removeLine(idx) {
    setLines(prev => prev.filter((_, i) => i !== idx));
  }
 
  async function save() {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ 
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}` 
      });
      const method = id ? 'PUT' : 'POST';
      const url = id ? `/purchase-orders/${id}` : '/purchase-orders';
 
      if (!id) {
        // create header + lines
        const res = await apiFetch(url, {
          method,
          headers,
          body: JSON.stringify({ ...header, lines })
        });
        if (!res.ok) throw new Error('Save failed');
      } else {
        // update header
        const res = await apiFetch(url, {
          method,
          headers,
          body: JSON.stringify(header)
        });
        if (!res.ok) throw new Error('Save failed');
      }
 
      navigate('/purchase-orders');
    } catch (err) {
      setError(err.message || 'Save error');
    } finally {
      setLoading(false);
    }
  }
 
  const calculateTotal = () => {
    return lines.reduce((sum, line) => sum + ((line.qty_ordered || 0) * (line.unit_price || 0)), 0);
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{id ? 'Edit Purchase Order' : 'New Purchase Order'}</h2>
          <div className="header-actions">
            <button className="btn btn-secondary" onClick={() => navigate('/purchase-orders')}>
              <span className="material-symbols-outlined">arrow_back</span>
              Back
            </button>
          </div>
        </div>
 
        {error && <div className="alert alert-error">{error}</div>}
 
        {loadingData ? (
          <div className="loading-state">
            <span className="material-symbols-outlined spinning">progress_activity</span>
            <p>Loading purchase order...</p>
          </div>
        ) : (
          <div className="po-form-container">
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">receipt_long</span>
                  Purchase Order Information
                </h3>
              </div>
              <div className="card-body">
                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="po_number">PO Number</label>
                    <input
                      id="po_number"
                      type="text"
                      value={header.po_number}
                      onChange={e => setHeader(h => ({ ...h, po_number: e.target.value }))}
                      placeholder="Auto-generated or manual"
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="supplier">Supplier *</label>
                    <input
                      id="supplier"
                      type="text"
                      value={header.supplier}
                      onChange={e => setHeader(h => ({ ...h, supplier: e.target.value }))}
                      placeholder="Supplier name"
                      required
                    />
                  </div>
                </div>
 
                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="status">Status</label>
                    <select
                      id="status"
                      value={header.status}
                      onChange={e => setHeader(h => ({ ...h, status: e.target.value }))}
                    >
                      <option value="draft">Draft</option>
                      <option value="submitted">Submitted</option>
                      <option value="received">Received</option>
                      <option value="cancelled">Cancelled</option>
                    </select>
                  </div>
                  <div className="form-group">
                    <label htmlFor="related_ticket_id">Related Ticket</label>
                    <input
                      id="related_ticket_id"
                      type="number"
                      value={header.related_ticket_id}
                      onChange={e => setHeader(h => ({ ...h, related_ticket_id: e.target.value }))}
                      placeholder="Ticket ID (optional)"
                    />
                  </div>
                </div>
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">location_on</span>
                  Addresses
                </h3>
              </div>
              <div className="card-body">
                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="bill_to">Bill To Address</label>
                    <textarea
                      id="bill_to"
                      value={header.bill_to}
                      onChange={e => setHeader(h => ({ ...h, bill_to: e.target.value }))}
                      placeholder="Company Name&#10;Street Address&#10;City, State ZIP"
                      rows="4"
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="ship_to">Ship To Address</label>
                    <textarea
                      id="ship_to"
                      value={header.ship_to}
                      onChange={e => setHeader(h => ({ ...h, ship_to: e.target.value }))}
                      placeholder="Warehouse/Location&#10;Street Address&#10;City, State ZIP"
                      rows="4"
                    />
                  </div>
                </div>
 
                <div className="form-group">
                  <label htmlFor="related_customer_id">Related Customer (for dropship)</label>
                  <input
                    id="related_customer_id"
                    type="number"
                    value={header.related_customer_id}
                    onChange={e => setHeader(h => ({ ...h, related_customer_id: e.target.value }))}
                    placeholder="Customer ID (optional)"
                  />
                </div>
 
                <div className="form-group">
                  <label htmlFor="internal_notes">Internal Notes</label>
                  <textarea
                    id="internal_notes"
                    value={header.internal_notes}
                    onChange={e => setHeader(h => ({ ...h, internal_notes: e.target.value }))}
                    placeholder="Notes for internal staff only"
                    rows="3"
                  />
                </div>
              </div>
            </div>
 
            <div className="form-card">
              <div className="card-header">
                <h3>
                  <span className="material-symbols-outlined">shopping_cart</span>
                  Line Items
                </h3>
                <button className="btn btn-sm" onClick={addLine} type="button">
                  <span className="material-symbols-outlined">add</span>
                  Add Line
                </button>
              </div>
              <div className="card-body">
                <div className="line-items-table">
                  <table className="data-table">
                    <thead>
                      <tr>
                        <th>SKU</th>
                        <th>Description</th>
                        <th>Qty</th>
                        <th>Unit Price</th>
                        <th>Total</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      {lines.map((l, idx) => (
                        <tr key={idx}>
                          <td>
                            <input
                              type="text"
                              value={l.sku}
                              onChange={e => updateLine(idx, { sku: e.target.value })}
                              placeholder="SKU"
                            />
                          </td>
                          <td>
                            <input
                              type="text"
                              value={l.description}
                              onChange={e => updateLine(idx, { description: e.target.value })}
                              placeholder="Item description"
                            />
                          </td>
                          <td>
                            <input
                              type="number"
                              min={1}
                              value={l.qty_ordered}
                              onChange={e => updateLine(idx, { qty_ordered: parseInt(e.target.value || 0, 10) })}
                            />
                          </td>
                          <td>
                            <input
                              type="number"
                              step="0.01"
                              value={l.unit_price}
                              onChange={e => updateLine(idx, { unit_price: parseFloat(e.target.value || 0) })}
                              placeholder="0.00"
                            />
                          </td>
                          <td className="line-total">
                            ${Number((l.qty_ordered || 0) * (l.unit_price || 0)).toFixed(2)}
                          </td>
                          <td>
                            <button
                              className="btn btn-icon btn-danger"
                              onClick={() => removeLine(idx)}
                              type="button"
                              title="Remove line"
                            >
                              <span className="material-symbols-outlined">delete</span>
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                    <tfoot>
                      <tr className="total-row">
                        <td colSpan="4" className="text-right"><strong>Total:</strong></td>
                        <td className="total-amount">${calculateTotal().toFixed(2)}</td>
                        <td></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
 
            <div className="form-actions">
              <button className="btn btn-primary" onClick={save} disabled={loading || !header.supplier}>
                {loading ? (
                  <>
                    <span className="material-symbols-outlined spinning">progress_activity</span>
                    Saving...
                  </>
                ) : (
                  <>
                    <span className="material-symbols-outlined">save</span>
                    {id ? 'Update Purchase Order' : 'Create Purchase Order'}
                  </>
                )}
              </button>
              <button className="btn btn-secondary" onClick={() => navigate('/purchase-orders')} disabled={loading}>
                Cancel
              </button>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}