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 (
<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">
<TableHeader className="bg-white sticky top-0 z-10">
<TableRow>
<TableHead className="w-[100px]">SKU</TableHead>
<TableHead className="w-[100px]">Item Number</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">Received</TableHead>
<TableHead className="w-[100px] text-right">Unit Cost</TableHead>
@@ -151,9 +151,39 @@ export default function PurchaseOrderAccordion({
) : (
items.map((item) => (
<TableRow key={item.id} className="hover:bg-gray-100">
<TableCell className="font-mono text-xs">{item.sku}</TableCell>
<TableCell className="font-medium">{item.product_name}</TableCell>
<TableCell className="text-right font-mono text-xs">{item.upc}</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.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">
{item.ordered}
</TableCell>

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

@@ -69,7 +69,7 @@ export default function PurchaseOrdersTable({
return (
<Badge
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
</Badge>
@@ -78,7 +78,7 @@ export default function PurchaseOrdersTable({
return (
<Badge
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
</Badge>
@@ -87,7 +87,7 @@ export default function PurchaseOrdersTable({
return (
<Badge
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
</Badge>
@@ -96,7 +96,7 @@ export default function PurchaseOrdersTable({
return (
<Badge
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"}
</Badge>
@@ -108,7 +108,7 @@ export default function PurchaseOrdersTable({
if (recordType === "receiving_only") {
return (
<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)}
>
{getReceivingStatusLabel(status)}
@@ -118,7 +118,7 @@ export default function PurchaseOrdersTable({
return (
<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)}
>
{getPurchaseOrderStatusLabel(status)}
@@ -342,7 +342,18 @@ export default function PurchaseOrdersTable({
<TableCell className="text-center">
{getRecordTypeIndicator(po.record_type)}
</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>
{getStatusBadge(po.status, po.record_type)}
@@ -378,7 +389,7 @@ export default function PurchaseOrdersTable({
year: "numeric",
}
)
: ""}
: "-"}
</TableCell>
<TableCell className="text-center">
{po.receiving_date
@@ -390,18 +401,18 @@ export default function PurchaseOrdersTable({
year: "numeric",
}
)
: ""}
: "-"}
</TableCell>
<TableCell className="text-center">
{po.total_quantity.toLocaleString()}
{po.record_type === "receiving_only" ? "-" : po.total_quantity.toLocaleString()}
</TableCell>
<TableCell className="text-center">
{po.total_received.toLocaleString()}
{po.record_type === "po_only" ? "-" : po.total_received.toLocaleString()}
</TableCell>
<TableCell className="text-right" >
{po.fulfillment_rate === null
? "N/A"
: formatPercent(po.fulfillment_rate)}
<TableCell className="text-center" >
{po.record_type === "po_with_receiving"
? (po.fulfillment_rate === null ? "N/A" : formatPercent(po.fulfillment_rate))
: "-"}
</TableCell>
</TableRow>
</PurchaseOrderAccordion>