@evenicanpm/portal-table-ui 2.1.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "2.1.0",
+	"version": "2.2.2",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -47,5 +47,5 @@
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "8227589295d3d63586f9b26fff8d643b070989b3"
+	"gitHead": "eb81763cdb511681ffaf1da5140e957afa149816"
 }

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

@@ -2,6 +2,7 @@
 import FlagIcon from "@mui/icons-material/Flag";
 import {
 	Box,
+	Button,
 	Card,
 	Divider,
 	Paper,
@@ -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,26 @@ export const InvoiceDetailsTemplate = ({
 							/>
 						);
 					})}
+					<Button
+						onClick={handleOnClick}
+						variant="outlined"
+						size="small"
+						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 +321,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 +441,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 +463,7 @@ export const InvoiceDetailsTemplate = ({
 													fontWeight: 600,
 													backgroundColor: theme.palette.background.paper,
 												}}
+												align={col.aligned}
 											>
 												<Typography variant="body2" fontWeight={600}>
 													{col.label}
@@ -435,29 +487,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 +527,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.tsx

@@ -32,6 +32,11 @@ export type DocumentTableProps = {
 		queryKey: QueryKey;
 		queryFn: () => Promise<Types.Queries.TableConfig>;
 	};
+
+	selectedDocument?: string | number | null;
+	setSelectedDocument?: React.Dispatch<
+		React.SetStateAction<string | number | null>
+	>;
 };
 
 /**
@@ -44,11 +49,20 @@ export default function DocumentTable({
 	pageSize,
 	setPageSize,
 	viewConfigQuery,
+	selectedDocument: selectedDocumentProp,
+	setSelectedDocument: setSelectedDocumentProp,
 }: Readonly<DocumentTableProps>) {
 	const [page, setPage] = useState(0);
-	const [selectedDocument, setSelectedDocument] = useState<
+	const [selectedDocumentLocal, setSelectedDocumentLocal] = useState<
 		string | number | null
 	>(null);
+
+	const selectedDocument =
+		selectedDocumentProp !== undefined
+			? selectedDocumentProp
+			: selectedDocumentLocal;
+	const setSelectedDocument =
+		setSelectedDocumentProp ?? setSelectedDocumentLocal;
 	const [filters, setFilters] = useState<Record<string, string>>({});
 	const [searchTerm, setSearchTerm] = useState("");
 

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

@@ -19,6 +19,11 @@ export interface TableProps {
 		queryFn: () => Promise<Types.Queries.TableConfig>;
 	};
 	resources: Types.Schemas.Resource[];
+
+	selectedDocument?: string | number | null;
+	setSelectedDocument?: React.Dispatch<
+		React.SetStateAction<string | number | null>
+	>;
 }
 
 /**
@@ -28,7 +33,12 @@ export interface TableProps {
  *
  * @params props
  */
-export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
+export const TableDashboard = ({
+	resources,
+	viewConfigQuery,
+	selectedDocument,
+	setSelectedDocument,
+}: TableProps) => {
 	const [value, setValue] = useState(resources[0]?.name);
 	const [pageSize, setPageSize] = useState(5); // better if this is global to not reset when switching tables
 
@@ -39,7 +49,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
@@ -61,6 +77,8 @@ export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
 								resource={resource}
 								pageSize={pageSize}
 								setPageSize={setPageSize}
+								selectedDocument={selectedDocument}
+								setSelectedDocument={setSelectedDocument}
 							/>
 							{/* CHILD TABLE */}
 							{resource.children?.length ? (