@evenicanpm/portal-table-ui 2.3.3 → 2.4.1

package/package.json

@@ -1,50 +1,50 @@
 {
-	"name": "@evenicanpm/portal-table-ui",
-	"version": "2.3.3",
-	"description": "",
-	"license": "ISC",
-	"author": "",
-	"type": "module",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"docs": "npx typedoc src --plugin typedoc-github-theme",
-		"format": "npx @biomejs/biome format --write ./src",
-		"build": "npx tsc"
-	},
-	"exports": {
-		".": "./src/index.ts"
-	},
-	"types": "./dist/index.d.ts",
-	"files": [
-		"dist",
-		"src"
-	],
-	"devDependencies": {
-		"@emotion/react": "^11.11.3",
-		"@emotion/styled": "^11.11.0",
-		"@mui/icons-material": "^7.3.6",
-		"@mui/material": "^6.1.7",
-		"@types/react": "^18.3.24",
-		"json-server": "^1.0.0-beta.3",
-		"react": "^19.0.0",
-		"typedoc": "^0.28.15",
-		"typedoc-github-theme": "^0.3.1",
-		"typescript": "^5.6.3"
-	},
-	"peerDependencies": {
-		"@emotion/react": "^11.11.3",
-		"@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/ui": "file:../../../common/@evenicanpm/ui",
-		"@mui/lab": "^7.0.1-beta.19",
-		"date-fns": "^4.1.0",
-		"zod": "^4.4.3"
-	}
-}
+  "name": "@evenicanpm/portal-table-ui",
+  "version": "2.4.1",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^6.1.7",
+    "@mui/material": "^6.1.7",
+    "@types/react": "^19.2.2",
+    "json-server": "^1.0.0-beta.3",
+    "react": "^19.2.7",
+    "typedoc": "^0.28.15",
+    "typedoc-github-theme": "^0.3.1",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^6.1.7",
+    "@mui/material": "^6.1.7",
+    "@tanstack/react-query": "^5.100.4",
+    "@types/react": "^19.2.2",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@arrows/multimethod": "^2.1.0",
+    "@mui/lab": "^7.0.1-beta.19",
+    "date-fns": "^4.1.0",
+    "zod": "^4.4.3",
+    "@evenicanpm/ui": "2.4.1"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs": "npx typedoc src --plugin typedoc-github-theme",
+    "format": "npx @biomejs/biome format --write ./src",
+    "build": "npx tsc"
+  }
+}

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

