@evenicanpm/portal-table-ui 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -41,11 +41,11 @@
 	},
 	"dependencies": {
 		"@arrows/multimethod": "^2.1.0",
-		"@evenicanpm/portal-types-schemas": "^1.6.0",
+		"@evenicanpm/portal-types-schemas": "^1.7.0",
 		"@evenicanpm/ui": "^1.6.0",
 		"@mui/lab": "^7.0.1-beta.19",
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "9b18fe6294cc0e57332ec8703825a609ac7b73b2"
+	"gitHead": "2e25d32705901a4ff2dd43aa420fde931568ad93"
 }

package/src/auth/auth-context.tsx

@@ -1,4 +1,9 @@
-import { createContext, type PropsWithChildren, useContext } from "react";
+import {
+	createContext,
+	type PropsWithChildren,
+	useContext,
+	useMemo,
+} from "react";
 
 // --- 1. Types --- //
 /**
@@ -64,16 +69,17 @@ const PortalAuthProvider = ({
 }: PropsWithChildren<AuthProviderProps>) => {
 	const isAuthenticated = !!session?.email;
 
-	const authValue = {
-		isAuthenticated,
-		session,
-		logout,
-	};
+	const authValue = useMemo(
+		() => ({
+			isAuthenticated,
+			session,
+			logout,
+		}),
+		[isAuthenticated, session, logout],
+	);
 
 	return (
-		<AuthContext.Provider value={{ ...authValue }}>
-			{children}
-		</AuthContext.Provider>
+		<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>
 	);
 };
 

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

@@ -0,0 +1,77 @@
+import { Badge, Button, CircularProgress, IconButton } from "@mui/material";
+import { useMutation } from "@tanstack/react-query";
+import type { Row } from "src/features/table/types/queries";
+import type { UIBulkAction } from "src/features/table/types/schemas";
+
+interface BulkActionButtonProps {
+	action: UIBulkAction;
+	resourceName: string;
+	selectedIds: (string | number)[];
+	clearSelection: () => void;
+	selectedRows: Row[];
+}
+export function BulkActionButton({
+	action,
+	resourceName,
+	selectedIds,
+	clearSelection,
+	selectedRows,
+}: BulkActionButtonProps) {
+	const mutationOptions = action.mutation({
+		resourceName,
+		selectedIds,
+	});
+
+	const allowed = !action.isAllowed || action.isAllowed(selectedRows);
+	const { mutate, isPending } = useMutation(mutationOptions);
+
+	const handleClick = () => {
+		mutate(undefined, {
+			onSuccess: () => {
+				clearSelection();
+			},
+		});
+	};
+
+	const Icon = action.icon;
+
+	if (Icon) {
+		return (
+			<IconButton
+				size="small"
+				onClick={handleClick}
+				disabled={isPending || selectedIds.length === 0 || !allowed}
+				sx={{
+					border: 1,
+					borderRadius: 1,
+					paddingInline: 2,
+					minHeight: "fit-content",
+				}}
+			>
+				{isPending ? (
+					<CircularProgress size={26} />
+				) : (
+					<Badge badgeContent={selectedIds.length} color="primary">
+						<Icon />
+					</Badge>
+				)}
+			</IconButton>
+		);
+	}
+
+	return (
+		<Button
+			variant="contained"
+			onClick={handleClick}
+			size="large"
+			sx={{ textWrap: "nowrap", minHeight: "fit-content" }}
+			disabled={isPending || selectedIds.length === 0 || !allowed}
+		>
+			{isPending ? (
+				<CircularProgress size={22} />
+			) : (
+				`${action.label} (${selectedIds.length})`
+			)}
+		</Button>
+	);
+}

package/src/features/table/components/dashboard/table/data-mask-map.ts

@@ -1,6 +1,6 @@
 "use client";
-import * as Table from "../../../types/";
 import { format } from "date-fns";
+import type * as Table from "../../../types/";
 
 export const dataMaskMap: Table.Handlers.DataMaskMap = {
 	// DATE TIME HAS SPECIFIC MASK HANDLING

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

@@ -11,6 +11,7 @@ import type { StatusColorMap, StatusTextMap } from "../../../../types/schemas";
 import { StatusPill } from "../status-pill";
 import { DetailsRowLabel } from "./label";
 import { DetailsDownloads, DetailsPrimitive, DetailsTable } from "./rows";
+import { detailsTemplateRegistry } from "./templates/template-registry";
 
 interface DetailsProps {
 	/** What do we do when use clicks back button? */
