@evenicanpm/portal-table-ui 1.6.0 → 1.8.0

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

@@ -0,0 +1,440 @@
+"use client";
+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
+const formatCurrency = (amount?: number): string => {
+	if (amount === undefined || amount === null) return "$0.00";
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2,
+	}).format(amount);
+};
+
+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",
+			day: "numeric",
+		}).format(date);
+	} catch {
+		return dateString;
+	}
+};
+
+interface InvoiceLine {
+	ItemId?: string;
+	ProductName?: string;
+	Quantity?: number;
+	Price?: number;
+	NetAmount?: number;
+	UnitOfMeasure?: string;
+	LineDiscount?: number;
+	DiscountAmount: number;
+	HasDiscount: boolean;
+}
+
+interface InvoiceData {
+	Status?: string | number;
+	SalesInvoiceLine?: InvoiceLine[];
+	InvoiceSubtotal?: number;
+	TotalTaxAmount?: number;
+	Amount?: number;
+	CompanyName?: string;
+	CompanyEmail?: string;
+	CompanyAddress?: string;
+	Name?: string;
+	Email?: string;
+	BillingAddress?: string;
+	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;
+};
+
+export const InvoiceDetailsTemplate = ({
+	data,
+	statusColorMap,
+	statusTextMap,
+	loading = false,
+	actions,
+	resourceName = "invoice",
+}: DetailsTemplateProps) => {
+	const invoice = data as InvoiceData;
+
+	if (!loading && (!invoice || isDataEmpty(invoice))) {
+		return (
+			<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+				<Card sx={{ p: 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.
+					</Typography>
+				</Card>
+			</Box>
+		);
+	}
+
+	const items = invoice?.SalesInvoiceLine ?? [];
+	const subtotal = invoice?.InvoiceSubtotal ?? 0;
+	const tax = invoice?.TotalTaxAmount ?? 0;
+	const total = invoice?.Amount ?? 0;
+
+	// Fixed column widths to sum to 12
+	const columns = [
+		{ label: "#", size: 1.5 },
+		{ label: "Product", size: 3.5 },
+		{ label: "Qty", size: 1 },
+		{ label: "Unit", size: 1 },
+		{ label: "Unit Price", size: 1.5 },
+		{ label: "Discount", size: 1.5 },
+		{ label: "Line Total", size: 1.5 },
+		{ label: "", size: 0.5 },
+	];
+
+	if (loading) {
+		return (
+			<Box sx={{ p: 3, width: "75%", 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}>
+						{Array.from({ length: 4 }).map((_, 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%" />
+							</Grid2>
+						))}
+					</Grid2>
+					<Divider sx={{ my: 3 }} />
+					<Grid2 container sx={{ mb: 2 }}>
+						{columns.map((col) => (
+							<Grid2 key={col.label} size={col.size}>
+								<Skeleton width="60%" />
+							</Grid2>
+						))}
+					</Grid2>
+					{Array.from({ length: 4 }).map((_, idx) => (
+						// 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>
+							))}
+						</Grid2>
+					))}
+					<Box mt={3} display="flex" justifyContent="flex-end">
+						<Box width={300}>
+							{Array.from({ length: 3 }).map((_, i) => (
+								<Box
+									// biome-ignore lint: no-array-index-key
+									key={`skeleton-${i}`}
+									display="flex"
+									justifyContent="space-between"
+									mb={1}
+								>
+									<Skeleton width="40%" />
+									<Skeleton width="30%" />
+								</Box>
+							))}
+						</Box>
+					</Box>
+				</Card>
+			</Box>
+		);
+	}
+
+	return (
+		<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+			{/* Header */}
+			<Box
+				display="flex"
+				justifyContent="space-between"
+				alignItems="center"
+				mb={3}
+			>
+				{invoice?.Status !== undefined && (
+					<StatusPill
+						status={invoice.Status}
+						statusColorMap={statusColorMap}
+						statusTextMap={statusTextMap}
+					/>
+				)}
+				<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 */}
+			{invoice?.Notes && (
+				<Card sx={{ p: 3, borderRadius: 3, mb: 3 }}>
+					<Typography variant="subtitle1" color="text.secondary" mb={1}>
+						Notes
+					</Typography>
+					<Typography
+						variant="body2"
+						color="text.secondary"
+						whiteSpace="pre-line"
+					>
+						{invoice.Notes}
+					</Typography>
+				</Card>
+			)}
+
+			{/* Main Invoice Card */}
+			<Card sx={{ p: 3, borderRadius: 3 }}>
+				{/* Details Section */}
+				{(invoice?.CompanyName ||
+					invoice?.Name ||
+					invoice?.InvoiceDate ||
+					invoice?.DueDate) && (
+					<>
+						<Typography variant="subtitle1" color="text.secondary" mb={2}>
+							Details
+						</Typography>
+
+						<Grid2 container spacing={4}>
+							{invoice?.CompanyName && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										From
+									</Typography>
+									<Typography fontWeight={600}>
+										{invoice.CompanyName}
+									</Typography>
+									{invoice.CompanyEmail && (
+										<Typography variant="body2">
+											{invoice.CompanyEmail}
+										</Typography>
+									)}
+									{invoice.CompanyAddress && (
+										<Typography variant="body2">
+											{invoice.CompanyAddress}
+										</Typography>
+									)}
+								</Grid2>
+							)}
+
+							{invoice?.Name && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										Bill To
+									</Typography>
+									<Typography fontWeight={600}>{invoice.Name}</Typography>
+									{invoice.Email && (
+										<Typography variant="body2">{invoice.Email}</Typography>
+									)}
+									{invoice.BillingAddress && (
+										<Typography variant="body2">
+											{invoice.BillingAddress}
+										</Typography>
+									)}
+								</Grid2>
+							)}
+
+							{invoice?.InvoiceDate && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										Invoice Date
+									</Typography>
+									<Typography>{formatDate(invoice.InvoiceDate)}</Typography>
+								</Grid2>
+							)}
+
+							{invoice?.DueDate && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										Due Date
+									</Typography>
+									<Typography>{formatDate(invoice.DueDate)}</Typography>
+								</Grid2>
+							)}
+						</Grid2>
+
+						<Divider sx={{ my: 3 }} />
+					</>
+				)}
+
+				{/* Line Items Section */}
+				{items.length > 0 ? (
+					<>
+						{/* Table Header */}
+						<Grid2 container sx={{ mb: 1 }}>
+							{columns.map((col) => (
+								<Grid2 key={col.label} size={col.size}>
+									<Typography variant="body2" fontWeight={600}>
+										{col.label}
+									</Typography>
+								</Grid2>
+							))}
+						</Grid2>
+
+						{/* Line Items */}
+						{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 (
+								<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={3.5}>
+										<Typography variant="body2">{productName}</Typography>
+									</Grid2>
+
+									<Grid2 size={1}>
+										<Typography variant="body2">{quantity}</Typography>
+									</Grid2>
+
+									<Grid2 size={1}>
+										<Typography variant="body2">
+											{item?.UnitOfMeasure || "—"}
+										</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={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>
+							);
+						})}
+
+						{/* Totals */}
+						<Box mt={3} display="flex" justifyContent="flex-end">
+							<Box width={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
+									</Typography>
+									<Typography variant="body1" fontWeight={700}>
+										{formatCurrency(total)}
+									</Typography>
+								</Box>
+							</Box>
+						</Box>
+					</>
+				) : (
+					<Box sx={{ textAlign: "center", py: 4 }}>
+						<Typography variant="body2" color="text.secondary">
+							No line items to display
+						</Typography>
+					</Box>
+				)}
+			</Card>
+		</Box>
+	);
+};

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

