mautourco-components 0.2.47 → 0.2.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/molecules/Pagination/Pagination.css +27 -17
  2. package/dist/components/molecules/Pagination/Pagination.js +4 -4
  3. package/dist/components/organisms/Table/Table.css +64 -53
  4. package/dist/components/organisms/Table/Table.d.ts +1 -0
  5. package/dist/components/organisms/Table/Table.js +15 -13
  6. package/dist/components/organisms/Table/columns/booking-columns.d.ts +1 -1
  7. package/dist/components/organisms/Table/columns/booking-columns.js +17 -2
  8. package/dist/components/organisms/Table/columns/index.d.ts +2 -2
  9. package/dist/components/organisms/Table/columns/quotation-columns.d.ts +1 -1
  10. package/dist/components/organisms/Table/columns/quotation-columns.js +2 -2
  11. package/package.json +1 -1
  12. package/src/components/molecules/Pagination/Pagination.css +27 -18
  13. package/src/components/molecules/Pagination/Pagination.tsx +9 -13
  14. package/src/components/organisms/Table/Table.css +64 -53
  15. package/src/components/organisms/Table/Table.tsx +101 -70
  16. package/src/components/organisms/Table/columns/booking-columns.tsx +40 -13
  17. package/src/components/organisms/Table/columns/quotation-columns.tsx +3 -3
package/dist/components/molecules/Pagination/Pagination.css CHANGED
@@ -2,14 +2,15 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- .pagination {
5
+ .mtc-pagination {
6
6
  display: flex;
7
7
  align-items: center;
8
8
  gap: var(--spacing-gap-gap-3, 12px);
9
- padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-1-5, 6px);
9
+ padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px)
10
+ var(--spacing-gap-gap-1-5, 6px);
10
11
  }
11
12
 
