18334721cb
Add complete end-to-end QuickBooks invoicing workflow for the invoicing page: - Add `jspdf` dependency for client-side PDF generation - Implement updated item status handling with fallback for new invoice statuses - Add server-side proxy API for secure QuickBooks customer lookup - Build utilities to combine QuickBooks invoices and picking slips into a single PDF - Add invoicing view models for row grouping, payload construction, and status checks - Add full test coverage for all new components, APIs, and utilities - Include feature design documentation and sample n8n workflow config
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import type { ItemStatus } from "@/lib/types";
|
|
import { getItemStatusVisual, withAlpha } from "@/lib/item-status-ui";
|
|
|
|
/**
|
|
* Inline colored pill for a single line item's lifecycle state.
|
|
*
|
|
* Used:
|
|
* - Next to each item inside an expanded /orders row
|
|
* - Inside the items table on /orders/[id]
|
|
* - Inside any list that renders line items (collection pool,
|
|
* process page, etc.)
|
|
*
|
|
* The hex is sourced from `ITEM_STATUS_VISUAL`, which intentionally
|
|
* collapses some lifecycle steps (e.g. `processed` and `po_generated`
|
|
* share the "Processing" amber) so the operator's eye can stay at
|
|
* the tab-level cognitive bucket instead of having to memorise every
|
|
* micro-state. Per-status detail is preserved in the raw `item_status`
|
|
* field for tooling that needs it.
|
|
*/
|
|
export function ItemStatusPill({ status }: { status: ItemStatus | string }) {
|
|
const { hex, label } = getItemStatusVisual(status);
|
|
return (
|
|
<span
|
|
className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5"
|
|
style={{
|
|
background: withAlpha(hex, 12),
|
|
color: hex,
|
|
boxShadow: `inset 0 0 0 1px ${withAlpha(hex, 28)}`,
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="h-1.5 w-1.5 shrink-0 rounded-full"
|
|
style={{ background: hex }}
|
|
/>
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|