mautourco-components 0.2.12 → 0.2.13

package/dist/components/organisms/Table/Table.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { PaginationProps } from '../../molecules/Pagination/Pagination';
+import './Table.css';
+import { ColumnType } from './TableCell';
+export type TableRowData<T = any> = {
+    /** Unique identifier for the row */
+    id?: string;
+    /** Whether the row is visible */
+    visible?: boolean;
+    /**
+     * Class name for the row
+     *
+     * Available classes:
+     * - table__row-yellow: For yellow rows
+     * - table__row-border-0: For no border
+     */
+    className?: string;
+    /** Children rows for the row */
+    children?: T[];
+};
+export interface TableProps<T extends TableRowData<T>> {
+    /** Columns definitions for the table */
+    columns: ColumnType<T>[];
+    /** Data for the table */
+    data: T[];
+    /** Callback function to be called when a row is clicked */
+    onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T) => void;
+    /** Pagination configuration for the table */
+    pagination?: PaginationProps;
+    /** Total rows in the table */
+    totalRows?: Record<string, string | number>;
+    /** Whether the child rows are visible */
+    isGrouped?: boolean;
+}
+/**
+ * A table component for displaying structured data in rows and columns. Supports customizable column definitions and data rows.
+ *
+ * @example
+ * <Table
+ *  columns={columns}
+ *  data={data}
+ *  pagination={pagination}
+ *  onClickRow={onClickRow}
+ * />
+ *
+ * @param props TableProps<T>
+ * @returns React.ReactNode
+ *
+ */
+export declare const Table: <T extends TableRowData<T>>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/Table/Table.js

