@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/components/ui/DatePicker.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'flowbite';
+import { Datepicker } from 'flowbite-react';
+import { useEffect, useState } from 'react';
+function DatePicker({ value, disabled, name, onChange }) {
+    // Ensure initial value is a valid Date object
+    const getValidDate = (date) => {
+        if (!date)
+            return new Date(); // Return current date if no date is provided
+        const parsedDate = new Date(date);
+        return Number.isNaN(parsedDate.getTime()) ? new Date() : parsedDate;
+    };
+    // Initialize selectedDate with defaultValue or current date
+    const initialDate = value === undefined ? new Date() : getValidDate(value);
+    const [selectedDate, setSelectedDate] = useState(initialDate);
+    // Update selectedDate when value prop changes
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setSelectedDate(getValidDate(value));
+    }, [value]);
+    // Initialize defaultValue for the Datepicker component
+    const datepickerDefaultValue = new Date();
+    const datepickerTheme = {
+        root: {
+            input: {
+                field: {
+                    base: 'w-full h-[36px] [&>input]:rounded-md [&>input]:border [&>input]:bg-transparent [&>input]:h-[36px]', // Added fixed height
+                },
+            },
+        },
+        popup: {
+            root: {
+                base: '!z-[1000] !absolute',
+                placement: '!z-[1000] top-12',
+            },
+            header: {
+            // Customize calendar header if needed
+            },
+            footer: {
+                button: {
+                    today: 'bg-primary-500 text-white hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600',
+                    clear: 'border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
+                },
+            },
+        },
+        views: {
+            days: {
+                items: {
+                    item: {
+                        selected: 'bg-primary-500 text-white hover:bg-primary-600',
+                        base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+                    },
+                },
+            },
+            months: {
+                items: {
+                    item: {
+                        selected: 'bg-primary-500 text-white hover:bg-primary-600',
+                        base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+                    },
+                },
+            },
+            years: {
+                items: {
+                    item: {
+                        selected: 'bg-primary-500 text-white hover:bg-primary-600',
+                        base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+                    },
+                },
+            },
+            decades: {
+                items: {
+                    item: {
+                        selected: 'bg-primary-500 text-white hover:bg-primary-600',
+                        base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+                    },
+                },
+            },
+        },
+    };
+    return (_jsx("div", { children: _jsx(Datepicker, { value: selectedDate, onChange: (date) => {
+                // Ensure we're working with a valid Date object
+                const validDate = date ? new Date(date) : new Date();
+                setSelectedDate(validDate);
+                if (onChange && !Number.isNaN(validDate.getTime())) {
+                    onChange(validDate);
+                }
+            }, defaultValue: datepickerDefaultValue, name: name, className: "", disabled: disabled, theme: datepickerTheme }) }));
+}
+export default DatePicker;

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

@@ -0,0 +1,38 @@
+import 'react-datepicker/dist/react-datepicker.css';
+import React from 'react';
+/**
+ * Props for the CustomDateRangeModal component
+ */
+interface CustomDateRangeModalProps {
+    isOpen: boolean;
+    showTimeSelect: boolean;
+    onClose: () => void;
+    onApply: (startDate: string, endDate: string) => void;
+    initialStartDate?: string;
+    initialEndDate?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    timeIntervals?: number;
+    /**
+     * Date format string using date-fns formatting tokens
+     * @see https://date-fns.org/v2.30.0/docs/format
+     * @example 'dd/MM/yyyy' - 01/04/2023
+     * @example 'MM/dd/yyyy' - 04/01/2023
+     * @example 'yyyy-MM-dd' - 2023-04-01
+     * @example 'MMMM d, yyyy' - April 1, 2023
+     * @default 'dd/MM/yyyy'
+     */
+    dateFormat?: string;
+    /**
+     * Time format string using date-fns formatting tokens
+     * @see https://date-fns.org/v2.30.0/docs/format
+     * @example 'h:mm aa' - 2:30 pm
+     * @example 'HH:mm' - 14:30
+     * @example 'h:mm:ss a' - 2:30:00 pm
+     * @example 'HH:mm:ss' - 14:30:00
+     * @default 'h:mm aa'
+     */
+    timeFormat?: string;
+}
+declare const CustomDateRangeModal: React.FC<CustomDateRangeModalProps>;
+export default CustomDateRangeModal;

