@addev-be/ui 0.2.10 → 0.2.12

package/assets/icons/sort-calendar-ascending.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 8 16 L 11 16 L 11 13 L 8 13 L 8 16 Z M 13 5 L 12 5 L 12 3 L 10 3 L 10 5 L 6 5 L 6 3 L 4 3 L 4 5 L 3 5 C 1.89 5 1 5.89 1 7 L 1 18 C 1 19.11 1.89 20 3 20 L 13 20 C 14.11 20 15 19.11 15 18 L 15 7 C 15 5.89 14.11 5 13 5 M 3 18 L 3 11 L 13 11 L 13 18 L 3 18 Z" style=""/>
+  <path d="M 18.5 7.5 L 15.5 7.5 L 15.5 18 C 15.478 18.657 15.194 19.345 14.77 19.77 C 14.345 20.194 13.657 20.478 13 20.5 L 3 20.5 C 2.343 20.478 1.655 20.194 1.23 19.77 C 0.806 19.345 0.522 18.657 0.5 18 L 0.5 7 C 0.522 6.343 0.806 5.655 1.23 5.23 C 1.655 4.806 2.343 4.522 3 4.5 L 3.5 4.5 L 3.5 2.5 L 6.5 2.5 L 6.5 4.5 L 9.5 4.5 L 9.5 2.5 L 12.5 2.5 L 12.5 4.5 L 13 4.5 C 13.657 4.522 14.345 4.806 14.77 5.23 C 15.153 5.613 15.422 6.211 15.486 6.807 L 20 2.293 L 25.207 7.5 L 21.5 7.5 L 21.5 21.5 L 18.5 21.5 Z M 19.5 6.5 L 19.5 20.5 L 20.5 20.5 L 20.5 6.5 L 22.793 6.5 L 20 3.707 L 17.207 6.5 Z M 11.5 12.5 L 11.5 16.5 L 7.5 16.5 L 7.5 12.5 Z M 8.5 15.5 L 10.5 15.5 L 10.5 13.5 L 8.5 13.5 Z M 11.5 5.5 L 11.5 3.5 L 10.5 3.5 L 10.5 5.5 L 5.5 5.5 L 5.5 3.5 L 4.5 3.5 L 4.5 5.5 L 3 5.5 C 2.547 5.478 2.235 5.639 1.937 5.937 C 1.639 6.235 1.478 6.547 1.5 7 L 1.5 18 C 1.478 18.453 1.639 18.765 1.937 19.063 C 2.235 19.361 2.547 19.522 3 19.5 L 13 19.5 C 13.453 19.522 13.765 19.361 14.063 19.063 C 14.361 18.765 14.522 18.453 14.5 18 L 14.5 7 C 14.522 6.547 14.361 6.235 14.063 5.937 C 13.765 5.639 13.453 5.478 13 5.5 Z M 2.5 10.5 L 13.5 10.5 L 13.5 18.5 L 2.5 18.5 Z M 12.5 17.5 L 12.5 11.5 L 3.5 11.5 L 3.5 17.5 Z" style="fill: none;"/>
+  <path d="M 19 17 L 16 17 L 20 21 L 24 17 L 21 17 L 21 3 L 19 3 L 19 17 Z" style=""/>
+</svg>

package/assets/icons/sort-calendar-descending.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19 7h-3l4-4 4 4h-3v14h-2zm-11 9h3v-3h-3zm5-11h-1v-2h-2v2h-4v-2h-2v2h-1c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2v-11c0-1.11-.89-2-2-2m-10 13v-7h10v7z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/Icons.tsx

@@ -24,6 +24,8 @@ import PhoneIcon from '../assets/icons/phone.svg?react';
 import PlusIcon from '../assets/icons/plus.svg?react';
 import RightIcon from '../assets/icons/right.svg?react';
 import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
+import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
 import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
 import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
 import TableFooterIcon from '../assets/icons/table-footer.svg?react';
