@addev-be/ui 0.16.10 → 0.17.1

package/dist/services/types/users.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -15,66 +26,58 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteUserResponseDtoSchema = exports.deleteUserRequestDtoSchema = exports.saveUserResponseDtoSchema = exports.saveUserRequestDtoSchema = exports.getAllUsersResponseDtoSchema = exports.getAllUsersRequestDtoSchema = exports.getUserResponseDtoSchema = exports.getUserRequestDtoSchema = exports.userDtoSchema = void 0;
-var z = __importStar(require("zod"));
+exports.deleteUserResponseDtoCodec = exports.deleteUserRequestDtoCodec = exports.saveUserResponseDtoCodec = exports.saveUserRequestDtoCodec = exports.getAllUsersResponseDtoCodec = exports.getAllUsersRequestDtoCodec = exports.getUserResponseDtoCodec = exports.getUserRequestDtoCodec = exports.userDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
 var base_1 = require("./base");
 var userProfiles_1 = require("./userProfiles");
-exports.userDtoSchema = base_1.baseModelDtoSchema.extend({
-    username: z.string(),
-    permissions: z.array(z.string()),
-    isAdmin: z.boolean(),
-    profile: userProfiles_1.userProfileDtoSchema.nullable(),
-    name: z.string().optional(),
-    email: z.string().optional(),
-    lastLogin: z.string().nullable().optional(),
-});
+exports.userDtoCodec = t.intersection([
+    t.type(__assign(__assign({}, base_1.baseModelDtoCodec.props), { username: t.string, permissions: t.array(t.string), isAdmin: t.boolean, profile: t.union([userProfiles_1.userProfileDtoCodec, t.null]) })),
+    t.partial({
+        name: t.string,
+        email: t.string,
+        lastLogin: t.union([t.string, t.null]),
+    }),
+], 'UserDTO');
 /*****/
-exports.getUserRequestDtoSchema = z.object({
-    id: z.string(),
-});
-exports.getUserResponseDtoSchema = z.object({
-    status: z.number(),
-    data: exports.userDtoSchema,
-});
+exports.getUserRequestDtoCodec = t.type({
+    id: t.string,
+}, 'GetUserRequestDTO');
+exports.getUserResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.userDtoCodec,
+}, 'GetUserResponseDTO');
 /*****/
-exports.getAllUsersRequestDtoSchema = z.object({});
-exports.getAllUsersResponseDtoSchema = z.object({
-    status: z.number(),
-    data: z.array(exports.userDtoSchema),
-});
+exports.getAllUsersRequestDtoCodec = t.type({}, 'GetAllUsersRequestDTO');
+exports.getAllUsersResponseDtoCodec = t.type({
+    status: t.number,
+    data: t.array(exports.userDtoCodec),
+}, 'GetAllUsersResponseDTO');
 /*****/
-exports.saveUserRequestDtoSchema = z.object({
-    data: exports.userDtoSchema.extend({
-        password: z.string().optional(),
-    }),
-    password: z.string(),
-});
-exports.saveUserResponseDtoSchema = z.object({
-    status: z.number(),
-    data: exports.userDtoSchema,
-});
+exports.saveUserRequestDtoCodec = t.type({
+    data: t.intersection([
+        exports.userDtoCodec,
+        t.partial({
+            password: t.string,
+        }),
+    ]),
+    password: t.string,
+}, 'SaveUserRequestDTO');
+exports.saveUserResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.userDtoCodec,
+}, 'SaveUserResponseDTO');
 /*****/
-exports.deleteUserRequestDtoSchema = z.object({
-    id: z.string(),
-});
-exports.deleteUserResponseDtoSchema = z.object({
-    status: z.number(),
-});
+exports.deleteUserRequestDtoCodec = t.type({
+    id: t.string,
+}, 'DeleteUserRequestDTO');
+exports.deleteUserResponseDtoCodec = t.type({
+    status: t.number,
+}, 'DeleteUserResponseDTO');