package/lib/components/ui/DateRangeModal.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { endOfDay, format, isBefore, isEqual, isValid, parse, parseISO, startOfDay } from 'date-fns';
+import { Modal } from 'flowbite-react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { useEffect, useState } from 'react';
+import { Button } from '../ui';
+const CustomDateRangeModal = ({ isOpen, showTimeSelect, onClose, onApply, initialStartDate, initialEndDate, minDate, maxDate, dateFormat = 'dd/MM/yyyy', timeFormat = 'h:mm aa', timeIntervals = 15, }) => {
+    // Parse date string to Date object using the specified format
+    const parseInitialDate = (dateString, isEndDate = false) => {
+        if (!dateString) {
+            const now = new Date();
+            return isEndDate ? endOfDay(now) : startOfDay(now);
+        }
+        try {
+            // Try to parse using the provided format
+            const parsedDate = parse(dateString, dateFormat, new Date());
+            // Check if the date is valid
+            if (!isValid(parsedDate)) {
+                throw new Error('Invalid date');
+            }
+            return isEndDate ? endOfDay(parsedDate) : startOfDay(parsedDate);
+        }
+        catch (error) {
+            // Fallback to ISO format if the format parsing fails
+            try {
+                const isoDate = parseISO(dateString);
+                if (isValid(isoDate)) {
+                    return isEndDate ? endOfDay(isoDate) : startOfDay(isoDate);
+                }
+            }
+            catch {
+                // Ignore ISO parsing error
+                console.error(error);
+            }
+            // Return current date if all parsing attempts fail
+            const now = new Date();
+            return isEndDate ? endOfDay(now) : startOfDay(now);
+        }
+    };
+    const [startDate, setStartDate] = useState(parseInitialDate(initialStartDate));
+    const [endDate, setEndDate] = useState(parseInitialDate(initialEndDate, true));
+    const [isValidRange, setIsValidRange] = useState(true);
+    // Define the complete format for DatePicker
+    const datePickerFormat = showTimeSelect ? `${dateFormat} ${timeFormat}` : dateFormat;
+    // Update internal state when initial values change
+    useEffect(() => {
+        if (initialStartDate)
+            setStartDate(parseInitialDate(initialStartDate));
+        if (initialEndDate)
+            setEndDate(parseInitialDate(initialEndDate, true));
+    }, [initialStartDate, initialEndDate, dateFormat]);
+    // Validate date range whenever dates change
+    useEffect(() => {
+        setIsValidRange(isBefore(startDate, endDate) ?? isEqual(startDate, endDate));
+    }, [startDate, endDate]);
+    const handleApply = () => {
+        if (!isValidRange)
+            return;
+        // Format dates appropriately before applying
+        const formattedStartDate = showTimeSelect
+            ? format(startDate, `${dateFormat} ${timeFormat}`)
+            : format(startOfDay(startDate), dateFormat);
+        const formattedEndDate = showTimeSelect
+            ? format(endDate, `${dateFormat} ${timeFormat}`)
+            : format(endOfDay(endDate), dateFormat);
+        onApply(formattedStartDate, formattedEndDate);
+        onClose();
+    };
+    const handleStartDateChange = (date) => {
+        if (date) {
+            const newDate = showTimeSelect ? date : startOfDay(date);
+            setStartDate(newDate);
+            // Auto-adjust end date if it's before start date
+            if (isBefore(endDate, newDate)) {
+                const newEndDate = showTimeSelect ? newDate : endOfDay(newDate);
+                setEndDate(newEndDate);
+            }
+        }
+    };
+    const handleEndDateChange = (date) => {
+        if (date) {
+            const newDate = showTimeSelect ? date : endOfDay(date);
+            setEndDate(newDate);
+        }
+    };
+    return (_jsxs(Modal, { show: isOpen, size: "xl", popup: true, onClose: onClose, dismissible: true, children: [_jsx(Modal.Header, { className: "border-b border-gray-200", children: _jsx("h3", { className: "px-4 text-lg font-bold text-gray-900", children: "Select Custom Date Range" }) }), _jsx(Modal.Body, { className: "p-6", children: _jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "startDate", className: "mb-2 text-sm font-medium text-gray-700", children: "Start Date" }), _jsx(DatePicker, { selected: startDate, onChange: handleStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, showTimeSelect: showTimeSelect, timeIntervals: timeIntervals, dateFormat: datePickerFormat, placeholderText: "Select start date", className: `w-full rounded-md border ${!isValidRange ? 'border-red-500' : 'border-gray-300'} px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500`, minDate: minDate, maxDate: maxDate })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("label", { htmlFor: "endDate", className: "mb-2 text-sm font-medium text-gray-700", children: "End Date" }), _jsx(DatePicker, { selected: endDate, onChange: handleEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, maxDate: maxDate, showTimeSelect: showTimeSelect, timeIntervals: timeIntervals, dateFormat: datePickerFormat, placeholderText: "Select end date", className: `w-full rounded-md border ${!isValidRange ? 'border-red-500' : 'border-gray-300'} px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500` })] })] }), !isValidRange && _jsx("p", { className: "text-sm text-red-600 mt-2", children: "End date must be on or after start date." })] }) }), _jsxs(Modal.Footer, { className: "flex justify-end space-x-3 border-t border-gray-200 px-6 py-4", children: [_jsx(Button, { variant: "outline", onClick: onClose, className: "px-4 py-2", children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleApply, disabled: !isValidRange, className: "px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed", children: "Apply" })] })] }));
+};
+export default CustomDateRangeModal;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface DataItem {
+    label: string;
+    value: React.ReactNode;
+    id?: string | number;
+}
+interface DetailsCardProps {
+    loading: boolean;
+    data: DataItem[];
+    buttonText: string;
+    showButton?: boolean;
+    onClickButton: () => void;
+    actionContent?: React.ReactNode;
+}
+declare const DetailsCard: ({ data, loading, buttonText, showButton, onClickButton, actionContent, }: DetailsCardProps) => JSX.Element | null;
+export default DetailsCard;