@@ -18,7 +19,7 @@ interface DetailsProps {
 	/** What is the id field name */
 	id: string | number;
 	/** The actual pojo of data from the API */
-	documentData: Types.Queries.Row;
+	documentData: Types.Queries.Row | unknown;
 	/* the label of the document type ie 'INVOICES' */
 	documentTypeLabel: string;
 	/** Special instructions for how to render certain properties */
@@ -31,6 +32,8 @@ interface DetailsProps {
 	statusColorMap: StatusColorMap;
 	/** */
 	statusTextMap: StatusTextMap;
+	template?: string;
+	loading?: boolean;
 }
 
 /**
@@ -45,61 +48,79 @@ const Details = ({
 	dataMaskMap,
 	statusColorMap,
 	statusTextMap,
+	template,
+	loading = false,
 }: DetailsProps) => {
+	// Resolve the template component once — undefined when the key is absent or
+	// not found in the registry, which gracefully falls back to the generic view.
+	const TemplateComponent = template
+		? detailsTemplateRegistry[template]
+		: undefined;
+
 	const visibleDetails = transformers.getVisibleDetails(columns);
 
-	// Build Primtive Values (string or number)
-	const primtiveItems = visibleDetails?.map((col) => ({
-		key: col?.Data,
-		value: documentData?.[col?.Data],
-		maskFn: resolvers.resolveDataMask(col, dataMaskMap),
-		mask: col?.DataMask,
-		col: col,
-	}));
+	// Pre-compute primitive items only when the generic grid is needed
+	const primitiveItems = TemplateComponent
+		? undefined
+		: visibleDetails?.map((col) => ({
+				key: col.Data,
+				value: (documentData as Types.Queries.Row)?.[col.Data],
+				maskFn: resolvers.resolveDataMask(col, dataMaskMap),
+				mask: col.DataMask,
+				col,
+			}));
 
 	return (
 		<Box>
-			{/* Header */}
 			<Box height={48} sx={{ borderBottom: 1, borderColor: "divider" }}>
 				<FlexBox
 					alignItems="center"
 					justifyContent="space-between"
 					mb={2}
-					height={"100%"}
+					height="100%"
 				>
 					<Button onClick={handleBack} startIcon={<ArrowBackIcon />}>
 						{documentTypeLabel}
 					</Button>
-					<H6 color={"grey.800"}>
+					<H6 color="grey.800">
 						{documentTypeLabel}-{id}
 					</H6>
 					<Subtitle>DETAILS</Subtitle>
 				</FlexBox>
 			</Box>
 
-			<Grid container spacing={2} sx={{ mt: 2 }}>
-				{primtiveItems?.map((col) => {
-					const maskedValue = col.maskFn(col?.value, col?.mask);
-					const Component = getRowComponent(maskedValue, col?.key);
-					const sx = getRowLayout(maskedValue, col?.key);
-
-					return (
-						<Grid key={col?.key} {...sx}>
-							<DetailsRowLabel label={col?.col?.Label} />
-							<Component
-								key={col?.key}
-								value={maskedValue}
-								label={col?.key}
-								column={col?.col}
-								dataMaskMap={dataMaskMap}
-								statusColorMap={statusColorMap}
-								statusTextMap={statusTextMap}
-								status={col?.value}
-							/>
-						</Grid>
-					);
-				})}
-			</Grid>
+			<Box mt={2}>
+				{TemplateComponent ? (
+					<TemplateComponent
+						data={documentData}
+						statusColorMap={statusColorMap}
+						statusTextMap={statusTextMap}
+						loading={loading}
+					/>
+				) : (
+					<Grid container spacing={2}>
+						{primitiveItems?.map((col) => {
+							const maskedValue = col.maskFn(col.value, col.mask);
+							const Component = getRowComponent(maskedValue, col.key);
+							const sx = getRowLayout(maskedValue, col.key);
+							return (
+								<Grid key={col.key} {...sx}>
+									<DetailsRowLabel label={col.col.Label} />
+									<Component
+										value={maskedValue}
+										label={col.key}
+										column={col.col}
+										dataMaskMap={dataMaskMap}
+										statusColorMap={statusColorMap}
+										statusTextMap={statusTextMap}
+										status={col.value}
+									/>
+								</Grid>
+							);
+						})}
+					</Grid>
+				)}
+			</Box>
 		</Box>
 	);
 };

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

@@ -2,7 +2,6 @@ import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import { Button, Stack } from "@mui/material";
 
 interface Props {
-	label: string;
 	value: string[];
 }
 

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

@@ -3,7 +3,6 @@
 import { Box } from "@mui/material";
 
 interface Props {
-	label: string;
 	value: string | number;
 }
 

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

@@ -15,7 +15,6 @@ import type { DataMaskMap } from "../../../../../types/handlers";
 interface Props {
 	column: Column;
 	value: Record<string, string>[];
-	label: string;
 	dataMaskMap: DataMaskMap;
 }