@evenicanpm/portal-table-ui 2.0.0 → 2.1.0

package/package.json

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

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/data-mask-map.ts

@@ -9,7 +9,7 @@ export const dataMaskMap: Table.Handlers.DataMaskMap = {
 
 		const date = new Date(value);
 
-		if (isNaN(date.getTime())) {
+		if (Number.isNaN(date.getTime())) {
 			console.warn("Invalid datetime value:", value);
 			return "";
 		}
@@ -21,7 +21,7 @@ export const dataMaskMap: Table.Handlers.DataMaskMap = {
 
 		const date = new Date(value);
 
-		if (isNaN(date.getTime())) {
+		if (Number.isNaN(date.getTime())) {
 			console.warn("Invalid date value:", value);
 			return "";
 		}

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

@@ -19,7 +19,9 @@ interface DetailsProps {
 	/** What is the id field name */
 	id: string | number;
 	/** The actual pojo of data from the API */
-	documentData: Types.Queries.Row | unknown;
+	documentData?: unknown;
+	/** The row data for the document */
+	row: Types.Queries.Row;
 	/* the label of the document type ie 'INVOICES' */
 	documentTypeLabel: string;
 	/** Special instructions for how to render certain properties */
@@ -46,6 +48,7 @@ const Details = ({
 	id,
 	documentTypeLabel,
 	documentData,
+	row,
 	handleBack,
 	columns,
 	dataMaskMap,
@@ -69,7 +72,7 @@ const Details = ({
 		? undefined
 		: visibleDetails?.map((col) => ({
 				key: col.Data,
-				value: (documentData as Types.Queries.Row)?.[col.Data],
+				value: row?.[col.Data], // use row instead of documentData
 				maskFn: resolvers.resolveDataMask(col, dataMaskMap),
 				mask: col.DataMask,
 				col,
@@ -98,6 +101,7 @@ const Details = ({
 				{TemplateComponent ? (
 					<TemplateComponent
 						data={documentData}
+						row={row}
 						statusColorMap={statusColorMap}
 						statusTextMap={statusTextMap}
 						loading={loading}

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

@@ -76,8 +76,13 @@ interface InvoiceData {
 	DueDate?: string;
 	Notes?: string;
 	Id: string;
+	OrderedByCustomerName?: string;
 }
 
+const detailSkeletonKeys = ["from", "bill-to", "invoice-date", "due-date"];
+const tableSkeletonRowKeys = ["line-1", "line-2", "line-3", "line-4"];
+const totalSkeletonKeys = ["subtotal", "tax", "total"];
+
 const isDataEmpty = (data: InvoiceData | null | undefined): boolean => {
 	if (!data) return true;
 	const hasNoLineItems =
@@ -90,6 +95,7 @@ const isDataEmpty = (data: InvoiceData | null | undefined): boolean => {
 export const InvoiceDetailsTemplate = ({
 	data,
 	statusColorMap,
+	row,
 	statusTextMap,
 	loading = false,
 	actions,
@@ -107,6 +113,7 @@ export const InvoiceDetailsTemplate = ({
 		return (
 			<Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
 				<Card
+					variant="outlined"
 					sx={{ p: { xs: 3, sm: 6 }, borderRadius: 3, textAlign: "center" }}
 				>
 					<Typography variant="h6" color="text.secondary" gutterBottom>
@@ -147,10 +154,10 @@ export const InvoiceDetailsTemplate = ({
 					<Skeleton variant="rectangular" width={100} height={32} />
 					<Skeleton variant="rectangular" width={120} height={40} />
 				</Box>
-				<Card sx={{ p: { xs: 2, sm: 4 }, borderRadius: 3 }}>
+				<Card variant="outlined" sx={{ p: { xs: 2, sm: 4 }, borderRadius: 3 }}>
 					<Grid2 container spacing={{ xs: 2, sm: 4 }}>
-						{Array.from({ length: 4 }).map((_, i) => (
-							<Grid2 size={{ xs: 12, sm: 6 }} key={`skeleton-${i}`}>
+						{detailSkeletonKeys.map((key) => (
+							<Grid2 size={{ xs: 12, sm: 6 }} key={key}>
 								<Skeleton width="40%" height={20} />
 								<Skeleton width="80%" />
 								<Skeleton width="60%" />
@@ -178,8 +185,8 @@ export const InvoiceDetailsTemplate = ({
 								</TableRow>
 							</TableHead>
 							<TableBody>
-								{Array.from({ length: 4 }).map((_, idx) => (
-									<TableRow key={`skeleton-${idx}`}>
+								{tableSkeletonRowKeys.map((key) => (
+									<TableRow key={key}>
 										{columns.map((col) => (
 											<TableCell
 												key={col.label}
@@ -196,9 +203,9 @@ export const InvoiceDetailsTemplate = ({
 
 					<Box mt={3} display="flex" justifyContent="flex-end">
 						<Box width={{ xs: "100%", sm: 300 }}>
-							{Array.from({ length: 3 }).map((_, i) => (
+							{totalSkeletonKeys.map((key) => (
 								<Box
-									key={`skeleton-${i}`}
+									key={key}
 									display="flex"
 									justifyContent="space-between"
 									mb={1}
@@ -234,8 +241,7 @@ export const InvoiceDetailsTemplate = ({
 				)}
 				<Box display="flex" gap={2} alignItems="center">
 					{actions?.map((action) => {
-						const isPaid = invoice.Status === 3;
-						const enabled = !isPaid && action.isEnabled;
+						const enabled = !action.isEnabled || action.isEnabled(row);
 						if (!enabled) {
 							return (
 								<span
@@ -262,7 +268,10 @@ export const InvoiceDetailsTemplate = ({
 
 			{/* Notes Section */}
 			{invoice?.Notes && (
-				<Card sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3, mb: 3 }}>
+				<Card
+					variant="outlined"
+					sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3, mb: 3 }}
+				>
 					<Typography variant="subtitle1" color="text.secondary" mb={1}>
 						Notes
 					</Typography>
@@ -277,16 +286,49 @@ export const InvoiceDetailsTemplate = ({
 			)}
 
 			{/* Main Invoice Card */}
-			<Card sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3 }}>
+			<Card variant="outlined" sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3 }}>
 				{/* Details Section */}
 				{(invoice?.CompanyName ||
 					invoice?.Name ||
 					invoice?.InvoiceDate ||
 					invoice?.DueDate) && (
 					<>
-						<Typography variant="subtitle1" color="text.secondary" mb={2}>
-							Details
-						</Typography>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: { xs: "column", sm: "row" },
+								gap: 1,
+								justifyContent: "space-between",
+								alignItems: { xs: "flex-start", sm: "center" },
+								marginBottom: 2,
+							}}
+						>
+							<Typography variant="subtitle1" color="text.secondary">
+								Details
+							</Typography>
+
+							{invoice.OrderedByCustomerName && (
+								<Box
+									sx={{
+										display: "flex",
+										gap: 1,
+										alignItems: "center",
+										flexWrap: "wrap",
+									}}
+								>
+									<Typography variant="body2" color="text.secondary">
+										Order Placed By:
+									</Typography>
+									<Typography
+										variant="body2"
+										sx={{ wordBreak: "break-all" }}
+										fontWeight={600}
+									>
+										{invoice.OrderedByCustomerName}
+									</Typography>
+								</Box>
+							)}
+						</Box>
 						<Grid2 container spacing={{ xs: 2, sm: 4 }}>
 							{invoice?.CompanyName && (
 								<Grid2 size={{ xs: 12, sm: 6 }}>
@@ -384,9 +426,16 @@ export const InvoiceDetailsTemplate = ({
 										const unitPrice = item.Price ?? 0;
 										const quantity = item.Quantity ?? 0;
 										const lineTotal = item.NetAmount ?? unitPrice * quantity;
+										const itemKey = [
+											item.ItemId ?? "item",
+											productName,
+											quantity,
+											unitPrice,
+											lineTotal,
+										].join("-");
 
 										return (
-											<TableRow key={`${item.ItemId}-${idx}`}>
+											<TableRow key={itemKey}>
 												<TableCell sx={{ width: 60, minWidth: 60 }}>
 													<Typography variant="body2">
 														{item?.ItemId || idx + 1}

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

@@ -8,6 +8,7 @@ import { InvoiceDetailsTemplate } from "./invoice-details";
  */
 export interface DetailsTemplateProps {
 	data: unknown;
+	row: Types.Queries.Row;
 	statusColorMap: Types.Schemas.StatusColorMap;
 	statusTextMap: Types.Schemas.StatusTextMap;
 	loading?: boolean;

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

@@ -5,7 +5,6 @@ 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";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -85,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

@@ -6,8 +6,8 @@ import React from "react";
 interface SearchProps {
 	searchTerm: string;
 	setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-	setColumn: React.Dispatch<React.SetStateAction<string>>;
-	selectedColumn: string;
+	setColumn: React.Dispatch<React.SetStateAction<Column>>;
+	selectedColumn: Column;
 	searchCols: Column[];
 }
 
@@ -78,12 +78,19 @@ const SearchField = React.memo(
 				onChange={(e) => {
 					setSearchTerm(e.target.value);
 				}}
-				placeholder={`Seach by ${selectedColumn}`}
+				placeholder={
+					selectedColumn?.Label
+						? `Search by ${selectedColumn.Label}`
+						: "Select a column to search"
+				}
 				endAdornment={
 					<ColumnSelect
-						selected={selectedColumn}
+						selected={selectedColumn?.Data || ""}
 						searchCols={searchCols}
-						handleChange={setColumn}
+						handleChange={(value) => {
+							const col = searchCols.find((c) => c.Data === value);
+							if (col) setColumn(col);
+						}}
 					/>
 				}
 			/>

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: any;
-			cellFn:
-				| ((
-						value: string | number | string[],
-				  ) => React.ReactElement<
-						any,
-						string | React.JSXElementConstructor<any>
-				  >)
-				| ((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

@@ -1,3 +1,4 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
 import { FlexBox, ResponsiveTablePagination } from "@evenicanpm/ui";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -150,14 +151,28 @@ export default function DocumentTable({
 	const visibleCols = transformers.getVisibleColumns(columns);
 
 	// Depends on searchableCols, must be declared after transformer
-	const [searchColumn, setSearchColumn] = useState(
-		() => searchableCols?.[0]?.Data ?? "Title",
+	const [searchColumn, setSearchColumn] = useState<Column>(
+		() => searchableCols?.[0] as Column,
 	);
 
-	const { data: rows, isPending: rowsPending } = useQuery(
-		resource.rowsQueryFn({ page, pageSize, filters, searchColumn, searchTerm }),
+	// 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: effectiveSearchColumn?.Data || "",
+			searchTerm,
+		}),
 	);
 
+	const hasNextPage = fetchedRows ? fetchedRows.data.length > pageSize : false;
+	const rows: Types.Queries.TableRows | undefined = fetchedRows
+		? { ...fetchedRows, data: fetchedRows.data.slice(0, pageSize) }
+		: undefined;
+
 	// --- Resolver --- //
 	const filterLogic = filterReqs?.map((req) => ({
 		req,
@@ -194,8 +209,8 @@ export default function DocumentTable({
 		!!resource.detailsQueryFn && !!resource.detailsTemplate;
 
 	const { data: detailsData, isPending: detailsPending } = useQuery(
-		hasTemplateSupport && selectedDocument
-			? resource.detailsQueryFn!(String(selectedDocument))
+		hasTemplateSupport && selectedDocument && resource.detailsQueryFn
+			? resource.detailsQueryFn(String(selectedDocument))
 			: {
 					queryKey: [],
 					queryFn: async () => undefined,
@@ -226,14 +241,16 @@ export default function DocumentTable({
 		const rowSnapshot =
 			rows?.data.find((doc) => doc?.[idField] === selectedDocument) ?? {};
 
-		const finalDetailsData =
-			hasTemplateSupport && detailsData ? detailsData : rowSnapshot;
+		const shouldUseDetailsData = hasTemplateSupport;
 
 		return (
 			<Details
 				documentTypeLabel={label}
 				id={selectedDocument}
-				documentData={finalDetailsData}
+				documentData={
+					shouldUseDetailsData ? (detailsData ?? rowSnapshot) : undefined
+				}
+				row={rowSnapshot}
 				handleBack={handleBack}
 				columns={columns}
 				dataMaskMap={resolvedDataMaskMap}
@@ -267,7 +284,7 @@ export default function DocumentTable({
 					setSearchTerm={setSearchTerm}
 					setColumn={setSearchColumn}
 					searchCols={searchableCols || []}
-					selectedColumn={searchColumn}
+					selectedColumn={effectiveSearchColumn}
 				/>
 				{filterLogic?.map((filter) => (
 					<filter.FilterComponent
@@ -357,6 +374,13 @@ export default function DocumentTable({
 				rowsPerPageOptions={[5, 10]}
 				onPageChange={handleChangePage}
 				onRowsPerPageChange={handleChangePageSize}
+				slotProps={{
+					actions: {
+						nextButton: {
+							disabled: !hasNextPage,
+						},
+					},
+				}}
 			/>
 		</>
 	);

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

@@ -62,6 +62,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/logic/resolvers.ts

@@ -66,7 +66,7 @@ export const resolveCellUI = (
 ) => {
 	if (Object.hasOwn(handlers, col.Data)) return handlers?.[col?.Data];
 
-	return (value: string | number) => value;
+	return (value: string | number | string[]) => value;
 };
 
 export function resolveActions(

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

@@ -30,20 +30,28 @@ type BaseAction = {
 	icon?: SvgIconComponent;
 };
 
+type MutationArgs = {
+	resourceName: string;
+	docId: string | number;
+};
+
+type BulkMutationArgs = {
+	resourceName: string;
+	selectedIds: (string | number)[];
+};
+
 export type UIAction = BaseAction & {
 	isEnabled?: (row: Record<string, unknown>) => boolean;
-	mutation: (args: {
-		resourceName: string;
-		docId: string | number;
-	}) => UseMutationOptions<any, any, any, any>;
+	mutation: (
+		args: MutationArgs,
+	) => UseMutationOptions<unknown, unknown, MutationArgs, unknown>;
 };
 
 export type UIBulkAction = BaseAction & {
 	isAllowed?: (rows: Record<string, unknown>[]) => boolean;
-	mutation: (args: {
-		resourceName: string;
-		selectedIds: (string | number)[];
-	}) => UseMutationOptions<any, any, any, any>;
+	mutation: (
+		args: BulkMutationArgs,
+	) => UseMutationOptions<unknown, unknown, BulkMutationArgs, unknown>;
 };
 
 /**
@@ -86,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[];
 }