package/lib/components/ui/DetailsCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from 'flowbite-react';
+import Button from './Button';
+import LoaderComponent from './Loader';
+const DetailsCard = ({ data, loading, buttonText, showButton = true, onClickButton, actionContent, }) => {
+    if (!loading && (!data || data.length === 0)) {
+        return null;
+    }
+    return (_jsx("div", { className: "flex flex-col", children: _jsxs(Card, { children: [loading ? (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: _jsx("div", { className: "flex items-center justify-center col-span-full", children: _jsx(LoaderComponent, {}) }) })) : (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: data.map((item) => {
+                        const capitalizedLabel = item.label.charAt(0).toUpperCase() + item.label.slice(1);
+                        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mb-1 font-medium text-sm text-gray-500 dark:text-gray-300", children: capitalizedLabel }), _jsx("div", { className: "text-gray-900 text-sm dark:text-white break-words", children: item.value })] }, item.id));
+                    }) })), !loading && (_jsxs("div", { className: "flex justify-end gap-2 items-center", children: [actionContent && _jsx("div", { className: "flex-1 flex flex-row text-sm justify-end", children: actionContent }), showButton && (_jsx("div", { className: `flex ${actionContent ? 'justify-end' : 'justify-center sm:justify-end'}`, children: _jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }) }))] }))] }) }));
+};
+export default DetailsCard;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Field } from '../../form-engine';
+import type { DataItem } from './DetailsCard';
+interface FormEngineConfig {
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: any) => Promise<void>;
+    fields: Field[];
+    initialValues: Record<string, any>;
+    submitButtonText: string;
+    marginTop?: string;
+    drawerKey?: string;
+    persistenceKey?: string;
+    onFieldChange?: (fieldName: string, value: any) => void;
+    onFieldUpdate?: Record<string, any[]>;
+    children?: React.ReactNode;
+}
+export interface DetailsPageProps {
+    id: string;
+    parentId?: string;
+    title: string;
+    loading: boolean;
+    detailsData: DataItem[];
+    canEdit?: boolean;
+    onEdit?: () => void;
+    editButtonText?: string;
+    actionContent?: React.ReactNode;
+    entityName?: string;
+    parentEntityName?: string;
+    formEngineConfig?: FormEngineConfig;
+    tabComponent?: React.ComponentType<any>;
+    tabProps?: any;
+}
+declare const DetailsPage: React.FC<DetailsPageProps>;
+export default DetailsPage;