@@ -124,7 +124,11 @@ const Details = ({
 						resourceName={resourceName}
 					/>
 				) : (
-					<Grid container spacing={2}>
+					<Grid
+						container
+						spacing={2}
+						sx={{ display: { xs: "block", sm: "flex" } }}
+					>
 						{primitiveItems?.map((col) => {
 							const maskedValue = col.maskFn(col.value, col.mask);
 							const Component = getRowComponent(maskedValue, col.key);
@@ -199,8 +203,8 @@ const getRowComponent = multi(
  */
 const getRowLayout = multi(
 	detailTypeDispatch,
-	method("PRIMITIVE", () => ({ size: 6, display: "flex" })),
-	method("STATUS", () => ({ size: 6, display: "flex" })),
+	method("PRIMITIVE", () => ({ size: { xs: 12, sm: 6 }, display: "flex" })),
+	method("STATUS", () => ({ size: { xs: 12, sm: 6 }, display: "flex" })),
 	method("DOCUMENTS", () => ({ size: 12 })),
 	method("OBJECT", () => ({ size: 12 })),
 );

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

@@ -4,6 +4,7 @@ import {
 	Box,
 	Button,
 	Card,
+	Chip,
 	Divider,
 	Paper,
 	Skeleton,
@@ -19,7 +20,7 @@ import {
 	useTheme,
 } from "@mui/material";
 import Grid2 from "@mui/material/Grid2";
-import { StatusPill } from "../../status-pill";
+import type { StatusColorMap } from "../../../../../types/schemas";
 import { ActionButton } from "../../table-row/action-button";
 import type { DetailsTemplateProps } from "./template-registry";
 
@@ -49,6 +50,19 @@ const formatDate = (dateString?: string): string => {
 	}
 };
 
+/**
+ * InvoiceType enum type.
+ */
+export enum InvoiceType {
+	None = 0,
+	SalesOrderInvoice = 1,
+	FreeTextInvoice = 2,
+	ProjectInvoice = 3,
+	CreditNoteInvoice = 4,
+	FreeTextCreditNoteInvoice = 5,
+	ProjectCreditNoteInvoice = 6,
+}
+
 interface InvoiceLine {
 	ItemId?: string;
 	ProductName?: string;
@@ -62,6 +76,7 @@ interface InvoiceLine {
 
 interface InvoiceData {
 	Status?: string | number;
+	InvoiceType?: InvoiceType;
 	IsOverdue?: boolean;
 	SalesInvoiceLine?: InvoiceLine[];
 	InvoiceSubtotal?: number;
@@ -82,6 +97,17 @@ interface InvoiceData {
 	ChargeTotal?: number;
 }
 
+export const statusColorMap: StatusColorMap = {
+	// Regular invoice labels
+	Unpaid: "primary",
+	"Partially Paid": "primary",
+	Paid: "success",
+	// Credit memo labels
+	Unused: "primary",
+	"Partially Used": "primary",
+	Used: "success",
+};
+
 interface TableColumn {
 	label: string;
 	width: number;
@@ -103,9 +129,7 @@ const isDataEmpty = (data: InvoiceData | null | undefined): boolean => {
 
 export const InvoiceDetailsTemplate = ({
 	data,
-	statusColorMap,
 	row,
-	statusTextMap,
 	loading = false,
 	actions,
 	resourceName = "invoice",
@@ -115,6 +139,13 @@ export const InvoiceDetailsTemplate = ({
 
 	const invoice = data as InvoiceData;
 
+	const isCreditNote =
+		invoice?.InvoiceType === InvoiceType.CreditNoteInvoice ||
+		invoice?.InvoiceType === InvoiceType.FreeTextCreditNoteInvoice;
+
+	const isFreeTextInvoice =
+		invoice?.InvoiceType === InvoiceType.FreeTextInvoice;
+
 	// Responsive width
 	const containerWidth = isMobile ? "95%" : "75%";
 
@@ -141,9 +172,12 @@ export const InvoiceDetailsTemplate = ({
 	const tax = invoice?.TotalTaxAmount ?? 0;
 	const total = invoice?.Amount ?? 0;
 	const chargeTotal = invoice?.ChargeTotal ?? 0;
-	// Fixed column definitions with specific widths
+
+	// Hide the # column for credit note types
 	const columns: TableColumn[] = [
-		{ label: "#", width: 60, aligned: "left" },
+		...(!isCreditNote && !isFreeTextInvoice
+			? [{ label: "#", width: 60, aligned: "left" as const }]
+			: []),
 		{ label: "Product", width: 200, aligned: "left" },
 		{ label: "Qty", width: 40, aligned: "right" },
 		{ label: "Unit", width: 60, aligned: "right" },
@@ -156,6 +190,11 @@ export const InvoiceDetailsTemplate = ({
 	// Calculate total width for table container
 	const totalTableWidth = columns.reduce((sum, col) => sum + col.width, 0);
 
+	// Remap action labels for credit notes
+	const resolvedActions = isCreditNote
+		? actions?.map((a) => (a.label === "Pay" ? { ...a, label: "Use" } : a))
+		: actions;
+
 	if (loading) {
 		return (
 			<Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
@@ -253,11 +292,7 @@ export const InvoiceDetailsTemplate = ({
 				mb={3}
 			>
 				{invoice?.Status !== undefined && (
-					<StatusPill
-						status={invoice.Status}
-						statusColorMap={statusColorMap}
-						statusTextMap={statusTextMap}
-					/>
+					<Chip label={invoice.Status} color={statusColorMap[invoice.Status]} />
 				)}
 				<Box
 					display="flex"
@@ -265,13 +300,13 @@ export const InvoiceDetailsTemplate = ({
 					alignItems="center"
 					sx={{ "@media print": { display: "none" } }}
 				>
-					{actions?.map((action) => {
+					{resolvedActions?.map((action) => {
 						const enabled = !action.isEnabled || action.isEnabled(row);
 						if (!enabled) {
 							return (
-								<span
+								<Box
 									key={action.label}
-									style={{
+									sx={{
 										display: "inline-block",
 										width: action.icon ? "34px" : "42px",
 										height: "34px",
@@ -281,7 +316,6 @@ export const InvoiceDetailsTemplate = ({
 						}
 						return (
 							<ActionButton
-								key={action.label}
 								docId={invoice.Id}
 								action={action}
 								resourceName={resourceName}
@@ -294,7 +328,7 @@ export const InvoiceDetailsTemplate = ({
 						size="small"
 						sx={{ "@media print": { display: "none" } }}
 					>
-						Print Invoice
+						{isCreditNote ? "Print Credit Memo" : "Print Invoice"}
 					</Button>
 				</Box>
 			</Box>
@@ -414,20 +448,19 @@ export const InvoiceDetailsTemplate = ({
 							{invoice?.InvoiceDate && (
 								<Grid2 size={{ xs: 12, sm: 6 }}>
 									<Typography variant="body2" color="text.secondary">
-										Invoice Date
+										{isCreditNote ? "Date Issued" : "Invoice Date"}
 									</Typography>
 									<Typography>{formatDate(invoice.InvoiceDate)}</Typography>
 								</Grid2>
 							)}
-							{invoice?.DueDate && (
+							{/* Due date hidden for credit notes */}
+							{invoice?.DueDate && !isCreditNote && (
 								<Grid2 size={{ xs: 12, sm: 6 }}>
 									<Typography variant="body2" color="text.secondary">
 										Due Date
 									</Typography>
-
 									<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
 										<Typography>{formatDate(invoice.DueDate)}</Typography>
-
 										{invoice?.IsOverdue && (
 											<FlagIcon sx={{ color: "error.main" }} fontSize="small" />
 										)}
@@ -480,17 +513,20 @@ export const InvoiceDetailsTemplate = ({
 
 										return (
 											<TableRow key={itemKey}>
-												<TableCell
-													sx={{
-														width: "100%",
-														textAlign: "left",
-														"@media print": { width: 60, px: 1 },
-													}}
-												>
-													<Typography variant="body2">
-														{item?.ItemId || idx + 1}
-													</Typography>
-												</TableCell>
+												{/* Hide # column for credit note types */}
+												{!isCreditNote && !isFreeTextInvoice && (
+													<TableCell
+														sx={{
+															width: "100%",
+															textAlign: "left",
+															"@media print": { width: 60, px: 1 },
+														}}
+													>
+														<Typography variant="body2">
+															{item?.ItemId || idx + 1}
+														</Typography>
+													</TableCell>
+												)}
 												<TableCell sx={{ width: "100%", textAlign: "left" }}>
 													<Typography variant="body2">{productName}</Typography>
 												</TableCell>
@@ -589,31 +625,40 @@ export const InvoiceDetailsTemplate = ({
 								<Divider sx={{ my: 1.5 }} />
 								<Box display="flex" justifyContent="space-between" mt={1}>
 									<Typography variant="body1" fontWeight={700}>
-										Total
+										{isCreditNote ? "Credit Total" : "Total"}
 									</Typography>
 									<Typography variant="body1" fontWeight={700}>
 										{formatCurrency(total)}
 									</Typography>
 								</Box>
 
-								{/* Paid and Remaining lines */}
-								{invoice?.Status !== 1 && (
+								{/* Paid / Applied line */}
+								{invoice?.Status !== "Paid" && invoice?.Status !== "Used" && (
 									<Box display="flex" justifyContent="space-between" mt={1}>
-										<Typography variant="body2">Paid</Typography>
 										<Typography variant="body2">
-											{formatCurrency(total - (invoice?.AmountBalance ?? 0))}
+											{isCreditNote ? "Used" : "Paid"}
 										</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)}
+											{formatCurrency(
+												Math.abs(total - (invoice?.AmountBalance ?? 0)),
+											)}
 										</Typography>
 									</Box>
 								)}
+
+								{/* Remaining line */}
+								{invoice?.Status !== "Paid" &&
+									invoice?.Status !== "Used" &&
+									(invoice?.AmountBalance ?? 0) !== 0 && (
+										<Box display="flex" justifyContent="space-between" mt={0.5}>
+											<Typography variant="body2">
+												{isCreditNote ? "Remaining Credit" : "Remaining"}
+											</Typography>
+											<Typography variant="body2">
+												{formatCurrency(Math.abs(invoice?.AmountBalance ?? 0))}
+											</Typography>
+										</Box>
+									)}
 							</Box>
 						</Box>
 					</>

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

@@ -25,7 +25,7 @@ const ColumnSelect = ({
 			id="demo-simple-select"
 			value={selected}
 			sx={{
-				maxWidth: "150px",
+				maxWidth: "180px",
 				"& .MuiOutlinedInput-notchedOutline": { border: "none" },
 				"& .MuiSelect-select": {
 					paddingTop: 0,

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

@@ -85,7 +85,7 @@ export function resolveActions(
 			return [
 				{
 					...action,
-					label: a.Name,
+					label: action.label ?? a.Name,
 				},
 			];
 		});
@@ -105,6 +105,6 @@ export function resolveBulkActions(
 				console.warn(`Unknown bulk action type: ${a.Type}`);
 				return [];
 			}
-			return [{ ...action, label: a.Name }];
+			return [{ ...action, label: action.label ?? a.Name }];
 		});
 }