12
- .pagination__button {
13
+ .mtc-pagination__button {
13
14
  display: flex;
14
15
  align-items: center;
15
16
  justify-content: center;
@@ -18,35 +19,38 @@
18
19
  border-radius: var(--border-radius-rounded-lg, 8px);
19
20
  padding: var(--spacing-padding-py-2, 8px) var(--spacing-padding-px-2, 8px);
20
21
  cursor: pointer;
21
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
22
+ transition:
23
+ background-color 0.2s ease-in-out,
24
+ border-color 0.2s ease-in-out,
25
+ opacity 0.2s ease-in-out;
22
26
  }
23
27
 
24
- .pagination__button:hover:not(:disabled) {
28
+ .mtc-pagination__button:hover:not(:disabled) {
25
29
  background-color: var(--color-elevation-state-hover-subtle, #ededed);
26
30
  border-color: var(--color-border-medium, #a3a3a3);
27
31
  }
28
32
 
29
- .pagination__button:active:not(:disabled) {
33
+ .mtc-pagination__button:active:not(:disabled) {
30
34
  background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
31
35
  }
32
36
 
33
- .pagination__button:disabled {
37
+ .mtc-pagination__button:disabled {
34
38
  opacity: 0.5;
35
39
  cursor: not-allowed;
36
40
  }
37
41
 
38
- .pagination__button:focus-visible {
42
+ .mtc-pagination__button:focus-visible {
39
43
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
40
44
  outline-offset: 2px;
41
45
  }
42
46
 
43
- .pagination__numbers {
47
+ .mtc-pagination__numbers {
44
48
  display: flex;
45
49
  align-items: center;
46
50
  gap: var(--spacing-gap-gap-1, 4px);
47
51
  }
48
52
 
49
- .pagination__number {
53
+ .mtc-pagination__number {
50
54
  display: flex;
51
55
  align-items: center;
52
56
  justify-content: center;
@@ -55,36 +59,42 @@
55
59
  background-color: var(--color-elevation-level-1, #ffffff);
56
60
  border: none;
57
61
  border-radius: var(--border-radius-rounded-lg, 8px);
58
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
62
+ font-family:
63
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
64
+ sans-serif;
59
65
  font-size: var(--font-size-text-sm, 14px);
60
66
  font-weight: var(--font-weight-font-medium, 500);
61
67
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
62
68
  color: var(--color-text-default, #262626);
63
69
  cursor: pointer;
64
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
70
+ transition:
71
+ background-color 0.2s ease-in-out,
72
+ color 0.2s ease-in-out;
65
73
  }
66
74
 
67
- .pagination__number:hover:not(.pagination__number--selected) {
75
+ .mtc-pagination__number:hover:not(.mtc-pagination__number--selected) {
68
76
  background-color: var(--color-elevation-level-2, #f5f5f5);
69
77
  }
70
78
 
71
- .pagination__number--selected {
79
+ .mtc-pagination__number--selected {
72
80
  background-color: var(--color-atoll-green-800, #0f7173);
73
81
  color: var(--color-text-inverted, #ffffff);
74
82
  }
75
83
 
76
- .pagination__number:focus-visible {
84
+ .mtc-pagination__number:focus-visible {
77
85
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
78
86
  outline-offset: 2px;
79
87
  }
80
88
 
81
- .pagination__ellipsis {
89
+ .mtc-pagination__ellipsis {
82
90
  display: flex;
83
91
  align-items: center;
84
92
  justify-content: center;
85
93
  width: var(--dimension-width-w-10, 40px);
86
94
  height: var(--dimension-height-h-10, 40px);
87
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
95
+ font-family:
96
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
97
+ sans-serif;
88
98
  font-size: var(--font-size-text-sm, 14px);
89
99
  font-weight: var(--font-weight-font-medium, 500);
90
100
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
package/dist/components/molecules/Pagination/Pagination.js CHANGED
@@ -68,12 +68,12 @@ var Pagination = function (_a) {
68
68
  var pageNumbers = getPageNumbers();
69
69
  var isPreviousDisabled = currentPage <= 1;
70
70
  var isNextDisabled = currentPage >= totalPages;
71
- return (_jsxs("div", { className: "pagination ".concat(className), children: [_jsx("button", { type: "button", className: "pagination__button pagination__button--prev", onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": "Previous page", children: _jsx(Icon, { name: "chevron-left", size: "sm" }) }), _jsx("div", { className: "pagination__numbers", children: pageNumbers.map(function (page, index) {
71
+ return (_jsxs("div", { className: "mtc-pagination ".concat(className), children: [_jsx("button", { type: "button", className: "mtc-pagination__button mtc-pagination__button--prev", onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": "Previous page", children: _jsx(Icon, { name: "chevron-left", size: "sm" }) }), _jsx("div", { className: "mtc-pagination__numbers", children: pageNumbers.map(function (page, index) {
72
72
  if (page === 'ellipsis') {
73
- return (_jsx("span", { className: "pagination__ellipsis", children: "..." }, "ellipsis-".concat(index)));
73
+ return (_jsx("span", { className: "mtc-pagination__ellipsis", children: "..." }, "ellipsis-".concat(index)));
74
74
  }
75
75
  var isSelected = page === currentPage;
76
- return (_jsx("button", { type: "button", className: "pagination__number ".concat(isSelected ? 'pagination__number--selected' : ''), onClick: function () { return handlePageClick(page); }, "aria-label": "Page ".concat(page), "aria-current": isSelected ? 'page' : undefined, children: page }, page));
77
- }) }), _jsx("button", { type: "button", className: "pagination__button pagination__button--next", onClick: handleNext, disabled: isNextDisabled, "aria-label": "Next page", children: _jsx(Icon, { name: "chevron-right", size: "sm" }) })] }));
76
+ return (_jsx("button", { type: "button", className: "mtc-pagination__number ".concat(isSelected ? 'mtc-pagination__number--selected' : ''), onClick: function () { return handlePageClick(page); }, "aria-label": "Page ".concat(page), "aria-current": isSelected ? 'page' : undefined, children: page }, page));
77
+ }) }), _jsx("button", { type: "button", className: "mtc-pagination__button mtc-pagination__button--next", onClick: handleNext, disabled: isNextDisabled, "aria-label": "Next page", children: _jsx(Icon, { name: "chevron-right", size: "sm" }) })] }));
78
78
  };
79
79
  export default Pagination;
package/dist/components/organisms/Table/Table.css CHANGED
@@ -20,10 +20,14 @@
20
20
  width: 100%;
21
21
  border-collapse: collapse;
22
22
  border-spacing: 0;
23
+ table-layout: fixed;
23
24
  th,
24
25
  td {
25
26
  padding-inline: var(--spacing-padding-px-4);
26
27
  }
28
+ .table__cell-highlighted {
29
+ padding: 0;
30
+ }
27
31
  }
28
32
  .table__header {
29
33
  th {
@@ -50,61 +54,13 @@
50
54
  &:hover:not(.table__no-hover) {
51
55
  background-color: var(--color-elevation-state-hover-subtle);
52
56
  }
53
- &:first-child {
54
- border-top: none;
55
- }
56
- &.table__row-yellow {
57
- background-color: var(--color-yellow-50);
58
- border: 1px solid transparent;
59
- position: relative;
60
- &::after {
61
- content: '';
62
- position: absolute;
63
- inset: -1px;
64
- pointer-events: none;
65
- background-image:
66
- repeating-linear-gradient(
67
- to right,
68
- var(--color-yellow-600) 0,
69
- var(--color-yellow-600) 8px,
70
- transparent 8px,
71
- transparent 16px
72
- ),
73
- repeating-linear-gradient(
74
- to right,
75
- var(--color-yellow-600) 0,
76
- var(--color-yellow-600) 8px,
77
- transparent 8px,
78
- transparent 16px
79
- ),
80
- repeating-linear-gradient(
81
- to bottom,
82
- var(--color-yellow-600) 0,
83
- var(--color-yellow-600) 8px,
84
- transparent 8px,
85
- transparent 16px
86
- ),
87
- repeating-linear-gradient(
88
- to bottom,
89
- var(--color-yellow-600) 0,
90
- var(--color-yellow-600) 8px,
91
- transparent 8px,
92
- transparent 16px
93
- );
94
- background-size:
95
- 100% 1px,
96
- 100% 1px,
97
- 1px 100%,
98
- 1px 100%;
99
- background-position: top, bottom, left, right;
100
- background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
101
- }
102
- &:hover {
57
+ &.table__row-highlighted:hover {
58
+ tr {
103
59
  background-color: var(--color-yellow-100);
104
60
  }
105
- & + tr {
106
- border-top: none;
107
- }
61
+ }
62
+ &:first-child {
63
+ border-top: none;
108
64
  }
109
65
  &.table__row-border-0 {
110
66
  border-top: none;
@@ -281,4 +237,59 @@
281
237
  border-bottom: solid 1px var(--color-surface-300);
282
238
  }
283
239
  }
240
+ }
241
+
242
+ .table__row-div-highlighted {
243
+ background-color: var(--color-yellow-50);
244
+ border: 1px solid transparent;
245
+ position: relative;
246
+
247
+ &::after {
248
+ content: '';
249
+ position: absolute;
250
+ inset: -1px;
251
+ pointer-events: none;
252
+ background-image:
253
+ repeating-linear-gradient(
254
+ to right,
255
+ var(--color-yellow-600) 0,
256
+ var(--color-yellow-600) 8px,
257
+ transparent 8px,
258
+ transparent 16px
259
+ ),
260
+ repeating-linear-gradient(
261
+ to right,
262
+ var(--color-yellow-600) 0,
263
+ var(--color-yellow-600) 8px,
264
+ transparent 8px,
265
+ transparent 16px
266
+ ),
267
+ repeating-linear-gradient(
268
+ to bottom,
269
+ var(--color-yellow-600) 0,
270
+ var(--color-yellow-600) 8px,
271
+ transparent 8px,
272
+ transparent 16px
273
+ ),
274
+ repeating-linear-gradient(
275
+ to bottom,
276
+ var(--color-yellow-600) 0,
277
+ var(--color-yellow-600) 8px,
278
+ transparent 8px,
279
+ transparent 16px
280
+ );
281
+ background-size:
282
+ 100% 1px,
283
+ 100% 1px,
284
+ 1px 100%,
285
+ 1px 100%;
286
+ background-position: top, bottom, left, right;
287
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
288
+ }
289
+ &:hover {
290
+ background-color: var(--color-yellow-100);
291
+ }
292
+ & + tr {
293
+ border-top: none;
294
+ }
284
295
  }
package/dist/components/organisms/Table/Table.d.ts CHANGED
@@ -14,6 +14,7 @@ export type TableRowData<T = any> = {
14
14
  * - table__row-border-0: For no border
15
15
  */
16
16
  className?: string;
17
+ isHighlighted?: boolean;
17
18
  /** Children rows for the row */
18
19
  children?: T[];
19
20
  };
package/dist/components/organisms/Table/Table.js CHANGED
@@ -77,19 +77,21 @@ export function Table(props) {
77
77
  var hasTotal = Object.keys(totalRows).length > 0;
78
78
  return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { children: [_jsx("div", { className: cn('table-container', { 'table-container--no-total': !hasTotal }), children: _jsxs("table", { className: "table", children: [_jsx("thead", { className: "table__header", children: _jsx("tr", { children: columns.map(function (column, columnIndex) { return (_jsx("th", { className: column.className, style: column.width
79
79
  ? { minWidth: column.width, width: column.width }
80
- : undefined, children: _jsx(Text, { variant: "bold", size: "sm", children: column.header }) }, "hd-".concat(columnIndex))); }) }) }), _jsx("tbody", { className: "table__body", children: data.map(function (row, rowIndex) {
81
- var _a, _b;
82
- var hasVisibleChildren = (_a = row.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
83
- var defaultTable = (_jsx("tr", { className: cn(row.className, {
84
- 'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
85
- 'table__row-clickable': onClickRow,
86
- }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }));
87
- return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx("td", { colSpan: columns.length, className: cn({
88
- 'table__children--visible': hasVisibleChildren,
89
- }), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
90
- 'table__row-nested': row.children && row.children.length > 0,
91
- }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, children: row.children || [] }) }) }, "nested-".concat(rowIndex))) })] }) }) }) })) }, "rw-".concat(rowIndex)));
92
- }) })] }) }), hasTotal && (_jsx("div", { className: 'table__total-container', children: _jsx("table", { className: "table", children: _jsx("tbody", { className: cn('table__total', {
80
+ : undefined, children: _jsx(Text, { variant: "bold", size: "sm", children: column.header }) }, "hd-".concat(columnIndex))); }) }) }), _jsxs("tbody", { className: "table__body", children: [data.length > 0 &&
81
+ data.map(function (row, rowIndex) {
82
+ var _a, _b;
83
+ var hasVisibleChildren = (_a = row.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
84
+ var defaultTable = (_jsx("tr", { className: cn(row.className, {
85
+ 'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
86
+ 'table__row-clickable': onClickRow,
87
+ 'table__row-highlighted': row.isHighlighted,
88
+ }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
89
+ return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx("td", { colSpan: columns.length, className: cn({
90
+ 'table__children--visible': hasVisibleChildren,
91
+ }), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
92
+ 'table__row-nested': row.children && row.children.length > 0,
93
+ }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, children: row.children || [] }) }) }, "nested-".concat(rowIndex))) })] }) }) }) })) }, "rw-".concat(rowIndex)));
94
+ }), data.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "table__cell-empty", children: _jsx(Text, { size: "md", variant: "bold", className: "text-center", children: "No data found" }) }) }))] })] }) }), hasTotal && (_jsx("div", { className: 'table__total-container', children: _jsx("table", { className: "table", children: _jsx("tbody", { className: cn('table__total', {
93
95
  'table__total--dashed': isTotalBorderDash,
94
96
  }), children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", { style: {
95
97
  '--last-column-width': normalizeLastColumnWidth(),
package/dist/components/organisms/Table/columns/booking-columns.d.ts CHANGED
@@ -2,6 +2,6 @@ import { ActionDropdownType } from '@/src/types/table';
2
2
  import { BookingListItem } from '@/src/types/table/booking.types';
3
3
  import { ColumnType } from '../TableCell';
4
4
  export declare const bookingColumns: (params: {
5
- onAction?: (action: ActionDropdownType) => void;
5
+ onAction?: (data: BookingListItem) => (action: ActionDropdownType) => void;
6
6
  keywords?: string;
7
7
  }) => ColumnType<BookingListItem>[];
package/dist/components/organisms/Table/columns/booking-columns.js CHANGED
@@ -1,10 +1,22 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import Button from '../../../atoms/Button/Button';
3
+ import Chip from '../../../atoms/Chip/Chip';
3
4
  import { Text } from '../../../atoms/Typography/Typography';
4
5
  import { ActionDropdown } from '../../../molecules/ActionDropdown/ActionDropdown';
5
6
  import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
6
7
  import { PaxChips } from '../../../molecules/PaxChips/PaxChips';
7
8
  import { actionDropdownData } from '../constant';
9
+ var CHIP_WIDTH = 'w-[184px]';
10
+ var BUTTON_WIDTH = 'w-[89px]';
11
+ var renderStatusContent = function (status) {
12
+ if (status === 'PENDING') {
13
+ return (_jsx(Chip, { size: "sm", color: "yellow", className: CHIP_WIDTH, children: "On Request" }));
14
+ }
15
+ if (status === 'Cancelled') {
16
+ return (_jsx(Chip, { size: "sm", color: "red", className: CHIP_WIDTH, children: "Cancelled" }));
17
+ }
18
+ return (_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: BUTTON_WIDTH, children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: BUTTON_WIDTH, children: "Voucher" })] }));
19
+ };
8
20
  export var bookingColumns = function (_a) {
9
21
  var onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
10
22
  return [
@@ -74,7 +86,10 @@ export var bookingColumns = function (_a) {
74
86
  key: 'actions',
75
87
  width: 232,
76
88
  cell: function (_value, raw) {
77
- return (_jsx("div", { children: _jsxs("div", { className: "flex items-center gap-x-8", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: "w-[89px]", children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: "w-[89px]", children: "Voucher" })] }), _jsx(ActionDropdown, { data: actionDropdownData(onAction !== null && onAction !== void 0 ? onAction : (function () { })) })] }) }));
89
+ var _a;
90
+ var handleAction = (_a = onAction === null || onAction === void 0 ? void 0 : onAction(raw)) !== null && _a !== void 0 ? _a : (function () { });
91
+ var actionData = actionDropdownData(handleAction);
92
+ return (_jsxs("div", { className: "flex items-center justify-between gap-x-8", children: [renderStatusContent(raw.status), _jsx(ActionDropdown, { data: actionData })] }));
78
93
  },
