matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust PO accordion styles, add in product and PO/receiving links

Browse Source
This commit is contained in:
Matt
2025-04-14 14:20:30 -04:00
parent 4ed734e5c0
commit d05d27494d
2 changed files with 62 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
inventory/src/components/purchase-orders/PurchaseOrderAccordion.tsx
View File

@@ -115,13 +115,13 @@ export default function PurchaseOrderAccordion({
} }
return ( return (
<div className="max-h-[350px] overflow-y-auto bg-gray-50 rounded-md p-2"> <div className="max-h-[600px] overflow-y-auto bg-gray-50 rounded-md p-2">
<Table className="w-full"> <Table className="w-full">
<TableHeader className="bg-white sticky top-0 z-10"> <TableHeader className="bg-white sticky top-0 z-10">
<TableRow> <TableRow>
<TableHead className="w-[100px]">SKU</TableHead> <TableHead className="w-[100px]">Item Number</TableHead>
<TableHead className="w-auto">Product</TableHead> <TableHead className="w-auto">Product</TableHead>
<TableHead className="w-[100px] text-right">UPC</TableHead> <TableHead className="w-[100px]">UPC</TableHead>
<TableHead className="w-[80px] text-right">Ordered</TableHead> <TableHead className="w-[80px] text-right">Ordered</TableHead>
<TableHead className="w-[80px] text-right">Received</TableHead> <TableHead className="w-[80px] text-right">Received</TableHead>
<TableHead className="w-[100px] text-right">Unit Cost</TableHead> <TableHead className="w-[100px] text-right">Unit Cost</TableHead>
@@ -151,9 +151,39 @@ export default function PurchaseOrderAccordion({
) : ( ) : (
items.map((item) => ( items.map((item) => (
<TableRow key={item.id} className="hover:bg-gray-100"> <TableRow key={item.id} className="hover:bg-gray-100">
<TableCell className="font-mono text-xs">{item.sku}</TableCell> <TableCell className="">
<TableCell className="font-medium">{item.product_name}</TableCell> <a
<TableCell className="text-right font-mono text-xs">{item.upc}</TableCell> href={`https://backend.acherryontop.com/product/${item.pid}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
onClick={(e) => e.stopPropagation()}
>
{item.sku}
</a>
</TableCell>
<TableCell className="font-medium">
<a
href={`https://backend.acherryontop.com/product/${item.pid}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
onClick={(e) => e.stopPropagation()}
>
{item.product_name}
</a>
</TableCell>
<TableCell className="">
<a
href={`https://backend.acherryontop.com/product/${item.pid}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
onClick={(e) => e.stopPropagation()}
>
{item.upc}
</a>
</TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
{item.ordered} {item.ordered}
</TableCell> </TableCell>

41
inventory/src/components/purchase-orders/PurchaseOrdersTable.tsx
View File

@@ -69,7 +69,7 @@ export default function PurchaseOrdersTable({
return ( return (
<Badge <Badge
variant="outline" variant="outline"
className="flex items-center justify-center border-green-500 text-green-700 bg-green-50 px-0 tracking-tight w-[85px]" className="flex items-center justify-center border-green-500 text-green-700 bg-green-50 px-0 text-xs w-[85px]"
> >
Received PO Received PO
</Badge> </Badge>
@@ -78,7 +78,7 @@ export default function PurchaseOrdersTable({
return ( return (
<Badge <Badge
variant="outline" variant="outline"
className="flex items-center justify-center border-blue-500 text-blue-700 bg-blue-50 px-0 tracking-tight w-[85px]" className="flex items-center justify-center border-blue-500 text-blue-700 bg-blue-50 px-0 text-xs w-[85px]"
> >
PO PO
</Badge> </Badge>
@@ -87,7 +87,7 @@ export default function PurchaseOrdersTable({
return ( return (
<Badge <Badge
variant="outline" variant="outline"
className="flex items-center justify-center border-amber-500 text-amber-700 bg-amber-50 px-0 tracking-tight w-[85px]" className="flex items-center justify-center border-amber-500 text-amber-700 bg-amber-50 px-0 text-xs w-[85px]"
> >
Receiving Receiving
</Badge> </Badge>
@@ -96,7 +96,7 @@ export default function PurchaseOrdersTable({
return ( return (
<Badge <Badge
variant="outline" variant="outline"
className="flex items-center justify-center border-gray-500 text-gray-700 bg-gray-50 px-0 tracking-tight w-[85px]" className="flex items-center justify-center border-gray-500 text-gray-700 bg-gray-50 px-0 text-xs w-[85px]"
> >
{recordType || "Unknown"} {recordType || "Unknown"}
</Badge> </Badge>
@@ -108,7 +108,7 @@ export default function PurchaseOrdersTable({
if (recordType === "receiving_only") { if (recordType === "receiving_only") {
return ( return (
<Badge <Badge
className="w-[100px] flex items-center justify-center px-0 tracking-tight" className="w-[115px] flex items-center text-xs justify-center px-1"
variant={getReceivingStatusVariant(status)} variant={getReceivingStatusVariant(status)}
> >
{getReceivingStatusLabel(status)} {getReceivingStatusLabel(status)}
@@ -118,7 +118,7 @@ export default function PurchaseOrdersTable({
return ( return (
<Badge <Badge
className="w-[100px] flex items-center justify-center px-0 tracking-tight" className="w-[115px] flex items-center text-xs justify-center px-1"
variant={getPurchaseOrderStatusVariant(status)} variant={getPurchaseOrderStatusVariant(status)}
> >
{getPurchaseOrderStatusLabel(status)} {getPurchaseOrderStatusLabel(status)}
@@ -342,7 +342,18 @@ export default function PurchaseOrdersTable({
<TableCell className="text-center"> <TableCell className="text-center">
{getRecordTypeIndicator(po.record_type)} {getRecordTypeIndicator(po.record_type)}
</TableCell> </TableCell>
<TableCell className="font-semibold text-center">{po.id}</TableCell> <TableCell className="font-semibold text-center">
<a
href={po.record_type === "po_only"
? `https://backend.acherryontop.com/po/edit/${po.id}`
: `https://backend.acherryontop.com/receiving/edit/${po.id}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
>
{po.id}
</a>
</TableCell>
<TableCell>{po.vendor_name}</TableCell> <TableCell>{po.vendor_name}</TableCell>
<TableCell> <TableCell>
{getStatusBadge(po.status, po.record_type)} {getStatusBadge(po.status, po.record_type)}
@@ -378,7 +389,7 @@ export default function PurchaseOrdersTable({
year: "numeric", year: "numeric",
} }
) )
: ""} : "-"}
</TableCell> </TableCell>
<TableCell className="text-center"> <TableCell className="text-center">
{po.receiving_date {po.receiving_date
@@ -390,18 +401,18 @@ export default function PurchaseOrdersTable({
year: "numeric", year: "numeric",
} }
) )
: ""} : "-"}
</TableCell> </TableCell>
<TableCell className="text-center"> <TableCell className="text-center">
{po.total_quantity.toLocaleString()} {po.record_type === "receiving_only" ? "-" : po.total_quantity.toLocaleString()}
</TableCell> </TableCell>
<TableCell className="text-center"> <TableCell className="text-center">
{po.total_received.toLocaleString()} {po.record_type === "po_only" ? "-" : po.total_received.toLocaleString()}
</TableCell> </TableCell>
<TableCell className="text-right" > <TableCell className="text-center" >
{po.fulfillment_rate === null {po.record_type === "po_with_receiving"
? "N/A" ? (po.fulfillment_rate === null ? "N/A" : formatPercent(po.fulfillment_rate))
: formatPercent(po.fulfillment_rate)} : "-"}
</TableCell> </TableCell>
</TableRow> </TableRow>
</PurchaseOrderAccordion> </PurchaseOrderAccordion>