@@ -0,0 +1,39 @@
+import type { Table } from "src/features/table";
+import type {
+	StatusColorMap,
+	StatusTextMap,
+} from "src/features/table/types/schemas";
+import { InvoiceDetailsTemplate } from "./invoice-details";
+
+/**
+ * Shared props that every details template must accept.
+ * Add optional fields here as the surface area grows; templates
+ * that don't need a field can simply ignore it.
+ */
+export interface DetailsTemplateProps {
+	data: unknown;
+	statusColorMap: StatusColorMap;
+	statusTextMap: StatusTextMap;
+	loading?: boolean;
+	actions?: Table.Schemas.UIAction[];
+	resourceName?: string;
+}
+
+/**
+ * Registry of all available detail templates.
+ *
+ * To add a new template:
+ *   1. Create the component file, implementing DetailsTemplateProps.
+ *   2. Import it here.
+ *   3. Add a key -> component entry below.
+ *
+ * The key is what consumers pass as `detailsTemplate` on the resource definition.
+ */
+export const detailsTemplateRegistry: Record<
+	string,
+	React.ComponentType<DetailsTemplateProps>
+> = {
+	invoice: InvoiceDetailsTemplate,
+};
+
+export type DetailsTemplateKey = keyof typeof detailsTemplateRegistry;

package/src/features/table/components/dashboard/table/filter-render-map.tsx

@@ -1,9 +1,10 @@
 "use client";
-import * as Table from "../../../types/";
+import type * as Table from "../../../types/";
 import { DateFilter } from "./filters/date-filter";
 import { StatusFilter } from "./filters/status-filter";
 
 export const filterRenderMapFallback: Table.Handlers.FilterRenderMap = {
 	select: (props: Table.Handlers.FilterProps) => <StatusFilter {...props} />,
 	date: (props: Table.Handlers.FilterProps) => <DateFilter {...props} />,
+	datetime: (props: Table.Handlers.FilterProps) => <DateFilter {...props} />,
 };

package/src/features/table/components/dashboard/table/filters/date-filter.tsx

@@ -1,7 +1,7 @@
 "use client";
-import * as Table from "../../../../types";
 import MenuItem from "@mui/material/MenuItem";
 import Select, { type SelectChangeEvent } from "@mui/material/Select";