package/lib/components/ui/DetailsPage.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo } from 'react';
+import { useAppBreadcrumbs } from '../../context';
+import { truncateId } from '../../dashboard-visuals/utils/formatUtil';
+import FormEngineDrawer from '../../pagamio-drawer/index';
+import { AppPageHeader } from '../layout';
+import DetailsCard from './DetailsCard';
+import HoverableValue from './HoverableValue';
+const formatId = (value) => (_jsx(HoverableValue, { value: value.toString(), truncatedValue: truncateId(value, { startChars: 4, endChars: 4 }) }));
+const DetailsPage = ({ id, parentId, title, loading, detailsData, canEdit, onEdit, editButtonText = 'Edit', actionContent, entityName, parentEntityName, formEngineConfig, tabComponent, tabProps, }) => {
+    const { updateBreadcrumb } = useAppBreadcrumbs();
+    // Format IDs in details data
+    const formattedDetailsData = useMemo(() => detailsData.map((item) => {
+        // Only format ID fields specially
+        if (item.label.toLowerCase() === 'id') {
+            let displayValue = '';
+            if (typeof item.value === 'string' || typeof item.value === 'number') {
+                displayValue = item.value.toString();
+            }
+            else if (React.isValidElement(item.value)) {
+                displayValue = 'React Component';
+            }
+            else if (typeof item.value === 'object' && item.value !== null) {
+                displayValue = 'Object';
+            }
+            else if (item.value != null) {
+                displayValue = String(item.value);
+            }
+            return {
+                ...item,
+                value: formatId(displayValue),
+            };
+        }
+        // For non-ID fields, return as-is (React components are fine)
+        return item;
+    }), [detailsData]);
+    // Handle breadcrumb updates
+    useEffect(() => {
+        if (parentId && parentEntityName) {
+            updateBreadcrumb(parentId, parentEntityName);
+        }
+        if (id && entityName) {
+            updateBreadcrumb(id, entityName);
+        }
+    }, [id, parentId, entityName, parentEntityName, updateBreadcrumb]);
+    // Capitalize the component for JSX usage
+    const TabComponent = tabComponent;
+    return (_jsxs("div", { children: [_jsx(AppPageHeader, { title: title }), _jsx(DetailsCard, { loading: loading, data: formattedDetailsData, buttonText: editButtonText, showButton: canEdit, onClickButton: onEdit || (() => { }), actionContent: actionContent }), TabComponent && _jsx(TabComponent, { ...tabProps }), formEngineConfig && (_jsx(FormEngineDrawer, { title: formEngineConfig.title, isOpen: formEngineConfig.isOpen, onClose: formEngineConfig.onClose, onSubmit: formEngineConfig.onSubmit, fields: formEngineConfig.fields, initialValues: formEngineConfig.initialValues, submitButtonText: formEngineConfig.submitButtonText, marginTop: formEngineConfig.marginTop, onFieldChange: formEngineConfig.onFieldChange, onFieldUpdate: formEngineConfig.onFieldUpdate, persistenceKey: formEngineConfig.persistenceKey, children: formEngineConfig.children }, formEngineConfig.drawerKey))] }));
+};
+export default DetailsPage;

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

