@pagamio/frontend-commons-lib 0.8.359 → 0.8.361

package/lib/components/ui/MonthCalendar.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/** A single day rendered in the grid. `inMonth` is false for leading/trailing days. */
+export interface MonthCalendarDay {
+    date: Date;
+    /** YYYY-MM-DD, handy as a map key for consumer data. */
+    key: string;
+    inMonth: boolean;
+    isToday: boolean;
+}
+export interface MonthCalendarProps {
+    /** Any date within the month to display. Controlled. */
+    month: Date;
+    /** Fired when the user pages to a previous/next month. */
+    onMonthChange?: (next: Date) => void;
+    /**
+     * Render the contents of a single day cell — typically a number plus any
+     * badges/metrics the consumer wants. The cell chrome (border, today ring,
+     * out-of-month dimming) is handled here.
+     */
+    renderDay?: (day: MonthCalendarDay) => React.ReactNode;
+    /** Optional click handler per day. */
+    onDayClick?: (day: MonthCalendarDay) => void;
+    className?: string;
+    /** Hide the built-in month header + nav (e.g. when the parent supplies its own). */
+    hideHeader?: boolean;
+}
+/**
+ * A generic month-grid calendar (Sunday-first) with a render-prop for day
+ * cell contents — for dashboards, attendance, schedules, etc. Distinct from
+ * the date-picker `Calendar`: this one is for *displaying* data across a
+ * month, not selecting a date.
+ *
+ * The grid always renders 6 weeks (42 cells) so its height is stable as the
+ * user pages between months. Out-of-month days are dimmed.
+ */
+export declare function MonthCalendar({ month, onMonthChange, renderDay, onDayClick, className, hideHeader, }: MonthCalendarProps): import("react/jsx-runtime").JSX.Element;
+export default MonthCalendar;

package/lib/components/ui/MonthCalendar.js

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { HiChevronLeft, HiChevronRight } from 'react-icons/hi';
+import * as React from 'react';
+import { cn } from '../../helpers/utils';
+import IconButton from './IconButton';
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTH_LABELS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+const toKey = (d) => {
+    const y = d.getFullYear();
+    const m = `${d.getMonth() + 1}`.padStart(2, '0');
+    const day = `${d.getDate()}`.padStart(2, '0');
+    return `${y}-${m}-${day}`;
+};
+/**
+ * A generic month-grid calendar (Sunday-first) with a render-prop for day
+ * cell contents — for dashboards, attendance, schedules, etc. Distinct from
+ * the date-picker `Calendar`: this one is for *displaying* data across a
+ * month, not selecting a date.
+ *
+ * The grid always renders 6 weeks (42 cells) so its height is stable as the
+ * user pages between months. Out-of-month days are dimmed.
+ */
+export function MonthCalendar({ month, onMonthChange, renderDay, onDayClick, className, hideHeader = false, }) {
+    // Stable "today" key so the day grid memo doesn't recompute every render.
+    const todayKey = toKey(new Date());
+    const days = React.useMemo(() => {
+        const firstOfMonth = new Date(month.getFullYear(), month.getMonth(), 1);
+        // Back up to the Sunday on or before the 1st.
+        const gridStart = new Date(firstOfMonth);
+        gridStart.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+        return Array.from({ length: 42 }, (_, i) => {
+            const date = new Date(gridStart);
+            date.setDate(gridStart.getDate() + i);
+            const key = toKey(date);
+            return {
+                date,
+                key,
+                inMonth: date.getMonth() === month.getMonth(),
+                isToday: key === todayKey,
+            };
+        });
+    }, [month, todayKey]);
+    const goToMonth = (offset) => {
+        if (!onMonthChange)
+            return;
+        onMonthChange(new Date(month.getFullYear(), month.getMonth() + offset, 1));
+    };
+    return (_jsxs("div", { className: cn('rounded-lg border border-border bg-background', className), children: [!hideHeader && (_jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [_jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [MONTH_LABELS[month.getMonth()], " ", month.getFullYear()] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: HiChevronLeft, label: "Previous month", variant: "outline", size: "sm", onClick: () => goToMonth(-1) }), _jsx(IconButton, { icon: HiChevronRight, label: "Next month", variant: "outline", size: "sm", onClick: () => goToMonth(1) })] })] })), _jsx("div", { className: "grid grid-cols-7 border-b border-border", children: WEEKDAY_LABELS.map((label) => (_jsx("div", { className: "px-2 py-2 text-center text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }, label))) }), _jsx("div", { className: "grid grid-cols-7", children: days.map((day) => (_jsxs("div", { onClick: onDayClick ? () => onDayClick(day) : undefined, className: cn('min-h-[88px] border-b border-r border-border p-1.5 last:border-r-0', !day.inMonth && 'bg-muted/30 text-muted-foreground', onDayClick && 'cursor-pointer hover:bg-muted/40'), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("span", { className: cn('inline-flex h-6 w-6 items-center justify-center rounded-full text-xs', day.isToday && 'bg-primary font-semibold text-primary-foreground', !day.isToday && !day.inMonth && 'text-muted-foreground', !day.isToday && day.inMonth && 'text-foreground'), children: day.date.getDate() }) }), renderDay && day.inMonth ? _jsx("div", { className: "mt-1", children: renderDay(day) }) : null] }, day.key))) })] }));
+}
+export default MonthCalendar;

package/lib/components/ui/index.d.ts

@@ -15,6 +15,7 @@ export * from './Sheet';
 export { default as AvatorIcon } from './AvatarIcon';
 export { default as Button, ButtonGroup, type ButtonVariant, type ButtonSize, variantStyles } from './Button';
 export { default as Calendar } from './Calendar';
+export { MonthCalendar, default as MonthCalendarDefault, type MonthCalendarProps, type MonthCalendarDay, } from './MonthCalendar';
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card';
 export { default as LegacyCard } from './LegacyCard';
 export { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonAvatar, SkeletonChart, SkeletonStatCard, } from './Skeleton';

package/lib/components/ui/index.js

@@ -14,6 +14,7 @@ export * from './Sheet';
 export { default as AvatorIcon } from './AvatarIcon';
 export { default as Button, ButtonGroup, variantStyles } from './Button';
 export { default as Calendar } from './Calendar';
+export { MonthCalendar, default as MonthCalendarDefault, } from './MonthCalendar';
 // Card - v2 shadcn-style primitives (composable)
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card';
 // LegacyCard - v1 Card for backward compatibility

package/lib/pagamio-table/data-table/index.d.ts

@@ -1,3 +1,3 @@
 import type { PagamioTableProps } from './types';
-declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, fetchAllData, enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PagamioTable;

package/lib/pagamio-table/data-table/index.js

@@ -101,7 +101,7 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
                     (typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: cn('items-center text-nowrap', isNarrow ? 'w-full' : undefined), children: addText ?? 'Add New Entry' })) : (addButton))] }) }));
 }
 // ─── PagamioTable Component ──────────────────────────────────────────
