@evenicanpm/portal-table-ui 1.5.0 → 1.7.0

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

@@ -0,0 +1,407 @@
+"use client";
+import {
+	Box,
+	Button,
+	Card,
+	Divider,
+	Skeleton,
+	Typography,
+} from "@mui/material";
+import Grid2 from "@mui/material/Grid2";
+import { StatusPill } from "../../status-pill";
+import type { DetailsTemplateProps } from "./template-registry";
+
+// Formatting utilities
+const formatCurrency = (amount?: number): string => {
+	if (amount === undefined || amount === null) return "$0.00";
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2,
+	}).format(amount);
+};
+
+const formatDate = (dateString?: string): string => {
+	if (!dateString) return "—";
+
+	try {
+		const date = new Date(dateString);
+		// Check if date is valid
+		if (isNaN(date.getTime())) return dateString;
+
+		return new Intl.DateTimeFormat("en-US", {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+		}).format(date);
+	} catch {
+		return dateString;
+	}
+};
+
+interface InvoiceLine {
+	Description?: string;
+	ItemId?: string;
+	Quantity?: number;
+	Price?: number;
+	LineAmount?: number;
+	UnitOfMeasure?: string;
+	FullDescription?: string;
+	Savings?: number;
+	IsOnSale?: boolean;
+}
+
+interface InvoiceData {
+	Status?: string | number;
+	SalesInvoiceLine?: InvoiceLine[];
+	InvoiceSubtotal?: number;
+	TotalTaxAmount?: number;
+	Amount?: number;
+	CompanyName?: string;
+	CompanyEmail?: string;
+	CompanyAddress?: string;
+	Name?: string;
+	Email?: string;
+	BillingAddress?: string;
+	InvoiceDate?: string;
+	DueDate?: string;
+	Notes?: string;
+}
+
+const isDataEmpty = (data: InvoiceData | null | undefined): boolean => {
+	if (!data) return true;
+
+	const hasNoLineItems =
+		!data.SalesInvoiceLine || data.SalesInvoiceLine.length === 0;
+	const hasNoBasicInfo = !data.CompanyName && !data.Name && !data.InvoiceDate;
+	const hasNoAmounts = !data.Amount && data.Amount !== 0;
+
+	return hasNoLineItems && hasNoBasicInfo && hasNoAmounts;
+};
+
+export const InvoiceDetailsTemplate = ({
+	data,
+	statusColorMap,
+	statusTextMap,
+	loading = false,
+}: DetailsTemplateProps) => {
+	const invoice = data as InvoiceData;
+
+	if (!loading && (!invoice || isDataEmpty(invoice))) {
+		return (
+			<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+				<Card sx={{ p: 6, borderRadius: 3, textAlign: "center" }}>
+					<Typography variant="h6" color="text.secondary" gutterBottom>
+						No Data Available
+					</Typography>
+					<Typography variant="body2" color="text.secondary">
+						This invoice template has no data to display.
+					</Typography>
+				</Card>
+			</Box>
+		);
+	}
+
+	const items = invoice?.SalesInvoiceLine ?? [];
+	const subtotal = invoice?.InvoiceSubtotal ?? 0;
+	const tax = invoice?.TotalTaxAmount ?? 0;
+	const total = invoice?.Amount ?? 0;
+
+	const columns = [
+		{ label: "#", size: 1 },
+		{ label: "Product", size: 3 },
+		{ label: "Qty", size: 1 },
+		{ label: "Unit", size: 2 },
+		{ label: "Unit Price", size: 1.5 },
+		{ label: "Savings", size: 1.5 },
+		{ label: "Line Total", size: 1.5 },
+		{ label: "", size: 0.5 },
+	];
+
+	if (loading) {
+		return (
+			<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+				<Box display="flex" justifyContent="space-between" mb={3}>
+					<Skeleton variant="rectangular" width={100} height={32} />
+					<Skeleton variant="rectangular" width={120} height={40} />
+				</Box>
+				<Card sx={{ p: 4, borderRadius: 3 }}>
+					<Grid2 container spacing={4}>
+						{Array.from({ length: 4 }).map((_, i) => (
+							<Grid2 size={6} key={i}>
+								<Skeleton width="40%" height={20} />
+								<Skeleton width="80%" />
+								<Skeleton width="60%" />
+							</Grid2>
+						))}
+					</Grid2>
+					<Divider sx={{ my: 3 }} />
+					<Grid2 container sx={{ mb: 2 }}>
+						{columns.map((col, i) => (
+							<Grid2 key={i} size={col.size}>
+								<Skeleton width="60%" />
+							</Grid2>
+						))}
+					</Grid2>
+					{Array.from({ length: 4 }).map((_, idx) => (
+						<Grid2 container key={idx} sx={{ py: 1.5 }}>
+							{columns.map((col, i) => (
+								<Grid2 key={i} size={col.size}>
+									<Skeleton width="80%" />
+								</Grid2>
+							))}
+						</Grid2>
+					))}
+					<Box mt={3} display="flex" justifyContent="flex-end">
+						<Box width={300}>
+							{Array.from({ length: 3 }).map((_, i) => (
+								<Box
+									key={i}
+									display="flex"
+									justifyContent="space-between"
+									mb={1}
+								>
+									<Skeleton width="40%" />
+									<Skeleton width="30%" />
+								</Box>
+							))}
+						</Box>
+					</Box>
+				</Card>
+			</Box>
+		);
+	}
+
+	return (
+		<Box sx={{ p: 3, width: "75%", mx: "auto" }}>
+			{/* Header */}
+			<Box
+				display="flex"
+				justifyContent="space-between"
+				alignItems="center"
+				mb={3}
+			>
+				{invoice?.Status !== undefined && (
+					<StatusPill
+						status={invoice.Status}
+						statusColorMap={statusColorMap}
+						statusTextMap={statusTextMap}
+					/>
+				)}
+				{invoice?.Status !== 3 && invoice?.Status !== undefined && (
+					<Button variant="contained" color="warning">
+						Pay Now
+					</Button>
+				)}
+			</Box>
+
+			{/* Notes Section */}
+			{invoice?.Notes && (
+				<Card sx={{ p: 3, borderRadius: 3, mb: 3 }}>
+					<Typography variant="subtitle1" color="text.secondary" mb={1}>
+						Notes
+					</Typography>
+					<Typography
+						variant="body2"
+						color="text.secondary"
+						whiteSpace="pre-line"
+					>
+						{invoice.Notes}
+					</Typography>
+				</Card>
+			)}
+
+			{/* Main Invoice Card */}
+			<Card sx={{ p: 3, borderRadius: 3 }}>
+				{/* Details Section */}
+				{(invoice?.CompanyName ||
+					invoice?.Name ||
+					invoice?.InvoiceDate ||
+					invoice?.DueDate) && (
+					<>
+						<Typography variant="subtitle1" color="text.secondary" mb={2}>
+							Details
+						</Typography>
+
+						<Grid2 container spacing={4}>
+							{invoice?.CompanyName && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										From
+									</Typography>
+									<Typography fontWeight={600}>
+										{invoice.CompanyName}
+									</Typography>
+									{invoice.CompanyEmail && (
+										<Typography variant="body2">
+											{invoice.CompanyEmail}
+										</Typography>
+									)}
+									{invoice.CompanyAddress && (
+										<Typography variant="body2">
+											{invoice.CompanyAddress}
+										</Typography>
+									)}
+								</Grid2>
+							)}
+
+							{invoice?.Name && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										Bill To
+									</Typography>
+									<Typography fontWeight={600}>{invoice.Name}</Typography>
+									{invoice.Email && (
+										<Typography variant="body2">{invoice.Email}</Typography>
+									)}
+									{invoice.BillingAddress && (
+										<Typography variant="body2">
+											{invoice.BillingAddress}
+										</Typography>
+									)}
+								</Grid2>
+							)}
+
+							{invoice?.InvoiceDate && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										Invoice Date
+									</Typography>
+									<Typography>{formatDate(invoice.InvoiceDate)}</Typography>
+								</Grid2>
+							)}
+
+							{invoice?.DueDate && (
+								<Grid2 size={6}>
+									<Typography variant="body2" color="text.secondary">
+										Due Date
+									</Typography>
+									<Typography>{formatDate(invoice.DueDate)}</Typography>
+								</Grid2>
+							)}
+						</Grid2>
+
+						<Divider sx={{ my: 3 }} />
+					</>
+				)}
+
+				{/* Line Items Section */}
+				{items.length > 0 ? (
+					<>
+						{/* Table Header */}
+						<Grid2 container sx={{ mb: 1 }}>
+							{columns.map((col, i) => (
+								<Grid2 key={i} size={col.size}>
+									<Typography variant="body2" fontWeight={600}>
+										{col.label}
+									</Typography>
+								</Grid2>
+							))}
+						</Grid2>
+
+						{/* Line Items */}
+						{items.map((item, idx) => (
+							<Grid2
+								container
+								key={idx}
+								sx={{ py: 1.5, borderBottom: "1px solid #eee" }}
+							>
+								<Grid2 size={1}>
+									<Typography variant="body2">{item?.ItemId || "—"}</Typography>
+								</Grid2>
+
+								<Grid2 size={3}>
+									<Typography variant="body2">
+										{item?.Description || "—"}
+									</Typography>
+								</Grid2>
+
+								<Grid2 size={1}>
+									<Typography variant="body2">
+										{item?.Quantity ?? "—"}
+									</Typography>
+								</Grid2>
+
+								<Grid2 size={1.5}>
+									<Typography variant="body2">
+										{item?.UnitOfMeasure || "—"}
+									</Typography>
+								</Grid2>
+
+								<Grid2 size={2}>
+									<Typography variant="body2">
+										{formatCurrency(item?.Price)}
+									</Typography>
+								</Grid2>
+
+								<Grid2 size={1.5}>
+									<Typography variant="body2">
+										{item?.Savings
+											? formatCurrency(item.Savings)
+											: formatCurrency(0)}
+									</Typography>
+								</Grid2>
+
+								<Grid2 size={1.5}>
+									<Typography variant="body2">
+										{formatCurrency(item?.LineAmount)}
+									</Typography>
+								</Grid2>
+
+								<Grid2
+									size={0.5}
+									display="flex"
+									alignItems="center"
+									justifyContent="center"
+								>
+									{item?.IsOnSale && (
+										<Typography color="error.main" fontWeight={700}>
+											*
+										</Typography>
+									)}
+								</Grid2>
+							</Grid2>
+						))}
+
+						{/* Totals */}
+						<Box mt={3} display="flex" justifyContent="flex-end">
+							<Box width={300}>
+								<Box display="flex" justifyContent="space-between" mb={1}>
+									<Typography variant="body2">Subtotal</Typography>
+									<Typography variant="body2" fontWeight={500}>
+										{formatCurrency(subtotal)}
+									</Typography>
+								</Box>
+
+								<Box display="flex" justifyContent="space-between" mb={1}>
+									<Typography variant="body2">Tax</Typography>
+									<Typography variant="body2" fontWeight={500}>
+										{formatCurrency(tax)}
+									</Typography>
+								</Box>
+
+								<Divider sx={{ my: 1.5 }} />
+
+								<Box display="flex" justifyContent="space-between" mt={1}>
+									<Typography variant="body1" fontWeight={700}>
+										Total
+									</Typography>
+									<Typography variant="body1" fontWeight={700}>
+										{formatCurrency(total)}
+									</Typography>
+								</Box>
+							</Box>
+						</Box>
+					</>
+				) : (
+					<Box sx={{ textAlign: "center", py: 4 }}>
+						<Typography variant="body2" color="text.secondary">
+							No line items to display
+						</Typography>
+					</Box>
+				)}
+			</Card>
+		</Box>
+	);
+};

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