79
94
  },
80
95
  ];
package/dist/components/organisms/Table/columns/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  declare const columns: {
2
2
  quotation: (params: {
3
- onExpand?: (value?: import("../../../..").QuotationListItem) => void;
3
+ onExpand?: (value?: import("../../../..").QuotationListItem, index?: number, childIndex?: number) => void;
4
4
  onAction?: (data: {
5
5
  isChild?: boolean;
6
6
  quote: import("../../../..").QuotationListItem;
@@ -11,7 +11,7 @@ declare const columns: {
11
11
  onRemove?: (value: import("../../../..").DetailResumeItem, index?: number) => void;
12
12
  }) => import("../TableCell").ColumnType<import("../../../..").DetailResumeItem>[];
13
13
  booking: (params: {
14
- onAction?: (action: import("../../../..").ActionDropdownType) => void;
14
+ onAction?: (data: import("../../../../types/table/booking.types").BookingListItem) => (action: import("../../../..").ActionDropdownType) => void;
15
15
  keywords?: string;
16
16
  }) => import("../TableCell").ColumnType<import("../../../../types/table/booking.types").BookingListItem>[];
17
17
  bookingCancelService: (params?: {
package/dist/components/organisms/Table/columns/quotation-columns.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ActionDropdownType } from '@/src/types/table/action-dropdown-type.types
2
2
  import { QuotationListItem } from '@/src/types/table/quotation.types';
3
3
  import { ColumnType } from '../TableCell';
4
4
  export declare const quotationColumns: (params: {
5
- onExpand?: (value?: QuotationListItem) => void;
5
+ onExpand?: (value?: QuotationListItem, index?: number, childIndex?: number) => void;
6
6
  onAction?: (data: {
7
7
  isChild?: boolean;
8
8
  quote: QuotationListItem;
package/dist/components/organisms/Table/columns/quotation-columns.js CHANGED
@@ -82,13 +82,13 @@ export var quotationColumns = function (_a) {
82
82
  header: '',
83
83
  key: 'actions',
84
84
  width: 232,
85
- cell: function (_value, raw, _index, childIndex) {
85
+ cell: function (_value, raw, index, childIndex) {
86
86
  var _a, _b;
87
87
  var hasChildren = raw.children && raw.children.length > 0;
88
88
  var isExpanded = (_a = raw.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
89
89
  var buttonLabel = isExpanded ? 'See less' : 'See more';
90
90
  var isOnRequest = raw.status.toLowerCase() === 'on request';
91
- return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) })] })) }));
91
+ return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw, index, childIndex); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) })] })) }));
92
92
  },