+import type * as Table from "../../../../types";
 
 export const DateFilter = (props: Table.Handlers.FilterProps) => {
 	const { value, filterName, filterOptions, setValue } = props;
@@ -12,7 +12,7 @@ export const DateFilter = (props: Table.Handlers.FilterProps) => {
 			value={value?.[filterName] || "all"}
 			label={filterName}
 			sx={{
-				height: "100%",
+				minHeight: "100%",
 				border: "none",
 				backgroundColor: "background.paper",
 			}}
@@ -20,9 +20,9 @@ export const DateFilter = (props: Table.Handlers.FilterProps) => {
 				setValue((prev) => ({ ...prev, [filterName]: e.target.value }));
 			}}
 		>
-			<MenuItem value={"all"}>All Transaction Dates</MenuItem>
-			{filterOptions?.map((value, i) => (
-				<MenuItem key={value?.label + i} value={value.label}>
+			<MenuItem value={"all"}>All Months</MenuItem>
+			{filterOptions?.map((value) => (
+				<MenuItem key={value?.value} value={value.value}>
 					{value.label}
 				</MenuItem>
 			))}

package/src/features/table/components/dashboard/table/filters/status-filter.tsx

@@ -1,7 +1,7 @@
 "use client";
-import * as Table from "../../../../types/";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
+import type * as Table from "../../../../types/";
 
 export const StatusFilter = (props: Table.Handlers.FilterProps) => {
 	const { value, filterName, setValue, resetPagination, filterOptions } = props;
@@ -12,7 +12,7 @@ export const StatusFilter = (props: Table.Handlers.FilterProps) => {
 		<Select
 			value={selectedValue}
 			sx={{
-				height: "100%",
+				minHight: "100%",
 				border: "none",
 				backgroundColor: "background.paper",
 			}}

package/src/features/table/components/dashboard/table/no-results.tsx

@@ -1,7 +1,7 @@
 "use client";
-import * as Table from "../../../types/";
 import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
 import { Typography } from "@mui/material";
+import type * as Table from "../../../types/";
 
 export const NoResultsComponent: Table.Handlers.NoResultsComponent = ({
 	label,

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

@@ -1,22 +1,27 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
 import { Skeleton } from "@mui/material";
+import Checkbox from "@mui/material/Checkbox";
 import { styled } from "@mui/material/styles";
 import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import type React from "react";
-import { Column } from "@evenicanpm/portal-types-schemas";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	fontWeight: 600,
 	padding: "16px 20px",
 	color: theme.palette.grey[900],
+	minWidth: 140,
 }));
 
 interface TableHeaderProps {
 	hasActions: boolean;
 	columns: (Column & { ColumnOrder: number })[] | undefined;
 	loading: boolean;
+	selectAllChecked: boolean;
+	selectAllIndeterminate: boolean;
+	onToggleAll: (checked: boolean) => void;
 }
 
 /**
@@ -28,13 +33,24 @@ export default function TableHeader({
 	hasActions,
 	columns,
 	loading,
-}: Readonly<TableHeaderProps>) {
+	selectAllChecked,
+	selectAllIndeterminate,
+	onToggleAll,
+}: TableHeaderProps) {
 	if (loading) {
 		return (
 			<TableHead>
 				<TableRow>
-					{Array.from({ length: 4 })?.map((_col, i) => (
-						<StyledTableCell key={String(`skeleton-${i + 1}`)}>
+					<StyledTableCell padding="checkbox" sx={{ width: 56 }}>
+						<Skeleton
+							variant="rounded"
+							width={24}
+							height={24}
+							sx={{ bgcolor: "rgba(255,255,255,0.1)" }}
+						/>
+					</StyledTableCell>
+					{Array.from({ length: 6 })?.map((_col, i) => (
+						<StyledTableCell key={String(i)}>
 							<Skeleton
 								variant="rounded"
 								width={100}
@@ -43,6 +59,11 @@ export default function TableHeader({
 							/>
 						</StyledTableCell>
 					))}
+					{hasActions && (
+						<StyledTableCell>
+							<Skeleton variant="rounded" width={100} height={25} />
+						</StyledTableCell>
+					)}
 				</TableRow>
 			</TableHead>
 		);
@@ -50,8 +71,23 @@ export default function TableHeader({
 	return (
 		<TableHead>
 			<TableRow>
+				<StyledTableCell sx={{ padding: "16px 16px", width: 72 }}>
+					<Checkbox
+						checked={selectAllChecked}
+						indeterminate={selectAllIndeterminate}
+						onChange={(_e, checked) => onToggleAll(checked)}
+						inputProps={{ "aria-label": "select all rows" }}
+					/>
+				</StyledTableCell>
+
 				{columns?.map((column, i) => (
-					<StyledTableCell key={column.Label + String(i)}>
+					<StyledTableCell
+						key={column.Label + String(i)}
+						sx={{
+							whiteSpace: "normal",
+							wordBreak: "break-word",
+						}}
+					>
 						{column.Label}
 					</StyledTableCell>
 				))}