@@ -0,0 +1,19 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/lib/components/ui/Dialog.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import * as React from 'react';
+import { cn } from '../../helpers/utils';
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EmptyStateProps {
+    title: string;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/lib/components/ui/EmptyState.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MdOutlineFolder } from 'react-icons/md';
+const EmptyState = ({ title }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-gray-300 bg-gray-50 p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: _jsx(MdOutlineFolder, { className: "h-full w-full text-gray-400" }) }), _jsxs("h2", { className: "mb-2 text-lg font-semibold text-gray-800", children: ["No ", title, " Data Found"] }), _jsxs("p", { className: "text-gray-600", children: ["We couldn't find any ", title.toLowerCase(), " data at this moment. Please try again later or adjust your filters."] })] }));
+};
+export default EmptyState;

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

@@ -0,0 +1,30 @@
+import type { ChangeEvent } from 'react';
+import React from 'react';
+interface FilterComponentProps {
+    filters: Array<{
+        name: string;
+        placeholder?: string;
+        type: 'select' | 'multi-select' | 'date';
+        options?: Array<{
+            label: string;
+            value: string;
+        }>;
+        dateValue?: Date | null;
+        onDateChange?: (date: Date) => void;
+    }>;
+    searctInputPlaceHolder?: string;
+    showApplyFilterButton?: boolean;
+    showClearFilters: boolean;
+    showApplyFilters?: boolean;
+    selectedFilters: Record<string, string | string[] | Date | null>;
+    showSearch?: boolean;
+    searchQuery?: string;
+    isNarrow: boolean;
+    children?: React.ReactNode;
+    handleFilterChange: (name: string, value: string | string[] | Date | null) => void;
+    handleApplyFilters: () => void;
+    resetFilters: () => void;
+    onSearch?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const FilterComponent: React.FC<FilterComponentProps>;
+export default FilterComponent;

package/lib/components/ui/FilterComponent.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, MultiSelect, Select } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import { isDefaultFilterValue } from '../../shared/utils/filterUtils';
+import Button from './Button';
+import DatePicker from './DatePicker';
+import FilterWrapper from './FilterWrapper';
+const sharedStyles = {
+    input: {
+        borderRadius: '6px',
+    },
+    label: {
+        fontSize: '13px',
+    },
+    width: '100%',
+};
+const selectComponentProps = {
+    input: {
+        '&[type="search"]': {
+            borderRadius: '6px',
+            fontSize: '0.8rem',
+            height: '39px',
+        },
+    },
+    dropdown: {
+        '& .mantine-Select-item': {
+            fontSize: '0.75rem',
+        },
+    },
+};
+const commonProps = {
+    size: 'md',
+    style: { width: 240 },
+};
+const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = true, showClearFilters, searctInputPlaceHolder = 'Search...', showApplyFilters = true, showSearch = false, searchQuery = '', children, isNarrow, handleFilterChange, handleApplyFilters, resetFilters, onSearch = () => { }, }) => {
+    const hasSelectedActiveFilters = Object.entries(selectedFilters).some(([key, v]) => !isDefaultFilterValue(v, key));
+    const shouldShowActionButtons = hasSelectedActiveFilters || (showSearch && searchQuery.length > 0);
+    // Keyboard handler for search input
+    const handleSearchKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleApplyFilters();
+        }
+        else if (e.key === 'Escape') {
+            onSearch({ target: { value: '' } });
+            resetFilters();
+        }
+    };
+    // Keyboard handler for select/multiselect (dropdown) filters
+    const handleFilterKeyDown = (e, name) => {
+        if (e.key === 'Enter') {
+            handleApplyFilters();
+        }
+        else if (e.key === 'Escape') {
+            handleFilterChange(name, '');
+            resetFilters();
+        }
+    };
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { icon: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", sx: { input: { height: 39 } }, "aria-label": "Search" }) })), filters.map((filter) => {
+                        const { name, type, options } = filter;
+                        const value = selectedFilters[name];
+                        const renderFilterInput = () => {
+                            if (type === 'date') {
+                                return (_jsx(DatePicker, { value: value || null, onChange: (date) => handleFilterChange(name, date), placeholder: filter.placeholder ?? `Select ${name}` }));
+                            }
+                            if (type === 'multi-select') {
+                                return (_jsx(MultiSelect, { data: options || [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: { ...sharedStyles }, sx: {
+                                        'input[type="search"]': {
+                                            fontSize: '0.9rem',
+                                        },
+                                    }, ...commonProps, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name }));
+                            }
+                            return (_jsx(Select, { data: options || [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || null, onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: {
+                                    ...sharedStyles,
+                                    ...selectComponentProps,
+                                }, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name }));
+                        };
+                        return (_jsx("div", { className: "w-full sm:w-[240px]", children: renderFilterInput() }, name));
+                    }), showApplyFilterButton && shouldShowActionButtons && (_jsx(Button, { onClick: handleApplyFilters, variant: "primary", className: "w-full sm:w-auto", style: { height: 39 }, tabIndex: 0, "aria-label": "Apply Filters", children: "Apply Filters" })), showClearFilters && shouldShowActionButtons && (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "w-full sm:w-auto", style: { height: 39 }, tabIndex: 0, "aria-label": "Clear Filters", children: "Clear Filters" }))] }), children] }));
+};
+export default FilterComponent;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type SelectOption } from '../../form-engine';
+/**
+ * Props for FilterList component
+ */
+interface FilterListProps<T extends SelectOption = SelectOption> {
+    /** Array of options to display in the list */
+    options: T[];
+    /** Selected value for single-select mode */
+    selectedValue?: string;
+    /** Array of selected values for multi-select mode */
+    selectedValues?: string[];
+    /** Input name attribute for radio buttons (required for single-select) */
+    name?: string;
+    /** Whether the list allows multiple selections */
+    isMultiSelect?: boolean;
+    /** Handler function called when a selection changes */
+    onChange: (value: string) => void;
+    /** Prefix for input IDs to ensure uniqueness */
+    idPrefix: string;
+    /** ItemsPerPage, the options list is paginated */
+    itemsPerPage?: number;
+}
+/**
+ * FilterList component for displaying filterable, searchable lists of options
+ * Supports both single-select (radio buttons) and multi-select (checkboxes)
+ * Generic type T extends SelectOption to allow for custom option types
+ *
+ * @example
+ * ```tsx
+ * // Single-select mode
+ * <FilterList
+ *   options={categoryOptions}
+ *   selectedValue={filters.categoryId}
+ *   name="category"
+ *   onChange={handleCategoryChange}
+ *   idPrefix="category"
+ * />
+ *
+ * // Multi-select mode
+ * <FilterList
+ *   options={locationOptions}
+ *   selectedValues={filters.locations}
+ *   isMultiSelect={true}
+ *   onChange={handleLocationChange}
+ *   idPrefix="location"
+ * />
+ * ```
+ */
+declare const FilterList: React.FC<FilterListProps>;
+export default FilterList;
+export type { FilterListProps };

