mautourco-components 0.2.44 → 0.2.46

package/dist/components/atoms/Inputs/Input/Input.js

@@ -11,6 +11,6 @@ var Input = function (_a) {
         disabled: 'input-field--disabled',
     };
     var inputClasses = "".concat(baseClasses, " ").concat(variantClasses[variant], " ").concat(icon ? "input-field--with-icon input-field--icon-".concat(iconPosition) : '', " ").concat(className).trim();
-    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onChange: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
+    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onInput: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
 };
 export default Input;

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

@@ -8,6 +8,6 @@ export interface QuoteHeaderProps {
     /** Callback to create a new quote */
     onNewQuote: () => void;
     onFilterChange?: (filter: FilterType, value: string) => void;
-    currentFilter: Record<FilterType, string>;
+    currentFilter?: Record<FilterType, string>;
 }
 export declare function QuoteHeader(props: QuoteHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -21,7 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -45,10 +46,43 @@ var filterConfig = {
 export function QuoteHeader(props) {
     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 !== null && currentFilter !== void 0 ? currentFilter : {}), currentValue = _c[0], setCurrentValue = _c[1];
+    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];
+    // Create a ref to store the debounced function
+    var debouncedFilterChangeRef = useRef(debounce(function (value) {
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange('search', value);
+        setCurrentValue(function (prev) { return (__assign(__assign({}, prev), { search: value })); });
+    }, 500));
+    // Update the debounced function when onFilterChange changes
     useEffect(function () {
-        if (Object.keys(currentFilter !== null && currentFilter !== void 0 ? currentFilter : {}).length > 0) {
+        // Cancel the previous debounced function
+        debouncedFilterChangeRef.current.cancel();
+        // Create a new debounced function
+        debouncedFilterChangeRef.current = debounce(function (value) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange('search', value);
+            setCurrentValue(function (prev) { return (__assign(__assign({}, prev), { search: value })); });
+        }, 500);
+    }, [onFilterChange]);
+    // Cleanup debounced function on unmount
+    useEffect(function () {
+        return function () {
+            debouncedFilterChangeRef.current.cancel();
+        };
+    }, []);
+    var handleInputChange = useCallback(function (e) {
+        var value = e.target.value;
+        // Update input value immediately for responsive UI
+        setSearchValue(value);
+        // Debounce the filter change callback
+        debouncedFilterChangeRef.current(value);
+    }, []);
+    useEffect(function () {
+        if (currentFilter && Object.keys(currentFilter).length > 0) {
             var search = currentFilter.search, rest = __rest(currentFilter, ["search"]);
             setCurrentValue(rest);
             setSearchValue(search);
@@ -58,11 +92,7 @@ export function QuoteHeader(props) {
             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) {
+    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: handleInputChange }), _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,32 @@ 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 = ''; }
+                return (_jsx(Text, { variant: "medium", size: "sm", children: value }));
+            },
         },
         {
             header: 'Type',
@@ -61,7 +74,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,33 @@ 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) {
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: value }));
+                }
             },
         },
         {
@@ -70,12 +83,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/package.json

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

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -56,7 +56,7 @@ const Input: React.FC<InputProps> = ({
         placeholder={placeholder}
         value={value}
         disabled={disabled || variant === 'disabled'}
-        onChange={onChange}
+        onInput={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
       />

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

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -24,7 +25,7 @@ export interface QuoteHeaderProps {
 
   onFilterChange?: (filter: FilterType, value: string) => void;
 
-  currentFilter: Record<FilterType, string>;
+  currentFilter?: Record<FilterType, string>;
 }
 
 const filterConfig = {
@@ -51,12 +52,51 @@ export function QuoteHeader(props: QuoteHeaderProps) {
     onFilterChange,
   } = props;
   const [currentValue, setCurrentValue] = useState<Record<FilterType, string>>(
-    currentFilter ?? {}
+    currentFilter || {
+      date: '',
+      clientType: '',
+      fileStatus: '',
+      search: '',
+    }
   );
   const [searchValue, setSearchValue] = useState<string>(currentFilter?.search ?? '');
 
+  // Create a ref to store the debounced function
+  const debouncedFilterChangeRef = useRef(
+    debounce((value: string) => {
+      onFilterChange?.('search', value);
+      setCurrentValue((prev) => ({ ...prev, search: value }));
+    }, 500)
+  );
+
+  // Update the debounced function when onFilterChange changes
+  useEffect(() => {
+    // Cancel the previous debounced function
+    debouncedFilterChangeRef.current.cancel();
+    // Create a new debounced function
+    debouncedFilterChangeRef.current = debounce((value: string) => {
+      onFilterChange?.('search', value);
+      setCurrentValue((prev) => ({ ...prev, search: value }));
+    }, 500);
+  }, [onFilterChange]);
+
+  // Cleanup debounced function on unmount
+  useEffect(() => {
+    return () => {
+      debouncedFilterChangeRef.current.cancel();
+    };
+  }, []);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Update input value immediately for responsive UI
+    setSearchValue(value);
+    // Debounce the filter change callback
+    debouncedFilterChangeRef.current(value);
+  }, []);
+
   useEffect(() => {
-    if (Object.keys(currentFilter ?? {}).length > 0) {
+    if (currentFilter && Object.keys(currentFilter).length > 0) {
       const { search, ...rest } = currentFilter;
       setCurrentValue(rest as Record<FilterType, string>);
       setSearchValue(search);
@@ -92,11 +132,7 @@ export function QuoteHeader(props: QuoteHeaderProps) {
           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);
-          }}
+          onChange={handleInputChange}
         />
         <Button
           variant="primary"

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,48 @@ 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 = '') => {
+      return (
+        <Text variant="medium" size="sm">
+          {value as string}
+        </Text>
+      );
+    },
   },
   {
     header: 'Type',
@@ -92,7 +112,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,54 @@ 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) {
+        return (
+          <Text variant="medium" size="sm">
+            {value as string}
+          </Text>
+        );
+      }
+    },
   },
   {
     header: 'File status',
@@ -138,7 +160,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 +173,8 @@ export const quotationColumns: (params: {
               </Button>
               <ActionDropdown
                 data={actionDropdownData(
-                  onAction({ isChild: childIndex !== undefined, quote: raw })
+                  onAction?.({ isChild: childIndex !== undefined, quote: raw }) ??
+                    (() => {})
                 )}
               />
             </div>