@evenicanpm/portal-table-ui 2.4.2 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evenicanpm/portal-table-ui",
-  "version": "2.4.2",
+  "version": "2.5.1",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -39,7 +39,7 @@
     "@mui/lab": "^7.0.1-beta.19",
     "date-fns": "^4.1.0",
     "zod": "^4.4.3",
-    "@evenicanpm/ui": "2.4.2"
+    "@evenicanpm/ui": "2.5.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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

@@ -45,7 +45,7 @@ export function BulkActionButton({
 			<IconButton
 				size="small"
 				onClick={handleClick}
-				disabled={isPending || selectedIds.length === 0 || !allowed}
+				disabled={isPending || !allowed}
 				sx={{
 					border: 1,
 					borderRadius: 1,
@@ -70,7 +70,7 @@ export function BulkActionButton({
 			onClick={handleClick}
 			size="large"
 			sx={{ textWrap: "nowrap", minHeight: "fit-content" }}
-			disabled={isPending || selectedIds.length === 0 || !allowed}
+			disabled={isPending || !allowed}
 		>
 			{isPending ? (
 				<CircularProgress size={22} />

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

@@ -6,7 +6,6 @@ import { Box, Button } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { resolvers, transformers } from "../../../../logic";
 import type * as Types from "../../../../types";
-import type { Column } from "../../../../types";
 import type { StatusColorMap, StatusTextMap } from "../../../../types/schemas";
 import { StatusPill } from "../status-pill";
 import { DetailsRowLabel } from "./label";
@@ -29,7 +28,7 @@ interface DetailsProps {
 	/** Data mask map */
 	dataMaskMap: Types.Handlers.DataMaskMap;
 	/** Table columns **/
-	columns: Column[];
+	columns: Types.Column[];
 	/** */
 	statusColorMap: StatusColorMap;
 	/** */
@@ -104,7 +103,7 @@ const Details = ({
 							"@media print": { display: "inline-block" },
 						}}
 					>
-						{documentTypeLabel.slice(0, documentTypeLabel.length - 1)} #{id}
+						{documentTypeLabel.slice(0, -1)} #{id}
 					</H6>
 					<Subtitle sx={{ "@media print": { display: "none" } }}>
 						DETAILS

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

@@ -50,6 +50,10 @@ const formatDate = (dateString?: string): string => {
 	}
 };
 
+function handleOnClick() {
+	globalThis.print();
+}
+
 /**
  * InvoiceType enum type.
  */
@@ -269,10 +273,6 @@ export const InvoiceDetailsTemplate = ({
 		);
 	}
 
-	function handleOnClick() {
-		window.print();
-	}
-
 	return (
 		<Box
 			sx={{

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

@@ -14,6 +14,15 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	minWidth: 140,
 }));
 
+const headerSkeletonKeys = [
+	"header-skeleton-1",
+	"header-skeleton-2",
+	"header-skeleton-3",
+	"header-skeleton-4",
+	"header-skeleton-5",
+	"header-skeleton-6",
+] as const;
+
 interface TableHeaderProps {
 	hasActions: boolean;
 	columns: (Column & { ColumnOrder: number })[] | undefined;
@@ -35,7 +44,7 @@ export default function TableHeader({
 	selectAllChecked,
 	selectAllIndeterminate,
 	onToggleAll,
-}: TableHeaderProps) {
+}: Readonly<TableHeaderProps>) {
 	if (loading) {
 		return (
 			<TableHead>
@@ -48,8 +57,8 @@ export default function TableHeader({
 							sx={{ bgcolor: "rgba(255,255,255,0.1)" }}
 						/>
 					</StyledTableCell>
-					{Array.from({ length: 6 })?.map((_col, i) => (
-						<StyledTableCell key={String(i)}>
+					{headerSkeletonKeys.map((key) => (
+						<StyledTableCell key={key}>
 							<Skeleton
 								variant="rounded"
 								width={100}

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

@@ -12,7 +12,7 @@ export function ActionButton({
 	action,
 	resourceName,
 	docId,
-}: ActionButtonProps) {
+}: Readonly<ActionButtonProps>) {
 	const { mutate, isPending } = useMutation(
 		action.mutation({
 			resourceName,
@@ -30,9 +30,11 @@ export function ActionButton({
 
 	if (action.icon) {
 		const Icon = action.icon;
+		const iconContent = isPending ? <CircularProgress size={26} /> : <Icon />;
+
 		return (
 			<IconButton size="small" onClick={handleClick} disabled={isPending}>
-				{isPending ? <CircularProgress size={26} /> : Icon ? <Icon /> : null}
+				{iconContent}
 			</IconButton>
 		);
 	}

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

@@ -54,7 +54,7 @@ export default function DataTableRow({
 	isSelected,
 	onToggleSelected,
 	resourceName,
-}: DocumentTableProps) {
+}: Readonly<DocumentTableProps>) {
 	const visibleActions = actions.filter(
 		(a) => !a.isEnabled || a.isEnabled(row),
 	);
@@ -80,16 +80,12 @@ export default function DataTableRow({
 				/>
 			</TableCell>
 
-			{columnLogic?.map((col, i) => {
+			{columnLogic?.map((col) => {
 				// --- Cell Render --- //
 				const rawValue = row[col.id];
 				const maskedValue = col.maskFn(rawValue, col?.mask);
 				const cellValue = col.cellFn(maskedValue);
-				return (
-					<StyledTableCell key={rawValue + String(i)}>
-						{cellValue}
-					</StyledTableCell>
-				);
+				return <StyledTableCell key={col?.id}>{cellValue}</StyledTableCell>;
 			})}
 			{visibleActions.length > 0 && (
 				<TableCell

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

@@ -9,7 +9,7 @@ import type React from "react";
 import { useState } from "react";
 import { resolvers, transformers } from "../../../logic";
 import type * as Types from "../../../types";
-import type { Column } from "../../../types";
+import type { StatusColorMap, StatusTextMap } from "../../../types/schemas";
 import { BulkActionButton } from "./bulk-action-button";
 import { dataMaskMap as dataMaskMapLocal } from "./data-mask-map";
 import { Details } from "./details";
@@ -24,6 +24,254 @@ import { useSelectRows } from "./use-select-rows";
 
 type Id = string | number;
 
+type ColumnLogic =
+	| {
+			id: string;
+			mask: string | undefined;
+			maskFn: (value: unknown, mask?: string) => string | number | string[];
+			cellFn: (value: string | number | string[]) => React.ReactNode;
+	  }[]
+	| undefined;
+
+type StatusCellProps = {
+	value: string | number | string[];
+	statusColorMap: StatusColorMap;
+	statusTextMap: StatusTextMap;
+};
+
+function StatusCell({
+	value,
+	statusColorMap,
+	statusTextMap,
+}: Readonly<StatusCellProps>) {
+	return (
+		<StatusPill
+			status={value}
+			statusColorMap={statusColorMap}
+			statusTextMap={statusTextMap}
+		/>
+	);
+}
+
+function createStatusCellRenderer(
+	statusColorMap: StatusColorMap,
+	statusTextMap: StatusTextMap,
+) {
+	return (value: string | number | string[]) => (
+		<StatusCell
+			value={value}
+			statusColorMap={statusColorMap}
+			statusTextMap={statusTextMap}
+		/>
+	);
+}
+
+function getRowId(row: Types.Queries.Row, field: string): Id | null {
+	const v = row?.[field];
+	if (typeof v === "string" || typeof v === "number") return v;
+	return null;
+}
+
+type DocumentTableBodyProps = {
+	noResults: boolean;
+	rowsPending: boolean;
+	colSpan: number;
+	resolvedNoResults: React.ReactNode;
+	pageSize: number;
+	rows: Types.Queries.TableRows | undefined;
+	idField: string;
+	columnLogic: ColumnLogic;
+	resolvedActions: Types.Schemas.UIAction[];
+	selectedIds: Set<Id>;
+	onSelectDocument: React.Dispatch<
+		React.SetStateAction<string | number | null>
+	>;
+	onToggleSelected: (id: Id) => void;
+	resourceName: string;
+};
+
+function DocumentTableBody({
+	noResults,
+	rowsPending,
+	colSpan,
+	resolvedNoResults,
+	pageSize,
+	rows,
+	idField,
+	columnLogic,
+	resolvedActions,
+	selectedIds,
+	onSelectDocument,
+	onToggleSelected,
+	resourceName,
+}: Readonly<DocumentTableBodyProps>) {
+	if (noResults) {
+		return (
+			<TableRow>
+				<TableCell
+					colSpan={colSpan || 1}
+					align="center"
+					sx={{ py: 6, color: "text.secondary" }}
+				>
+					{resolvedNoResults}
+				</TableCell>
+			</TableRow>
+		);
+	}
+
+	if (rowsPending) {
+		return <TableRowSkeleton pageSize={pageSize} colSpan={colSpan} />;
+	}
+
+	return (
+		<>
+			{rows?.data?.map((row) => {
+				const id = getRowId(row, idField);
+				if (id === null) return null;
+
+				return (
+					<DataTableRow
+						key={id}
+						columnLogic={columnLogic}
+						row={row}
+						handleClick={onSelectDocument}
+						id={id}
+						actions={resolvedActions}
+						isSelected={selectedIds.has(id)}
+						onToggleSelected={onToggleSelected}
+						resourceName={resourceName}
+					/>
+				);
+			})}
+		</>
+	);
+}
+
+function resolveDetailsQueryOptions(
+	resource: Types.Schemas.Resource,
+	hasTemplateSupport: boolean,
+	selectedDocument: string | number | null,
+) {
+	if (hasTemplateSupport && selectedDocument && resource.detailsQueryFn) {
+		return resource.detailsQueryFn(String(selectedDocument));
+	}
+
+	return {
+		queryKey: [],
+		queryFn: async () => undefined,
+		enabled: false,
+	};
+}
+
+type DocumentTableDetailsViewProps = {
+	selectedDocument: string | number;
+	rows: Types.Queries.TableRows | undefined;
+	idField: string;
+	hasTemplateSupport: boolean;
+	detailsData: unknown;
+	detailsPending: boolean;
+	label: string;
+	columns: Types.Column[];
+	resolvedDataMaskMap: Types.Handlers.DataMaskMap;
+	statusColorMap: StatusColorMap;
+	statusTextMap: StatusTextMap;
+	detailsRenderMap: Types.Handlers.DetailsRenderMap | undefined;
+	detailsTemplate: Types.Schemas.Resource["detailsTemplate"];
+	resolvedActions: Types.Schemas.UIAction[];
+	resourceName: string;
+	onBack: () => void;
+};
+
+function DocumentTableDetailsView({
+	selectedDocument,
+	rows,
+	idField,
+	hasTemplateSupport,
+	detailsData,
+	detailsPending,
+	label,
+	columns,
+	resolvedDataMaskMap,
+	statusColorMap,
+	statusTextMap,
+	detailsRenderMap,
+	detailsTemplate,
+	resolvedActions,
+	resourceName,
+	onBack,
+}: Readonly<DocumentTableDetailsViewProps>) {
+	const rowSnapshot =
+		rows?.data.find((doc) => doc?.[idField] === selectedDocument) ?? {};
+
+	return (
+		<Details
+			documentTypeLabel={label}
+			id={selectedDocument}
+			documentData={
+				hasTemplateSupport ? (detailsData ?? rowSnapshot) : undefined
+			}
+			row={rowSnapshot}
+			handleBack={onBack}
+			columns={columns}
+			dataMaskMap={resolvedDataMaskMap}
+			statusColorMap={statusColorMap}
+			statusTextMap={statusTextMap}
+			detailsRenderMap={detailsRenderMap}
+			template={hasTemplateSupport ? detailsTemplate : undefined}
+			loading={hasTemplateSupport ? detailsPending : false}
+			actions={resolvedActions}
+			resourceName={resourceName}
+		/>
+	);
+}
+
+type BulkActionButtonsProps = {
+	hasBulkActions: boolean;
+	resolvedBulkActions: Types.Schemas.UIBulkAction[];
+	rows: Types.Queries.TableRows | undefined;
+	idField: string;
+	selectedIds: Set<Id>;
+	resourceName: string;
+	clearSelection: () => void;
+};
+
+function BulkActionButtons({
+	hasBulkActions,
+	resolvedBulkActions,
+	rows,
+	idField,
+	selectedIds,
+	resourceName,
+	clearSelection,
+}: Readonly<BulkActionButtonsProps>) {
+	if (!hasBulkActions) {
+		return null;
+	}
+
+	return (
+		<>
+			{resolvedBulkActions.map((action) => {
+				const selectedRows =
+					rows?.data?.filter((row) => {
+						const id = getRowId(row, idField);
+						return id !== null && selectedIds.has(id);
+					}) ?? [];
+
+				return (
+					<BulkActionButton
+						key={action.label}
+						action={action}
+						resourceName={resourceName}
+						selectedIds={Array.from(selectedIds)}
+						selectedRows={selectedRows}
+						clearSelection={clearSelection}
+					/>
+				);
+			})}
+		</>
+	);
+}
+
 export type DocumentTableProps = {
 	resource: Types.Schemas.Resource;
 	pageSize: number;
@@ -58,9 +306,9 @@ export default function DocumentTable({
 	>(null);
 
 	const selectedDocument =
-		selectedDocumentProp !== undefined
-			? selectedDocumentProp
-			: selectedDocumentLocal;
+		selectedDocumentProp === undefined
+			? selectedDocumentLocal
+			: selectedDocumentProp;
 	const setSelectedDocument =
 		setSelectedDocumentProp ?? setSelectedDocumentLocal;
 	const [filters, setFilters] = useState<Record<string, string>>({});
@@ -98,13 +346,7 @@ export default function DocumentTable({
 
 	const cellRenderMapDefaults = {
 		...columnRenderMap,
-		Status: (value: string | number | string[]) => (
-			<StatusPill
-				status={value}
-				statusColorMap={statusColorMap}
-				statusTextMap={statusTextMap}
-			/>
-		),
+		Status: createStatusCellRenderer(statusColorMap, statusTextMap),
 	};
 
 	// --- State Handlers --- //
@@ -153,9 +395,9 @@ export default function DocumentTable({
 		enabled: !!viewConfigQuery && !viewConfig,
 	});
 
-	const config = viewConfig ?? fetchedConfig;
+	const config: Types.ViewConfig | undefined = viewConfig ?? fetchedConfig;
 
-	const configPending = !viewConfig ? fetchedConfigPending : false;
+	const configPending = viewConfig ? false : fetchedConfigPending;
 
 	const columns = config?.Columns ?? [];
 
@@ -165,8 +407,8 @@ export default function DocumentTable({
 	const visibleCols = transformers.getVisibleColumns(columns);
 
 	// Depends on searchableCols, must be declared after transformer
-	const [searchColumn, setSearchColumn] = useState<Column>(
-		() => searchableCols?.[0] as Column,
+	const [searchColumn, setSearchColumn] = useState<Types.Column>(
+		() => searchableCols?.[0] as Types.Column,
 	);
 
 	// always derive a safe usable column
@@ -199,16 +441,10 @@ export default function DocumentTable({
 		cellFn: resolvers.resolveCellUI(col, cellRenderMapDefaults),
 	}));
 
-	const getRowId = (row: Types.Queries.Row, field: string): Id | null => {
-		const v = row?.[field];
-		if (typeof v === "string" || typeof v === "number") return v;
-		return null;
-	};
+	const getRowIdForField = (row: Types.Queries.Row) => getRowId(row, idField);
 
 	const currentPageIds: Id[] =
-		rows?.data
-			?.map((r) => getRowId(r, idField))
-			.filter((v): v is Id => v !== null) ?? [];
+		rows?.data?.map(getRowIdForField).filter((v): v is Id => v !== null) ?? [];
 
 	const {
 		selectedIds,
@@ -223,13 +459,7 @@ export default function DocumentTable({
 		!!resource.detailsQueryFn && !!resource.detailsTemplate;
 
 	const { data: detailsData, isPending: detailsPending } = useQuery(
-		hasTemplateSupport && selectedDocument && resource.detailsQueryFn
-			? resource.detailsQueryFn(String(selectedDocument))
-			: {
-					queryKey: [],
-					queryFn: async () => undefined,
-					enabled: false,
-				},
+		resolveDetailsQueryOptions(resource, hasTemplateSupport, selectedDocument),
 	);
 
 	const resolvedActions = resolvers.resolveActions(
@@ -255,29 +485,24 @@ export default function DocumentTable({
 
 	// --- Render --- //
 	if (selectedDocument) {
-		const rowSnapshot =
-			rows?.data.find((doc) => doc?.[idField] === selectedDocument) ?? {};
-
-		const shouldUseDetailsData = hasTemplateSupport;
-
 		return (
-			<Details
-				documentTypeLabel={label}
-				id={selectedDocument}
-				documentData={
-					shouldUseDetailsData ? (detailsData ?? rowSnapshot) : undefined
-				}
-				row={rowSnapshot}
-				handleBack={handleBack}
+			<DocumentTableDetailsView
+				selectedDocument={selectedDocument}
+				rows={rows}
+				idField={idField}
+				hasTemplateSupport={hasTemplateSupport}
+				detailsData={detailsData}
+				detailsPending={detailsPending}
+				label={label}
 				columns={columns}
-				dataMaskMap={resolvedDataMaskMap}
+				resolvedDataMaskMap={resolvedDataMaskMap}
 				statusColorMap={statusColorMap}
 				statusTextMap={statusTextMap}
 				detailsRenderMap={detailsRenderMap}
-				template={hasTemplateSupport ? resource.detailsTemplate : undefined}
-				loading={hasTemplateSupport ? detailsPending : false}
-				actions={resolvedActions}
+				detailsTemplate={resource.detailsTemplate}
+				resolvedActions={resolvedActions}
 				resourceName={resource.name}
+				onBack={handleBack}
 			/>
 		);
 	}
@@ -316,25 +541,15 @@ export default function DocumentTable({
 					/>
 				))}
 
-				{hasBulkActions &&
-					resolvedBulkActions.map((action) => {
-						const selectedRows =
-							rows?.data?.filter((row) => {
-								const id = getRowId(row, idField);
-								return id !== null && selectedIds.has(id);
-							}) ?? [];
-
-						return (
-							<BulkActionButton
-								key={action.label}
-								action={action}
-								resourceName={resource.name}
-								selectedIds={Array.from(selectedIds)}
-								selectedRows={selectedRows}
-								clearSelection={clearSelection}
-							/>
-						);
-					})}
+				<BulkActionButtons
+					hasBulkActions={hasBulkActions}
+					resolvedBulkActions={resolvedBulkActions}
+					rows={rows}
+					idField={idField}
+					selectedIds={selectedIds}
+					resourceName={resource.name}
+					clearSelection={clearSelection}
+				/>
 			</FlexBox>
 			<TableContainer className="invoice-list-table-container">
 				<Table
@@ -352,38 +567,21 @@ export default function DocumentTable({
 					/>
 
 					<TableBody>
-						{noResults ? (
-							<TableRow>
-								<TableCell
-									colSpan={colSpan || 1}
-									align="center"
-									sx={{ py: 6, color: "text.secondary" }}
-								>
-									{resolvedNoResults}
-								</TableCell>
-							</TableRow>
-						) : rowsPending ? (
-							<TableRowSkeleton pageSize={pageSize} colSpan={colSpan} />
-						) : (
-							rows?.data?.map((row) => {
-								const id = getRowId(row, idField);
-								if (id === null) return null;
-
-								return (
-									<DataTableRow
-										key={id}
-										columnLogic={columnLogic}
-										row={row}
-										handleClick={setSelectedDocument}
-										id={id}
-										actions={resolvedActions}
-										isSelected={selectedIds.has(id)}
-										onToggleSelected={(docId) => toggleOne(docId)}
-										resourceName={resource.name}
-									/>
-								);
-							})
-						)}
+						<DocumentTableBody
+							noResults={noResults}
+							rowsPending={rowsPending}
+							colSpan={colSpan}
+							resolvedNoResults={resolvedNoResults}
+							pageSize={pageSize}
+							rows={rows}
+							idField={idField}
+							columnLogic={columnLogic}
+							resolvedActions={resolvedActions}
+							selectedIds={selectedIds}
+							onSelectDocument={setSelectedDocument}
+							onToggleSelected={toggleOne}
+							resourceName={resource.name}
+						/>
 					</TableBody>
 				</Table>
 			</TableContainer>

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

@@ -6,15 +6,14 @@ import type { ViewConfig } from "../types";
  *
  */
 
+export type RowValue = string | number | string[] | Record<string, string>[];
+
 /**
  *
  * A single row in the data table response object.
  *
  */
-export type Row = Record<
-	string,
-	string | number | string[] | Record<string, string>[] | unknown
->;
+export type Row = Record<string, RowValue>;
 
 /**
  *