@@ -0,0 +1,36 @@
+import type {
+	StatusColorMap,
+	StatusTextMap,
+} from "src/features/table/types/schemas";
+import { InvoiceDetailsTemplate } from "./invoice-details";
+
+/**
+ * Shared props that every details template must accept.
+ * Add optional fields here as the surface area grows; templates
+ * that don't need a field can simply ignore it.
+ */
+export interface DetailsTemplateProps {
+	data: unknown;
+	statusColorMap: StatusColorMap;
+	statusTextMap: StatusTextMap;
+	loading?: boolean;
+}
+
+/**
+ * Registry of all available detail templates.
+ *
+ * To add a new template:
+ *   1. Create the component file, implementing DetailsTemplateProps.
+ *   2. Import it here.
+ *   3. Add a key -> component entry below.
+ *
+ * The key is what consumers pass as `detailsTemplate` on the resource definition.
+ */
+export const detailsTemplateRegistry: Record<
+	string,
+	React.ComponentType<DetailsTemplateProps>
+> = {
+	invoice: InvoiceDetailsTemplate,
+};
+
+export type DetailsTemplateKey = keyof typeof detailsTemplateRegistry;

package/src/features/table/components/dashboard/table/filter-render-map.tsx

@@ -0,0 +1,10 @@
+"use client";
+import type * as Table from "../../../types/";
+import { DateFilter } from "./filters/date-filter";
+import { StatusFilter } from "./filters/status-filter";
+
+export const filterRenderMapFallback: Table.Handlers.FilterRenderMap = {
+	select: (props: Table.Handlers.FilterProps) => <StatusFilter {...props} />,
+	date: (props: Table.Handlers.FilterProps) => <DateFilter {...props} />,
+	datetime: (props: Table.Handlers.FilterProps) => <DateFilter {...props} />,
+};