-const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
+const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', fetchAllData, enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
     const [expanded, setExpanded] = useState({});
     const tableRef = useRef(null);
     // ── Internal max-height ─────────────────────────────────────────────
@@ -332,6 +332,14 @@ const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, ro
     });
     // ── Toolbar rendering ──────────────────────────────────────────────
     const showCustomToolbar = toolbarMode === 'custom' && (!!toolbar || !!search || !!filtering);
-    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-y-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
+    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export
+                    ? {
+                        ...toolbar.export,
+                        // Fall back to the hook's top-level fetcher when a consumer's
+                        // toolbar override didn't carry one — keeps "Export all data"
+                        // working even when `toolbar` is replaced wholesale.
+                        fetchAllData: toolbar.export.fetchAllData ?? fetchAllData,
+                    }
+                    : undefined, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-y-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
 };
 export default PagamioTable;

package/lib/pagamio-table/data-table/types.d.ts

@@ -172,6 +172,17 @@ export interface PagamioTableProps<T extends Record<string, any>> {
     }) => ReactNode;
     toolbar?: ToolbarConfig<T>;
     toolbarMode?: 'custom' | 'mrt' | 'none';
+    /**
+     * Server-side "export all" fetcher, auto-wired by `usePagamioTable` as a
+     * TOP-LEVEL prop (not just inside `toolbar.export`). Consumers spread
+     * `{...tableProps}` but frequently pass their own `toolbar={{...}}` for
+     * add-buttons/filters, which would otherwise drop the hook's
+     * `toolbar.export.fetchAllData` and silently break "Export all data".
+     * PagamioTable falls back to this when `toolbar.export.fetchAllData` is unset,
+     * so export-all keeps working regardless of a toolbar override. A consumer
+     * can still override by setting `toolbar.export.fetchAllData` explicitly.
+     */
+    fetchAllData?: (params?: Record<string, string>, onProgress?: (fetched: number, total: number) => void) => Promise<T[]>;
     enableColumnResizing?: boolean;
     enableColumnPinning?: boolean;
     enableColumnOrdering?: boolean;

package/lib/shared/hooks/usePagamioTable.js

@@ -327,6 +327,10 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         isLoading,
         isFetching,
         rowCount: totalItems,
+        // Top-level so it survives a consumer's `toolbar={{...}}` override.
+        // PagamioTable falls back to this for export-all. Only for server mode
+        // (client tables already hold the whole set).
+        ...(isServerMode && { fetchAllData: fetchAllPages }),
         ...(paginationConfig.enabled && {
             pagination: {
                 pageIndex: currentPage,

package/lib/styles.css

@@ -1336,6 +1336,9 @@ video {
 .min-h-\[60px\] {
   min-height: 60px;
 }
+.min-h-\[88px\] {
+  min-height: 88px;
+}
 .min-h-\[calc\(100vh-5rem\)\] {
   min-height: calc(100vh - 5rem);
 }
@@ -4237,6 +4240,9 @@ video {
 .last\:border-0:last-child {
   border-width: 0px;
 }
+.last\:border-r-0:last-child {
+  border-right-width: 0px;
+}
 .odd\:bg-white:nth-child(odd) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -4425,6 +4431,9 @@ video {
 .hover\:bg-muted:hover {
   background-color: hsl(var(--muted));
 }
+.hover\:bg-muted\/40:hover {
+  background-color: hsl(var(--muted) / 0.4);
+}
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 209 232 / var(--tw-bg-opacity, 1));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.359",
+  "version": "0.8.361",
   "publishConfig": {
     "access": "public",
     "provenance": false