@evenicanpm/portal-table-ui 2.2.3 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "2.2.3",
+	"version": "2.3.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -36,16 +36,16 @@
 		"@emotion/styled": "^11.11.0",
 		"@mui/icons-material": "^7.3.6",
 		"@mui/material": "^6.1.7",
+		"@tanstack/react-query": "^5.90.11",
 		"@types/react": "^18.3.24",
 		"typescript": "^5.6.3"
 	},
 	"dependencies": {
 		"@arrows/multimethod": "^2.1.0",
-		"@evenicanpm/portal-types-schemas": "^2.0.0",
 		"@evenicanpm/ui": "^2.0.0",
 		"@mui/lab": "^7.0.1-beta.19",
-		"@tanstack/react-query": "^5.90.11",
-		"date-fns": "^4.1.0"
+		"date-fns": "^4.1.0",
+		"zod": "^4.4.3"
 	},
-	"gitHead": "a95683f653c0d36518820f6f69e38009446ee138"
+	"gitHead": "72bf1aeb02a3d96c587706c0d91606698e38ff6a"
 }

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

@@ -1,12 +1,12 @@
 "use client";
 import { method, multi } from "@arrows/multimethod";
-import type { Column } from "@evenicanpm/portal-types-schemas";
 import { FlexBox, H6, Subtitle } from "@evenicanpm/ui";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 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";

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

@@ -1,6 +1,5 @@
 "use client";
 