@@ -0,0 +1,95 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/src/lib/utils';
+import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
+import * as motion from 'motion/react-m';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+import Pagination from '../../molecules/Pagination/Pagination';
+import './Table.css';
+import { TableCell } from './TableCell';
+/**
+ * A component for displaying nested content in a table row.
+ *
+ * @example
+ * <NestedContent
+ *  rowIndex={rowIndex}
+ *  columns={columns}
+ *  children={children}
+ *  onClickRow={onClickRow}
+ * />
+ * @param NestedContentProps<T>
+ * @returns
+ */
+var NestedContent = function (_a) {
+    var rowIndex = _a.rowIndex, columns = _a.columns, children = _a.children, isGrouped = _a.isGrouped, onClickRow = _a.onClickRow;
+    var contentRef = useRef(null);
+    var _b = useState(0), height = _b[0], setHeight = _b[1];
+    useEffect(function () {
+        if (contentRef.current) {
+            var measuredHeight = contentRef.current.scrollHeight;
+            setHeight(measuredHeight);
+        }
+    }, [children]);
+    var Tag = isGrouped ? 'div' : motion.div;
+    return (_jsx(Tag, __assign({ ref: contentRef, initial: { height: 0, opacity: 0 }, animate: { height: height, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+            height: { duration: 0.2, ease: 'easeInOut' },
+            opacity: { duration: 0.15, ease: 'easeInOut' },
+        }, className: "table__nested-wrapper" }, { children: _jsx("table", __assign({ className: "table" }, { children: _jsx("tbody", { children: children.map(function (child, childIndex) { return (_jsx("tr", __assign({ className: cn(child.className, {
+                        'table__row-clickable': onClickRow,
+                    }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, child); } }, { children: _jsx(TableCell, { columns: columns, row: child, rowIndex: childIndex }) }), "ch-".concat(rowIndex, "-").concat(childIndex))); }) }) })) })));
+};
+/**
+ * A table component for displaying structured data in rows and columns. Supports customizable column definitions and data rows.
+ *
+ * @example
+ * <Table
+ *  columns={columns}
+ *  data={data}
+ *  pagination={pagination}
+ *  onClickRow={onClickRow}
+ * />
+ *
+ * @param props TableProps<T>
+ * @returns React.ReactNode
+ *
+ */
+export var Table = function (props) {
+    var columns = props.columns, data = props.data, pagination = props.pagination, isGrouped = props.isGrouped, _a = props.totalRows, totalRows = _a === void 0 ? {} : _a, onClickRow = props.onClickRow;
+    var normalizeLastColumnWidth = function () {
+        var width = columns[columns.length - 1].width;
+        if (typeof width === 'number') {
+            return "".concat(width - 10, "px");
+        }
+        return width;
+    };
+    var hasTotal = Object.keys(totalRows).length > 0;
+    return (_jsx(LazyMotion, __assign({ features: domAnimation }, { children: _jsxs("div", { children: [_jsx("div", __assign({ className: cn('table-container', { 'table-container--no-total': !hasTotal }) }, { children: _jsxs("table", __assign({ className: "table" }, { children: [_jsx("thead", __assign({ className: "table__header" }, { children: _jsx("tr", { children: columns.map(function (column, columnIndex) { return (_jsx("th", __assign({ className: column.className, style: column.width
+                                            ? { minWidth: column.width, width: column.width }
+                                            : undefined }, { children: _jsx(Text, __assign({ variant: "bold", size: "sm" }, { children: column.header })) }), "hd-".concat(columnIndex))); }) }) })), _jsx("tbody", __assign({ className: "table__body" }, { children: data.map(function (row, rowIndex) {
+                                    var _a, _b;
+                                    var hasVisibleChildren = (_a = row.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
+                                    var defaultTable = (_jsx("tr", __assign({ className: cn(row.className, {
+                                            'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
+                                            'table__row-clickable': onClickRow,
+                                        }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); } }, { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) })));
+                                    return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", __assign({ className: "table__row-grouped" }, { children: _jsx("td", __assign({ colSpan: columns.length }, { children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) })) }))) : (defaultTable)) : (_jsxs(_Fragment, { children: [defaultTable, _jsx(AnimatePresence, __assign({ initial: false }, { children: hasVisibleChildren && (_jsx("tr", __assign({ className: cn('table__no-hover', {
+                                                            'table__row-nested': row.children && row.children.length > 0,
+                                                        }) }, { children: _jsx("td", __assign({ colSpan: columns.length, className: "table__cell-nested" }, { children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) })) }), "nested-".concat(rowIndex))) }))] })) }, "rw-".concat(rowIndex)));
+                                }) }))] })) })), hasTotal && (_jsx("div", __assign({ className: "table__total-container" }, { children: _jsx("table", __assign({ className: "table" }, { children: _jsx("tbody", __assign({ className: "table__total" }, { children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", __assign({ style: {
+                                            '--last-column-width': normalizeLastColumnWidth(),
+                                        } }, { children: _jsxs("div", __assign({ className: "relative" }, { children: [_jsxs(Text, __assign({ size: "md", variant: "bold", className: "absolute top-0 -left-3 -translate-x-full" }, { children: ["Total :", ' '] })), _jsx("div", { children: Object.entries(totalRows).map(function (_a) {
+                                                        var currency = _a[0], total = _a[1];
+                                                        return (_jsx("div", { children: _jsxs(Text, __assign({ size: "md", variant: "bold" }, { children: [currency, " ", total] })) }, currency));
+                                                    }) })] })) }))] }) })) })) }))), pagination && (_jsx("div", __assign({ className: "flex justify-end mt-4" }, { children: _jsx(Pagination, __assign({}, pagination)) })))] }) })));
+};

