@evenicanpm/portal-table-ui 2.0.1 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "2.0.1",
+	"version": "2.2.1",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -47,5 +47,5 @@
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "bbaff05f6f592114ad7a25caeee531e4fa1b14cf"
+	"gitHead": "69aee6408276ef8e1428ef5c871c5dbf63e7b59a"
 }

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

@@ -25,11 +25,17 @@ export function BulkActionButton({
 	const { mutate, isPending } = useMutation(mutationOptions);
 
 	const handleClick = () => {
-		mutate(undefined, {
-			onSuccess: () => {
-				clearSelection();
+		mutate(
+			{
+				resourceName,
+				selectedIds,
 			},
-		});
+			{
+				onSuccess: () => {
+					clearSelection();
+				},
+			},
+		);
 	};
 
 	const Icon = action.icon;

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

@@ -87,13 +87,28 @@ const Details = ({
 					mb={2}
 					height="100%"
 				>
-					<Button onClick={handleBack} startIcon={<ArrowBackIcon />}>
+					<Button
+						onClick={handleBack}
+						startIcon={<ArrowBackIcon />}
+						sx={{ "@media print": { display: "none" } }}
+					>
 						{documentTypeLabel}
 					</Button>
-					<H6 color="grey.800">
+					<H6 color="grey.800" sx={{ "@media print": { display: "none" } }}>
 						{documentTypeLabel}-{id}
 					</H6>
-					<Subtitle>DETAILS</Subtitle>
+					<H6
+						color="grey.800"
+						sx={{
+							display: "none",
+							"@media print": { display: "inline-block" },
+						}}
+					>
+						{documentTypeLabel.slice(0, documentTypeLabel.length - 1)} #{id}
+					</H6>
+					<Subtitle sx={{ "@media print": { display: "none" } }}>
+						DETAILS
+					</Subtitle>
 				</FlexBox>
 			</Box>
 

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

@@ -15,6 +15,7 @@ import {
 	Typography,
 	useMediaQuery,
 	useTheme,
+	Button,
 } from "@mui/material";
 import Grid2 from "@mui/material/Grid2";
 import { StatusPill } from "../../status-pill";
@@ -79,6 +80,12 @@ interface InvoiceData {
 	OrderedByCustomerName?: string;
 }
 
+interface TableColumn {
+	label: string;
+	width: number;
+	aligned: "inherit" | "left" | "center" | "right" | "justify";
+}
+
 const detailSkeletonKeys = ["from", "bill-to", "invoice-date", "due-date"];
 const tableSkeletonRowKeys = ["line-1", "line-2", "line-3", "line-4"];
 const totalSkeletonKeys = ["subtotal", "tax", "total"];
@@ -133,15 +140,15 @@ export const InvoiceDetailsTemplate = ({
 	const total = invoice?.Amount ?? 0;
 
 	// Fixed column definitions with specific widths
-	const columns = [
-		{ 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 },
+	const columns: TableColumn[] = [
+		{ label: "#", width: 60, aligned: "left" },
+		{ label: "Product", width: 200, aligned: "left" },
+		{ label: "Qty", width: 60, aligned: "right" },
+		{ label: "Unit", width: 60, aligned: "right" },
+		{ label: "Unit Price", width: 120, aligned: "right" },
+		{ label: "Discount", width: 100, aligned: "right" },
+		{ label: "Line Total", width: 120, aligned: "right" },
+		{ label: "", width: 40, aligned: "center" },
 	];
 
 	// Calculate total width for table container
@@ -221,8 +228,19 @@ export const InvoiceDetailsTemplate = ({
 		);
 	}
 
+	function handleOnClick() {
+		window.print();
+	}
+
 	return (
-		<Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
+		<Box
+			sx={{
+				p: { xs: 2, sm: 3 },
+				width: containerWidth,
+				mx: "auto",
+				"@media print": { p: 0, width: "100%" },
+			}}
+		>
 			{/* Header */}
 			<Box
 				display="flex"
@@ -239,7 +257,12 @@ export const InvoiceDetailsTemplate = ({
 						statusTextMap={statusTextMap}
 					/>
 				)}
-				<Box display="flex" gap={2} alignItems="center">
+				<Box
+					display="flex"
+					gap={2}
+					alignItems="center"
+					sx={{ "@media print": { display: "none" } }}
+				>
 					{actions?.map((action) => {
 						const enabled = !action.isEnabled || action.isEnabled(row);
 						if (!enabled) {
@@ -263,14 +286,25 @@ export const InvoiceDetailsTemplate = ({
 							/>
 						);
 					})}
+					<Button
+						onClick={handleOnClick}
+						variant="outlined"
+						sx={{ "@media print": { display: "none" } }}
+					>
+						Print Invoice
+					</Button>
 				</Box>
 			</Box>
 
 			{/* Notes Section */}
 			{invoice?.Notes && (
 				<Card
-					variant="outlined"
-					sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3, mb: 3 }}
+					sx={{
+						p: { xs: 2, sm: 3 },
+						borderRadius: 3,
+						mb: 3,
+						"@media print": { border: "none", boxShadow: "none", p: 0 },
+					}}
 				>
 					<Typography variant="subtitle1" color="text.secondary" mb={1}>
 						Notes
@@ -286,7 +320,13 @@ export const InvoiceDetailsTemplate = ({
 			)}
 
 			{/* Main Invoice Card */}
-			<Card variant="outlined" sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3 }}>
+			<Card
+				sx={{
+					p: { xs: 2, sm: 3 },
+					borderRadius: 3,
+					"@media print": { border: "none", boxShadow: "none", p: 0 },
+				}}
+			>
 				{/* Details Section */}
 				{(invoice?.CompanyName ||
 					invoice?.Name ||
@@ -400,7 +440,17 @@ export const InvoiceDetailsTemplate = ({
 				{items.length > 0 ? (
 					<>
 						<TableContainer>
-							<Table sx={{ minWidth: totalTableWidth }}>
+							<Table
+								sx={{
+									minWidth: totalTableWidth,
+									"@media print": {
+										p: 0,
+										scrollbarWidth: "none !important",
+										msOverflowStyle: "none !important",
+										overflow: "visible !important",
+									},
+								}}
+							>
 								<TableHead>
 									<TableRow>
 										{columns.map((col) => (
@@ -412,6 +462,7 @@ export const InvoiceDetailsTemplate = ({
 													fontWeight: 600,
 													backgroundColor: theme.palette.background.paper,
 												}}
+												align={col.aligned}
 											>
 												<Typography variant="body2" fontWeight={600}>
 													{col.label}
@@ -435,29 +486,35 @@ export const InvoiceDetailsTemplate = ({
 										].join("-");
 
 										return (
-											<TableRow key={itemKey}>
-												<TableCell sx={{ width: 60, minWidth: 60 }}>
+											<TableRow key={`${item.ItemId}-${idx}`}>
+												<TableCell
+													sx={{
+														width: "100%",
+														textAlign: "left",
+														"@media print": { width: 60, px: 1 },
+													}}
+												>
 													<Typography variant="body2">
 														{item?.ItemId || idx + 1}
 													</Typography>
 												</TableCell>
-												<TableCell sx={{ width: 200, minWidth: 200 }}>
+												<TableCell sx={{ width: "100%", textAlign: "left" }}>
 													<Typography variant="body2">{productName}</Typography>
 												</TableCell>
-												<TableCell sx={{ width: 60, minWidth: 60 }}>
+												<TableCell sx={{ width: "100%", textAlign: "right" }}>
 													<Typography variant="body2">{quantity}</Typography>
 												</TableCell>
-												<TableCell sx={{ width: 60, minWidth: 60 }}>
+												<TableCell sx={{ width: "100%", textAlign: "right" }}>
 													<Typography variant="body2">
 														{item?.UnitOfMeasure || "—"}
 													</Typography>
 												</TableCell>
-												<TableCell sx={{ width: 120, minWidth: 120 }}>
+												<TableCell sx={{ width: "100%", textAlign: "right" }}>
 													<Typography variant="body2">
 														{formatCurrency(unitPrice)}
 													</Typography>
 												</TableCell>
-												<TableCell sx={{ width: 100, minWidth: 100 }}>
+												<TableCell sx={{ width: "100%", textAlign: "right" }}>
 													<Typography
 														variant="body2"
 														color={
@@ -469,13 +526,17 @@ export const InvoiceDetailsTemplate = ({
 															: formatCurrency(0)}
 													</Typography>
 												</TableCell>
-												<TableCell sx={{ width: 100, minWidth: 100 }}>
+												<TableCell sx={{ width: "100%", textAlign: "right" }}>
 													<Typography variant="body2" fontWeight={500}>
 														{formatCurrency(lineTotal)}
 													</Typography>
 												</TableCell>
 												<TableCell
-													sx={{ width: 40, minWidth: 40 }}
+													sx={{
+														width: "100%",
+														textAlign: "center",
+														"@media print": { width: "auto", minWidth: 0 },
+													}}
 													align="center"
 												>
 													{item.HasDiscount && (

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

@@ -84,7 +84,7 @@ export default function TableHeader({
 						key={column.Label + String(i)}
 						sx={{
 							whiteSpace: "normal",
-							wordBreak: "break-word",
+							wordBreak: "normal",
 						}}
 					>
 						{column.Label}

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

@@ -78,10 +78,14 @@ const SearchField = React.memo(
 				onChange={(e) => {
 					setSearchTerm(e.target.value);
 				}}
-				placeholder={`Seach by ${selectedColumn.Label}`}
+				placeholder={
+					selectedColumn?.Label
+						? `Search by ${selectedColumn.Label}`
+						: "Select a column to search"
+				}
 				endAdornment={
 					<ColumnSelect
-						selected={selectedColumn.Data}
+						selected={selectedColumn?.Data || ""}
 						searchCols={searchCols}
 						handleChange={(value) => {
 							const col = searchCols.find((c) => c.Data === value);

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

@@ -22,7 +22,10 @@ export function ActionButton({
 
 	const handleClick = (e: React.MouseEvent) => {
 		e.stopPropagation();
-		mutate({ docId });
+		mutate({
+			docId,
+			resourceName: "",
+		});
 	};
 
 	if (action.icon) {

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

@@ -14,15 +14,8 @@ type ColumnLogic =
 	| {
 			id: string;
 			mask: string | undefined;
-			maskFn: unknown;
-			cellFn:
-				| ((
-						value: string | number | string[],
-				  ) => React.ReactElement<
-						unknown,
-						string | React.JSXElementConstructor<unknown>
-				  >)
-				| ((value: string | number) => string | number);
+			maskFn: (value: unknown, mask?: string) => string | number | string[];
+			cellFn: (value: string | number | string[]) => React.ReactNode;
 	  }[]
 	| undefined;
 

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

@@ -152,15 +152,18 @@ export default function DocumentTable({
 
 	// Depends on searchableCols, must be declared after transformer
 	const [searchColumn, setSearchColumn] = useState<Column>(
-		() => searchableCols?.[0],
+		() => searchableCols?.[0] as Column,
 	);
 
+	// always derive a safe usable column
+	const effectiveSearchColumn = searchColumn ?? searchableCols?.[0];
+
 	const { data: fetchedRows, isPending: rowsPending } = useQuery(
 		resource.rowsQueryFn({
 			page,
 			pageSize: pageSize + 1, // Fetch one extra to check if there's a next page
 			filters,
-			searchColumn: searchColumn?.Data,
+			searchColumn: effectiveSearchColumn?.Data || "",
 			searchTerm,
 		}),
 	);
@@ -281,7 +284,7 @@ export default function DocumentTable({
 					setSearchTerm={setSearchTerm}
 					setColumn={setSearchColumn}
 					searchCols={searchableCols || []}
-					selectedColumn={searchColumn}
+					selectedColumn={effectiveSearchColumn}
 				/>
 				{filterLogic?.map((filter) => (
 					<filter.FilterComponent

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

@@ -39,7 +39,13 @@ export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
 	return (
 		<Box sx={{ width: "100%", minHeight: "70vh" }}>
 			<TabContext value={value}>
-				<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+				<Box
+					sx={{
+						borderBottom: 1,
+						borderColor: "divider",
+						"@media print": { display: "none" },
+					}}
+				>
 					<TabList onChange={handleChange}>
 						{resources?.map((resource, i) => (
 							<Tab
@@ -62,6 +68,21 @@ export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
 								pageSize={pageSize}
 								setPageSize={setPageSize}
 							/>
+							{/* CHILD TABLE */}
+							{resource.children?.length ? (
+								<Box mt={6}>
+									{resource.children.map((child, idx) => (
+										<Box key={child.name + String(idx)} mt={4}>
+											<Table
+												viewConfigQuery={viewConfigQuery}
+												resource={child}
+												pageSize={pageSize}
+												setPageSize={setPageSize}
+											/>
+										</Box>
+									))}
+								</Box>
+							) : null}
 						</TabPanel>
 					</Box>
 				))}

package/src/features/table/types/schemas.ts

@@ -94,4 +94,7 @@ export interface Resource {
 	// Actions and Bulk Actions
 	actions?: Record<string, UIAction>;
 	bulkActions?: Record<string, UIBulkAction>;
+
+	// Children resources for nested tables
+	children?: Resource[];
 }