package/dist/services/updateSqlRequests.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUpdateSqlRequestHandler = void 0;
 var hooks_1 = require("./hooks");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var useUpdateSqlRequestHandler = function (name) { return (0, hooks_1.useWebSocketRequestHandler)(name); };
 exports.useUpdateSqlRequestHandler = useUpdateSqlRequestHandler;

package/eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

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

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

@@ -22,29 +22,27 @@ export const DataGridEditableCell = <R, T>({
   const rowKey = rowKeyGetter(row);
 
   const defaultItemToPartialRow = useCallback(
-    (row: R, newValue: T): Partial<R> =>
-      ({ [columnKey]: newValue } as Partial<R>),
+    (key: string, row: R, newValue: T): Partial<R> =>
+      ({ Id: key, [columnKey]: newValue } as any),
     [columnKey]
   );
   const partialRowGetter: EditableDataGridColumn<R, T>['itemToPartialRow'] =
     column.itemToPartialRow ?? defaultItemToPartialRow;
 
   const save = useCallback(() => {
-    const rowIndex = rows.findIndex(
-      (r) => rowKeyGetter(r) === rowKeyGetter(row)
-    );
+    const rowIndex = rows.findIndex((r) => rowKeyGetter(r) === rowKey);
 
     // If row is found
     if (rowIndex >= 0) {
       // Update the row with the new value
-      const partialRow = partialRowGetter(row, value);
+      const partialRow = partialRowGetter(rowKey, row, value);
       const newRow = {
         ...row,
         ...partialRow,
       };
 
       // Update the edited rows state
-      editRow(rowKey, partialRow);
+      editRow(partialRow);
 
       // Update the rows
       setRows?.((oldRows) => {

package/src/components/data/DataGrid/DataGridHeader.tsx

@@ -20,6 +20,7 @@ import { IndeterminateCheckbox } from '../../forms/IndeterminateCheckbox';
 import { Loading } from '../../layout';
 import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
 import { useDataGridContext } from './hooks';
+import { useRefreshModal } from './hooks/useRefreshModal';
 
 export const DataGridHeader = <R,>({
   context,
@@ -89,17 +90,27 @@ export const DataGridHeader = <R,>({
   const add = useCallback(async () => {
     if (onAddClicked) {
       const row = await onAddClicked();
-      const key = rowKeyGetter(row);
-      addRow(key, row);
+      addRow(row);
     }
-  }, [addRow, onAddClicked, rowKeyGetter]);
+  }, [addRow, onAddClicked]);
 
-  const onRefreshClicked = useCallback(() => {
+  const doRefresh = useCallback(() => {
     refresh?.();
     clearChangedRows();
     setSelectedKeys([]);
   }, [clearChangedRows, refresh, setSelectedKeys]);
 
+  const { openModal: openRefreshModal, modal: refreshModal } =
+    useRefreshModal(doRefresh);
+
+  const onRefreshClicked = useCallback(async () => {
+    if (addedRows.length + updatedRows.length > 0) {
+      openRefreshModal();
+    } else {
+      doRefresh();
+    }
+  }, [addedRows.length, doRefresh, openRefreshModal, updatedRows.length]);
+
   const toolsRow = (
     <styles.DataGridToolsRow>
       <styles.DataGridToolsRowButtonsContainer>
@@ -143,6 +154,7 @@ export const DataGridHeader = <R,>({
   return (
     <>
       {modal}
+      {refreshModal}
       {toolsRow}
       <styles.DataGridHeaderRow
         $gridTemplateColumns={gridTemplateColumns}

package/src/components/data/DataGrid/DataGridRowTemplate.tsx

@@ -44,8 +44,10 @@ export const DataGridRowTemplate = <R,>({
     className: '',
     style: undefined,
   };
-  const isAdded = rowKey in addedRows;
-  const isUpdated = rowKey in updatedRows;
+  const isAdded = addedRows.some((row) => rowKeyGetter(row as R) === rowKey);
+  const isUpdated = updatedRows.some(
+    (row) => rowKeyGetter(row as R) === rowKey
+  );
 
   return (
     <styles.DataGridRow key={rowKey} $edited={isAdded || isUpdated}>

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -47,9 +47,6 @@ export const useDataGrid = <R,>(
     override?.rows ?? innerRows,
     override?.setRows ?? setInnerRows,
   ];
-  useEffect(() => {
-    setInnerRows(props.rows);
-  }, [props.rows]);
 
   /** SETTINGS */
 
@@ -152,7 +149,7 @@ export const useDataGrid = <R,>(
     addRow,
     updateRow,
     clearChangedRows,
-  } = useDataGridChangedRows<R>(onRowAdded);
+  } = useDataGridChangedRows<R>(rowKeyGetter as any, onRowAdded);
 
   /** ROWS SORTING **/
 
@@ -365,8 +362,8 @@ export const useDataGrid = <R,>(
         startResizing: () => {},
         moveResizing: () => {},
         endResizing: () => {},
-        addedRows: {},
-        updatedRows: {},
+        addedRows: [],
+        updatedRows: [],
         setRows: () => {},
         editRow: () => {},
         addRow: () => {},

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

@@ -1,49 +1,82 @@
 import { useCallback, useState } from 'react';
 
-import { DataGridEditedRows } from '../types';
-import { pickBy } from 'lodash';
-
-export const useDataGridChangedRows = <R>(onRowAdded: (row: R) => void) => {
-  const [addedRows, setAddedRows] = useState<DataGridEditedRows<R>>({});
-  const [updatedRows, setUpdatedRows] = useState<DataGridEditedRows<R>>({});
+export const useDataGridChangedRows = <R>(
+  rowKeyGetter: (row: Partial<R>) => string,
+  onRowAdded: (row: R) => void
+) => {
+  const [addedRows, setAddedRows] = useState<Partial<R>[]>([]);
+  const [updatedRows, setUpdatedRows] = useState<Partial<R>[]>([]);
 
   const addRow = useCallback(
-    (key: string, row: R) => {
-      setAddedRows((prev) => ({ ...prev, [key]: row }));
-      onRowAdded(row);
+    (row: Partial<R>) => {
+      setAddedRows((prev) => [...prev, row]);
+      onRowAdded(row as R);
     },
     [onRowAdded]
   );
 
-  const updateRow = useCallback((key: string, row: Partial<R>) => {
-    setUpdatedRows((prev) => ({ ...prev, [key]: row }));
-  }, []);
+  const updateRow = useCallback(
+    (row: Partial<R>) => {
+      const rowKey = rowKeyGetter(row);
+      setUpdatedRows((prev) => {
+        const index = prev.findIndex((r) => rowKeyGetter(r) === rowKey);
+        return index >= 0
+          ? prev.map((existingRow, i) =>
+              i === index ? { ...existingRow, ...row } : existingRow
+            )
+          : [...prev, row];
+      });
+    },
+    [rowKeyGetter]
+  );
 
   const editRow = useCallback(
-    (key: string, row: Partial<R>) => {
-      if (addedRows[key]) {
-        setAddedRows((prev) => ({ ...prev, [key]: { ...prev[key], ...row } }));
-      } else if (updatedRows[key]) {
-        setUpdatedRows((prev) => ({
-          ...prev,
-          [key]: { ...prev[key], ...row },
-        }));
-      } else {
-        setUpdatedRows((prev) => ({ ...prev, [key]: row }));
+    (row: Partial<R>) => {
+      const key = rowKeyGetter(row);
+      const addedRowIndex = addedRows.findIndex(
+        (r) => rowKeyGetter(r as R) === key
+      );
+      if (addedRowIndex >= 0) {
+        setAddedRows((prev) =>
+          prev.map((existingRow, index) =>
+            index === addedRowIndex ? { ...existingRow, ...row } : existingRow
+          )
+        );
+        return;
+      }
+      const updatedRowIndex = updatedRows.findIndex(
+        (r) => rowKeyGetter(r as R) === key
+      );
+      if (updatedRowIndex >= 0) {
+        setUpdatedRows((prev) =>
+          prev.map((existingRow, index) =>
+            index === updatedRowIndex ? { ...existingRow, ...row } : existingRow
+          )
+        );
+        return;
       }
+
+      setUpdatedRows((prev) => [...prev, row]);
     },
-    [addedRows, updatedRows]
+    [rowKeyGetter, addedRows, updatedRows]
   );
 
-  const clearChangedRows = useCallback((keys?: string[]) => {
-    if (!keys) {
-      setAddedRows({});
-      setUpdatedRows({});
-      return;
-    }
-    setAddedRows((prev) => pickBy(prev, (_, key) => !keys.includes(key)));
-    setUpdatedRows((prev) => pickBy(prev, (_, key) => !keys.includes(key)));
-  }, []);
+  const clearChangedRows = useCallback(
+    (keys?: string[]) => {
+      if (!keys) {
+        setAddedRows([]);
+        setUpdatedRows([]);
+        return;
+      }
+      setAddedRows((prev) =>
+        prev.filter((row) => !keys.includes(rowKeyGetter(row as R)))
+      );
+      setUpdatedRows((prev) =>
+        prev.filter((row) => !keys.includes(rowKeyGetter(row as R)))
+      );
+    },
+    [rowKeyGetter]
+  );
 
   return {
     addedRows,

package/src/components/data/DataGrid/hooks/useRefreshModal.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { Button } from '../../../forms';
+import { Modal } from '../../../layout/Modal';
+import { TriangleExclamationIcon } from '../../../../Icons';
+
+export const useRefreshModal = (onConfirm: () => void) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const openModal = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const modal = useMemo(
+    () =>
+      isVisible ? (
+        <Modal $width={400}>
+          <Modal.Header>Rafraichir</Modal.Header>
+          <Modal.ContentWithIcon>
+            <TriangleExclamationIcon fill="var(--color-danger-600)" />
+            <div>
+              Attention : vous avez des modifications en cours. Si vous
+              rafraîchissez la liste, ces modifications seront perdues !
+            </div>
+          </Modal.ContentWithIcon>
+          <Modal.Footer>
+            <Button onClick={closeModal}>Annuler</Button>
+            <Button
+              $color="danger"
+              style={{ marginLeft: 'auto' }}
+              onClick={() => {
+                closeModal();
+                onConfirm();
+              }}
+            >
+              Rafraîchir
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      ) : null,
+    [closeModal, isVisible, onConfirm]
+  );
+
+  return { openModal, closeModal, modal };
+};

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

@@ -1,3 +1,4 @@
+import styled, { css } from 'styled-components';
 import {
   DEFAULT_FOOTER_ROW_HEIGHT,
   DEFAULT_HEADER_ROW_HEIGHT,
@@ -5,11 +6,10 @@ import {
   SELECTION_CELL_WIDTH,
   TOOLBAR_HEIGHT,
 } from './constants';
-import styled, { css } from 'styled-components';
 
-import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
+import { DataGridCellFCProps } from './types';
 
 export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
   position: absolute;
@@ -304,6 +304,10 @@ type DataGridRowProps = {
 export const DataGridRow = styled.div<DataGridRowProps>`
   display: contents;
 
+  &:hover > ${DataGridCell} {
+    background-color: var(--color-blue-100);
+  }
+
   ${({ $edited }) =>
     $edited &&
     css`
@@ -311,6 +315,9 @@ export const DataGridRow = styled.div<DataGridRowProps>`
         background-color: var(--color-warning-100);
         color: var(--color-warning-900);
       }
+      &:hover > ${DataGridCell}, &:hover > ${SelectionCell} {
+        background-color: var(--color-blue-100);
+      }
     `}
 `;
 DataGridRow.displayName = 'DataGridRow';

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

@@ -67,7 +67,7 @@ type CommonGridColumnProps<R, T> = {
 export type EditableDataGridColumn<R, T> = CommonGridColumnProps<R, T> & {
   editable?: boolean;
   editComponent?: DataGridEditableCellFC<R, T>;
-  itemToPartialRow?: (row: R, value: T) => Partial<R>;
+  itemToPartialRow?: (key: string, row: R, value: T) => Partial<R>;
 };
 
 export type DataGridTextColumn<R> = EditableDataGridColumn<R, string> & {
@@ -208,9 +208,9 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
 
   addedRows: DataGridEditedRows<R>;
   updatedRows: DataGridEditedRows<R>;
-  editRow: (key: string, row: Partial<R>) => void;
-  addRow: (key: string, row: R) => void;
-  updateRow: (key: string, row: Partial<R>) => void;
+  editRow: (row: Partial<R>) => void;
+  addRow: (row: R) => void;
+  updateRow: (row: Partial<R>) => void;
   clearChangedRows: (keys?: string[]) => void;
 };
 
@@ -364,4 +364,4 @@ export type DataGridRefProps = {
   setSelectedKeys: (keys: string[]) => void;
 };
 
-export type DataGridEditedRows<R> = Record<string, Partial<R>>;
+export type DataGridEditedRows<R> = Partial<R>[];

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

@@ -408,11 +408,12 @@ const convertItemToPartialRow = <
   R extends Record<string, any>,
   T extends Record<string, any>
 >(
+  key: string,
   row: R,
   item: T | null,
   columnMapping: Record<keyof R, keyof T>
 ): Partial<R> => {
-  const partialRow = {} as Partial<R>;
+  const partialRow = { Id: key } as unknown as Partial<R>;
   Object.entries(columnMapping).forEach(([key, value]: [keyof R, keyof T]) => {
     partialRow[key] = (item?.[value] ?? null) as R[keyof R];
   });
@@ -473,8 +474,8 @@ export const sqlForeignListColumn = <
         );
       }
     ),
-    itemToPartialRow: (row, value) =>
-      convertItemToPartialRow(row, value, columnMapping),
+    itemToPartialRow: (key, row, value) =>
+      convertItemToPartialRow(key, row, value, columnMapping),
   };
   return merge(column, options);
 };

package/src/components/layout/Modal/styles.ts

@@ -94,8 +94,12 @@ export const ModalContentWithIcon = styled.div.attrs({
 
   & > svg {
     margin: var(--space-2);
-    width: var(--space-8);
-    height: var(--space-8);
+    width: var(--space-6);
+    height: var(--space-6);
+  }
+
+  & > :not(svg) {
+    flex: 1;
   }
 `;
 

package/src/components/search/HighlightedText.tsx

@@ -8,30 +8,34 @@ export const HighlightedText: FC<
   } & HTMLAttributes<HTMLSpanElement>
 > = ({ text, highlight, ...props }) => {
   const textWithoutHtml = useMemo(() => extractTextFromHTML(text), [text]);
-  console.log('textWithoutHtml', textWithoutHtml);
-  if (!highlight) return <span {...props}>{textWithoutHtml}</span>;
+  const parts = useMemo(
+    () =>
+      highlight
+        ? textWithoutHtml
+            ?.split(new RegExp(`(${escapeForRegExp(highlight)})`, 'gi'))
+            .filter(Boolean) ?? []
+        : [],
+    [highlight, textWithoutHtml]
+  );
 
-  const parts =
-    textWithoutHtml?.split(
-      new RegExp(`(${escapeForRegExp(highlight)})`, 'gi')
-    ) ?? [];
+  if (!highlight || !parts.length) {
+    return <span {...props}>{textWithoutHtml}</span>;
+  }
 
   return (
     <span {...props}>
-      {parts
-        .filter((part) => !!part)
-        .map((part, index) => (
-          <span
-            key={index}
-            style={
-              part.toLowerCase() === highlight.toLowerCase()
-                ? { backgroundColor: 'gold' }
-                : {}
-            }
-          >
-            {part}
-          </span>
-        ))}
+      {parts.map((part, index) => (
+        <span
+          key={index}
+          style={
+            part.toLowerCase() === highlight.toLowerCase()
+              ? { backgroundColor: 'gold' }
+              : {}
+          }
+        >
+          {part}
+        </span>
+      ))}
     </span>
   );
 };