mautourco-components 0.2.43 → 0.2.45

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

@@ -1,4 +1,5 @@
 import './QuoteHeader.css';
+export type FilterType = 'date' | 'clientType' | 'fileStatus' | 'search';
 export interface QuoteHeaderProps {
     /** Current tab */
     current: 'quotation' | 'booking';
@@ -6,6 +7,7 @@ export interface QuoteHeaderProps {
     onNavigate: (tab: 'quotation' | 'booking') => void;
     /** Callback to create a new quote */
     onNewQuote: () => void;
-    onFilterChange?: (filter: 'date' | 'clientType' | 'fileStatus', value: string) => void;
+    onFilterChange?: (filter: FilterType, value: string) => void;
+    currentFilter?: Record<FilterType, string>;
 }
 export declare function QuoteHeader(props: QuoteHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/QuoteHeader/QuoteHeader.js

@@ -9,8 +9,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -32,9 +43,31 @@ var filterConfig = {
     },
 };
 export function QuoteHeader(props) {
-    var _a = props.current, current = _a === void 0 ? 'quotation' : _a, onNavigate = props.onNavigate, onNewQuote = props.onNewQuote, onFilterChange = props.onFilterChange;
-    var _b = useState({}), currentValue = _b[0], setCurrentValue = _b[1];
-    return (_jsxs("div", { className: "quote-header", children: [_jsx(Heading, { level: 4, as: "h1", className: "quote-header__title", color: "accent", children: "Quotation & Booking" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Button, { variant: current === 'quotation' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('quotation'); }, children: "Quotation" }), _jsx(Button, { variant: current === 'booking' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('booking'); }, children: "Booking" })] }), _jsxs("div", { className: "quote-header__search-container", children: [_jsx(Input, { placeholder: "Search", icon: "search", iconPosition: "leading", className: "quote-header__search" }), _jsx(Button, { variant: "primary", leadingIcon: "plus-circle", iconSize: "md", size: "sm", onClick: onNewQuote, children: "New quote" })] }), _jsx("div", { className: "quote-header__filters", children: Object.entries(filterConfig).map(function (_a) {
+    var _a;
+    var _b = props.current, current = _b === void 0 ? 'quotation' : _b, currentFilter = props.currentFilter, onNavigate = props.onNavigate, onNewQuote = props.onNewQuote, onFilterChange = props.onFilterChange;
+    var _c = useState(currentFilter || {
+        date: '',
+        clientType: '',
+        fileStatus: '',
+        search: '',
+    }), currentValue = _c[0], setCurrentValue = _c[1];
+    var _d = useState((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.search) !== null && _a !== void 0 ? _a : ''), searchValue = _d[0], setSearchValue = _d[1];
+    useEffect(function () {
+        if (currentFilter && Object.keys(currentFilter).length > 0) {
+            var search = currentFilter.search, rest = __rest(currentFilter, ["search"]);
+            setCurrentValue(rest);
+            setSearchValue(search);
+        }
+        else {
+            setCurrentValue({});
+            setSearchValue('');
+        }
+    }, [currentFilter]);
+    return (_jsxs("div", { className: "quote-header", children: [_jsx(Heading, { level: 4, as: "h1", className: "quote-header__title", color: "accent", children: "Quotation & Booking" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Button, { variant: current === 'quotation' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('quotation'); }, children: "Quotation" }), _jsx(Button, { variant: current === 'booking' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('booking'); }, children: "Booking" })] }), _jsxs("div", { className: "quote-header__search-container", children: [_jsx(Input, { placeholder: "Search", icon: "search", iconPosition: "leading", className: "quote-header__search", value: searchValue, onChange: function (e) {
+                            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange('search', e.target.value);
+                            setCurrentValue(__assign(__assign({}, currentValue), { search: e.target.value }));
+                            setSearchValue(e.target.value);
+                        } }), _jsx(Button, { variant: "primary", leadingIcon: "plus-circle", iconSize: "md", size: "sm", onClick: onNewQuote, children: "New quote" })] }), _jsx("div", { className: "quote-header__filters", children: Object.entries(filterConfig).map(function (_a) {
                     var key = _a[0], value = _a[1];
                     return (_jsx(DropdownInput, { placeholder: value.placeholder, options: value.options, value: currentValue[key], onSelect: function (value) {
                             var _a;

package/dist/components/organisms/Table/Table.css

@@ -11,6 +11,11 @@
   }
 }
 
+.text--highlight {
+  background-color: var(--color-amber-100);
+  font-weight: 700;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;

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

@@ -2,6 +2,6 @@ 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;
+    onAction?: (action: ActionDropdownType) => void;
+    keywords?: string;
 }) => ColumnType<BookingListItem>[];

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

@@ -6,19 +6,39 @@ import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
 import { PaxChips } from '../../../molecules/PaxChips/PaxChips';
 import { actionDropdownData } from '../constant';
 export var bookingColumns = function (_a) {
-    var onExpand = _a.onExpand, onAction = _a.onAction;
+    var onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
     return [
         {
             header: 'Quote nb.',
             key: 'booking_id',
             width: 150,
-            cell: function (value) { return (_jsx(Text, { variant: "medium", size: "sm", children: value })); },
+            cell: function (value) {
+                if (value === void 0) { value = ''; }
+                var currentValue = String(value);
+                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                if (regex.test(currentValue)) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                            } }) }));
+                }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+            },
         },
         {
             header: 'Client name',
             key: 'agency_name',
             width: 150,
-            cell: function (value) { return (_jsx(Text, { variant: "medium", size: "sm", children: value })); },
+            cell: function (value) {
+                if (value === void 0) { value = ''; }
+                var currentValue = String(value);
+                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                if (regex.test(currentValue)) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                            } }) }));
+                }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+            },
         },
         {
             header: 'Type',
@@ -61,7 +81,7 @@ export var bookingColumns = function (_a) {
             key: 'actions',
             width: 232,
             cell: function (_value, raw) {
-                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) })] }) }));
+                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 () { })) })] }) }));
             },
         },
     ];

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