@@ -92,6 +94,8 @@ export {
   PlusIcon,
   RightIcon,
   SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
   SpinnerIcon,
   TableColumnsIcon,
   TableFooterIcon,

package/src/components/data/DataGrid/{FilterValuesScroller.tsx → DataGridFilterMenu/FilterValuesScroller.tsx}

@@ -8,25 +8,23 @@ import {
   DataGridFilterGroup,
   DataGridFilterRenderer,
   DataGridFilterValue,
-} from './types';
-import { debounce, join } from 'lodash';
-import { defaultRendererAndFormatter, getCheckboxes } from './helpers';
+} from '../types';
+import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { useElementSize } from '../../../hooks';
+import { debounce } from 'lodash';
+import { useElementSize } from '../../../../hooks';
 
 const CheckboxTemplate = ({
   selectedValues,
   value,
   index,
-  className,
   style,
   onToggle,
 }: {
   selectedValues: DataGridFilterValue[];
   value: DataGridFilterCheckbox;
   index: number;
-  className?: string;
   style?: React.CSSProperties;
   onToggle?: (values: DataGridFilterValue[]) => void;
 }) => {
@@ -37,28 +35,12 @@ const CheckboxTemplate = ({
   return (
     <styles.FilterValueContainer
       key={index}
-      className={join(
-        [
-          // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
-          className,
-        ],
-        ' '
-      )}
       style={{ ...style, paddingLeft: `${value.level}rem` }}
       title={value.title}
       onClick={() => onToggle?.(value.values)}
     >
-      <input
-        type="checkbox"
-        checked={checked}
-        readOnly
-        // className="inline-block mr-2"
-      />
-      <span
-      // className="mr-2 truncate"
-      >
-        {value.displayValue || '(Vides)'}
-      </span>
+      <input type="checkbox" checked={checked} readOnly />
+      <span>{value.displayValue || '(Vides)'}</span>
     </styles.FilterValueContainer>
   );
 };
@@ -121,10 +103,9 @@ export const FilterValuesScroller = ({
       onScroll={onScroll}
       $rowHeight={rowHeight}
     >
-      <div style={{ height: `${values.length * rowHeight}px` }}>
+      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
         {visibleCheckboxes.map((value, index) => (
           <CheckboxTemplate
-            className="checkbox"
             style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
             key={index}
             selectedValues={selectedValues}

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -15,6 +15,8 @@ import {
   IconFC,
   MagnifierIcon,
   SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
   TableFooterIcon,
   TableFooterSlashIcon,
   TallyIcon,
@@ -42,7 +44,7 @@ import {
 } from 'react';
 
 import { ContextMenu } from '../../../ui/ContextMenu';
-import { FilterValuesScroller } from '../FilterValuesScroller';
+import { FilterValuesScroller } from './FilterValuesScroller';
 import { Input } from '../../../forms';
 import { useFilterModal } from './hooks';
 
@@ -56,12 +58,12 @@ type FilterValuesProps<R> = {
 const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
   number: ['Trier du plus petit au plus grand', ArrowDown19Icon],
   text: ['Trier de A à Z', ArrowDownAZIcon],
-  // date: 'Trier du plus ancien au plus récent',
+  date: ['Trier du plus ancien au plus récent', SortCalendarAscendingIcon],
 };
 const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
   number: ['Trier du plus grand au plus petit', ArrowUp91Icon],
   text: ['Trier de Z à A', ArrowUpZAIcon],
-  // date: 'Trier du plus récent au plus ancien',
+  date: ['Trier du plus récent au plus ancien', SortCalendarDescendingIcon],
 };
 
 const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {

package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+export const DEFAULT_FILTER_ROW_HEIGHT = 24;
+
 export const InputContainer = styled.div.attrs({
   className: 'InputContainer',
 })`
@@ -47,3 +49,48 @@ export const Separator = styled.div.attrs({
   border-top: 1px solid var(--color-neutral-200);
   margin: var(--space-1) 0;
 `;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-neutral-50);
+  }
+`;
+
+export const FilterValuesScrollerContainer = styled.div.attrs({
+  className: 'FilterValuesScrollerContainer',
+})<{
+  $rowHeight?: number;
+}>`
+  display: block;
+  font-size: var(--text-base);
+  background-color: var(--color-neutral-0);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+
+  & > div {
+    position: relative;
+  }
+
+  & ${FilterValueContainer} {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
+      `${$rowHeight}px`};
+
+    input[type='checkbox'] {
+      margin-right: var(--space-1);
+    }
+  }
+`;

package/src/components/data/DataGrid/FilterModalContent/index.tsx

@@ -19,6 +19,13 @@ const filterOperators: {
     [K2 in DataGridFilterOperator<K>]: string;
   }>;
 } = {
+  date: {
+    after: 'Après',
+    before: 'Avant',
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    inRange: "Dans l'intervalle",
+  },
   number: {
     equals: 'Égal à',
     notEquals: 'Différent de',
@@ -100,21 +107,26 @@ export const FilterModalContent = ({
       {operator === 'inRange' && (
         <label htmlFor="filterValue2">
           <span>et</span>
-          <input
+          <Input
             name="filterValue2"
             type={filter.type}
             value={values[1] ?? ''}
-            // className="text-sm w-24"
             onChange={(e) => {
-              const newValues = [...values];
-              newValues[0] =
-                type === 'number'
-                  ? Number(e.target.value)
-                  : (String(e.target.value) as any);
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
+              if (type === 'number') {
+                const newValues = [...values];
+                newValues[1] = Number(e.target.value);
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              } else {
+                const newValues = [...values];
+                newValues[1] = String(e.target.value) as any;
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              }
             }}
           />
         </label>

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
+import { dateFilter, numberFilter, textFilter } from './filters';
 import {
   formatMoney,
   formatNumber,
+  formatNumberInvariant,
   formatPercentage,
 } from '../../../../helpers/numbers';
-import { numberFilter, textFilter } from './filters';
 
 import moment from 'moment';
 import { repeat } from 'lodash';
@@ -15,7 +16,7 @@ export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
 ): boolean => obj?.order !== -1;
 
-const buildExcelFormat = (decimals = 2, suffix = '') =>
+export const buildExcelFormat = (decimals = 2, suffix = '') =>
   `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
 
 export const textColumn = <R extends Record<string, any>>(
@@ -93,7 +94,7 @@ export const dateColumn = <R extends Record<string, any>>(
     sortGetter: (row) => row[key] ?? '',
     footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: {
-      ...textFilter(key),
+      ...dateFilter(key),
       renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
     },
     ...options,
@@ -125,7 +126,8 @@ export const numberColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => '#',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     footer: {
@@ -170,6 +172,7 @@ export const moneyColumn = <R extends Record<string, any>>(
     name: title,
     render: (row) => formatMoney(row[key], decimals) ?? '',
     excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -213,7 +216,8 @@ export const percentageColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals),
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: numberFilter(key),

package/src/components/data/DataGrid/helpers/filters.ts

@@ -95,7 +95,55 @@ const numberInArrayPredicate: DataGridFilterPredicateBuilder<number> = (
   return (valueToVerify: number) => filterValues.includes(valueToVerify);
 };
 
+const dateBeforePredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const limitDate = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isBefore(limitDate);
+};
+const dateAfterPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const limitDate = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isAfter(limitDate);
+};
+const dateEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isSame(date);
+};
+const dateNotEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date = moment(filterValues[0]);
+  return (valueToVerify) => !moment(valueToVerify).isSame(date);
+};
+const dateInRangePredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date1 = moment(filterValues[0]);
+  const date2 = moment(filterValues[1]);
+  const startDate = date1.isBefore(date2) ? date1 : date2;
+  const endDate = date1.isBefore(date2) ? date2 : date1;
+  return (valueToVerify) =>
+    moment(valueToVerify).isBetween(startDate, endDate, 'days', '[]');
+};
+const dateInArrayPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  return (valueToVerify) => filterValues.includes(valueToVerify);
+};
+
 export const filtersPredicates: DataGridFilterPredicates = {
+  date: {
+    before: dateBeforePredicate,
+    after: dateAfterPredicate,
+    equals: dateEqualsPredicate,
+    notEquals: dateNotEqualsPredicate,
+    inRange: dateInRangePredicate,
+    inArray: dateInArrayPredicate,
+  },
   text: {
     contains: textContainsPredicate,
     notContains: textNotContainsPredicate,
@@ -139,6 +187,7 @@ export const defaultFilterGetter = (row: any, columnKey: string) =>
 export const defaultFilterValues: {
   [K in DataGridFilterType]: DataGridFilterDataType<K>;
 } = {
+  date: '',
   text: '',
   number: 0,
 };
@@ -146,6 +195,7 @@ export const defaultFilterValues: {
 export const defaultValueParsers: {
   [K in DataGridFilterType]: (value: string) => DataGridFilterDataType<K>;
 } = {
+  date: (value) => moment(value).format('YYYY-MM-DD'),
   text: (value) => value,
   number: (value) => parseFloat(value),
 };
@@ -156,7 +206,7 @@ export const groupDatesByYearAndMonth = (dates: any[]) =>
     if (!acc[year]) {
       acc[year] = {};
     }
-    const yearAndMonth = moment(date).format(`YYYY-MM`);
+    const yearAndMonth = moment(date).format(`MM/YYYY`);
     if (!acc[year][yearAndMonth]) {
       acc[year][yearAndMonth] = [];
     }
@@ -215,6 +265,13 @@ export const getCheckboxes = (
         level,
       }));
 
+export const dateFilter = (key: string): DataGridFilter<'date'> => ({
+  type: 'date',
+  operator: 'before',
+  values: [''],
+  getter: (row) => row[key] ?? '',
+});
+
 export const textFilter = (key: string): DataGridFilter<'text'> => ({
   type: 'text',
   operator: 'contains',

package/src/components/data/DataGrid/hooks/useDataGridCopy.ts

@@ -67,6 +67,11 @@ export const useDataGridCopy = <R>({
             ? "mso-number-format: '" + col.excelFormatter(col) + "';"
             : ''
         }
+        ${
+          col.excelBackgroundColor
+            ? "background-color: '" + col.excelBackgroundColor(value) + "';"
+            : ''
+        }
         white-space: nowrap;
       ">
         ${generateCellText(col, value)}

package/src/components/data/DataGrid/styles.ts

@@ -7,7 +7,6 @@ export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
 export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
 export const DEFAULT_ROW_HEIGHT = 32;
-export const DEFAULT_FILTER_ROW_HEIGHT = 24;
 
 export const TopPaddingRow = styled.div``;
 export const BottomPaddingRow = styled.div``;
@@ -322,46 +321,3 @@ export const ResizeBackdrop = styled.div.attrs({
   cursor: col-resize;
 `;
 ResizeBackdrop.displayName = 'ResizeBackdrop';
-
-export const FilterValuesScrollerContainer = styled.div.attrs({
-  className: 'FilterValuesScrollerContainer',
-})<{
-  $rowHeight?: number;
-}>`
-  display: block;
-  font-size: var(--text-base);
-  background-color: var(--color-neutral-0);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 100%;
-
-  & > div {
-    position: relative;
-  }
-
-  & .checkbox {
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
-      `${$rowHeight}px`};
-
-    input[type='checkbox'] {
-      margin-right: var(--space-1);
-    }
-  }
-`;
-
-export const FilterValueContainer = styled.div.attrs({
-  className: 'FilterValueContainer',
-})`
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--color-neutral-50);
-  }
-`;

package/src/components/data/DataGrid/types.ts

@@ -38,6 +38,7 @@ export type DataGridColumn<R> = {
   component?: DataGridCellFC;
   editable?: boolean;
   excelFormatter?: (value: any) => string;
+  excelBackgroundColor?: (value: any) => string;
   excelValue?: (value: any) => string;
   filter?: DataGridFilter;
   footer?:
@@ -193,6 +194,10 @@ export type DataGridFilterOperators<K extends string, T> = {
 };
 
 export type DataGridFilterPredicates = {
+  date: DataGridFilterOperators<
+    'before' | 'after' | 'equals' | 'notEquals' | 'inRange' | 'inArray',
+    string
+  >;
   text: DataGridFilterOperators<
     | 'contains'
     | 'notContains'

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import {
+  buildExcelFormat,
+  numberFilter,
+  textFilter,
+} from '../../DataGrid/helpers';
 import {
   formatMoney,
   formatNumber,
+  formatNumberInvariant,
   formatPercentage,
 } from '../../../../helpers/numbers';
-import { numberFilter, textFilter } from '../../DataGrid/helpers';
 
 import { formatDate } from '../../../../helpers/dates';
 
@@ -103,7 +108,14 @@ export const sqlDateColumn = <R extends Record<string, any>>(
     render: (row) => formatDate(row[key]),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    excelFormatter: () => 'dd/mm/yyyy',
+    excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDate(value),
+      renderer: (value) => formatDate(value),
+    },
     footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
@@ -134,7 +146,8 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => '#',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -163,7 +176,8 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
     name: title,
     type: 'number',
     render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelFormatter: () => '#0.00',
+    excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -191,7 +205,8 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => '#0.00',
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -238,6 +253,8 @@ export const sqlColorColumn = <R extends Record<string, any>>(
         &nbsp;
       </div>
     ),
+    excelValue: () => '',
+    excelBackgroundColor: (value) => value,
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {

package/src/helpers/numbers.ts

@@ -18,3 +18,9 @@ export const formatNumber = (number: number, decimals = 2) =>
     minimumFractionDigits: decimals,
     maximumFractionDigits: decimals,
   }).format(number);
+
+export const formatNumberInvariant = (number: number, decimals = 2) =>
+  new Intl.NumberFormat('es-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(number);

package/src/services/globalSearch.ts

@@ -0,0 +1,27 @@
+import { SqlRequestRow } from './sqlRequests';
+import { useWebSocketRequestHandler } from './hooks';
+
+export type GlobalSearchRequestDTO = {
+  types: string[];
+  searchTerm: string;
+  limit?: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type GlobalSearchResponseDTO<T = any> = {
+  data: Record<string, SqlRequestRow<T>[]>;
+  count?: number;
+};
+
+type GlobalSearchRequestHandler<T> = (
+  request: GlobalSearchRequestDTO
+) => Promise<GlobalSearchResponseDTO<T>>;
+
+export const useGlobalSearchRequestHandler = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T = any
+>(): GlobalSearchRequestHandler<T> =>
+  useWebSocketRequestHandler<
+    GlobalSearchRequestDTO,
+    GlobalSearchResponseDTO<T>
+  >('GlobalSearch');