package/dist/components/organisms/Table/TableCell.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableRowData } from './Table';
+export type ColumnType<T = TableRowData> = {
+    header: string;
+    key: Extract<keyof T, string> | 'actions';
+    className?: string;
+    width?: number | string;
+    cell: (value: T[Extract<keyof T, string>], rawData: T, index?: number) => React.ReactNode;
+};
+export interface TableCellProps<T = TableRowData> {
+    columns: ColumnType<T>[];
+    row: T;
+    rowIndex: number;
+}
+export declare const TableCell: <T extends TableRowData<any>>(props: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/Table/TableCell.js

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var TableCell = function (props) {
+    var columns = props.columns, row = props.row, rowIndex = props.rowIndex;
+    return (_jsx(_Fragment, { children: columns.map(function (column, columnIndex) { return (_jsx("td", __assign({ style: column.width ? { minWidth: column.width, width: column.width } : undefined }, { children: column.key === 'actions' ? (_jsx("div", { children: column.cell({}, row, rowIndex) })) : (column.cell(row[column.key], row, rowIndex)) }), "cl-".concat(rowIndex, "-").concat(columnIndex))); }) }));
+};

package/dist/components/organisms/Table/columns/booking-columns.d.ts

@@ -0,0 +1,7 @@
+import { ActionDropdownType } from '@/src/types/table';
+import { BookingListItem } from '@/src/types/table/booking.types';
+import { ColumnType } from '../TableCell';
+export declare const bookingColumns: (params: {
+    onExpand: (value?: BookingListItem) => void;
+    onAction: (action: ActionDropdownType) => void;
+}) => ColumnType<BookingListItem>[];

package/dist/components/organisms/Table/columns/booking-columns.js

@@ -0,0 +1,83 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '@/src/components/atoms/Button/Button';
+import Chip from '@/src/components/atoms/Chip/Chip';
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { actionDropdownData } from '../constant';
+export var bookingColumns = function (_a) {
+    var onExpand = _a.onExpand, onAction = _a.onAction;
+    return [
+        {
+            header: 'Quote nb.',
+            key: 'booking_id',
+            width: 150,
+            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+        },
+        {
+            header: 'Client name',
+            key: 'agency_name',
+            width: 150,
+            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+        },
+        {
+            header: 'Type',
+            key: 'status',
+            width: 145,
+            cell: function (value) {
+                return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: "STD" })));
+            },
+        },
+        {
+            header: 'From → To',
+            key: 'date',
+            width: 260,
+            cell: function (value) {
+                var dates = value;
+                return _jsx(DateDisplay, { date: dates });
+            },
+        },
+        {
+            header: 'No. of services',
+            key: 'pax_details',
+            width: 350,
+            cell: function (value) {
+                var paxDetails = value;
+                var paxDetailsKeys = Object.keys(paxDetails);
+                if (paxDetailsKeys.length) {
+                    return (_jsx("div", __assign({ className: "flex flex-wrap gap-2" }, { children: paxDetailsKeys.map(function (key) {
+                            return (_jsx(Chip, { label: "".concat(key, " ").concat(paxDetails[key]), type: paxDetails[key] > 0
+                                    ? 'filled'
+                                    : 'outline', color: "accent", size: "sm" }));
+                        }) })));
+                }
+                return _jsx(_Fragment, {});
+            },
+        },
+        {
+            header: 'Created by',
+            key: 'created_by',
+            width: 160,
+            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+        },
+        {
+            header: '',
+            key: 'actions',
+            width: 232,
+            cell: function (_value, raw) {
+                return (_jsx("div", { children: _jsxs("div", __assign({ className: "flex items-center gap-x-8" }, { children: [_jsxs("div", __assign({ className: "flex items-center gap-x-3" }, { children: [_jsx(Button, __assign({ variant: "secondary", size: "sm", className: "w-[89px]" }, { children: "Proforma" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", className: "w-[89px]" }, { children: "Voucher" }))] })), _jsx(ActionDropdown, { data: actionDropdownData(onAction) })] })) }));
+            },
+        },
+    ];
+};

package/dist/components/organisms/Table/columns/detail-resume-columns.d.ts

@@ -0,0 +1,3 @@
+import { DetailResumeItem } from '@/src/types/table';
+import { ColumnType } from '../TableCell';
+export declare const detailResumeColumns: () => ColumnType<DetailResumeItem>[];

package/dist/components/organisms/Table/columns/detail-resume-columns.js

@@ -0,0 +1,178 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Chip from '@/src/components/atoms/Chip/Chip';
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { ServiceType, } from '@/src/types/table';
+import { RowAccommodation } from '../../../molecules/TableServiceItem/RowAccommodation';
+import { RowExcursion } from '../../../molecules/TableServiceItem/RowExcursion';
+import { RowOtherServices } from '../../../molecules/TableServiceItem/RowOtherServices';
+import { RowTransfer } from '../../../molecules/TableServiceItem/RowTransfer';
+export var detailResumeColumns = function () {
+    return [
+        {
+            header: 'Item',
+            key: 'Type',
+            width: 268,
+            cell: function (value, raw) {
+                if (value === ServiceType.ACCOMMODATION) {
+                    var accom = raw;
+                    console.log(accom);
+                    return (_jsx(RowAccommodation.FirstCol, { serviceName: accom.HotelName, offers: accom.Offers, status: accom.RoomStatus }));
+                }
+                if (value === ServiceType.EXCURSION) {
+                    var excursion = raw;
+                    return (_jsx(RowExcursion.FirstCol, { serviceName: excursion.ExcursionName }));
+                }
+                if (value === ServiceType.TRANSFER) {
+                    var transfer = raw;
+                    return (_jsx(RowTransfer.FirstCol, { serviceName: transfer.VehicleTypeName, transferType: transfer.TransferType, from: transfer.LocationFromName, to: transfer.LocationToName }));
+                }
+                if (value === ServiceType.OTHER_SERVICE) {
+                    return _jsx(RowOtherServices.FirstCol, {});
+                }
+                return _jsx(_Fragment, {});
+            },
+        },
+        {
+            header: 'Details',
+            key: 'Type',
+            width: 400,
+            cell: function (value, raw, index) {
+                if (value === ServiceType.ACCOMMODATION) {
+                    var accom = raw;
+                    return (_jsx(RowAccommodation.DetailsCol, { data: {
+                            RoomName: accom.RoomName,
+                            Dates: accom.Dates,
+                            ClientCategory: accom.ClientCategory,
+                            MealPlan: accom.MealPlan,
+                        }, index: (index || 0) + 1 }));
+                }
+                if (value === ServiceType.EXCURSION) {
+                    var excursion = raw;
+                    return (_jsx(RowExcursion.DetailsCol, { data: {
+                            languages: excursion.AvailableLanguages,
+                            duration: excursion.Duration,
+                            accessibility: excursion.Accessibility,
+                            transferType: excursion.TransferType,
+                        } }));
+                }
+                if (value === ServiceType.TRANSFER) {
+                    var transfer = raw;
+                    return (_jsx(RowTransfer.DetailsCol, { data: {
+                            carType: transfer.VehicleTypeName,
+                            clientType: 'STD',
+                        } }));
+                }
+                if (value === ServiceType.OTHER_SERVICE) {
+                    return _jsx(RowOtherServices.DetailsCol, {});
+                }
+                return _jsx(_Fragment, {});
+            },
+        },
+        {
+            header: 'Date',
+            key: 'Type',
+            width: 307,
+            cell: function (value, raw) {
+                var date = [];
+                switch (value) {
+                    case ServiceType.ACCOMMODATION:
+                        var accom = raw;
+                        date = accom.Dates;
+                        break;
+                    case ServiceType.EXCURSION:
+                        var excursion = raw;
+                        date = [excursion.ServiceDate];
+                        break;
+                    case ServiceType.TRANSFER:
+                        var transfer = raw;
+                        date = [transfer.TransferDate];
+                        break;
+                    case ServiceType.OTHER_SERVICE:
+                        var otherService = raw;
+                        date = [otherService.service_date];
+                        break;
+                }
+                return _jsx(DateDisplay, { date: date });
+            },
+        },
+        {
+            header: 'No. of pax',
+            key: 'Type',
+            width: 396,
+            cell: function (value, raw) {
+                var pax = {
+                    Adult: 0,
+                    Teen: 0,
+                    Infant: 0,
+                    Child: 0,
+                };
+                switch (value) {
+                    case ServiceType.ACCOMMODATION:
+                    case ServiceType.EXCURSION:
+                    case ServiceType.TRANSFER:
+                        var item = raw;
+                        pax.Adult = item.AdultCount;
+                        pax.Teen = item.TeenCount;
+                        pax.Infant = item.InfantCount;
+                        pax.Child = item.ChildCount;
+                        break;
+                    case ServiceType.OTHER_SERVICE:
+                        var otherService = raw;
+                        pax.Adult = otherService.adult_pax;
+                        pax.Teen = otherService.teen_pax;
+                        pax.Infant = otherService.infant_pax;
+                        pax.Child = otherService.child_pax;
+                        break;
+                }
+                return (_jsx("div", __assign({ className: "flex items-center gap-x-3" }, { children: Object.keys(pax).map(function (k, index) {
+                        var _a;
+                        var count = (_a = pax[k]) !== null && _a !== void 0 ? _a : 0;
+                        var type = count > 0 ? 'filled' : 'outline';
+                        return (_jsx(Chip, { label: "".concat(k, " ").concat(count), size: "sm", color: "accent", type: type, className: "!px-3" }, "pax-".concat(index)));
+                    }) })));
+            },
+        },
+        {
+            header: 'Price',
+            key: 'Type',
+            width: 299,
+            cell: function (value, raw) {
+                var total = {
+                    currency: undefined,
+                    total: undefined,
+                };
+                switch (value) {
+                    case ServiceType.ACCOMMODATION:
+                        var accom = raw;
+                        total.currency = accom.Currency;
+                        total.total = accom.Total;
+                        break;
+                    case ServiceType.EXCURSION:
+                    case ServiceType.TRANSFER:
+                        var item = raw;
+                        total.currency = item.Currency;
+                        total.total = item.TotalPrice;
+                        break;
+                    case ServiceType.OTHER_SERVICE:
+                        var otherService = raw;
+                        total.currency = otherService.currency;
+                        total.total = otherService.total_price;
+                        break;
+                }
+                return (_jsxs(Text, __assign({ size: "sm", variant: "bold" }, { children: [total.currency, " ", total.total] })));
+            },
+        },
+    ];
+};

package/dist/components/organisms/Table/columns/index.d.ts

@@ -0,0 +1,12 @@
+declare const columns: {
+    quotation: (params: {
+        onExpand: (value?: import("../../../..").QuotationListItem | undefined) => void;
+        onAction: (action: import("../../../..").ActionDropdownType) => void;
+    }) => import("../TableCell").ColumnType<import("../../../..").QuotationListItem>[];
+    detailResume: () => import("../TableCell").ColumnType<import("../../../..").DetailResumeItem>[];
+    booking: (params: {
+        onExpand: (value?: import("../../../../types/table/booking.types").BookingListItem | undefined) => void;
+        onAction: (action: import("../../../..").ActionDropdownType) => void;
+    }) => import("../TableCell").ColumnType<import("../../../../types/table/booking.types").BookingListItem>[];
+};
+export { columns };

package/dist/components/organisms/Table/columns/index.js

@@ -0,0 +1,9 @@
+import { bookingColumns } from './booking-columns';
+import { detailResumeColumns } from './detail-resume-columns';
+import { quotationColumns } from './quotation-columns';
+var columns = {
+    quotation: quotationColumns,
+    detailResume: detailResumeColumns,
+    booking: bookingColumns,
+};
+export { columns };

package/dist/components/organisms/Table/columns/quotation-columns.d.ts

@@ -0,0 +1,7 @@
+import { ActionDropdownType } from '@/src/types/table/action-dropdown-type.types';
+import { QuotationListItem } from '@/src/types/table/quotation.types';
+import { ColumnType } from '../TableCell';
+export declare const quotationColumns: (params: {
+    onExpand: (value?: QuotationListItem) => void;
+    onAction: (action: ActionDropdownType) => void;
+}) => ColumnType<QuotationListItem>[];

package/dist/components/organisms/Table/columns/quotation-columns.js

@@ -0,0 +1,91 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '@/src/components/atoms/Button/Button';
+import Chip from '@/src/components/atoms/Chip/Chip';
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
+import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
+import { cn } from '@/src/lib/utils';
+import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
+export var quotationColumns = function (_a) {
+    var onExpand = _a.onExpand, onAction = _a.onAction;
+    return [
+        {
+            header: 'Quote nb.',
+            key: 'file_nb',
+            width: 150,
+            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+        },
+        {
+            header: 'Client name',
+            key: 'agency_name',
+            width: 150,
+            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+        },
+        {
+            header: 'File status',
+            key: 'status',
+            width: 160,
+            cell: function (value, raw) {
+                var isMultiple = raw.children && raw.children.length > 0;
+                return (_jsx(Chip, __assign({ color: isMultiple ? 'blue' : chipVariant[value.toLowerCase()], size: "sm" }, { children: isMultiple ? 'Multiple' : value })));
+            },
+        },
+        {
+            header: 'Type',
+            key: 'client_type',
+            width: 145,
+            cell: function (value) {
+                var clientType = clientTypeMap[value];
+                return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: clientType !== null && clientType !== void 0 ? clientType : value })));
+            },
+        },
+        {
+            header: 'From → To',
+            key: 'date',
+            width: 260,
+            cell: function (value) {
+                var dates = value;
+                return _jsx(DateDisplay, { date: dates });
+            },
+        },
+        {
+            header: 'No. of services',
+            key: 'service_count',
+            width: 350,
+            cell: function (value) {
+                var _a = value, accom_count = _a.accom_count, transfer_count = _a.transfer_count, tours_count = _a.tours_count;
+                return (_jsxs("div", __assign({ className: "flex flex-wrap gap-2" }, { children: [_jsx(Chip, { label: "Accomodation ".concat(accom_count), type: accom_count > 0 ? 'filled' : 'outline', color: "accent", size: "sm" }), _jsx(Chip, { label: "Transfer ".concat(transfer_count), type: transfer_count > 0 ? 'filled' : 'outline', color: "accent", size: "sm" }), _jsx(Chip, { label: "Excursion ".concat(tours_count), type: tours_count > 0 ? 'filled' : 'outline', color: "accent", size: "sm" })] })));
+            },
+        },
+        {
+            header: 'Created by',
+            key: 'created_by',
+            width: 160,
+            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+        },
+        {
+            header: '',
+            key: 'actions',
+            width: 232,
+            cell: function (_value, raw) {
+                var _a;
+                var hasChildren = raw.children && raw.children.length > 0;
+                var isExpanded = (_a = raw.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
+                var buttonLabel = isExpanded ? 'See less' : 'See more';
+                var isOnRequest = raw.status.toLowerCase() === 'on request';
+                return (_jsx("div", { children: hasChildren ? (_jsx(Button, __assign({ variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand(raw); } }, { children: buttonLabel }))) : (_jsxs("div", __assign({ className: "flex itemes-center gap-x-8" }, { children: [_jsx(Button, __assign({ variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button" }, { children: isOnRequest ? 'Request to book' : 'Book now' })), _jsx(ActionDropdown, { data: actionDropdownData(onAction) })] }))) }));
+            },
+        },
+    ];
+};

package/dist/components/organisms/Table/constant.d.ts

@@ -0,0 +1,6 @@
+import { ActionDropdownType } from '@/src/types/table';
+import { ChipProps } from '../../atoms/Chip/Chip';
+import { ActionDropdownItem } from '../../molecules/ActionDropdown/ActionDropdown';
+export declare const actionDropdownData: (onAction: (action: ActionDropdownType) => void) => ActionDropdownItem[];
+export declare const chipVariant: Record<string, ChipProps['color']>;
+export declare const clientTypeMap: Record<string, string>;

package/dist/components/organisms/Table/constant.js

@@ -0,0 +1,24 @@
+import { ActionDropdownType } from '@/src/types/table';
+export var actionDropdownData = function (onAction) { return [
+    {
+        label: 'Add item',
+        onClick: function () { return onAction(ActionDropdownType.ADD_ITEM); },
+    },
+    {
+        label: 'Send via mail',
+        onClick: function () { return onAction(ActionDropdownType.SEND_VIA_MAIL); },
+    },
+    {
+        label: 'Delete quote',
+        onClick: function () { return onAction(ActionDropdownType.DELETE_QUOTE); },
+    },
+]; };
+export var chipVariant = {
+    'free sales': 'accent',
+    'on request': 'yellow',
+};
+export var clientTypeMap = {
+    'standard-client': 'STD',
+    honeymooners: 'HMN',
+    vip: 'VIP',
+};

package/dist/components/organisms/Table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './columns';
+export * from './Table';

package/dist/components/organisms/Table/index.js

@@ -0,0 +1,2 @@
+export * from './columns';
+export * from './Table';

package/dist/components/ui/popover.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };