@evenicanpm/portal-table-ui 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -41,11 +41,11 @@
 	},
 	"dependencies": {
 		"@arrows/multimethod": "^2.1.0",
-		"@evenicanpm/portal-types-schemas": "^1.7.0",
-		"@evenicanpm/ui": "^1.6.0",
+		"@evenicanpm/portal-types-schemas": "^1.8.0",
+		"@evenicanpm/ui": "^1.8.0",
 		"@mui/lab": "^7.0.1-beta.19",
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "2e25d32705901a4ff2dd43aa420fde931568ad93"
+	"gitHead": "485f77c5cce7c36849fb9d416d1e503d0f9299a3"
 }

package/src/features/table/components/dashboard/table/bulk-action-button.tsx

@@ -1,14 +1,13 @@
 import { Badge, Button, CircularProgress, IconButton } from "@mui/material";
 import { useMutation } from "@tanstack/react-query";
-import type { Row } from "src/features/table/types/queries";
-import type { UIBulkAction } from "src/features/table/types/schemas";
+import type * as Types from "../../../types";
 
 interface BulkActionButtonProps {
-	action: UIBulkAction;
+	action: Types.Schemas.UIBulkAction;
 	resourceName: string;
 	selectedIds: (string | number)[];
 	clearSelection: () => void;
-	selectedRows: Row[];
+	selectedRows: Types.Queries.Row[];
 }
 export function BulkActionButton({
 	action,

package/src/features/table/components/dashboard/table/details/details.tsx

@@ -34,6 +34,9 @@ interface DetailsProps {
 	statusTextMap: StatusTextMap;
 	template?: string;
 	loading?: boolean;
+
+	actions?: Types.Schemas.UIAction[];
+	resourceName?: string;
 }
 
 /**
@@ -49,6 +52,8 @@ const Details = ({
 	statusColorMap,
 	statusTextMap,
 	template,
+	actions,
+	resourceName,
 	loading = false,
 }: DetailsProps) => {
 	// Resolve the template component once — undefined when the key is absent or
@@ -96,6 +101,8 @@ const Details = ({
 						statusColorMap={statusColorMap}
 						statusTextMap={statusTextMap}
 						loading={loading}
+						actions={actions}
+						resourceName={resourceName}
 					/>
 				) : (
 					<Grid container spacing={2}>

package/src/features/table/components/dashboard/table/details/templates/invoice-details.tsx

@@ -1,14 +1,8 @@
 "use client";
-import {
-	Box,
-	Button,
-	Card,
-	Divider,
-	Skeleton,
-	Typography,
-} from "@mui/material";
+import { Box, Card, Divider, Skeleton, Typography } from "@mui/material";
 import Grid2 from "@mui/material/Grid2";
 import { StatusPill } from "../../status-pill";
+import { ActionButton } from "../../table-row/action-button";
 import type { DetailsTemplateProps } from "./template-registry";
 
 // Formatting utilities
@@ -41,15 +35,15 @@ const formatDate = (dateString?: string): string => {
 };
 
 interface InvoiceLine {
-	Description?: string;
 	ItemId?: string;
+	ProductName?: string;
 	Quantity?: number;
 	Price?: number;
-	LineAmount?: number;
+	NetAmount?: number;
 	UnitOfMeasure?: string;
-	FullDescription?: string;
-	Savings?: number;
-	IsOnSale?: boolean;
+	LineDiscount?: number;
+	DiscountAmount: number;
+	HasDiscount: boolean;
 }
 
 interface InvoiceData {
@@ -67,6 +61,7 @@ interface InvoiceData {
 	InvoiceDate?: string;
 	DueDate?: string;
 	Notes?: string;
+	Id: string;
 }
 
 const isDataEmpty = (data: InvoiceData | null | undefined): boolean => {
@@ -85,6 +80,8 @@ export const InvoiceDetailsTemplate = ({
 	statusColorMap,
 	statusTextMap,
 	loading = false,
+	actions,
+	resourceName = "invoice",
 }: DetailsTemplateProps) => {
 	const invoice = data as InvoiceData;
 
@@ -108,13 +105,14 @@ export const InvoiceDetailsTemplate = ({
 	const tax = invoice?.TotalTaxAmount ?? 0;
 	const total = invoice?.Amount ?? 0;
 
+	// Fixed column widths to sum to 12
 	const columns = [
-		{ label: "#", size: 1 },
-		{ label: "Product", size: 3 },
+		{ label: "#", size: 1.5 },
+		{ label: "Product", size: 3.5 },
 		{ label: "Qty", size: 1 },
-		{ label: "Unit", size: 2 },
+		{ label: "Unit", size: 1 },
 		{ label: "Unit Price", size: 1.5 },
-		{ label: "Savings", size: 1.5 },
+		{ label: "Discount", size: 1.5 },
 		{ label: "Line Total", size: 1.5 },
 		{ label: "", size: 0.5 },
 	];
@@ -129,7 +127,8 @@ export const InvoiceDetailsTemplate = ({
 				<Card sx={{ p: 4, borderRadius: 3 }}>
 					<Grid2 container spacing={4}>
 						{Array.from({ length: 4 }).map((_, i) => (
-							<Grid2 size={6} key={i}>
+							// biome-ignore lint: no-array-index-key
+							<Grid2 size={6} key={`skeleton-${i}`}>
 								<Skeleton width="40%" height={20} />
 								<Skeleton width="80%" />
 								<Skeleton width="60%" />
@@ -138,16 +137,17 @@ export const InvoiceDetailsTemplate = ({
 					</Grid2>
 					<Divider sx={{ my: 3 }} />
 					<Grid2 container sx={{ mb: 2 }}>
-						{columns.map((col, i) => (
-							<Grid2 key={i} size={col.size}>
+						{columns.map((col) => (
+							<Grid2 key={col.label} size={col.size}>
 								<Skeleton width="60%" />
 							</Grid2>
 						))}
 					</Grid2>
 					{Array.from({ length: 4 }).map((_, idx) => (
-						<Grid2 container key={idx} sx={{ py: 1.5 }}>
-							{columns.map((col, i) => (
-								<Grid2 key={i} size={col.size}>
+						// biome-ignore lint: no-array-index-key
+						<Grid2 container key={`skeleton-${idx}`} sx={{ py: 1.5 }}>
+							{columns.map((col) => (
+								<Grid2 key={col.label} size={col.size}>
 									<Skeleton width="80%" />
 								</Grid2>
 							))}
@@ -157,7 +157,8 @@ export const InvoiceDetailsTemplate = ({
 						<Box width={300}>
 							{Array.from({ length: 3 }).map((_, i) => (
 								<Box
-									key={i}
+									// biome-ignore lint: no-array-index-key
+									key={`skeleton-${i}`}
 									display="flex"
 									justifyContent="space-between"
 									mb={1}
@@ -189,11 +190,35 @@ export const InvoiceDetailsTemplate = ({
 						statusTextMap={statusTextMap}
 					/>
 				)}
-				{invoice?.Status !== 3 && invoice?.Status !== undefined && (
-					<Button variant="contained" color="warning">
-						Pay Now
-					</Button>
-				)}
+				<Box display="flex" gap={2}>
+					{actions?.map((action) => {
+						const isPaid = invoice.Status === 3; // Need to pass table.row to action to see if enabled
+
+						const enabled = !isPaid && action.isEnabled;
+
+						if (!enabled) {
+							return (
+								<span
+									key={action.label}
+									style={{
+										display: "inline-block",
+										width: action.icon ? "34px" : "42px",
+										height: "34px",
+									}}
+								/>
+							);
+						}
+
+						return (
+							<ActionButton
+								key={action.label}
+								docId={invoice.Id}
+								action={action}
+								resourceName={resourceName}
+							/>
+						);
+					})}
+				</Box>
 			</Box>
 
 			{/* Notes Section */}
@@ -291,8 +316,8 @@ export const InvoiceDetailsTemplate = ({
 					<>
 						{/* Table Header */}
 						<Grid2 container sx={{ mb: 1 }}>
-							{columns.map((col, i) => (
-								<Grid2 key={i} size={col.size}>
+							{columns.map((col) => (
+								<Grid2 key={col.label} size={col.size}>
 									<Typography variant="body2" fontWeight={600}>
 										{col.label}
 									</Typography>
@@ -301,68 +326,76 @@ export const InvoiceDetailsTemplate = ({
 						</Grid2>
 
 						{/* Line Items */}
-						{items.map((item, idx) => (
-							<Grid2
-								container
-								key={idx}
-								sx={{ py: 1.5, borderBottom: "1px solid #eee" }}
-							>
-								<Grid2 size={1}>
-									<Typography variant="body2">{item?.ItemId || "—"}</Typography>
-								</Grid2>
-
-								<Grid2 size={3}>
-									<Typography variant="body2">
-										{item?.Description || "—"}
-									</Typography>
-								</Grid2>
+						{items.map((item, idx) => {
+							const productName = item.ProductName || "-";
+							const unitPrice = item.Price ?? 0;
+							const quantity = item.Quantity ?? 0;
+							const lineTotal = item.NetAmount ?? unitPrice * quantity;
 
-								<Grid2 size={1}>
-									<Typography variant="body2">
-										{item?.Quantity ?? "—"}
-									</Typography>
-								</Grid2>
+							return (
+								<Grid2
+									container
+									key={`${item.ItemId}-${idx}`}
+									sx={{ py: 1.5, borderBottom: "1px solid #eee" }}
+								>
+									<Grid2 size={1.5}>
+										<Typography variant="body2">
+											{item?.ItemId || idx + 1}
+										</Typography>
+									</Grid2>
 
-								<Grid2 size={1.5}>
-									<Typography variant="body2">
-										{item?.UnitOfMeasure || "—"}
-									</Typography>
-								</Grid2>
+									<Grid2 size={3.5}>
+										<Typography variant="body2">{productName}</Typography>
+									</Grid2>
 
-								<Grid2 size={2}>
-									<Typography variant="body2">
-										{formatCurrency(item?.Price)}
-									</Typography>
-								</Grid2>
+									<Grid2 size={1}>
+										<Typography variant="body2">{quantity}</Typography>
+									</Grid2>
 
-								<Grid2 size={1.5}>
-									<Typography variant="body2">
-										{item?.Savings
-											? formatCurrency(item.Savings)
-											: formatCurrency(0)}
-									</Typography>
-								</Grid2>
+									<Grid2 size={1}>
+										<Typography variant="body2">
+											{item?.UnitOfMeasure || "—"}
+										</Typography>
+									</Grid2>
 
-								<Grid2 size={1.5}>
-									<Typography variant="body2">
-										{formatCurrency(item?.LineAmount)}
-									</Typography>
-								</Grid2>
+									<Grid2 size={1.5}>
+										<Typography variant="body2">
+											{formatCurrency(unitPrice)}
+										</Typography>
+									</Grid2>
+
+									<Grid2 size={1.5}>
+										<Typography
+											variant="body2"
+											color={item.HasDiscount ? "error.main" : "text.secondary"}
+										>
+											{item.HasDiscount
+												? `-${formatCurrency(item.DiscountAmount)}`
+												: formatCurrency(0)}
+										</Typography>
+									</Grid2>
 
-								<Grid2
-									size={0.5}
-									display="flex"
-									alignItems="center"
-									justifyContent="center"
-								>
-									{item?.IsOnSale && (
-										<Typography color="error.main" fontWeight={700}>
-											*
+									<Grid2 size={1.5}>
+										<Typography variant="body2" fontWeight={500}>
+											{formatCurrency(lineTotal)}
 										</Typography>
-									)}
+									</Grid2>
+
+									<Grid2
+										size={0.5}
+										display="flex"
+										alignItems="center"
+										justifyContent="center"
+									>
+										{item.HasDiscount && (
+											<Typography color="error.main" fontWeight={700}>
+												*
+											</Typography>
+										)}
+									</Grid2>
 								</Grid2>
-							</Grid2>
-						))}
+							);
+						})}
 
 						{/* Totals */}
 						<Box mt={3} display="flex" justifyContent="flex-end">

package/src/features/table/components/dashboard/table/details/templates/template-registry.ts

@@ -1,3 +1,4 @@
+import type { Table } from "src/features/table";
 import type {
 	StatusColorMap,
 	StatusTextMap,
@@ -14,6 +15,8 @@ export interface DetailsTemplateProps {
 	statusColorMap: StatusColorMap;
 	statusTextMap: StatusTextMap;
 	loading?: boolean;
+	actions?: Table.Schemas.UIAction[];
+	resourceName?: string;
 }
 
 /**

package/src/features/table/components/dashboard/table/table-row/table-row.tsx

@@ -1,4 +1,3 @@
-import { Action } from "@evenicanpm/portal-types-schemas";
 import { FlexBox } from "@evenicanpm/ui";
 import Checkbox from "@mui/material/Checkbox";
 import TableCell from "@mui/material/TableCell";

package/src/features/table/components/dashboard/table/table.tsx

@@ -203,6 +203,24 @@ export default function DocumentTable({
 				},
 	);
 
+	const resolvedActions = resolvers.resolveActions(
+		config?.Actions,
+		actionRegistry,
+	);
+	const resolvedBulkActions = resolvers.resolveBulkActions(
+		config?.BulkActions,
+		bulkRegistry,
+	);
+
+	const hasActions =
+		configPending ||
+		(resolvedActions.length > 0 &&
+			rows?.data?.some((row) =>
+				resolvedActions.some((a) => !a.isEnabled || a.isEnabled(row)),
+			)) ||
+		false;
+	const hasBulkActions = resolvedBulkActions.length > 0;
+
 	// --- Render --- //
 	if (selectedDocument) {
 		const rowSnapshot =
@@ -224,28 +242,12 @@ export default function DocumentTable({
 				detailsRenderMap={detailsRenderMap}
 				template={hasTemplateSupport ? resource.detailsTemplate : undefined}
 				loading={hasTemplateSupport ? detailsPending : false}
+				actions={resolvedActions}
+				resourceName={resource.name}
 			/>
 		);
 	}
 
-	const resolvedActions = resolvers.resolveActions(
-		config?.Actions,
-		actionRegistry,
-	);
-	const resolvedBulkActions = resolvers.resolveBulkActions(
-		config?.BulkActions,
-		bulkRegistry,
-	);
-
-	const hasActions =
-		configPending ||
-		(resolvedActions.length > 0 &&
-			rows?.data?.some((row) =>
-				resolvedActions.some((a) => !a.isEnabled || a.isEnabled(row)),
-			)) ||
-		false;
-	const hasBulkActions = resolvedBulkActions.length > 0;
-
 	const baseCols = (visibleCols?.length ?? 0) + 1;
 	const colSpan = hasActions ? baseCols + 1 : baseCols;
 	const noResults = !rowsPending && !configPending && rows?.data?.length === 0;