@@ -1,17 +1,18 @@
 declare const columns: {
     quotation: (params: {
-        onExpand: (value?: import("../../../..").QuotationListItem) => void;
-        onAction: (data: {
+        onExpand?: (value?: import("../../../..").QuotationListItem) => void;
+        onAction?: (data: {
             isChild?: boolean;
             quote: import("../../../..").QuotationListItem;
         }) => (action: import("../../../..").ActionDropdownType) => void;
+        keywords?: string;
     }) => import("../TableCell").ColumnType<import("../../../..").QuotationListItem>[];
     detailResume: (params?: {
         onRemove?: (value: import("../../../..").DetailResumeItem, index?: number) => void;
     }) => import("../TableCell").ColumnType<import("../../../..").DetailResumeItem>[];
     booking: (params: {
-        onExpand: (value?: import("../../../../types/table/booking.types").BookingListItem) => void;
-        onAction: (action: import("../../../..").ActionDropdownType) => void;
+        onAction?: (action: import("../../../..").ActionDropdownType) => void;
+        keywords?: string;
     }) => import("../TableCell").ColumnType<import("../../../../types/table/booking.types").BookingListItem>[];
     bookingCancelService: (params?: {
         onRemove?: (value: import("../../../..").DetailResumeItem, index?: number, childIndex?: number) => void;

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

@@ -2,9 +2,10 @@ 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: (data: {
+    onExpand?: (value?: QuotationListItem) => void;
+    onAction?: (data: {
         isChild?: boolean;
         quote: QuotationListItem;
     }) => (action: ActionDropdownType) => void;
+    keywords?: string;
 }) => ColumnType<QuotationListItem>[];

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

@@ -7,20 +7,40 @@ import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
 import { cn } from '../../../../lib/utils';
 import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
 export var quotationColumns = function (_a) {
-    var onExpand = _a.onExpand, onAction = _a.onAction;
+    var onExpand = _a.onExpand, onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
     return [
         {
             header: 'Quote nb.',
             key: 'file_nb',
             width: 150,
-            cell: function (value) { return (_jsx(Text, { variant: "medium", size: "sm", children: value })); },
+            cell: function (value) {
+                if (value === void 0) { value = ''; }
+                var currentValue = String(value);
+                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                if (regex.test(currentValue)) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                            } }) }));
+                }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+            },
         },
         {
             header: 'Client name',
             key: 'agency_name',
             width: 150,
             cell: function (value, _raw, _index, childIndex) {
-                return childIndex === undefined && (_jsx(Text, { variant: "medium", size: "sm", children: value }));
+                if (value === void 0) { value = ''; }
+                if (childIndex === undefined) {
+                    var currentValue = String(value);
+                    var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
+                    if (regex.test(currentValue)) {
+                        return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                    __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
+                                } }) }));
+                    }
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+                }
             },
         },
         {
@@ -70,12 +90,12 @@ export var quotationColumns = function (_a) {
             key: 'actions',
             width: 232,
             cell: function (_value, raw, _index, childIndex) {
-                var _a;
+                var _a, _b;
                 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, { 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", { 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(onAction({ isChild: childIndex !== undefined, quote: raw })) })] })) }));
+                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 () { })) })] })) }));
             },
         },
     ];

