PurchaseOrderDetail.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { apiFetch } from '../lib/api';
 
export default function PurchaseOrderDetail() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [po, setPo] = useState(null);
  const [lines, setLines] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchPO();
  }, [id]);
 
  async function fetchPO() {
    setLoading(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();
      setPo(data.purchase_order);
      setLines(data.lines || []);
      setError(null);
    } catch (err) {
      setError(err.message || 'Failed to load');
    } finally {
      setLoading(false);
    }
  }
 
  const total = lines.reduce((sum, l) => sum + (l.qty_ordered || 0) * (Number(l.unit_price || 0)), 0);
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>Purchase Order {po?.po_number ? `#${po.po_number}` : `#${po?.purchase_order_id || ''}`}</h2>
            <div className="header-actions">
              <button className="btn" onClick={() => navigate(`/purchase-orders/${id}/edit`)}>
                <span className="material-symbols-outlined">edit</span>
                Edit
              </button>
            </div>
          </div>
        </div>
        {loading ? <div>Loading...</div> : error ? <div className="error-message">{error}</div> : (
          <div style={{ maxWidth: 1000 }}>
            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div><strong>Supplier:</strong> {po?.supplier || '-'}</div>
              <div><strong>Status:</strong> <span className={`status-badge status-${po?.status}`}>{po?.status}</span></div>
              <div><strong>Related Ticket:</strong> {po?.related_ticket_id || '-'}</div>
              <div><strong>Related Customer:</strong> {po?.related_customer_id || '-'}</div>
              <div style={{ gridColumn: '1 / span 2' }}>
                <strong>Bill To</strong>
                <pre style={{ whiteSpace: 'pre-wrap' }}>{po?.bill_to || '-'}</pre>
              </div>
              <div style={{ gridColumn: '1 / span 2' }}>
                <strong>Ship To</strong>
                <pre style={{ whiteSpace: 'pre-wrap' }}>{po?.ship_to || '-'}</pre>
              </div>
              <div style={{ gridColumn: '1 / span 2' }}>
                <strong>Internal Notes</strong>
                <pre style={{ whiteSpace: 'pre-wrap' }}>{po?.internal_notes || '-'}</pre>
              </div>
            </div>
 
            <h3 style={{ marginTop: 24 }}>Line Items</h3>
            <table className="data-table">
              <thead>
                <tr>
                  <th>SKU</th>
                  <th>Description</th>
                  <th>Qty</th>
                  <th>Unit Price</th>
                  <th>Line Total</th>
                </tr>
              </thead>
              <tbody>
                {lines.map(l => (
                  <tr key={l.po_line_id}>
                    <td>{l.sku || '-'}</td>
                    <td>{l.description || '-'}</td>
                    <td>{l.qty_ordered}</td>
                    <td>${Number(l.unit_price || 0).toFixed(2)}</td>
                    <td>${Number((l.qty_ordered || 0) * (l.unit_price || 0)).toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
 
            <div style={{ textAlign: 'right', marginTop: 12 }}>
              <strong>Total: ${total.toFixed(2)}</strong>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}