@evenicanpm/portal-table-ui 1.7.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "1.7.0",
+	"version": "1.8.1",
 	"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.1",
+		"@evenicanpm/ui": "^1.8.1",
 		"@mui/lab": "^7.0.1-beta.19",
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "2e25d32705901a4ff2dd43aa420fde931568ad93"
+	"gitHead": "07cfd4496c6a137e1420a6572298998b25b6369d"
 }

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,23 @@
 "use client";
 import {
 	Box,
-	Button,
 	Card,
 	Divider,
+	Paper,
 	Skeleton,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
 	Typography,
+	useMediaQuery,
+	useTheme,
 } 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
@@ -24,12 +33,9 @@ const formatCurrency = (amount?: number): string => {
 
 const formatDate = (dateString?: string): string => {
 	if (!dateString) return "—";
-
 	try {
 		const date = new Date(dateString);
-		// Check if date is valid
 		if (isNaN(date.getTime())) return dateString;
-
 		return new Intl.DateTimeFormat("en-US", {
 			year: "numeric",
 			month: "long",
@@ -41,15 +47,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,16 +73,15 @@ interface InvoiceData {
 	InvoiceDate?: string;
 	DueDate?: string;
 	Notes?: string;
+	Id: string;
 }
 
 const isDataEmpty = (data: InvoiceData | null | undefined): boolean => {
 	if (!data) return true;
-
 	const hasNoLineItems =
 		!data.SalesInvoiceLine || data.SalesInvoiceLine.length === 0;
 	const hasNoBasicInfo = !data.CompanyName && !data.Name && !data.InvoiceDate;
 	const hasNoAmounts = !data.Amount && data.Amount !== 0;
-
 	return hasNoLineItems && hasNoBasicInfo && hasNoAmounts;
 };
 
@@ -85,18 +90,28 @@ export const InvoiceDetailsTemplate = ({
 	statusColorMap,
 	statusTextMap,
 	loading = false,
+	actions,
+	resourceName = "invoice",
 }: DetailsTemplateProps) => {
+	const theme = useTheme();
+	const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
 	const invoice = data as InvoiceData;
 
+	// Responsive width
+	const containerWidth = isMobile ? "95%" : "75%";
+
 	if (!loading && (!invoice || isDataEmpty(invoice))) {
 		return (
-			<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
-				<Card sx={{ p: 6, borderRadius: 3, textAlign: "center" }}>
+			<Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
+				<Card
+					sx={{ p: { xs: 3, sm: 6 }, borderRadius: 3, textAlign: "center" }}
+				>
 					<Typography variant="h6" color="text.secondary" gutterBottom>
 						No Data Available
 					</Typography>
 					<Typography variant="body2" color="text.secondary">
-						This invoice template has no data to display.
+						We couldn't find any details for selected invoice.
 					</Typography>
 				</Card>
 			</Box>
@@ -108,56 +123,80 @@ export const InvoiceDetailsTemplate = ({
 	const tax = invoice?.TotalTaxAmount ?? 0;
 	const total = invoice?.Amount ?? 0;
 
+	// Fixed column definitions with specific widths
 	const columns = [
-		{ label: "#", size: 1 },
-		{ label: "Product", size: 3 },
-		{ label: "Qty", size: 1 },
-		{ label: "Unit", size: 2 },
-		{ label: "Unit Price", size: 1.5 },
-		{ label: "Savings", size: 1.5 },
-		{ label: "Line Total", size: 1.5 },
-		{ label: "", size: 0.5 },
+		{ label: "#", width: 60 },
+		{ label: "Product", width: 200 },
+		{ label: "Qty", width: 60 },
+		{ label: "Unit", width: 60 },
+		{ label: "Unit Price", width: 120 },
+		{ label: "Discount", width: 100 },
+		{ label: "Line Total", width: 120 },
+		{ label: "", width: 40 },
 	];
 
+	// Calculate total width for table container
+	const totalTableWidth = columns.reduce((sum, col) => sum + col.width, 0);
+
 	if (loading) {
 		return (
-			<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+			<Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
 				<Box display="flex" justifyContent="space-between" mb={3}>
 					<Skeleton variant="rectangular" width={100} height={32} />
 					<Skeleton variant="rectangular" width={120} height={40} />
 				</Box>
-				<Card sx={{ p: 4, borderRadius: 3 }}>
-					<Grid2 container spacing={4}>
+				<Card sx={{ p: { xs: 2, sm: 4 }, borderRadius: 3 }}>
+					<Grid2 container spacing={{ xs: 2, sm: 4 }}>
 						{Array.from({ length: 4 }).map((_, i) => (
-							<Grid2 size={6} key={i}>
+							<Grid2 size={{ xs: 12, sm: 6 }} key={`skeleton-${i}`}>
 								<Skeleton width="40%" height={20} />
 								<Skeleton width="80%" />
 								<Skeleton width="60%" />
 							</Grid2>
 						))}
 					</Grid2>
-					<Divider sx={{ my: 3 }} />
-					<Grid2 container sx={{ mb: 2 }}>
-						{columns.map((col, i) => (
-							<Grid2 key={i} 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}>
-									<Skeleton width="80%" />
-								</Grid2>
-							))}
-						</Grid2>
-					))}
+					<Divider sx={{ my: { xs: 2, sm: 3 } }} />
+
+					{/* Table skeleton with scroll */}
+					<TableContainer
+						component={Paper}
+						sx={{ boxShadow: "none", overflowX: "auto" }}
+					>
+						<Table sx={{ minWidth: totalTableWidth }}>
+							<TableHead>
+								<TableRow>
+									{columns.map((col) => (
+										<TableCell
+											key={col.label}
+											sx={{ width: col.width, minWidth: col.width }}
+										>
+											<Skeleton width="80%" />
+										</TableCell>
+									))}
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{Array.from({ length: 4 }).map((_, idx) => (
+									<TableRow key={`skeleton-${idx}`}>
+										{columns.map((col) => (
+											<TableCell
+												key={col.label}
+												sx={{ width: col.width, minWidth: col.width }}
+											>
+												<Skeleton width="80%" />
+											</TableCell>
+										))}
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					</TableContainer>
+
 					<Box mt={3} display="flex" justifyContent="flex-end">
-						<Box width={300}>
+						<Box width={{ xs: "100%", sm: 300 }}>
 							{Array.from({ length: 3 }).map((_, i) => (
 								<Box
-									key={i}
+									key={`skeleton-${i}`}
 									display="flex"
 									justifyContent="space-between"
 									mb={1}
@@ -174,12 +213,14 @@ export const InvoiceDetailsTemplate = ({
 	}
 
 	return (
-		<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+		<Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
 			{/* Header */}
 			<Box
 				display="flex"
 				justifyContent="space-between"
 				alignItems="center"
+				flexWrap="wrap"
+				gap={2}
 				mb={3}
 			>
 				{invoice?.Status !== undefined && (
@@ -189,16 +230,37 @@ export const InvoiceDetailsTemplate = ({
 						statusTextMap={statusTextMap}
 					/>
 				)}
-				{invoice?.Status !== 3 && invoice?.Status !== undefined && (
-					<Button variant="contained" color="warning">
-						Pay Now
-					</Button>
-				)}
+				<Box display="flex" gap={2} alignItems="center">
+					{actions?.map((action) => {
+						const isPaid = invoice.Status === 3;
+						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 */}
 			{invoice?.Notes && (
-				<Card sx={{ p: 3, borderRadius: 3, mb: 3 }}>
+				<Card sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3, mb: 3 }}>
 					<Typography variant="subtitle1" color="text.secondary" mb={1}>
 						Notes
 					</Typography>
@@ -213,7 +275,7 @@ export const InvoiceDetailsTemplate = ({
 			)}
 
 			{/* Main Invoice Card */}
-			<Card sx={{ p: 3, borderRadius: 3 }}>
+			<Card sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3 }}>
 				{/* Details Section */}
 				{(invoice?.CompanyName ||
 					invoice?.Name ||
@@ -223,10 +285,9 @@ export const InvoiceDetailsTemplate = ({
 						<Typography variant="subtitle1" color="text.secondary" mb={2}>
 							Details
 						</Typography>
-
-						<Grid2 container spacing={4}>
+						<Grid2 container spacing={{ xs: 2, sm: 4 }}>
 							{invoice?.CompanyName && (
-								<Grid2 size={6}>
+								<Grid2 size={{ xs: 12, sm: 6 }}>
 									<Typography variant="body2" color="text.secondary">
 										From
 									</Typography>
@@ -234,46 +295,45 @@ export const InvoiceDetailsTemplate = ({
 										{invoice.CompanyName}
 									</Typography>
 									{invoice.CompanyEmail && (
-										<Typography variant="body2">
+										<Typography variant="body2" sx={{ wordBreak: "break-all" }}>
 											{invoice.CompanyEmail}
 										</Typography>
 									)}
 									{invoice.CompanyAddress && (
-										<Typography variant="body2">
+										<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
 											{invoice.CompanyAddress}
 										</Typography>
 									)}
 								</Grid2>
 							)}
-
 							{invoice?.Name && (
-								<Grid2 size={6}>
+								<Grid2 size={{ xs: 12, sm: 6 }}>
 									<Typography variant="body2" color="text.secondary">
 										Bill To
 									</Typography>
 									<Typography fontWeight={600}>{invoice.Name}</Typography>
 									{invoice.Email && (
-										<Typography variant="body2">{invoice.Email}</Typography>
+										<Typography variant="body2" sx={{ wordBreak: "break-all" }}>
+											{invoice.Email}
+										</Typography>
 									)}
 									{invoice.BillingAddress && (
-										<Typography variant="body2">
+										<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
 											{invoice.BillingAddress}
 										</Typography>
 									)}
 								</Grid2>
 							)}
-
 							{invoice?.InvoiceDate && (
-								<Grid2 size={6}>
+								<Grid2 size={{ xs: 12, sm: 6 }}>
 									<Typography variant="body2" color="text.secondary">
 										Invoice Date
 									</Typography>
 									<Typography>{formatDate(invoice.InvoiceDate)}</Typography>
 								</Grid2>
 							)}
-
 							{invoice?.DueDate && (
-								<Grid2 size={6}>
+								<Grid2 size={{ xs: 12, sm: 6 }}>
 									<Typography variant="body2" color="text.secondary">
 										Due Date
 									</Typography>
@@ -281,108 +341,114 @@ export const InvoiceDetailsTemplate = ({
 								</Grid2>
 							)}
 						</Grid2>
-
-						<Divider sx={{ my: 3 }} />
+						<Divider sx={{ my: { xs: 2, sm: 3 } }} />
 					</>
 				)}
 
 				{/* Line Items Section */}
 				{items.length > 0 ? (
 					<>
-						{/* Table Header */}
-						<Grid2 container sx={{ mb: 1 }}>
-							{columns.map((col, i) => (
-								<Grid2 key={i} size={col.size}>
-									<Typography variant="body2" fontWeight={600}>
-										{col.label}
-									</Typography>
-								</Grid2>
-							))}
-						</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>
-
-								<Grid2 size={1}>
-									<Typography variant="body2">
-										{item?.Quantity ?? "—"}
-									</Typography>
-								</Grid2>
-
-								<Grid2 size={1.5}>
-									<Typography variant="body2">
-										{item?.UnitOfMeasure || "—"}
-									</Typography>
-								</Grid2>
-
-								<Grid2 size={2}>
-									<Typography variant="body2">
-										{formatCurrency(item?.Price)}
-									</Typography>
-								</Grid2>
-
-								<Grid2 size={1.5}>
-									<Typography variant="body2">
-										{item?.Savings
-											? formatCurrency(item.Savings)
-											: formatCurrency(0)}
-									</Typography>
-								</Grid2>
-
-								<Grid2 size={1.5}>
-									<Typography variant="body2">
-										{formatCurrency(item?.LineAmount)}
-									</Typography>
-								</Grid2>
-
-								<Grid2
-									size={0.5}
-									display="flex"
-									alignItems="center"
-									justifyContent="center"
-								>
-									{item?.IsOnSale && (
-										<Typography color="error.main" fontWeight={700}>
-											*
-										</Typography>
-									)}
-								</Grid2>
-							</Grid2>
-						))}
+						<TableContainer>
+							<Table sx={{ minWidth: totalTableWidth }}>
+								<TableHead>
+									<TableRow>
+										{columns.map((col) => (
+											<TableCell
+												key={col.label}
+												sx={{
+													width: col.width,
+													minWidth: col.width,
+													fontWeight: 600,
+													backgroundColor: theme.palette.background.paper,
+												}}
+											>
+												<Typography variant="body2" fontWeight={600}>
+													{col.label}
+												</Typography>
+											</TableCell>
+										))}
+									</TableRow>
+								</TableHead>
+								<TableBody>
+									{items.map((item, idx) => {
+										const productName = item.ProductName || "-";
+										const unitPrice = item.Price ?? 0;
+										const quantity = item.Quantity ?? 0;
+										const lineTotal = item.NetAmount ?? unitPrice * quantity;
+
+										return (
+											<TableRow key={`${item.ItemId}-${idx}`}>
+												<TableCell sx={{ width: 60, minWidth: 60 }}>
+													<Typography variant="body2">
+														{item?.ItemId || idx + 1}
+													</Typography>
+												</TableCell>
+												<TableCell sx={{ width: 200, minWidth: 200 }}>
+													<Typography variant="body2">{productName}</Typography>
+												</TableCell>
+												<TableCell sx={{ width: 60, minWidth: 60 }}>
+													<Typography variant="body2">{quantity}</Typography>
+												</TableCell>
+												<TableCell sx={{ width: 60, minWidth: 60 }}>
+													<Typography variant="body2">
+														{item?.UnitOfMeasure || "—"}
+													</Typography>
+												</TableCell>
+												<TableCell sx={{ width: 120, minWidth: 120 }}>
+													<Typography variant="body2">
+														{formatCurrency(unitPrice)}
+													</Typography>
+												</TableCell>
+												<TableCell sx={{ width: 100, minWidth: 100 }}>
+													<Typography
+														variant="body2"
+														color={
+															item.HasDiscount ? "error.main" : "text.secondary"
+														}
+													>
+														{item.HasDiscount
+															? `-${formatCurrency(item.DiscountAmount)}`
+															: formatCurrency(0)}
+													</Typography>
+												</TableCell>
+												<TableCell sx={{ width: 100, minWidth: 100 }}>
+													<Typography variant="body2" fontWeight={500}>
+														{formatCurrency(lineTotal)}
+													</Typography>
+												</TableCell>
+												<TableCell
+													sx={{ width: 40, minWidth: 40 }}
+													align="center"
+												>
+													{item.HasDiscount && (
+														<Typography color="error.main" fontWeight={700}>
+															*
+														</Typography>
+													)}
+												</TableCell>
+											</TableRow>
+										);
+									})}
+								</TableBody>
+							</Table>
+						</TableContainer>
 
 						{/* Totals */}
 						<Box mt={3} display="flex" justifyContent="flex-end">
-							<Box width={300}>
+							<Box width={{ xs: "100%", sm: 300 }}>
 								<Box display="flex" justifyContent="space-between" mb={1}>
 									<Typography variant="body2">Subtotal</Typography>
 									<Typography variant="body2" fontWeight={500}>
 										{formatCurrency(subtotal)}
 									</Typography>
 								</Box>
-
 								<Box display="flex" justifyContent="space-between" mb={1}>
 									<Typography variant="body2">Tax</Typography>
 									<Typography variant="body2" fontWeight={500}>
 										{formatCurrency(tax)}
 									</Typography>
 								</Box>
-
 								<Divider sx={{ my: 1.5 }} />
-
 								<Box display="flex" justifyContent="space-between" mt={1}>
 									<Typography variant="body1" fontWeight={700}>
 										Total

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

@@ -1,7 +1,4 @@
-import type {
-	StatusColorMap,
-	StatusTextMap,
-} from "src/features/table/types/schemas";
+import type * as Types from "../../../../../types";
 import { InvoiceDetailsTemplate } from "./invoice-details";
 
 /**
@@ -11,9 +8,11 @@ import { InvoiceDetailsTemplate } from "./invoice-details";
  */
 export interface DetailsTemplateProps {
 	data: unknown;
-	statusColorMap: StatusColorMap;
-	statusTextMap: StatusTextMap;
+	statusColorMap: Types.Schemas.StatusColorMap;
+	statusTextMap: Types.Schemas.StatusTextMap;
 	loading?: boolean;
+	actions?: Types.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;