package/lib/components/ui/FilterList.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, Radio } from 'flowbite-react';
+import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { RiSearchLine } from 'react-icons/ri';
+import { useMemo, useState } from 'react';
+/**
+ * FilterList component for displaying filterable, searchable lists of options
+ * Supports both single-select (radio buttons) and multi-select (checkboxes)
+ * Generic type T extends SelectOption to allow for custom option types
+ *
+ * @example
+ * ```tsx
+ * // Single-select mode
+ * <FilterList
+ *   options={categoryOptions}
+ *   selectedValue={filters.categoryId}
+ *   name="category"
+ *   onChange={handleCategoryChange}
+ *   idPrefix="category"
+ * />
+ *
+ * // Multi-select mode
+ * <FilterList
+ *   options={locationOptions}
+ *   selectedValues={filters.locations}
+ *   isMultiSelect={true}
+ *   onChange={handleLocationChange}
+ *   idPrefix="location"
+ * />
+ * ```
+ */
+const FilterList = ({ options, selectedValue, selectedValues = [], name, isMultiSelect = false, onChange, idPrefix, itemsPerPage = 10, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const filteredOptions = useMemo(() => {
+        return options?.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())) ?? [];
+    }, [options, searchQuery]);
+    const totalPages = Math.ceil(filteredOptions?.length / itemsPerPage);
+    const displayedOptions = useMemo(() => {
+        const startIndex = (currentPage - 1) * itemsPerPage;
+        return filteredOptions?.slice(startIndex, startIndex + itemsPerPage) ?? [];
+    }, [filteredOptions, currentPage, itemsPerPage]);
+    const handleNextPage = () => {
+        if (currentPage < totalPages) {
+            setCurrentPage(currentPage + 1);
+        }
+    };
+    const handlePrevPage = () => {
+        if (currentPage > 1) {
+            setCurrentPage(currentPage - 1);
+        }
+    };
+    const handleChange = (optionValue) => {
+        onChange(optionValue);
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "relative mb-3", children: [_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: _jsx(RiSearchLine, { className: "text-gray-500", "aria-hidden": "true" }) }), _jsx("input", { type: "text", className: "block w-full rounded-lg border border-gray-300 bg-white p-2 pl-10 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500", placeholder: `Search ${isMultiSelect ? 'locations' : ''}...`, value: searchQuery, onChange: (e) => {
+                            setSearchQuery(e.target.value);
+                            setCurrentPage(1);
+                        }, "aria-label": `Search ${isMultiSelect ? 'locations' : 'options'}` })] }), _jsx("fieldset", { className: "max-h-100 space-y-1 overflow-y-auto", children: displayedOptions?.length > 0 ? (displayedOptions.map((option) => (_jsxs("div", { className: "flex items-center rounded-md p-1 transition-colors hover:bg-primary-50", children: [isMultiSelect ? (_jsx(Checkbox, { id: `${idPrefix}-${option.value}`, checked: selectedValues.includes(option.value), onChange: () => handleChange(option.value), className: "text-primary-600 focus:ring-primary-500" })) : (_jsx(Radio, { id: `${idPrefix}-${option.value}`, name: name, value: option.value, checked: selectedValue === option.value, onChange: () => handleChange(option.value), className: "text-primary-600 focus:ring-primary-500" })), _jsx("label", { htmlFor: `${idPrefix}-${option.value}`, className: "ml-2 text-sm font-medium text-gray-900", children: option.label })] }, `${option.value}`)))) : (_jsx("p", { className: "text-sm text-gray-500", children: "No options found" })) }), filteredOptions?.length > itemsPerPage && (_jsxs("div", { className: "mt-3 flex items-center justify-between text-sm", children: [_jsxs("button", { onClick: handlePrevPage, disabled: currentPage === 1, className: `flex items-center ${currentPage === 1 ? 'cursor-not-allowed text-gray-300' : 'text-primary-600 hover:text-primary-700'}`, "aria-label": "Previous page", children: [_jsx(FiChevronLeft, { className: "mr-1", "aria-hidden": "true" }), "Prev"] }), _jsxs("span", { className: "text-xs text-gray-500", children: ["Page ", currentPage, " of ", totalPages] }), _jsxs("button", { onClick: handleNextPage, disabled: currentPage >= totalPages, className: `flex items-center ${currentPage >= totalPages ? 'cursor-not-allowed text-gray-300' : 'text-primary-600 hover:text-primary-700'}`, "aria-label": "Next page", children: ["Next", _jsx(FiChevronRight, { className: "ml-1", "aria-hidden": "true" })] })] }))] }));
+};
+export default FilterList;