package/dist/index.d.ts

@@ -119,7 +119,7 @@ export type { ComparisonData, DialogComparisonProps, MultiComparisonData, } from
 export type { DialogDeleteConfirmProps } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export type { DialogQuoteRenameProps } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
 export type { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
-export type { QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
+export type { FilterType, QuoteHeaderProps, } from './components/organisms/QuoteHeader/QuoteHeader';
 export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
 export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType, } from './types/docket/services.types';
 export * from './types/table';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

package/src/components/organisms/QuoteHeader/QuoteHeader.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -10,6 +10,8 @@ import {
 } from './constant';
 import './QuoteHeader.css';
 
+export type FilterType = 'date' | 'clientType' | 'fileStatus' | 'search';
+
 export interface QuoteHeaderProps {
   /** Current tab */
   current: 'quotation' | 'booking';
@@ -20,7 +22,9 @@ export interface QuoteHeaderProps {
   /** Callback to create a new quote */
   onNewQuote: () => void;
 
-  onFilterChange?: (filter: 'date' | 'clientType' | 'fileStatus', value: string) => void;
+  onFilterChange?: (filter: FilterType, value: string) => void;
+
+  currentFilter?: Record<FilterType, string>;
 }
 
 const filterConfig = {
@@ -39,8 +43,33 @@ const filterConfig = {
 };
 
 export function QuoteHeader(props: QuoteHeaderProps) {
-  const { current = 'quotation', onNavigate, onNewQuote, onFilterChange } = props;
-  const [currentValue, setCurrentValue] = useState<Record<string, string>>({});
+  const {
+    current = 'quotation',
+    currentFilter,
+    onNavigate,
+    onNewQuote,
+    onFilterChange,
+  } = props;
+  const [currentValue, setCurrentValue] = useState<Record<FilterType, string>>(
+    currentFilter || {
+      date: '',
+      clientType: '',
+      fileStatus: '',
+      search: '',
+    }
+  );
+  const [searchValue, setSearchValue] = useState<string>(currentFilter?.search ?? '');
+
+  useEffect(() => {
+    if (currentFilter && Object.keys(currentFilter).length > 0) {
+      const { search, ...rest } = currentFilter;
+      setCurrentValue(rest as Record<FilterType, string>);
+      setSearchValue(search);
+    } else {
+      setCurrentValue({} as Record<FilterType, string>);
+      setSearchValue('');
+    }
+  }, [currentFilter]);
 
   return (
     <div className="quote-header">
@@ -67,6 +96,12 @@ export function QuoteHeader(props: QuoteHeaderProps) {
           icon="search"
           iconPosition="leading"
           className="quote-header__search"
+          value={searchValue}
+          onChange={(e) => {
+            onFilterChange?.('search', e.target.value);
+            setCurrentValue({ ...currentValue, search: e.target.value });
+            setSearchValue(e.target.value);
+          }}
         />
         <Button
           variant="primary"
@@ -83,9 +118,9 @@ export function QuoteHeader(props: QuoteHeaderProps) {
             key={key}
             placeholder={value.placeholder}
             options={value.options}
-            value={currentValue[key]}
+            value={currentValue[key as FilterType]}
             onSelect={(value) => {
-              onFilterChange?.(key as 'date' | 'clientType' | 'fileStatus', value);
+              onFilterChange?.(key as FilterType, value);
               setCurrentValue({ ...currentValue, [key]: value });
             }}
           />

package/src/components/organisms/Table/Table.css

@@ -7,6 +7,11 @@
   }
 }
 
+.text--highlight {
+  background-color: var(--color-amber-100);
+  font-weight: 700;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;

package/src/components/organisms/Table/columns/booking-columns.tsx

@@ -9,28 +9,64 @@ import { ColumnType } from '../TableCell';
 import { actionDropdownData } from '../constant';
 
 export const bookingColumns: (params: {
-  onExpand: (value?: BookingListItem) => void;
-  onAction: (action: ActionDropdownType) => void;
-}) => ColumnType<BookingListItem>[] = ({ onExpand, onAction }) => [
+  onAction?: (action: ActionDropdownType) => void;
+  keywords?: string;
+}) => ColumnType<BookingListItem>[] = ({ onAction, keywords = '' }) => [
   {
     header: 'Quote nb.',
     key: 'booking_id',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value = '') => {
+      const currentValue = String(value as string);
+      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+      if (regex.test(currentValue)) {
+        return (
+          <Text variant="medium" size="sm">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: currentValue.replace(
+                  regex,
+                  `<span class="text--highlight">$1</span>`
+                ),
+              }}
+            />
+          </Text>
+        );
+      }
+      return (
+        <Text variant="medium" size="sm">
+          {currentValue}
+        </Text>
+      );
+    },
   },
   {
     header: 'Client name',
     key: 'agency_name',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value = '') => {
+      const currentValue = String(value as string);
+      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+      if (regex.test(currentValue)) {
+        return (
+          <Text variant="medium" size="sm">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: currentValue.replace(
+                  regex,
+                  `<span class="text--highlight">$1</span>`
+                ),
+              }}
+            />
+          </Text>
+        );
+      }
+      return (
+        <Text variant="medium" size="sm">
+          {currentValue}
+        </Text>
+      );
+    },
   },
   {
     header: 'Type',
@@ -92,7 +128,7 @@ export const bookingColumns: (params: {
                 Voucher
               </Button>
             </div>
-            <ActionDropdown data={actionDropdownData(onAction)} />
+            <ActionDropdown data={actionDropdownData(onAction ?? (() => {}))} />
           </div>
         </div>
       );

package/src/components/organisms/Table/columns/quotation-columns.tsx

@@ -10,32 +10,70 @@ import { ColumnType } from '../TableCell';
 import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
 
 export const quotationColumns: (params: {
-  onExpand: (value?: QuotationListItem) => void;
-  onAction: (data: {
+  onExpand?: (value?: QuotationListItem) => void;
+  onAction?: (data: {
     isChild?: boolean;
     quote: QuotationListItem;
   }) => (action: ActionDropdownType) => void;
-}) => ColumnType<QuotationListItem>[] = ({ onExpand, onAction }) => [
+  keywords?: string;
+}) => ColumnType<QuotationListItem>[] = ({ onExpand, onAction, keywords = '' }) => [
   {
     header: 'Quote nb.',
     key: 'file_nb',
     width: 150,
-    cell: (value) => (
-      <Text variant="medium" size="sm">
-        {value as string}
-      </Text>
-    ),
+    cell: (value = '') => {
+      const currentValue = String(value as string);
+      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+      if (regex.test(currentValue)) {
+        return (
+          <Text variant="medium" size="sm">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: currentValue.replace(
+                  regex,
+                  `<span class="text--highlight">$1</span>`
+                ),
+              }}
+            />
+          </Text>
+        );
+      }
+      return (
+        <Text variant="medium" size="sm">
+          {currentValue}
+        </Text>
+      );
+    },
   },
   {
     header: 'Client name',
     key: 'agency_name',
     width: 150,
-    cell: (value, _raw, _index, childIndex) =>
-      childIndex === undefined && (
-        <Text variant="medium" size="sm">
-          {value as string}
-        </Text>
-      ),
+    cell: (value = '', _raw, _index, childIndex) => {
+      if (childIndex === undefined) {
+        const currentValue = String(value as string);
+        const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
+        if (regex.test(currentValue)) {
+          return (
+            <Text variant="medium" size="sm">
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: currentValue.replace(
+                    regex,
+                    `<span class="text--highlight">$1</span>`
+                  ),
+                }}
+              />
+            </Text>
+          );
+        }
+        return (
+          <Text variant="medium" size="sm">
+            {currentValue}
+          </Text>
+        );
+      }
+    },
   },
   {
     header: 'File status',
@@ -138,7 +176,7 @@ export const quotationColumns: (params: {
               size="sm"
               trailingIcon="chevron-down"
               className={cn('table__button', isExpanded && 'table__button-expanded')}
-              onClick={() => onExpand(raw)}>
+              onClick={() => onExpand?.(raw)}>
               {buttonLabel}
             </Button>
           ) : (
@@ -151,7 +189,8 @@ export const quotationColumns: (params: {
               </Button>
               <ActionDropdown
                 data={actionDropdownData(
-                  onAction({ isChild: childIndex !== undefined, quote: raw })
+                  onAction?.({ isChild: childIndex !== undefined, quote: raw }) ??
+                    (() => {})
                 )}
               />
             </div>