silo/web/src/components/items/WhereUsedTab.tsx

import { useState, useEffect } from "react";
import { get } from "../../api/client";
import type { WhereUsedEntry } from "../../api/types";

interface WhereUsedTabProps {
  partNumber: string;
}

export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
  const [entries, setEntries] = useState<WhereUsedEntry[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    get<WhereUsedEntry[]>(
      `/api/items/${encodeURIComponent(partNumber)}/bom/where-used`,
    )
      .then(setEntries)
      .catch(() => setEntries([]))
      .finally(() => setLoading(false));
  }, [partNumber]);

  if (loading)
    return (
      <div style={{ color: "var(--ctp-subtext0)" }}>Loading where-used...</div>
    );

  if (entries.length === 0) {
    return (
      <div style={{ color: "var(--ctp-subtext0)", padding: "1rem" }}>
        Not used in any assemblies.
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        fontSize: "var(--font-table)",
      }}
    >
      <thead>
        <tr>
          <th style={thStyle}>Parent PN</th>
          <th style={thStyle}>Description</th>
          <th style={thStyle}>Relationship</th>
          <th style={thStyle}>QTY</th>
        </tr>
      </thead>
      <tbody>
        {entries.map((e, idx) => (
          <tr
            key={e.id}
            style={{
              backgroundColor:
                idx % 2 === 0 ? "var(--ctp-base)" : "var(--ctp-surface0)",
            }}
          >
            <td
              style={{
                ...tdStyle,
                fontFamily: "'JetBrains Mono', monospace",
                color: "var(--ctp-peach)",
              }}
            >
              {e.parent_part_number}
            </td>
            <td style={tdStyle}>{e.parent_description}</td>
            <td style={tdStyle}>{e.rel_type}</td>
            <td style={tdStyle}>{e.quantity ?? "—"}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

const thStyle: React.CSSProperties = {
  padding: "0.25rem 0.5rem",
  textAlign: "left",
  borderBottom: "1px solid var(--ctp-surface1)",
  color: "var(--ctp-subtext1)",
  fontWeight: 600,
  fontSize: "var(--font-sm)",
  textTransform: "uppercase",
  letterSpacing: "0.05em",
};

const tdStyle: React.CSSProperties = {
  padding: "0.25rem 0.5rem",
  borderBottom: "1px solid var(--ctp-surface0)",
  whiteSpace: "nowrap",
};