-import type { Column } from "@evenicanpm/portal-types-schemas";
 import {
 	Table,
 	TableBody,
@@ -10,6 +9,7 @@ import {
 	TableRow,
 } from "@mui/material";
 import { resolvers } from "../../../../../logic";
+import type { Column } from "../../../../../types";
 import type { DataMaskMap } from "../../../../../types/handlers";
 
 interface Props {

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

@@ -55,7 +55,6 @@ interface InvoiceLine {
 	Price?: number;
 	NetAmount?: number;
 	UnitOfMeasure?: string;
-	LineDiscount?: number;
 	DiscountAmount: number;
 	HasDiscount: boolean;
 }
@@ -67,6 +66,7 @@ interface InvoiceData {
 	InvoiceSubtotal?: number;
 	TotalTaxAmount?: number;
 	Amount?: number;
+	AmountBalance?: number;
 	CompanyName?: string;
 	CompanyEmail?: string;
 	CompanyAddress?: string;
@@ -143,10 +143,10 @@ export const InvoiceDetailsTemplate = ({
 	const columns: TableColumn[] = [
 		{ label: "#", width: 60, aligned: "left" },
 		{ label: "Product", width: 200, aligned: "left" },
-		{ label: "Qty", width: 60, aligned: "right" },
+		{ label: "Qty", width: 40, aligned: "right" },
 		{ label: "Unit", width: 60, aligned: "right" },
 		{ label: "Unit Price", width: 120, aligned: "right" },
-		{ label: "Discount", width: 100, aligned: "right" },
+		{ label: "Line Savings", width: 120, aligned: "right" },
 		{ label: "Line Total", width: 120, aligned: "right" },
 		{ label: "", width: 40, aligned: "center" },
 	];
@@ -577,6 +577,25 @@ export const InvoiceDetailsTemplate = ({
 										{formatCurrency(total)}
 									</Typography>
 								</Box>
+
+								{/* Paid and Remaining lines */}
+								{invoice?.Status !== 1 && (
+									<Box display="flex" justifyContent="space-between" mt={1}>
+										<Typography variant="body2">Paid</Typography>
+										<Typography variant="body2">
+											{formatCurrency(total - (invoice?.AmountBalance ?? 0))}
+										</Typography>
+									</Box>
+								)}
+
+								{invoice?.Status !== 1 && (invoice?.AmountBalance ?? 0) > 0 && (
+									<Box display="flex" justifyContent="space-between" mt={0.5}>
+										<Typography variant="body2">Remaining</Typography>
+										<Typography variant="body2">
+											{formatCurrency(invoice?.AmountBalance ?? 0)}
+										</Typography>
+									</Box>
+								)}
 							</Box>
 						</Box>
 					</>

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

@@ -1,10 +1,10 @@
-import type { Column } from "@evenicanpm/portal-types-schemas";
 import { Skeleton } from "@mui/material";
 import Checkbox from "@mui/material/Checkbox";
 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 { Column } from "../../../types";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({

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

@@ -1,7 +1,7 @@
-import type { Column } from "@evenicanpm/portal-types-schemas";
 import { SearchInput } from "@evenicanpm/ui";
 import { MenuItem, Select } from "@mui/material";
 import React from "react";
+import type { Column } from "../../../types";
 
 interface SearchProps {
 	searchTerm: string;
@@ -84,14 +84,16 @@ const SearchField = React.memo(
 						: "Select a column to search"
 				}
 				endAdornment={
-					<ColumnSelect
-						selected={selectedColumn?.Data || ""}
-						searchCols={searchCols}
-						handleChange={(value) => {
-							const col = searchCols.find((c) => c.Data === value);
-							if (col) setColumn(col);
-						}}
-					/>
+					searchCols.length > 1 ? (
+						<ColumnSelect
+							selected={selectedColumn?.Data || ""}
+							searchCols={searchCols}
+							handleChange={(value) => {
+								const col = searchCols.find((c) => c.Data === value);
+								if (col) setColumn(col);
+							}}
+						/>
+					) : undefined
 				}
 			/>
 		);

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

@@ -1,4 +1,3 @@
-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";
@@ -10,6 +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 { BulkActionButton } from "./bulk-action-button";
 import { dataMaskMap as dataMaskMapLocal } from "./data-mask-map";
 import { Details } from "./details";

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

@@ -49,23 +49,25 @@ export const TableDashboard = ({
 	return (
 		<Box sx={{ width: "100%", minHeight: "70vh" }}>
 			<TabContext value={value}>
-				<Box
-					sx={{
-						borderBottom: 1,
-						borderColor: "divider",
-						"@media print": { display: "none" },
-					}}
-				>
-					<TabList onChange={handleChange}>
-						{resources?.map((resource, i) => (
-							<Tab
-								key={resource?.name + String(i)}
-								label={resource?.label}
-								value={resource?.name}
-							/>
-						))}
-					</TabList>
-				</Box>
+				{resources?.length > 1 && (
+					<Box
+						sx={{
+							borderBottom: 1,
+							borderColor: "divider",
+							"@media print": { display: "none" },
+						}}
+					>
+						<TabList onChange={handleChange}>
+							{resources?.map((resource, i) => (
+								<Tab
+									key={resource?.name + String(i)}
+									label={resource?.label}
+									value={resource?.name}
+								/>
+							))}
+						</TabList>
+					</Box>
+				)}
 				{resources?.map((resource, i) => (
 					<Box key={resource.name + String(i)}>
 						<TabPanel

package/src/features/table/logic/resolvers.ts

@@ -1,5 +1,4 @@
 import { method, multi } from "@arrows/multimethod";
-import type { Column } from "@evenicanpm/portal-types-schemas";
 import type * as Types from "../types";
 import type { TableConfig } from "../types/queries";
 import type { UIAction, UIBulkAction } from "../types/schemas";
@@ -37,7 +36,7 @@ export const resolveFilterUI = multi(
  * @internal
  */
 export const resolveDataMask = multi(
-	(col: Column, handlers: Types.Handlers.DataMaskMap) => {
+	(col: Types.Column, handlers: Types.Handlers.DataMaskMap) => {
 		if (!col?.DataMask) return "SKIP";
 		if (handlers?.[col?.DataType]) return "BY_TYPE";
 		if (handlers?.[col?.Data]) return "BY_NAME";
@@ -45,12 +44,12 @@ export const resolveDataMask = multi(
 	},
 	method(
 		"BY_TYPE",
-		(col: Column, handlers: Types.Handlers.DataMaskMap) =>
+		(col: Types.Column, handlers: Types.Handlers.DataMaskMap) =>
 			handlers?.[col?.DataType],
 	),
 	method(
 		"BY_NAME",
-		(col: Column, handlers: Types.Handlers.DataMaskMap) =>
+		(col: Types.Column, handlers: Types.Handlers.DataMaskMap) =>
 			handlers?.[col?.Data],
 	),
 	method("SKIP", () => (value: string | number) => value),
@@ -61,7 +60,7 @@ export const resolveDataMask = multi(
  * @internal
  */
 export const resolveCellUI = (
-	col: Column,
+	col: Types.Column,
 	handlers: Types.Handlers.CellRenderMap,
 ) => {
 	if (Object.hasOwn(handlers, col.Data)) return handlers?.[col?.Data];

package/src/features/table/logic/transformers.ts

@@ -1,4 +1,4 @@
-import type { Column } from "@evenicanpm/portal-types-schemas";
+import type { Column } from "../types";
 
 /**
  * These are pure static functions that include business rules

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

@@ -1,4 +1,4 @@
-import type { FilterOption } from "@evenicanpm/portal-types-schemas";
+import type { FilterOption } from "../types";
 
 /**
  *

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

@@ -68,3 +68,5 @@
 export * as Handlers from "./handlers";
 export * as Queries from "./queries";
 export * as Schemas from "./schemas";
+export * from "./table-param";
+export * from "./view-config";

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

@@ -1,4 +1,4 @@
-import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
+import type { ViewConfig } from "../types";
 
 /**
  *

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

@@ -1,8 +1,8 @@
-import type { TableViewParams } from "@evenicanpm/portal-types-schemas";
 import type { SvgIconComponent } from "@mui/icons-material";
 import type { UseMutationOptions } from "@tanstack/react-query";
 import type { Table } from "..";
 import type { DetailsTemplateKey } from "../components/dashboard/table/details/templates/template-registry";
+import type { TableViewParams } from "../types";
 import type {
 	CellRenderMap,
 	DataMaskMap,

package/src/features/table/types/table-param.ts

@@ -0,0 +1,51 @@
+import { z } from "zod";
+
+export const TableViewParamsSchema = z.object({
+	pageSize: z.number().default(5),
+	page: z.number().default(0),
+	filters: z.record(z.string(), z.unknown()).optional(),
+	searchTerm: z.string().optional().default(""),
+	searchColumn: z.string().default("all"),
+});
+
+// Extract the TypeScript interface from the schema
+export type TableViewParams = z.infer<typeof TableViewParamsSchema>;
+
+/**
+ * convert the table state into url params.
+ * @param params Filters and params stored from table state
+ * @returns Url params.
+ */
+export const tableStateToQuery = (params: TableViewParams): URLSearchParams => {
+	const { page, pageSize, searchTerm, searchColumn, filters } = params;
+	const searchParams = new URLSearchParams();
+	searchParams.set("page", String(page));
+	searchParams.set("pageSize", String(pageSize));
+
+	if (searchTerm && searchColumn) {
+		searchParams.set("searchTerm", searchTerm);
+		searchParams.set("searchColumn", searchColumn);
+	}
+
+	if (filters) searchParams.set("filters", JSON.stringify(filters));
+	return searchParams;
+};
+
+/**
+ * Pre-processes url params into portal format to be
+ * inserted into one of the DMS URL builders
+ *
+ * @param searchParams url params from next endpoint
+ * @returns table view params formatted filters/pagination
+ */
+export const queryToTableState = (
+	searchParams: URLSearchParams,
+): TableViewParams => {
+	const page = Number(searchParams.get("page") ?? 0);
+	const pageSize = Number(searchParams.get("pageSize") ?? 5);
+	const searchTerm = searchParams.get("searchTerm") ?? "";
+	const searchColumn = searchParams.get("searchColumn") ?? "";
+	const filtersValue = searchParams.get("filters");
+	const filters = filtersValue && JSON.parse(filtersValue);
+	return { page, pageSize, searchColumn, searchTerm, filters };
+};

package/src/features/table/types/view-config.ts

@@ -0,0 +1,122 @@
+import { z } from "zod";
+/**
+ * ColumnDataType
+ */
+export const ColumnDataTypeSchema = z.enum([
+	"String",
+	"int",
+	"numeric",
+	"date",
+	"datetime",
+	"url",
+]);
+export type ColumnDataType = z.infer<typeof ColumnDataTypeSchema>;
+
+/**
+ * DataMaskFormat
+ */
+export const DataMaskFormatSchema = z.enum([
+	"MM/DD/YYYY",
+	"MM-DD-YYYY",
+	"DD/MM/YYYY",
+	"DD-MM-YYYY",
+	"YYYY/MM/DD",
+	"YYYY-MM-DD HH:MI:SS",
+	"$0.00",
+	"0,00€",
+]);
+export type DataMaskFormat = z.infer<typeof DataMaskFormatSchema>;
+
+/**
+ * FilterOperation
+ */
+export const FilterOperationSchema = z.enum([
+	"eq",
+	"gt",
+	"lt",
+	"gte",
+	"lte",
+	"in",
+]);
+export type FilterOperation = z.infer<typeof FilterOperationSchema>;
+
+/**
+ * FilterOption
+ */
+export const FilterOptionSchema = z.object({
+	value: z.union([z.string(), z.number()]),
+	label: z.string(),
+});
+export type FilterOption = z.infer<typeof FilterOptionSchema>;
+
+/**
+ * FilterConfig
+ */
+export const FilterConfigSchema = z.object({
+	FilterOptions: z.array(FilterOptionSchema),
+	FilterType: z.string(),
+	FilterOperation: FilterOperationSchema,
+});
+export type FilterConfig = z.infer<typeof FilterConfigSchema>;
+
+/**
+ * Filter (from table metadata response)
+ */
+export const FilterSchema = z.object({
+	Operation: FilterOperationSchema,
+	Data: z.string(),
+	Value: z.union([z.string(), z.array(z.string()), z.number()]),
+});
+export type Filter = z.infer<typeof FilterSchema>;
+
+/**
+ * Column (recursive)
+ */
+export const ColumnSchema = z.object({
+	Label: z.string(),
+	Data: z.string(),
+	DataType: z.string(),
+	DataMask: z.string().optional(),
+	ColumnOrder: z.number().nullable().optional(),
+	IsSearchable: z.boolean().optional(),
+	IsFilterable: z.boolean().optional(),
+	Filters: z.array(FilterConfigSchema).optional(),
+	IsVisible: z.boolean().optional(),
+	IsSortable: z.boolean().optional(),
+	DisplayOrder: z.number().optional(),
+});
+
+export type Action = {
+	Name: string;
+	Type: string;
+	IdField?: string;
+	IsEnabled: boolean;
+};
+
+export type BulkAction = {
+	Name: string;
+	Type: string;
+	IdField?: string;
+	IsEnabled: boolean;
+};
+
+export interface Column {
+	Label: string;
+	Data: string;
+	DataType: string;
+	ColumnOrder: number | undefined | null;
+	DataMask?: string;
+	IsSearchable?: boolean;
+	IsFilterable?: boolean;
+	Filters?: FilterConfig[];
+	IsVisible?: boolean;
+	IsSortable?: boolean;
+	DisplayOrder?: number;
+	Children?: Column[];
+}
+
+export type ViewConfig = {
+	Columns: Column[];
+	Actions?: Action[];
+	BulkActions?: BulkAction[];
+};