93
93
  },
94
94
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.47",
3
+ "version": "0.2.49",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Motorco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/molecules/Pagination/Pagination.css CHANGED
@@ -1,11 +1,12 @@
1
- .pagination {
1
+ .mtc-pagination {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  gap: var(--spacing-gap-gap-3, 12px);
5
- padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-1-5, 6px);
5
+ padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px)
6
+ var(--spacing-gap-gap-1-5, 6px);
6
7
  }
7
8
 
8
- .pagination__button {
9
+ .mtc-pagination__button {
9
10
  display: flex;
10
11
  align-items: center;
11
12
  justify-content: center;
@@ -14,35 +15,38 @@
14
15
  border-radius: var(--border-radius-rounded-lg, 8px);
15
16
  padding: var(--spacing-padding-py-2, 8px) var(--spacing-padding-px-2, 8px);
16
17
  cursor: pointer;
17
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
18
+ transition:
19
+ background-color 0.2s ease-in-out,
20
+ border-color 0.2s ease-in-out,
21
+ opacity 0.2s ease-in-out;
18
22
  }
19
23
 
20
- .pagination__button:hover:not(:disabled) {
24
+ .mtc-pagination__button:hover:not(:disabled) {
21
25
  background-color: var(--color-elevation-state-hover-subtle, #ededed);
22
26
  border-color: var(--color-border-medium, #a3a3a3);
23
27
  }
24
28
 
25
- .pagination__button:active:not(:disabled) {
29
+ .mtc-pagination__button:active:not(:disabled) {
26
30
  background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
27
31
  }
28
32
 
29
- .pagination__button:disabled {
33
+ .mtc-pagination__button:disabled {
30
34
  opacity: 0.5;
31
35
  cursor: not-allowed;
32
36
  }
33
37
 
34
- .pagination__button:focus-visible {
38
+ .mtc-pagination__button:focus-visible {
35
39
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
36
40
  outline-offset: 2px;
37
41
  }
38
42
 
39
- .pagination__numbers {
43
+ .mtc-pagination__numbers {
40
44
  display: flex;
41
45
  align-items: center;
42
46
  gap: var(--spacing-gap-gap-1, 4px);
43
47
  }
44
48
 
45
- .pagination__number {
49
+ .mtc-pagination__number {
46
50
  display: flex;
47
51
  align-items: center;
48
52
  justify-content: center;
@@ -51,40 +55,45 @@
51
55
  background-color: var(--color-elevation-level-1, #ffffff);
52
56
  border: none;
53
57
  border-radius: var(--border-radius-rounded-lg, 8px);
54
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
58
+ font-family:
59
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
60
+ sans-serif;
55
61
  font-size: var(--font-size-text-sm, 14px);
56
62
  font-weight: var(--font-weight-font-medium, 500);
57
63
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
58
64
  color: var(--color-text-default, #262626);
59
65
  cursor: pointer;
60
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
66
+ transition:
67
+ background-color 0.2s ease-in-out,
68
+ color 0.2s ease-in-out;
61
69
  }
62
70
 
63
- .pagination__number:hover:not(.pagination__number--selected) {
71
+ .mtc-pagination__number:hover:not(.mtc-pagination__number--selected) {
64
72
  background-color: var(--color-elevation-level-2, #f5f5f5);
65
73
  }
66
74
 
67
- .pagination__number--selected {
75
+ .mtc-pagination__number--selected {
68
76
  background-color: var(--color-atoll-green-800, #0f7173);
69
77
  color: var(--color-text-inverted, #ffffff);
70
78
  }
71
79
 
72
- .pagination__number:focus-visible {
80
+ .mtc-pagination__number:focus-visible {
73
81
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
74
82
  outline-offset: 2px;
75
83
  }
76
84
 
77
- .pagination__ellipsis {
85
+ .mtc-pagination__ellipsis {
78
86
  display: flex;
79
87
  align-items: center;
80
88
  justify-content: center;
81
89
  width: var(--dimension-width-w-10, 40px);
82
90
  height: var(--dimension-height-h-10, 40px);
83
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
91
+ font-family:
92
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
93
+ sans-serif;
84
94
  font-size: var(--font-size-text-sm, 14px);
85
95
  font-weight: var(--font-weight-font-medium, 500);
86
96
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
87
97
  color: var(--color-text-default, #262626);
88
98
  user-select: none;
89
99
  }
90
-
package/src/components/molecules/Pagination/Pagination.tsx CHANGED
@@ -94,22 +94,21 @@ const Pagination: React.FC<PaginationProps> = ({
94
94
  const isNextDisabled = currentPage >= totalPages;
95
95
 
96
96
  return (
97
- <div className={`pagination ${className}`}>
97
+ <div className={`mtc-pagination ${className}`}>
98
98
  <button
99
99
  type="button"
100
- className="pagination__button pagination__button--prev"
100
+ className="mtc-pagination__button mtc-pagination__button--prev"
101
101
  onClick={handlePrevious}
102
102
  disabled={isPreviousDisabled}
103
- aria-label="Previous page"
104
- >
103
+ aria-label="Previous page">
105
104
  <Icon name="chevron-left" size="sm" />
106
105
  </button>
107
106
 
108
- <div className="pagination__numbers">
107
+ <div className="mtc-pagination__numbers">
109
108
  {pageNumbers.map((page, index) => {
110
109
  if (page === 'ellipsis') {
111
110
  return (
112
- <span key={`ellipsis-${index}`} className="pagination__ellipsis">
111
+ <span key={`ellipsis-${index}`} className="mtc-pagination__ellipsis">
113
112
  ...
114
113
  </span>
115
114
  );
@@ -121,11 +120,10 @@ const Pagination: React.FC<PaginationProps> = ({
121
120
  <button
122
121
  key={page}
123
122
  type="button"
124
- className={`pagination__number ${isSelected ? 'pagination__number--selected' : ''}`}
123
+ className={`mtc-pagination__number ${isSelected ? 'mtc-pagination__number--selected' : ''}`}
125
124
  onClick={() => handlePageClick(page)}
126
125
  aria-label={`Page ${page}`}
127
- aria-current={isSelected ? 'page' : undefined}
128
- >
126
+ aria-current={isSelected ? 'page' : undefined}>
129
127
  {page}
130
128
  </button>
131
129
  );
@@ -134,11 +132,10 @@ const Pagination: React.FC<PaginationProps> = ({
134
132
 
135
133
  <button
136
134
  type="button"
137
- className="pagination__button pagination__button--next"
135
+ className="mtc-pagination__button mtc-pagination__button--next"
138
136
  onClick={handleNext}
139
137
  disabled={isNextDisabled}
140
- aria-label="Next page"
141
- >
138
+ aria-label="Next page">
142
139
  <Icon name="chevron-right" size="sm" />
143
140
  </button>
144
141
  </div>
@@ -146,4 +143,3 @@ const Pagination: React.FC<PaginationProps> = ({
146
143
  };
147
144
 
148
145
  export default Pagination;
149
-
package/src/components/organisms/Table/Table.css CHANGED
@@ -16,10 +16,14 @@
16
16
  width: 100%;
17
17
  border-collapse: collapse;
18
18
  border-spacing: 0;
19
+ table-layout: fixed;
19
20
  th,
20
21
  td {
21
22
  padding-inline: var(--spacing-padding-px-4);
22
23
  }
24
+ .table__cell-highlighted {
25
+ padding: 0;
26
+ }
23
27
  }
24
28
  .table__header {
25
29
  th {
@@ -34,61 +38,13 @@
34
38
  &:hover:not(.table__no-hover) {
35
39
  background-color: var(--color-elevation-state-hover-subtle);
36
40
  }
37
- &:first-child {
38
- border-top: none;
39
- }
40
- &.table__row-yellow {
41
- background-color: var(--color-yellow-50);
42
- border: 1px solid transparent;
43
- position: relative;
44
- &::after {
45
- content: '';
46
- position: absolute;
47
- inset: -1px;
48
- pointer-events: none;
49
- background-image:
50
- repeating-linear-gradient(
51
- to right,
52
- var(--color-yellow-600) 0,
53
- var(--color-yellow-600) 8px,
54
- transparent 8px,
55
- transparent 16px
56
- ),
57
- repeating-linear-gradient(
58
- to right,
59
- var(--color-yellow-600) 0,
60
- var(--color-yellow-600) 8px,
61
- transparent 8px,
62
- transparent 16px
63
- ),
64
- repeating-linear-gradient(
65
- to bottom,
66
- var(--color-yellow-600) 0,
67
- var(--color-yellow-600) 8px,
68
- transparent 8px,
69
- transparent 16px
70
- ),
71
- repeating-linear-gradient(
72
- to bottom,
73
- var(--color-yellow-600) 0,
74
- var(--color-yellow-600) 8px,
75
- transparent 8px,
76
- transparent 16px
77
- );
78
- background-size:
79
- 100% 1px,
80
- 100% 1px,
81
- 1px 100%,
82
- 1px 100%;
83
- background-position: top, bottom, left, right;
84
- background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
85
- }
86
- &:hover {
41
+ &.table__row-highlighted:hover {
42
+ tr {
87
43
  background-color: var(--color-yellow-100);
88
44
  }
89
- & + tr {
90
- border-top: none;
91
- }
45
+ }
46
+ &:first-child {
47
+ border-top: none;
92
48
  }
93
49
  &.table__row-border-0 {
94
50
  border-top: none;
@@ -258,3 +214,58 @@
258
214
  }
259
215
  }
260
216
  }
217
+
218
+ .table__row-div-highlighted {
219
+ background-color: var(--color-yellow-50);
220
+ border: 1px solid transparent;
221
+ position: relative;
222
+
223
+ &::after {
224
+ content: '';
225
+ position: absolute;
226
+ inset: -1px;
227
+ pointer-events: none;
228
+ background-image:
229
+ repeating-linear-gradient(
230
+ to right,
231
+ var(--color-yellow-600) 0,
232
+ var(--color-yellow-600) 8px,
233
+ transparent 8px,
234
+ transparent 16px
235
+ ),
236
+ repeating-linear-gradient(
237
+ to right,
238
+ var(--color-yellow-600) 0,
239
+ var(--color-yellow-600) 8px,
240
+ transparent 8px,
241
+ transparent 16px
242
+ ),
243
+ repeating-linear-gradient(
244
+ to bottom,
245
+ var(--color-yellow-600) 0,
246
+ var(--color-yellow-600) 8px,
247
+ transparent 8px,
248
+ transparent 16px
249
+ ),
250
+ repeating-linear-gradient(
251
+ to bottom,
252
+ var(--color-yellow-600) 0,
253
+ var(--color-yellow-600) 8px,
254
+ transparent 8px,
255
+ transparent 16px
256
+ );
257
+ background-size:
258
+ 100% 1px,
259
+ 100% 1px,
260
+ 1px 100%,
261
+ 1px 100%;
262
+ background-position: top, bottom, left, right;
263
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
264
+ }
265
+ &:hover {
266
+ background-color: var(--color-yellow-100);
267
+ }
268
+ & + tr {
269
+ border-top: none;
270
+ }
271
+ }
package/src/components/organisms/Table/Table.tsx CHANGED
@@ -22,6 +22,8 @@ export type TableRowData<T = any> = {
22
22
  */
23
23
  className?: string;
24
24
 
25
+ isHighlighted?: boolean;
26
+
25
27
  /** Children rows for the row */
26
28
  children?: T[];
27
29
  };
@@ -186,80 +188,109 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
186
188
  </tr>
187
189
  </thead>
188
190
  <tbody className="table__body">
189
- {data.map((row, rowIndex) => {
190
- const hasVisibleChildren = row.children?.some((child) => child.visible);
191
+ {data.length > 0 &&
192
+ data.map((row, rowIndex) => {
193
+ const hasVisibleChildren = row.children?.some((child) => child.visible);
191
194
 
192
- const defaultTable = (
193
- <tr
194
- className={cn(row.className, {
195
- 'table__row-nested': row.children?.length,
196
- 'table__row-clickable': onClickRow,
197
- })}
198
- onClick={(e) => onClickRow?.(e, row)}>
199
- <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
200
- </tr>
201
- );
195
+ const defaultTable = (
196
+ <tr
197
+ className={cn(row.className, {
198
+ 'table__row-nested': row.children?.length,
199
+ 'table__row-clickable': onClickRow,
200
+ 'table__row-highlighted': row.isHighlighted,
201
+ })}
202
+ onClick={(e) => onClickRow?.(e, row)}>
203
+ {row.isHighlighted ? (
204
+ <td colSpan={columns.length} className="table__cell-highlighted">
205
+ <div className="table__row-div-highlighted">
206
+ <table className="table">
207
+ <tbody>
208
+ <tr>
209
+ <TableCell<T>
210
+ columns={columns}
211
+ row={row}
212
+ rowIndex={rowIndex}
213
+ />
214
+ </tr>
215
+ </tbody>
216
+ </table>
217
+ </div>
218
+ </td>
219
+ ) : (
220
+ <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
221
+ )}
222
+ </tr>
223
+ );
202
224
 
203
- return (
204
- <Fragment key={`rw-${rowIndex}`}>
205
- {isGrouped ? (
206
- row.children && row.children.length > 0 ? (
207
- <tr className="table__row-grouped">
208
- <td colSpan={columns.length}>
209
- <NestedContent<T>
210
- isGrouped={isGrouped}
211
- rowIndex={rowIndex}
212
- columns={columns}
213
- children={row.children || []}
214
- onClickRow={onClickRow}
215
- />
225
+ return (
226
+ <Fragment key={`rw-${rowIndex}`}>
227
+ {isGrouped ? (
228
+ row.children && row.children.length > 0 ? (
229
+ <tr className="table__row-grouped">
230
+ <td colSpan={columns.length}>
231
+ <NestedContent<T>
232
+ isGrouped={isGrouped}
233
+ rowIndex={rowIndex}
234
+ columns={columns}
235
+ children={row.children || []}
236
+ onClickRow={onClickRow}
237
+ />
238
+ </td>
239
+ </tr>
240
+ ) : (
241
+ defaultTable
242
+ )
243
+ ) : !row.children ? (
244
+ defaultTable
245
+ ) : (
246
+ <tr
247
+ className="table__row-with-children"
248
+ onClick={(e) => onClickRow?.(e, row)}>
249
+ <td
250
+ colSpan={columns.length}
251
+ className={cn({
252
+ 'table__children--visible': hasVisibleChildren,
253
+ })}>
254
+ <table className="table">
255
+ <tbody>
256
+ {defaultTable}
257
+ <AnimatePresence initial={false}>
258
+ {hasVisibleChildren && (
259
+ <tr
260
+ key={`nested-${rowIndex}`}
261
+ className={cn('table__no-hover', {
262
+ 'table__row-nested':
263
+ row.children && row.children.length > 0,
264
+ })}>
265
+ <td
266
+ colSpan={columns.length}
267
+ className="table__cell-nested">
268
+ <NestedContent<T>
269
+ rowIndex={rowIndex}
270
+ columns={columns}
271
+ children={row.children || []}
272
+ />
273
+ </td>
274
+ </tr>
275
+ )}
276
+ </AnimatePresence>
277
+ </tbody>
278
+ </table>
216
279
  </td>
217
280
  </tr>
218
- ) : (
219
- defaultTable
220
- )
221
- ) : !row.children ? (
222
- defaultTable
223
- ) : (
224
- <tr
225
- className="table__row-with-children"
226
- onClick={(e) => onClickRow?.(e, row)}>
227
- <td
228
- colSpan={columns.length}
229
- className={cn({
230
- 'table__children--visible': hasVisibleChildren,
231
- })}>
232
- <table className="table">
233
- <tbody>
234
- {defaultTable}
235
- <AnimatePresence initial={false}>
236
- {hasVisibleChildren && (
237
- <tr
238
- key={`nested-${rowIndex}`}
239
- className={cn('table__no-hover', {
240
- 'table__row-nested':
241
- row.children && row.children.length > 0,
242
- })}>
243
- <td
244
- colSpan={columns.length}
245
- className="table__cell-nested">
246
- <NestedContent<T>
247
- rowIndex={rowIndex}
248
- columns={columns}
249
- children={row.children || []}
250
- />
251
- </td>
252
- </tr>
253
- )}
254
- </AnimatePresence>
255
- </tbody>
256
- </table>
257
- </td>
258
- </tr>
259
- )}
260
- </Fragment>
261
- );
262
- })}
281
+ )}
282
+ </Fragment>
283
+ );
284
+ })}
285
+ {data.length === 0 && (
286
+ <tr>
287
+ <td colSpan={columns.length} className="table__cell-empty">
288
+ <Text size="md" variant="bold" className="text-center">
289
+ No data found
290
+ </Text>
291
+ </td>
292
+ </tr>
293
+ )}
263
294
  </tbody>
264
295
  </table>
265
296
  </div>
package/src/components/organisms/Table/columns/booking-columns.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import Button from '@/src/components/atoms/Button/Button';
2
+ import Chip from '@/src/components/atoms/Chip/Chip';
2
3
  import { Text } from '@/src/components/atoms/Typography/Typography';
3
4
  import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
4
5
  import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
@@ -8,8 +9,40 @@ import { BookingListItem } from '@/src/types/table/booking.types';
8
9
  import { ColumnType } from '../TableCell';
9
10
  import { actionDropdownData } from '../constant';
10
11
 
12
+ const CHIP_WIDTH = 'w-[184px]';
13
+ const BUTTON_WIDTH = 'w-[89px]';
14
+
15
+ const renderStatusContent = (status: BookingListItem['status']) => {
16
+ if (status === 'PENDING') {
17
+ return (
18
+ <Chip size="sm" color="yellow" className={CHIP_WIDTH}>
19
+ On Request
20
+ </Chip>
21
+ );
22
+ }
23
+
24
+ if (status === 'Cancelled') {
25
+ return (
26
+ <Chip size="sm" color="red" className={CHIP_WIDTH}>
27
+ Cancelled
28
+ </Chip>
29
+ );
30
+ }
31
+
32
+ return (
33
+ <div className="flex items-center gap-x-3">
34
+ <Button variant="secondary" size="sm" className={BUTTON_WIDTH}>
35
+ Proforma
36
+ </Button>
37
+ <Button variant="outline-secondary" size="sm" className={BUTTON_WIDTH}>
38
+ Voucher
39
+ </Button>
40
+ </div>
41
+ );
42
+ };
43
+
11
44
  export const bookingColumns: (params: {
12
- onAction?: (action: ActionDropdownType) => void;
45
+ onAction?: (data: BookingListItem) => (action: ActionDropdownType) => void;
13
46
  keywords?: string;
14
47
  }) => ColumnType<BookingListItem>[] = ({ onAction, keywords = '' }) => [
15
48
  {
@@ -101,19 +134,13 @@ export const bookingColumns: (params: {
101
134
  key: 'actions',
102
135
  width: 232,
103
136
  cell: (_value, raw) => {
137
+ const handleAction = onAction?.(raw) ?? (() => {});
138
+ const actionData = actionDropdownData(handleAction);
139
+
104
140
  return (
105
- <div>
106
- <div className="flex items-center gap-x-8">
107
- <div className="flex items-center gap-x-3">
108
- <Button variant="secondary" size="sm" className="w-[89px]">
109
- Proforma
110
- </Button>
111
- <Button variant="outline-secondary" size="sm" className="w-[89px]">
112
- Voucher
113
- </Button>
114
- </div>
115
- <ActionDropdown data={actionDropdownData(onAction ?? (() => {}))} />
116
- </div>
141
+ <div className="flex items-center justify-between gap-x-8">
142
+ {renderStatusContent(raw.status)}
143
+ <ActionDropdown data={actionData} />
117
144
  </div>
118
145
  );
119
146
  },
package/src/components/organisms/Table/columns/quotation-columns.tsx CHANGED
@@ -10,7 +10,7 @@ import { ColumnType } from '../TableCell';
10
10
  import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
11
11
 
12
12
  export const quotationColumns: (params: {
13
- onExpand?: (value?: QuotationListItem) => void;
13
+ onExpand?: (value?: QuotationListItem, index?: number, childIndex?: number) => void;
14
14
  onAction?: (data: {
15
15
  isChild?: boolean;
16
16
  quote: QuotationListItem;
@@ -146,7 +146,7 @@ export const quotationColumns: (params: {
146
146
  header: '',
147
147
  key: 'actions',
148
148
  width: 232,
149
- cell: (_value, raw, _index, childIndex) => {
149
+ cell: (_value, raw, index, childIndex) => {
150
150
  const hasChildren = raw.children && raw.children.length > 0;
151
151
  const isExpanded = raw.children?.some((child) => child.visible);
152
152
  const buttonLabel = isExpanded ? 'See less' : 'See more';
@@ -160,7 +160,7 @@ export const quotationColumns: (params: {
160
160
  size="sm"
161
161
  trailingIcon="chevron-down"
162
162
  className={cn('table__button', isExpanded && 'table__button-expanded')}
163
- onClick={() => onExpand?.(raw)}>
163
+ onClick={() => onExpand?.(raw, index, childIndex)}>
164
164
  {buttonLabel}
165
165
  </Button>
166
166
  ) : (