package/src/features/table/components/dashboard/table/filters/date-filter.tsx

@@ -0,0 +1,31 @@
+"use client";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { type SelectChangeEvent } from "@mui/material/Select";
+import type * as Table from "../../../../types";
+
+export const DateFilter = (props: Table.Handlers.FilterProps) => {
+	const { value, filterName, filterOptions, setValue } = props;
+	return (
+		<Select
+			labelId="demo-simple-select-label"
+			id="demo-simple-select"
+			value={value?.[filterName] || "all"}
+			label={filterName}
+			sx={{
+				minHeight: "100%",
+				border: "none",
+				backgroundColor: "background.paper",
+			}}
+			onChange={(e: SelectChangeEvent) => {
+				setValue((prev) => ({ ...prev, [filterName]: e.target.value }));
+			}}
+		>
+			<MenuItem value={"all"}>All Months</MenuItem>
+			{filterOptions?.map((value) => (
+				<MenuItem key={value?.value} value={value.value}>
+					{value.label}
+				</MenuItem>
+			))}
+		</Select>
+	);
+};

package/src/features/table/components/dashboard/table/filters/status-filter.tsx

@@ -0,0 +1,36 @@
+"use client";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import type * as Table from "../../../../types/";
+
+export const StatusFilter = (props: Table.Handlers.FilterProps) => {
+	const { value, filterName, setValue, resetPagination, filterOptions } = props;
+
+	const selectedValue = value?.[filterName] ?? "all";
+
+	return (
+		<Select
+			value={selectedValue}
+			sx={{
+				minHight: "100%",
+				border: "none",
+				backgroundColor: "background.paper",
+			}}
+			onChange={(e) => {
+				resetPagination();
+				setValue((prev) => ({
+					...prev,
+					[filterName]: e.target.value,
+				}));
+			}}
+		>
+			<MenuItem value="all">All Statuses</MenuItem>
+
+			{filterOptions.map((status) => (
+				<MenuItem key={status.label} value={String(status.value)}>
+					{status.label}
+				</MenuItem>
+			))}
+		</Select>
+	);
+};

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

@@ -0,0 +1,26 @@
+"use client";
+import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
+import { Typography } from "@mui/material";
+import type * as Table from "../../../types/";
+
+export const NoResultsComponent: Table.Handlers.NoResultsComponent = ({
+	label,
+}: {
+	label: string;
+}) => {
+	return (
+		<Typography
+			variant="body2"
+			color="text.secondary"
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: 1,
+			}}
+		>
+			<ArticleOutlinedIcon fontSize="small" />
+			No {label.toLowerCase()} found matching your criteria.
+		</Typography>
+	);
+};

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

@@ -0,0 +1,18 @@
+import { Chip } from "@mui/material";
+import type { StatusColorMap, StatusTextMap } from "../../../types/schemas";
+
+interface Props {
+	status: number | string | string[];
+	statusTextMap: StatusTextMap;
+	statusColorMap: StatusColorMap;
+}
+
+const StatusPill = (props: Props) => {
+	const { statusColorMap, statusTextMap, status } = props;
+	if (typeof status !== "string" && typeof status !== "number") return null;
+	return (
+		<Chip label={statusTextMap?.[status]} color={statusColorMap[status]} />
+	);
+};
+
+export { StatusPill };

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

@@ -0,0 +1,98 @@
+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 React from "react";
+
+// STYLED COMPONENTS
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+	fontWeight: 600,
+	padding: "16px 20px",
+	color: theme.palette.grey[900],
+	minWidth: 140,
+}));
+
+interface TableHeaderProps {
+	hasActions: boolean;
+	columns: (Column & { ColumnOrder: number })[] | undefined;
+	loading: boolean;
+	selectAllChecked: boolean;
+	selectAllIndeterminate: boolean;
+	onToggleAll: (checked: boolean) => void;
+}
+
+/**
+ *
+ * Table handles display and caches it's own data.
+ *
+ */
+export default function TableHeader({
+	hasActions,
+	columns,
+	loading,
+	selectAllChecked,
+	selectAllIndeterminate,
+	onToggleAll,
+}: TableHeaderProps) {
+	if (loading) {
+		return (
+			<TableHead>
+				<TableRow>
+					<StyledTableCell padding="checkbox" sx={{ width: 56 }}>
+						<Skeleton
+							variant="rounded"
+							width={24}
+							height={24}
+							sx={{ bgcolor: "rgba(255,255,255,0.1)" }}
+						/>
+					</StyledTableCell>
+					{Array.from({ length: 6 })?.map((_col, i) => (
+						<StyledTableCell key={String(i)}>
+							<Skeleton
+								variant="rounded"
+								width={100}
+								height={25}
+								sx={{ bgcolor: "rgba(255,255,255,0.1)" }}
+							/>
+						</StyledTableCell>
+					))}
+					{hasActions && (
+						<StyledTableCell>
+							<Skeleton variant="rounded" width={100} height={25} />
+						</StyledTableCell>
+					)}
+				</TableRow>
+			</TableHead>
+		);
+	}
+	return (
+		<TableHead>
+			<TableRow>
+				<StyledTableCell sx={{ padding: "16px 16px", width: 72 }}>
+					<Checkbox
+						checked={selectAllChecked}
+						indeterminate={selectAllIndeterminate}
+						onChange={(_e, checked) => onToggleAll(checked)}
+						inputProps={{ "aria-label": "select all rows" }}
+					/>
+				</StyledTableCell>
+
+				{columns?.map((column, i) => (
+					<StyledTableCell
+						key={column.Label + String(i)}
+						sx={{
+							whiteSpace: "normal",
+							wordBreak: "break-word",
+						}}
+					>
+						{column.Label}
+					</StyledTableCell>
+				))}
+				{hasActions && <StyledTableCell>Actions</StyledTableCell>}
+			</TableRow>
+		</TableHead>
+	);
+}