[DEV] correct models

front/app-build.json

@@ -1,6 +0,0 @@
-{
-  "display": "2025-02-09",
-  "version": "0.0.1-dev\n - 2025-02-09T21:15:14+01:00",
-  "commit": "0.0.1-dev\n",
-  "date": "2025-02-09T21:15:14+01:00"
-}

front/build.js

@@ -1,25 +0,0 @@
-const dayjs = require('dayjs');
-
-const fs = require('fs');
-
-const generateAppBuild = () => {
-  const getVersion = () => fs.readFileSync('version.txt', 'utf8');
-
-  const commit = process.env.VERCEL_GIT_COMMIT_SHA
-    ? process.env.VERCEL_GIT_COMMIT_SHA
-    : getVersion();
-
-  const appBuildContent = {
-    display: `${dayjs().format('YYYY-MM-DD')}`,
-    version: `${commit} - ${dayjs().format()}`,
-    commit,
-    date: dayjs().format(),
-  };
-
-  fs.writeFileSync(
-    './app-build.json',
-    JSON.stringify(appBuildContent, null, 2)
-  );
-};
-
-generateAppBuild();

front/knip.ts

@@ -7,11 +7,6 @@ const config: KnipConfig = {
     // Related to tests
     'tests/**',
     '**.conf.js',
-    'steps.d.ts',
-    'steps_file.js',
-    'env_ci/codecept.conf.js',
-    // Generic components are useful.
-    'src/components/**',
   ],
 };
 

front/package.json

@@ -18,7 +18,7 @@
     "test": "vitest run",
     "test:watch": "vitest watch",
     "build": "tsc && vite build",
-    "static:build": "node build.js && pnpm build",
+    "static:build": "pnpm build",
     "dev": "vite",
     "pretty": "prettier -w .",
     "lint": "pnpm tsc --noEmit",

front/src/App.tsx

@@ -1,9 +1,9 @@
-import { EnvDevelopment } from './components/EnvDevelopment/EnvDevelopment';
-
 import { ErrorBoundary } from '@/errors/ErrorBoundary';
 import { AppRoutes } from '@/scene/AppRoutes';
 import { ServiceContextProvider } from '@/service/ServiceContext';
 
+import { EnvDevelopment } from './components/EnvDevelopment/EnvDevelopment';
+
 export const App = () => {
   return (
     <ServiceContextProvider>

front/src/components/Cover.tsx

@@ -3,13 +3,14 @@ import { ReactElement, useEffect, useState } from 'react';
 import { Box, BoxProps, Flex, FlexProps } from '@chakra-ui/react';
 import { Image } from '@chakra-ui/react';
 
-import { DataUrlAccess } from '@/utils/data-url-access';
-import { Icon } from './Icon';
 import { ObjectId } from '@/back-api';
+import { DataUrlAccess } from '@/utils/data-url-access';
 
-export type CoversProps = Omit<BoxProps, "iconEmpty"> & {
+import { Icon } from './Icon';
+
+export type CoversProps = Omit<BoxProps, 'iconEmpty'> & {
   data?: ObjectId[];
-  size?: BoxProps["width"];
+  size?: BoxProps['width'];
   iconEmpty?: ReactElement;
   slideshow?: boolean;
 };
@@ -33,7 +34,9 @@ export const Covers = ({
       setPreviousImageIndex(currentImageIndex);
       setTopOpacity(0.0);
       setTimeout(() => {
-        setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (data?.length ?? 1));
+        setCurrentImageIndex(
+          (prevIndex) => (prevIndex + 1) % (data?.length ?? 1)
+        );
         setTopOpacity(1.0);
       }, 1500);
     }, 3000);
@@ -60,17 +63,26 @@ export const Covers = ({
   }
   if (slideshow === false || data.length === 1) {
     const url = DataUrlAccess.getThumbnailUrl(data[0]);
-    return <Image loading="lazy" src={url} maxWidth={size} boxSize={size} /*{...rest}*/ />;
+    return (
+      <Image
+        loading="lazy"
+        src={url}
+        maxWidth={size}
+        boxSize={size} /*{...rest}*/
+      />
+    );
   }
   const urlCurrent = DataUrlAccess.getThumbnailUrl(data[currentImageIndex]);
   const urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]);
-  return <Flex
+  return (
+    <Flex
       position="relative"
       // {...rest}
       maxWidth={size}
       width={size}
       height={size}
-    overflow="hidden">
+      overflow="hidden"
+    >
       <Image
         src={urlPrevious}
         loading="lazy"
@@ -96,4 +108,5 @@ export const Covers = ({
         zIndex={2}
       />
     </Flex>
+  );
 };

front/src/components/EnvDevelopment/EnvDevelopment.tsx

@@ -1,26 +1,25 @@
-
 import {
   Box,
   Button,
-  createListCollection,
   Dialog,
   Select,
   Span,
   Stack,
   Text,
+  createListCollection,
   useDisclosure,
 } from '@chakra-ui/react';
 
-import { useSessionService } from '@/service/session';
 import { useLogin } from '@/scene/connection/useLogin';
+import { useSessionService } from '@/service/session';
 
 export const USERS_COLLECTION = createListCollection({
   items: [
-    { label: "karadmin", value: "adminA@666" },
+    { label: 'karadmin', value: 'adminA@666' },
-    { label: "karuser", value: "userA@666" },
+    { label: 'karuser', value: 'userA@666' },
-    { label: "NO_USER", value: "" },
+    { label: 'NO_USER', value: '' },
   ],
-})
+});
 
 export const EnvDevelopment = () => {
   const dialog = useDisclosure();
@@ -86,14 +85,23 @@ export const EnvDevelopment = () => {
             <Dialog.Header>Development tools</Dialog.Header>
             <Dialog.Body>
               <Stack>
-                <Text>User <Span color="red" fontWeight="bold">{lastError}</Span></Text>
+                <Text>
+                  User{' '}
+                  <Span color="red" fontWeight="bold">
+                    {lastError}
+                  </Span>
+                </Text>
                 <Select.Root collection={USERS_COLLECTION}>
                   <Select.Trigger>
                     <Select.ValueText placeholder="Select test user" />
                   </Select.Trigger>
                   <Select.Content>
                     {USERS_COLLECTION.items.map((value) => (
-                      <Select.Item item={value} key={value.value}onClick={()=>handleChange(value.label, value.value)} >
+                      <Select.Item
+                        item={value}
+                        key={value.value}
+                        onClick={() => handleChange(value.label, value.value)}
+                      >
                         {value.label}
                       </Select.Item>
                     ))}
@@ -110,4 +118,3 @@ export const EnvDevelopment = () => {
     </>
   );
 };
-

front/src/components/Icon.tsx

@@ -1,9 +1,6 @@
-import {
+import { ReactNode, forwardRef } from 'react';
-    Box,
+
-    Flex,
+import { Box, Flex, FlexProps } from '@chakra-ui/react';
-    FlexProps,
-} from '@chakra-ui/react';
-import { forwardRef, ReactNode } from 'react';
 
 export type IconProps = FlexProps & {
   children: ReactNode;
@@ -14,7 +11,8 @@ export type IconProps = FlexProps & {
 export const Icon = forwardRef<HTMLDivElement, IconProps>(
   ({ children, color, sizeIcon = '1em', ...rest }, ref) => {
     return (
-            <Flex flex="none"
+      <Flex
+        flex="none"
         minWidth={sizeIcon}
         minHeight={sizeIcon}
         maxWidth={sizeIcon}
@@ -22,7 +20,8 @@ export const Icon = forwardRef<HTMLDivElement, IconProps>(
         align="center"
         padding="1px"
         ref={ref}
-                {...rest}>
+        {...rest}
+      >
         <Box
           marginX="auto"
           width="100%"

front/src/components/Layout/PageLayoutInfoCenter.tsx

@@ -4,8 +4,8 @@ import { Flex, FlexProps } from '@chakra-ui/react';
 import { useLocation } from 'react-router-dom';
 
 import { PageLayout } from '@/components/Layout/PageLayout';
-import { colors } from '@/theme/colors';
 import { useColorModeValue } from '@/components/ui/color-mode';
+import { colors } from '@/theme/colors';
 
 export type LayoutProps = FlexProps & {
   children: ReactNode;

front/src/components/ParameterLayout/ParameterLayout.ts

@@ -1,22 +1,20 @@
-
 export {
   ParameterLayoutContent as Content,
-    type ParameterLayoutContentProps as ContentProps
+  type ParameterLayoutContentProps as ContentProps,
 } from './ParameterLayoutContent';
 export {
   ParameterLayoutFooter as Footer,
-    type ParameterLayoutFooterProps as FooterProps
+  type ParameterLayoutFooterProps as FooterProps,
 } from './ParameterLayoutFooter';
 export {
   ParameterLayoutHeader as Header,
-    type ParameterLayoutHeaderProps as HeaderProps
+  type ParameterLayoutHeaderProps as HeaderProps,
 } from './ParameterLayoutHeader';
 export {
   ParameterLayoutHeaderBase as HeaderBase,
-    type ParameterLayoutHeaderBaseProps as HeaderBaseProps
+  type ParameterLayoutHeaderBaseProps as HeaderBaseProps,
 } from './ParameterLayoutHeaderBase';
 export {
   ParameterLayoutRoot as Root,
-    type ParameterLayoutRootProps as RootProps
+  type ParameterLayoutRootProps as RootProps,
 } from './ParameterLayoutRoot';
-

front/src/components/ParameterLayout/ParameterLayoutContent.tsx

@@ -1,19 +1,25 @@
-import { Flex } from "@chakra-ui/react";
+import { ReactNode } from 'react';
-import { ReactNode } from "react";
+
+import { Flex } from '@chakra-ui/react';
 
 export type ParameterLayoutContentProps = {
   children?: ReactNode;
-}
+};
 
-export const ParameterLayoutContent = ({children}:ParameterLayoutContentProps) => {
+export const ParameterLayoutContent = ({
-    return <Flex
+  children,
+}: ParameterLayoutContentProps) => {
+  return (
+    <Flex
       direction="column"
       width="full"
       borderY="1px solid black"
       paddingY="15px"
       paddingX="25px"
       minHeight="10px"
-      background="gray.700">
+      background="gray.700"
+    >
       {children}
     </Flex>
-}
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutFooter.tsx

@@ -1,16 +1,17 @@
-import { Flex } from "@chakra-ui/react";
+import { ReactNode } from 'react';
-import { ReactNode } from "react";
+
+import { Flex } from '@chakra-ui/react';
 
 export type ParameterLayoutFooterProps = {
   children?: ReactNode;
-}
+};
 
-export const ParameterLayoutFooter = ({children}:ParameterLayoutFooterProps) => {
+export const ParameterLayoutFooter = ({
-    return <Flex
+  children,
-        width="full"
+}: ParameterLayoutFooterProps) => {
-        paddingY="15px"
+  return (
-        paddingX="25px"
+    <Flex width="full" paddingY="15px" paddingX="25px" minHeight="10px">
-        minHeight="10px">
       {children}
     </Flex>
-}
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutHeader.tsx

@@ -1,17 +1,17 @@
-import { Flex } from "@chakra-ui/react";
+import { ReactNode } from 'react';
-import { ReactNode } from "react";
+
+import { Flex } from '@chakra-ui/react';
 
 export type ParameterLayoutHeaderProps = {
   children?: ReactNode;
-}
+};
 
-export const ParameterLayoutHeader = ({children}:ParameterLayoutHeaderProps) => {
+export const ParameterLayoutHeader = ({
-    return <Flex
+  children,
-      width="full"
+}: ParameterLayoutHeaderProps) => {
-      paddingY="15px"
+  return (
-      paddingX="25px"
+    <Flex width="full" paddingY="15px" paddingX="25px" minHeight="10px">
-      minHeight="10px"
-      >
       {children}
     </Flex>
-}
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx

@@ -1,23 +1,24 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Text } from '@chakra-ui/react';
-import { ParameterLayoutHeader } from "./ParameterLayoutHeader";
+
+import { ParameterLayoutHeader } from './ParameterLayoutHeader';
 
 export type ParameterLayoutHeaderBaseProps = {
   title: string;
-    description?: string,
+  description?: string;
-}
+};
 
 export const ParameterLayoutHeaderBase = ({
   title,
   description,
 }: ParameterLayoutHeaderBaseProps) => {
-    return <ParameterLayoutHeader>
+  return (
+    <ParameterLayoutHeader>
       <Flex direction="column">
-        <Text
+        <Text fontSize="25px" fontWeight="bold">
-            fontSize="25px"
-            fontWeight="bold">
           {title}
         </Text>
         {description && <Text>{description}</Text>}
       </Flex>
     </ParameterLayoutHeader>
-}
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutRoot.tsx

@@ -1,17 +1,24 @@
+import { ReactNode } from 'react';
 
 import { VStack } from '@chakra-ui/react';
-import { ReactNode } from 'react';
 
 export type ParameterLayoutRootProps = {
   children?: ReactNode;
-}
+};
 
 export const ParameterLayoutRoot = ({ children }: ParameterLayoutRootProps) => {
-    return <VStack gap="0px" marginX="15%" marginY="20px" justify="center"
+  return (
+    <VStack
+      gap="0px"
+      marginX="15%"
+      marginY="20px"
+      justify="center"
       //borderRadius="20px"
       borderRadius="0px"
       border="1px solid black"
-    background="gray.500">
+      background="gray.500"
+    >
       {children}
     </VStack>
-}
+  );
+};

front/src/components/SearchInput.tsx

@@ -1,9 +1,6 @@
 import { useState } from 'react';
 
-import {
+import { Group, Input } from '@chakra-ui/react';
-  Group,
-  Input,
-} from '@chakra-ui/react';
 import { MdSearch } from 'react-icons/md';
 
 export type SearchInputProps = {

front/src/components/TopBar/TopBar.tsx

@@ -2,15 +2,15 @@ import { ReactNode } from 'react';
 
 import {
   Box,
+  Button,
+  ConditionalValue,
   Flex,
   HStack,
   IconButton,
-  Text,
-  useDisclosure,
-  Button,
-  ConditionalValue,
   Span,
+  Text,
   chakra,
+  useDisclosure,
 } from '@chakra-ui/react';
 import {
   LuAlignJustify,
@@ -22,13 +22,18 @@ import {
   LuSettings,
   LuSun,
 } from 'react-icons/lu';
+import {
+  MdHelp,
+  MdHome,
+  MdKey,
+  MdMore,
+  MdOutlineDashboardCustomize,
+  MdOutlineGroup,
+  MdSettings,
+  MdSupervisedUserCircle,
+} from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
 
-import { useServiceContext } from '@/service/ServiceContext';
-import { colors } from '@/theme/colors';
-import { useSessionService } from '@/service/session';
-import { MdHelp, MdHome, MdKey, MdMore, MdOutlineDashboardCustomize, MdOutlineGroup, MdSettings, MdSupervisedUserCircle } from 'react-icons/md';
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
 import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
 import {
   DrawerBody,
@@ -36,11 +41,22 @@ import {
   DrawerHeader,
   DrawerRoot,
 } from '@/components/ui/drawer';
+import {
+  MenuContent,
+  MenuItem,
+  MenuRoot,
+  MenuTrigger,
+} from '@/components/ui/menu';
+import { useServiceContext } from '@/service/ServiceContext';
+import { useSessionService } from '@/service/session';
+import { colors } from '@/theme/colors';
 
 export const TOP_BAR_HEIGHT = '50px';
 
 export const BUTTON_TOP_BAR_PROPERTY = {
-  variant: "ghost" as ConditionalValue<"ghost" | "outline" | "solid" | "subtle" | "surface" | "plain" | undefined>,
+  variant: 'ghost' as ConditionalValue<
+    'ghost' | 'outline' | 'solid' | 'subtle' | 'surface' | 'plain' | undefined
+  >,
   //colorPalette: "brand",
   fontSize: '20px',
   textTransform: 'uppercase',
@@ -52,13 +68,20 @@ export type TopBarProps = {
   title?: string;
 };
 
-const ButtonMenuLeft = ({ dest, title, icon, 
+const ButtonMenuLeft = ({
-  onClickEnd = () => { }, }: {
+  dest,
-    dest: string, title: string, icon: ReactNode
+  title,
+  icon,
+  onClickEnd = () => {},
+}: {
+  dest: string;
+  title: string;
+  icon: ReactNode;
   onClickEnd?: () => void;
 }) => {
   const navigate = useNavigate();
-  return <>
+  return (
+    <>
       <Button
         background="#00000000"
         borderRadius="0px"
@@ -69,14 +92,17 @@ const ButtonMenuLeft = ({ dest, title, icon,
         width="full"
         {...BUTTON_TOP_BAR_PROPERTY}
       >
-      <Box asChild style={{ width: "45px", height: "45px" }}>{icon}</Box>
+        <Box asChild style={{ width: '45px', height: '45px' }}>
+          {icon}
+        </Box>
         <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
           {title}
         </Text>
       </Button>
       <Box marginY="5" marginX="10" height="2px" background="brand.600" />
     </>
-}
+  );
+};
 export const TopBar = ({ title, children }: TopBarProps) => {
   const { colorMode, toggleColorMode } = useColorMode();
 
@@ -138,7 +164,10 @@ export const TopBar = ({ title, children }: TopBarProps) => {
       <Flex right="0">
         {!session?.token && (
           <>
-            <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={() => navigate('/login')}>
+            <Button
+              {...BUTTON_TOP_BAR_PROPERTY}
+              onClick={() => navigate('/login')}
+            >
               <LuLogIn />
               <Text paddingLeft="3px" fontWeight="bold">
                 Sign-in
@@ -163,24 +192,55 @@ export const TopBar = ({ title, children }: TopBarProps) => {
                 //asChild
                 {...BUTTON_TOP_BAR_PROPERTY}
                 width={TOP_BAR_HEIGHT}
-              ><LuCircleUserRound/></IconButton>
+              >
+                <LuCircleUserRound />
+              </IconButton>
             </MenuTrigger>
             <MenuContent>
-              <MenuItem value="user" valueText="user" color={useColorModeValue('brand.800', 'brand.200')}>
+              <MenuItem
+                value="user"
+                valueText="user"
+                color={useColorModeValue('brand.800', 'brand.200')}
+              >
                 <MdSupervisedUserCircle />
                 <Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
               </MenuItem>
-              <MenuItem value="Settings" valueText="Settings" onClick={() => navigate('/settings')}><LuSettings />Settings</MenuItem>
+              <MenuItem
-              <MenuItem value="Help" valueText="Help" onClick={() => navigate('/help')}><MdHelp /> Help</MenuItem>
+                value="Settings"
-              <MenuItem value="Sign-out" valueText="Sign-out" onClick={() => navigate('/signout')}>
+                valueText="Settings"
+                onClick={() => navigate('/settings')}
+              >
+                <LuSettings />
+                Settings
+              </MenuItem>
+              <MenuItem
+                value="Help"
+                valueText="Help"
+                onClick={() => navigate('/help')}
+              >
+                <MdHelp /> Help
+              </MenuItem>
+              <MenuItem
+                value="Sign-out"
+                valueText="Sign-out"
+                onClick={() => navigate('/signout')}
+              >
                 <LuLogOut /> Sign-out
               </MenuItem>
               {colorMode === 'light' ? (
-                <MenuItem value="set-dark" valueText="set-dark" onClick={toggleColorMode}>
+                <MenuItem
+                  value="set-dark"
+                  valueText="set-dark"
+                  onClick={toggleColorMode}
+                >
                   <LuMoon /> Set dark mode
                 </MenuItem>
               ) : (
-                <MenuItem value="set-light" valueText="set-light" onClick={toggleColorMode}>
+                <MenuItem
+                  value="set-light"
+                  valueText="set-light"
+                  onClick={toggleColorMode}
+                >
                   <LuSun /> Set light mode
                 </MenuItem>
               )}
@@ -194,8 +254,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
         open={drawerDisclose.open}
         data-testid="top-bar_drawer-root"
       >
-        <DrawerContent
+        <DrawerContent data-testid="top-bar_drawer-content">
-          data-testid="top-bar_drawer-content">
           <DrawerHeader
             paddingY="auto"
             as="button"
@@ -205,21 +264,43 @@ export const TopBar = ({ title, children }: TopBarProps) => {
             color={useColorModeValue('brand.900', 'brand.50')}
             textTransform="uppercase"
           >
-            <HStack
+            <HStack {...BUTTON_TOP_BAR_PROPERTY} cursor="pointer">
-              {...BUTTON_TOP_BAR_PROPERTY} cursor="pointer">
               <LuArrowBigLeft />
-              <Span paddingLeft="3px">
+              <Span paddingLeft="3px">karso</Span>
-                karso
-              </Span>
             </HStack>
           </DrawerHeader>
           <DrawerBody paddingX="0px">
             <Box marginY="3" />
-            <ButtonMenuLeft onClickEnd={drawerDisclose.onClose} dest="/" title="Home" icon={<MdHome />} />
+            <ButtonMenuLeft
-            <ButtonMenuLeft onClickEnd={drawerDisclose.onClose} dest="/change-password" title="Change password" icon={<MdKey />} />
+              onClickEnd={drawerDisclose.onClose}
-            <ButtonMenuLeft onClickEnd={drawerDisclose.onClose} dest="/admin-settings" title="Admin settings" icon={<MdSettings />} />
+              dest="/"
-            <ButtonMenuLeft onClickEnd={drawerDisclose.onClose} dest="/manage-account" title="Manage account" icon={<MdOutlineGroup />} />
+              title="Home"
-            <ButtonMenuLeft onClickEnd={drawerDisclose.onClose} dest="/manage-application" title="Manage application" icon={<MdOutlineDashboardCustomize />} />
+              icon={<MdHome />}
+            />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/change-password"
+              title="Change password"
+              icon={<MdKey />}
+            />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/admin-settings"
+              title="Admin settings"
+              icon={<MdSettings />}
+            />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/manage-account"
+              title="Manage account"
+              icon={<MdOutlineGroup />}
+            />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/manage-application"
+              title="Manage application"
+              icon={<MdOutlineDashboardCustomize />}
+            />
           </DrawerBody>
         </DrawerContent>
       </DrawerRoot>

front/src/components/contextMenu/ContextMenu.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, useState } from 'react';
 
 import { LuMenu } from 'react-icons/lu';
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
-import { Button } from '../ui/button';
 
+import { Button } from '../ui/button';
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
 
 export type MenuElement = {
   icon?: ReactNode;
@@ -20,22 +20,28 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
     return <></>;
   }
   return (
-    <MenuRoot
+    <MenuRoot data-testid="context-menu">
-      data-testid="context-menu">
+      <MenuTrigger
-      <MenuTrigger asChild
+        asChild
         marginY="auto"
         marginRight="4px"
-        data-testid="context-menu_trigger">
+        data-testid="context-menu_trigger"
+      >
         {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
         <Button variant="ghost" color="brand.500">
           <LuMenu />
         </Button>
       </MenuTrigger>
-      <MenuContent
+      <MenuContent data-testid="context-menu_content">
-        data-testid="context-menu_content">
         {elements?.map((data) => (
-          <MenuItem key={data.name} value={data.name} onClick={data.onClick} height="65px" fontSize="25px"
+          <MenuItem
-            data-test-id="context-menu_item" >
+            key={data.name}
+            value={data.name}
+            onClick={data.onClick}
+            height="65px"
+            fontSize="25px"
+            data-test-id="context-menu_item"
+          >
             {data.icon}
             {data.name}
           </MenuItem>

front/src/components/form/FormInput.tsx

@@ -3,6 +3,7 @@ import { RefObject } from 'react';
 import { Input } from '@chakra-ui/react';
 
 import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';
+
 import { useFormidableContextElement } from '../formidable';
 
 export type FormInputProps = {
@@ -21,10 +22,7 @@ export const FormInput = ({
 }: FormInputProps) => {
   const { value, onChange } = useFormidableContextElement(name);
   return (
-    <FormGroup
+    <FormGroup name={name} {...rest}>
-      name={name}
-      {...rest}
-    >
       <Input
         ref={ref}
         type="text"

front/src/components/form/FormSelect.stories.tsx

@@ -4,6 +4,7 @@ import { Box } from '@chakra-ui/react';
 
 import { FormSelect } from '@/components/form/FormSelect';
 import { useFormidable } from '@/components/formidable/FormidableConfig';
+
 import { Formidable } from '../formidable';
 
 export default {

front/src/components/form/FormSelectMultiple.stories.tsx

@@ -4,6 +4,7 @@ import { Box } from '@chakra-ui/react';
 
 import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
 import { useFormidable } from '@/components/formidable/FormidableConfig';
+
 import { Formidable } from '../formidable';
 
 export default {

front/src/components/formidable/Fromidable.tsx

@@ -1,6 +1,8 @@
-export {type FormidableConfig as config,
+export {
-useFormidable
+  type FormidableConfig as config,
+  useFormidable,
 } from './FormidableConfig';
-export {FormidableForm as From,
+export {
-    type FormidableFormProps as FormProps
+  FormidableForm as From,
+  type FormidableFormProps as FormProps,
 } from './FormidableForm';

front/src/components/formidable/index.ts

@@ -1,11 +1,7 @@
 export * as Formidable from './Fromidable';
 export {
   useFormidableContext,
-    useFormidableContextElement
+  useFormidableContextElement,
-} from './FormidableContext'
+} from './FormidableContext';
-export {
+export { useFormidable } from './FormidableConfig';
-    useFormidable
+export { zodResolver } from './utils';
-} from './FormidableConfig';
-export {
-    zodResolver
-} from './utils';

front/src/components/popup/ConfirmPopUp.tsx

@@ -1,11 +1,15 @@
 import { useRef } from 'react';
 
-import {
+import { Button, UseDisclosureReturn } from '@chakra-ui/react';
-  Button,
+
-  UseDisclosureReturn,
+import {
-} from '@chakra-ui/react';
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 export type ConfirmPopUpProps = {
   title: string;
   body: string;
@@ -27,7 +31,8 @@ export const ConfirmPopUp = ({
   };
   const cancelRef = useRef<HTMLButtonElement>(null);
   return (
-    <DialogRoot role="alertdialog"
+    <DialogRoot
+      role="alertdialog"
       open={disclosure.open}
       //leastDestructiveRef={cancelRef}
       onOpenChange={disclosure.onClose}

front/src/components/popup/PopUpUploadProgress.tsx

@@ -1,14 +1,14 @@
 import { useRef } from 'react';
 
+import { Button, Flex, Progress, Text } from '@chakra-ui/react';
+
 import {
-  Flex,
+  DialogBody,
-  Progress,
+  DialogContent,
-  Text,
+  DialogFooter,
-  Button,
+  DialogHeader,
-} from '@chakra-ui/react';
+  DialogRoot,
-
+} from '@/components/ui/dialog';
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
-
 
 export type PopUpUploadProgressProps = {
   title: string;

front/src/components/select/SelectMultiple.tsx

@@ -109,7 +109,13 @@ export const SelectMultiple = ({
   return (
     <Flex direction="column" width="full" gap="0px">
       {selectedOptions && (
-        <HStack wrap="wrap" gap="5px" justify="left" width="full" marginBottom="2px">
+        <HStack
+          wrap="wrap"
+          gap="5px"
+          justify="left"
+          width="full"
+          marginBottom="2px"
+        >
           {selectedOptions.map((data) => (
             <Flex align="flex-start" key={data[keyKey]}>
               <Tag.Root
@@ -119,7 +125,10 @@ export const SelectMultiple = ({
                 backgroundColor="green.800"
               >
                 <Tag.Label>{data[keyValue] ?? `id=${data[keyKey]}`}</Tag.Label>
-                <Tag.CloseTrigger boxSize="5" onClick={() => selectValue(data)} />
+                <Tag.CloseTrigger
+                  boxSize="5"
+                  onClick={() => selectValue(data)}
+                />
               </Tag.Root>
             </Flex>
           ))}
@@ -134,7 +143,13 @@ export const SelectMultiple = ({
           //onSubmit={onSubmit}
           onFocus={() => setShowList(true)}
           onBlur={() => setTimeout(() => setShowList(false), 200)}
-          value={showList ? (currentSearch ?? '') : hasSuggestion ? `suggest: ${currentSearch}` : ''}
+          value={
+            showList
+              ? (currentSearch ?? '')
+              : hasSuggestion
+                ? `suggest: ${currentSearch}`
+                : ''
+          }
           borderRadius="5px 0 0 5px"
         />
         <Button

front/src/components/select/SelectSingle.tsx

@@ -50,7 +50,9 @@ export const SelectSingle = ({
     onCreate ? suggestion : undefined
   );
   useEffect(() => {
-    console.log(`Update suggestion : ${onCreate} ${suggestion} ==> ${onCreate ? suggestion : undefined} .. ${onCreate && !isNullOrUndefined(suggestion) ? true : false}`);
+    console.log(
+      `Update suggestion : ${onCreate} ${suggestion} ==> ${onCreate ? suggestion : undefined} .. ${onCreate && !isNullOrUndefined(suggestion) ? true : false}`
+    );
     setCurrentSearch(onCreate ? suggestion : undefined);
     setHasSuggestion(onCreate && !isNullOrUndefined(suggestion) ? true : false);
   }, [suggestion]);
@@ -110,7 +112,10 @@ export const SelectSingle = ({
           onFocus={() => setShowList(true)}
           onBlur={() => setTimeout(() => setShowList(false), 200)}
           value={
-            showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : ''))
+            showList
+              ? (currentSearch ?? '')
+              : (selectedOptions?.name ??
+                (hasSuggestion ? `suggest: ${currentSearch}` : ''))
           }
           backgroundColor={
             showList || !selectedOptions ? undefined : 'green.800'

front/src/components/ui/avatar.tsx

@@ -1,24 +1,25 @@
-"use client"
+'use client';
 
-import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
+import * as React from 'react';
-import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
-import * as React from "react"
 
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+import type { GroupProps, SlotRecipeProps } from '@chakra-ui/react';
+import { Avatar as ChakraAvatar, Group } from '@chakra-ui/react';
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 
 export interface AvatarProps extends ChakraAvatar.RootProps {
-  name?: string
+  name?: string;
-  src?: string
+  src?: string;
-  srcSet?: string
+  srcSet?: string;
-  loading?: ImageProps["loading"]
+  loading?: ImageProps['loading'];
-  icon?: React.ReactElement
+  icon?: React.ReactElement;
-  fallback?: React.ReactNode
+  fallback?: React.ReactNode;
 }
 
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   function Avatar(props, ref) {
     const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
-      props
+      props;
     return (
       <ChakraAvatar.Root ref={ref} {...rest}>
         <AvatarFallback name={name} icon={icon}>
@@ -27,18 +28,18 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
         {children}
       </ChakraAvatar.Root>
-    )
+    );
-  },
+  }
-)
+);
 
 interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
-  name?: string
+  name?: string;
-  icon?: React.ReactElement
+  icon?: React.ReactElement;
 }
 
 const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
   function AvatarFallback(props, ref) {
-    const { name, icon, children, ...rest } = props
+    const { name, icon, children, ...rest } = props;
     return (
       <ChakraAvatar.Fallback ref={ref} {...rest}>
         {children}
@@ -47,28 +48,28 @@ const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
           <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
         )}
       </ChakraAvatar.Fallback>
-    )
+    );
-  },
+  }
-)
+);
 
 function getInitials(name: string) {
-  const names = name.trim().split(" ")
+  const names = name.trim().split(' ');
-  const firstName = names[0] != null ? names[0] : ""
+  const firstName = names[0] != null ? names[0] : '';
-  const lastName = names.length > 1 ? names[names.length - 1] : ""
+  const lastName = names.length > 1 ? names[names.length - 1] : '';
   return firstName && lastName
     ? `${firstName.charAt(0)}${lastName.charAt(0)}`
-    : firstName.charAt(0)
+    : firstName.charAt(0);
 }
 
-interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<'avatar'> {}
 
 export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
   function AvatarGroup(props, ref) {
-    const { size, variant, borderless, ...rest } = props
+    const { size, variant, borderless, ...rest } = props;
     return (
       <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
         <Group gap="0" spaceX="-3" ref={ref} {...rest} />
       </ChakraAvatar.PropsProvider>
-    )
+    );
-  },
+  }
-)
+);

front/src/components/ui/button.tsx

@@ -1,22 +1,23 @@
-import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
+import * as React from 'react';
+
+import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import {
   AbsoluteCenter,
   Button as ChakraButton,
   Span,
   Spinner,
-} from "@chakra-ui/react"
+} from '@chakra-ui/react';
-import * as React from "react"
 
 interface ButtonLoadingProps {
-  loading?: boolean
+  loading?: boolean;
-  loadingText?: React.ReactNode
+  loadingText?: React.ReactNode;
 }
 
 export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
-    const { loading, disabled, loadingText, children, ...rest } = props
+    const { loading, disabled, loadingText, children, ...rest } = props;
     return (
       <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
         {loading && !loadingText ? (
@@ -35,6 +36,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           children
         )}
       </ChakraButton>
-    )
+    );
-  },
+  }
-)
+);

front/src/components/ui/checkbox.tsx

@@ -1,15 +1,16 @@
-import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
+
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
 
 export interface CheckboxProps extends ChakraCheckbox.RootProps {
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  rootRef?: React.Ref<HTMLLabelElement>
+  rootRef?: React.Ref<HTMLLabelElement>;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   function Checkbox(props, ref) {
-    const { icon, children, inputProps, rootRef, ...rest } = props
+    const { icon, children, inputProps, rootRef, ...rest } = props;
     return (
       <ChakraCheckbox.Root ref={rootRef} {...rest}>
         <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
@@ -20,6 +21,6 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
         )}
       </ChakraCheckbox.Root>
-    )
+    );
-  },
+  }
-)
+);

front/src/components/ui/close-button.tsx

@@ -1,9 +1,10 @@
-import type { ButtonProps } from "@chakra-ui/react"
+import * as React from 'react';
-import { IconButton as ChakraIconButton } from "@chakra-ui/react"
-import * as React from "react"
-import { LuX } from "react-icons/lu"
 
-export type CloseButtonProps = ButtonProps
+import type { ButtonProps } from '@chakra-ui/react';
+import { IconButton as ChakraIconButton } from '@chakra-ui/react';
+import { LuX } from 'react-icons/lu';
+
+export type CloseButtonProps = ButtonProps;
 
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,
@@ -13,5 +14,5 @@ export const CloseButton = React.forwardRef<
     <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
       {props.children ?? <LuX />}
     </ChakraIconButton>
-  )
+  );
-})
+});

front/src/components/ui/color-mode.tsx

@@ -1,57 +1,58 @@
-"use client"
+'use client';
 
-import type { IconButtonProps } from "@chakra-ui/react"
+import * as React from 'react';
-import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
+
-import { ThemeProvider, useTheme } from "next-themes"
+import type { IconButtonProps } from '@chakra-ui/react';
-import type { ThemeProviderProps } from "next-themes"
+import { ClientOnly, IconButton, Skeleton } from '@chakra-ui/react';
-import * as React from "react"
+import { ThemeProvider, useTheme } from 'next-themes';
-import { LuMoon, LuSun } from "react-icons/lu"
+import type { ThemeProviderProps } from 'next-themes';
+import { LuMoon, LuSun } from 'react-icons/lu';
 
 export interface ColorModeProviderProps extends ThemeProviderProps {}
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
   return (
     <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  )
+  );
 }
 
-export type ColorMode = "light" | "dark"
+export type ColorMode = 'light' | 'dark';
 
 export interface UseColorModeReturn {
-  colorMode: ColorMode
+  colorMode: ColorMode;
-  setColorMode: (colorMode: ColorMode) => void
+  setColorMode: (colorMode: ColorMode) => void;
-  toggleColorMode: () => void
+  toggleColorMode: () => void;
 }
 
 export function useColorMode(): UseColorModeReturn {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme();
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light")
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
-  }
+  };
   return {
     colorMode: resolvedTheme as ColorMode,
     setColorMode: setTheme,
     toggleColorMode,
-  }
+  };
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {
-  const { colorMode } = useColorMode()
+  const { colorMode } = useColorMode();
-  return colorMode === "dark" ? dark : light
+  return colorMode === 'dark' ? dark : light;
 }
 
 export function ColorModeIcon() {
-  const { colorMode } = useColorMode()
+  const { colorMode } = useColorMode();
-  return colorMode === "dark" ? <LuMoon /> : <LuSun />
+  return colorMode === 'dark' ? <LuMoon /> : <LuSun />;
 }
 
-interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {}
 
 export const ColorModeButton = React.forwardRef<
   HTMLButtonElement,
   ColorModeButtonProps
 >(function ColorModeButton(props, ref) {
-  const { toggleColorMode } = useColorMode()
+  const { toggleColorMode } = useColorMode();
   return (
     <ClientOnly fallback={<Skeleton boxSize="8" />}>
       <IconButton
@@ -63,13 +64,13 @@ export const ColorModeButton = React.forwardRef<
         {...props}
         css={{
           _icon: {
-            width: "5",
+            width: '5',
-            height: "5",
+            height: '5',
           },
         }}
       >
         <ColorModeIcon />
       </IconButton>
     </ClientOnly>
-  )
+  );
-})
+});

front/src/components/ui/dialog.tsx

@@ -1,11 +1,13 @@
-import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
+import * as React from 'react';
-import { CloseButton } from "./close-button"
+
-import * as React from "react"
+import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
 
 interface DialogContentProps extends ChakraDialog.ContentProps {
-  portalled?: boolean
+  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>
+  portalRef?: React.RefObject<HTMLElement>;
-  backdrop?: boolean
+  backdrop?: boolean;
 }
 
 export const DialogContent = React.forwardRef<
@@ -18,7 +20,7 @@ export const DialogContent = React.forwardRef<
     portalRef,
     backdrop = true,
     ...rest
-  } = props
+  } = props;
 
   return (
     <Portal disabled={!portalled} container={portalRef}>
@@ -29,8 +31,8 @@ export const DialogContent = React.forwardRef<
         </ChakraDialog.Content>
       </ChakraDialog.Positioner>
     </Portal>
-  )
+  );
-})
+});
 
 export const DialogCloseTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -48,15 +50,15 @@ export const DialogCloseTrigger = React.forwardRef<
         {props.children}
       </CloseButton>
     </ChakraDialog.CloseTrigger>
-  )
+  );
-})
+});
 
-export const DialogRoot = ChakraDialog.Root
+export const DialogRoot = ChakraDialog.Root;
-export const DialogFooter = ChakraDialog.Footer
+export const DialogFooter = ChakraDialog.Footer;
-export const DialogHeader = ChakraDialog.Header
+export const DialogHeader = ChakraDialog.Header;
-export const DialogBody = ChakraDialog.Body
+export const DialogBody = ChakraDialog.Body;
-export const DialogBackdrop = ChakraDialog.Backdrop
+export const DialogBackdrop = ChakraDialog.Backdrop;
-export const DialogTitle = ChakraDialog.Title
+export const DialogTitle = ChakraDialog.Title;
-export const DialogDescription = ChakraDialog.Description
+export const DialogDescription = ChakraDialog.Description;
-export const DialogTrigger = ChakraDialog.Trigger
+export const DialogTrigger = ChakraDialog.Trigger;
-export const DialogActionTrigger = ChakraDialog.ActionTrigger
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;

front/src/components/ui/drawer.tsx

@@ -1,18 +1,20 @@
-import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
+import * as React from 'react';
-import { CloseButton } from "./close-button"
+
-import * as React from "react"
+import { Drawer as ChakraDrawer, Portal } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
 
 interface DrawerContentProps extends ChakraDrawer.ContentProps {
-  portalled?: boolean
+  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>
+  portalRef?: React.RefObject<HTMLElement>;
-  offset?: ChakraDrawer.ContentProps["padding"]
+  offset?: ChakraDrawer.ContentProps['padding'];
 }
 
 export const DrawerContent = React.forwardRef<
   HTMLDivElement,
   DrawerContentProps
 >(function DrawerContent(props, ref) {
-  const { children, portalled = true, portalRef, offset, ...rest } = props
+  const { children, portalled = true, portalRef, offset, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraDrawer.Positioner padding={offset}>
@@ -21,8 +23,8 @@ export const DrawerContent = React.forwardRef<
         </ChakraDrawer.Content>
       </ChakraDrawer.Positioner>
     </Portal>
-  )
+  );
-})
+});
 
 export const DrawerCloseTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -38,15 +40,15 @@ export const DrawerCloseTrigger = React.forwardRef<
     >
       <CloseButton size="sm" ref={ref} />
     </ChakraDrawer.CloseTrigger>
-  )
+  );
-})
+});
 
-export const DrawerTrigger = ChakraDrawer.Trigger
+export const DrawerTrigger = ChakraDrawer.Trigger;
-export const DrawerRoot = ChakraDrawer.Root
+export const DrawerRoot = ChakraDrawer.Root;
-export const DrawerFooter = ChakraDrawer.Footer
+export const DrawerFooter = ChakraDrawer.Footer;
-export const DrawerHeader = ChakraDrawer.Header
+export const DrawerHeader = ChakraDrawer.Header;
-export const DrawerBody = ChakraDrawer.Body
+export const DrawerBody = ChakraDrawer.Body;
-export const DrawerBackdrop = ChakraDrawer.Backdrop
+export const DrawerBackdrop = ChakraDrawer.Backdrop;
-export const DrawerDescription = ChakraDrawer.Description
+export const DrawerDescription = ChakraDrawer.Description;
-export const DrawerTitle = ChakraDrawer.Title
+export const DrawerTitle = ChakraDrawer.Title;
-export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger;

front/src/components/ui/field.tsx

@@ -1,17 +1,18 @@
-import { Field as ChakraField } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
 
-export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
+import { Field as ChakraField } from '@chakra-ui/react';
-  label?: React.ReactNode
+
-  helperText?: React.ReactNode
+export interface FieldProps extends Omit<ChakraField.RootProps, 'label'> {
-  errorText?: React.ReactNode
+  label?: React.ReactNode;
-  optionalText?: React.ReactNode
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  optionalText?: React.ReactNode;
 }
 
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
   function Field(props, ref) {
     const { label, children, helperText, errorText, optionalText, ...rest } =
-      props
+      props;
     return (
       <ChakraField.Root ref={ref} {...rest}>
         {label && (
@@ -28,6 +29,6 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
         )}
       </ChakraField.Root>
-    )
+    );
-  },
+  }
-)
+);

front/src/components/ui/input-group.tsx

@@ -1,15 +1,16 @@
-import type { BoxProps, InputElementProps } from "@chakra-ui/react"
+import * as React from 'react';
-import { Group, InputElement } from "@chakra-ui/react"
+
-import * as React from "react"
+import type { BoxProps, InputElementProps } from '@chakra-ui/react';
+import { Group, InputElement } from '@chakra-ui/react';
 
 export interface InputGroupProps extends BoxProps {
-  startElementProps?: InputElementProps
+  startElementProps?: InputElementProps;
-  endElementProps?: InputElementProps
+  endElementProps?: InputElementProps;
-  startElement?: React.ReactNode
+  startElement?: React.ReactNode;
-  endElement?: React.ReactNode
+  endElement?: React.ReactNode;
-  children: React.ReactElement<InputElementProps>
+  children: React.ReactElement<InputElementProps>;
-  startOffset?: InputElementProps["paddingStart"]
+  startOffset?: InputElementProps['paddingStart'];
-  endOffset?: InputElementProps["paddingEnd"]
+  endOffset?: InputElementProps['paddingEnd'];
 }
 
 export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
@@ -20,13 +21,13 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       endElement,
       endElementProps,
       children,
-      startOffset = "6px",
+      startOffset = '6px',
-      endOffset = "6px",
+      endOffset = '6px',
       ...rest
-    } = props
+    } = props;
 
     const child =
-      React.Children.only<React.ReactElement<InputElementProps>>(children)
+      React.Children.only<React.ReactElement<InputElementProps>>(children);
 
     return (
       <Group ref={ref} {...rest}>
@@ -48,6 +49,6 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
           </InputElement>
         )}
       </Group>
-    )
+    );
-  },
+  }
-)
+);

front/src/components/ui/menu.tsx

@@ -1,26 +1,27 @@
-"use client"
+'use client';
 
-import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
+
-import { LuCheck, LuChevronRight } from "react-icons/lu"
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from '@chakra-ui/react';
+import { LuCheck, LuChevronRight } from 'react-icons/lu';
 
 interface MenuContentProps extends ChakraMenu.ContentProps {
-  portalled?: boolean
+  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>
+  portalRef?: React.RefObject<HTMLElement>;
 }
 
 export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
   function MenuContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props
+    const { portalled = true, portalRef, ...rest } = props;
     return (
       <Portal disabled={!portalled} container={portalRef}>
         <ChakraMenu.Positioner>
           <ChakraMenu.Content ref={ref} {...rest} />
         </ChakraMenu.Positioner>
       </Portal>
-    )
+    );
-  },
+  }
-)
+);
 
 export const MenuArrow = React.forwardRef<
   HTMLDivElement,
@@ -30,8 +31,8 @@ export const MenuArrow = React.forwardRef<
     <ChakraMenu.Arrow ref={ref} {...props}>
       <ChakraMenu.ArrowTip />
     </ChakraMenu.Arrow>
-  )
+  );
-})
+});
 
 export const MenuCheckboxItem = React.forwardRef<
   HTMLDivElement,
@@ -44,14 +45,14 @@ export const MenuCheckboxItem = React.forwardRef<
       </ChakraMenu.ItemIndicator>
       {props.children}
     </ChakraMenu.CheckboxItem>
-  )
+  );
-})
+});
 
 export const MenuRadioItem = React.forwardRef<
   HTMLDivElement,
   ChakraMenu.RadioItemProps
 >(function MenuRadioItem(props, ref) {
-  const { children, ...rest } = props
+  const { children, ...rest } = props;
   return (
     <ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
       <AbsoluteCenter axis="horizontal" left="4" asChild>
@@ -61,14 +62,14 @@ export const MenuRadioItem = React.forwardRef<
       </AbsoluteCenter>
       <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
     </ChakraMenu.RadioItem>
-  )
+  );
-})
+});
 
 export const MenuItemGroup = React.forwardRef<
   HTMLDivElement,
   ChakraMenu.ItemGroupProps
 >(function MenuItemGroup(props, ref) {
-  const { title, children, ...rest } = props
+  const { title, children, ...rest } = props;
   return (
     <ChakraMenu.ItemGroup ref={ref} {...rest}>
       {title && (
@@ -78,33 +79,33 @@ export const MenuItemGroup = React.forwardRef<
       )}
       {children}
     </ChakraMenu.ItemGroup>
-  )
+  );
-})
+});
 
 export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
-  startIcon?: React.ReactNode
+  startIcon?: React.ReactNode;
 }
 
 export const MenuTriggerItem = React.forwardRef<
   HTMLDivElement,
   MenuTriggerItemProps
 >(function MenuTriggerItem(props, ref) {
-  const { startIcon, children, ...rest } = props
+  const { startIcon, children, ...rest } = props;
   return (
     <ChakraMenu.TriggerItem ref={ref} {...rest}>
       {startIcon}
       {children}
       <LuChevronRight />
     </ChakraMenu.TriggerItem>
-  )
+  );
-})
+});
 
-export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
-export const MenuContextTrigger = ChakraMenu.ContextTrigger
+export const MenuContextTrigger = ChakraMenu.ContextTrigger;
-export const MenuRoot = ChakraMenu.Root
+export const MenuRoot = ChakraMenu.Root;
-export const MenuSeparator = ChakraMenu.Separator
+export const MenuSeparator = ChakraMenu.Separator;
 
-export const MenuItem = ChakraMenu.Item
+export const MenuItem = ChakraMenu.Item;
-export const MenuItemText = ChakraMenu.ItemText
+export const MenuItemText = ChakraMenu.ItemText;
-export const MenuItemCommand = ChakraMenu.ItemCommand
+export const MenuItemCommand = ChakraMenu.ItemCommand;
-export const MenuTrigger = ChakraMenu.Trigger
+export const MenuTrigger = ChakraMenu.Trigger;

front/src/components/ui/number-input.tsx

@@ -1,5 +1,6 @@
-import { NumberInput as ChakraNumberInput } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
+
+import { NumberInput as ChakraNumberInput } from '@chakra-ui/react';
 
 export interface NumberInputProps extends ChakraNumberInput.RootProps {}
 
@@ -7,7 +8,7 @@ export const NumberInputRoot = React.forwardRef<
   HTMLDivElement,
   NumberInputProps
 >(function NumberInput(props, ref) {
-  const { children, ...rest } = props
+  const { children, ...rest } = props;
   return (
     <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
       {children}
@@ -16,9 +17,9 @@ export const NumberInputRoot = React.forwardRef<
         <ChakraNumberInput.DecrementTrigger />
       </ChakraNumberInput.Control>
     </ChakraNumberInput.Root>
-  )
+  );
-})
+});
 
-export const NumberInputField = ChakraNumberInput.Input
+export const NumberInputField = ChakraNumberInput.Input;
-export const NumberInputScrubber = ChakraNumberInput.Scrubber
+export const NumberInputScrubber = ChakraNumberInput.Scrubber;
-export const NumberInputLabel = ChakraNumberInput.Label
+export const NumberInputLabel = ChakraNumberInput.Label;

front/src/components/ui/popover.tsx

@@ -1,25 +1,27 @@
-import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
+import * as React from 'react';
-import { CloseButton } from "./close-button"
+
-import * as React from "react"
+import { Popover as ChakraPopover, Portal } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
 
 interface PopoverContentProps extends ChakraPopover.ContentProps {
-  portalled?: boolean
+  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>
+  portalRef?: React.RefObject<HTMLElement>;
 }
 
 export const PopoverContent = React.forwardRef<
   HTMLDivElement,
   PopoverContentProps
 >(function PopoverContent(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props
+  const { portalled = true, portalRef, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraPopover.Positioner>
         <ChakraPopover.Content ref={ref} {...rest} />
       </ChakraPopover.Positioner>
     </Portal>
-  )
+  );
-})
+});
 
 export const PopoverArrow = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +31,8 @@ export const PopoverArrow = React.forwardRef<
     <ChakraPopover.Arrow {...props} ref={ref}>
       <ChakraPopover.ArrowTip />
     </ChakraPopover.Arrow>
-  )
+  );
-})
+});
 
 export const PopoverCloseTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -47,13 +49,13 @@ export const PopoverCloseTrigger = React.forwardRef<
     >
       <CloseButton size="sm" />
     </ChakraPopover.CloseTrigger>
-  )
+  );
-})
+});
 
-export const PopoverTitle = ChakraPopover.Title
+export const PopoverTitle = ChakraPopover.Title;
-export const PopoverDescription = ChakraPopover.Description
+export const PopoverDescription = ChakraPopover.Description;
-export const PopoverFooter = ChakraPopover.Footer
+export const PopoverFooter = ChakraPopover.Footer;
-export const PopoverHeader = ChakraPopover.Header
+export const PopoverHeader = ChakraPopover.Header;
-export const PopoverRoot = ChakraPopover.Root
+export const PopoverRoot = ChakraPopover.Root;
-export const PopoverBody = ChakraPopover.Body
+export const PopoverBody = ChakraPopover.Body;
-export const PopoverTrigger = ChakraPopover.Trigger
+export const PopoverTrigger = ChakraPopover.Trigger;

front/src/components/ui/provider.tsx

@@ -1,15 +1,13 @@
-"use client"
+'use client';
 
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
-import {
+
-  ColorModeProvider,
+import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
-  type ColorModeProviderProps,
-} from "./color-mode"
 
 export function Provider(props: ColorModeProviderProps) {
   return (
     <ChakraProvider value={defaultSystem}>
       <ColorModeProvider {...props} />
     </ChakraProvider>
-  )
+  );
 }

front/src/components/ui/radio.tsx

@@ -1,14 +1,15 @@
-import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
+
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react';
 
 export interface RadioProps extends ChakraRadioGroup.ItemProps {
-  rootRef?: React.Ref<HTMLDivElement>
+  rootRef?: React.Ref<HTMLDivElement>;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, ...rest } = props
+    const { children, inputProps, rootRef, ...rest } = props;
     return (
       <ChakraRadioGroup.Item ref={rootRef} {...rest}>
         <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
@@ -17,8 +18,8 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
           <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
         )}
       </ChakraRadioGroup.Item>
-    )
+    );
-  },
+  }
-)
+);
 
-export const RadioGroup = ChakraRadioGroup.Root
+export const RadioGroup = ChakraRadioGroup.Root;

front/src/components/ui/slider.tsx

@@ -1,23 +1,24 @@
-import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
+
+import { Slider as ChakraSlider, For, HStack } from '@chakra-ui/react';
 
 export interface SliderProps extends ChakraSlider.RootProps {
-  marks?: Array<number | { value: number; label: React.ReactNode }>
+  marks?: Array<number | { value: number; label: React.ReactNode }>;
-  label?: React.ReactNode
+  label?: React.ReactNode;
-  showValue?: boolean
+  showValue?: boolean;
 }
 
 export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
   function Slider(props, ref) {
-    const { marks: marksProp, label, showValue, ...rest } = props
+    const { marks: marksProp, label, showValue, ...rest } = props;
-    const value = props.defaultValue ?? props.value
+    const value = props.defaultValue ?? props.value;
 
     const marks = marksProp?.map((mark) => {
-      if (typeof mark === "number") return { value: mark, label: undefined }
+      if (typeof mark === 'number') return { value: mark, label: undefined };
-      return mark
+      return mark;
-    })
+    });
 
-    const hasMarkLabel = !!marks?.some((mark) => mark.label)
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
 
     return (
       <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
@@ -38,12 +39,12 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
           <SliderMarks marks={marks} />
         </ChakraSlider.Control>
       </ChakraSlider.Root>
-    )
+    );
-  },
+  }
-)
+);
 
 function SliderThumbs(props: { value?: number[] }) {
-  const { value } = props
+  const { value } = props;
   return (
     <For each={value}>
       {(_, index) => (
@@ -52,31 +53,31 @@ function SliderThumbs(props: { value?: number[] }) {
         </ChakraSlider.Thumb>
       )}
     </For>
-  )
+  );
 }
 
 interface SliderMarksProps {
-  marks?: Array<number | { value: number; label: React.ReactNode }>
+  marks?: Array<number | { value: number; label: React.ReactNode }>;
 }
 
 const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
   function SliderMarks(props, ref) {
-    const { marks } = props
+    const { marks } = props;
-    if (!marks?.length) return null
+    if (!marks?.length) return null;
 
     return (
       <ChakraSlider.MarkerGroup ref={ref}>
         {marks.map((mark, index) => {
-          const value = typeof mark === "number" ? mark : mark.value
+          const value = typeof mark === 'number' ? mark : mark.value;
-          const label = typeof mark === "number" ? undefined : mark.label
+          const label = typeof mark === 'number' ? undefined : mark.label;
           return (
             <ChakraSlider.Marker key={index} value={value}>
               <ChakraSlider.MarkerIndicator />
               {label}
             </ChakraSlider.Marker>
-          )
+          );
         })}
       </ChakraSlider.MarkerGroup>
-    )
+    );
-  },
+  }
-)
+);

front/src/components/ui/toaster.tsx

@@ -1,6 +1,5 @@
-"use client"
+'use client';
 
-import { RestErrorResponse } from "@/back-api";
 import {
   Toaster as ChakraToaster,
   Portal,
@@ -8,12 +7,14 @@ import {
   Stack,
   Toast,
   createToaster,
-} from "@chakra-ui/react"
+} from '@chakra-ui/react';
+
+import { RestErrorResponse } from '@/back-api';
 
 export const toaster = createToaster({
-  placement: "bottom-end",
+  placement: 'bottom-end',
   pauseOnPageIdle: true,
-})
+});
 
 export const toasterAPIError = (error: RestErrorResponse) => {
   toaster.create({
@@ -25,10 +26,10 @@ export const toasterAPIError = (error: RestErrorResponse) => {
 export const Toaster = () => {
   return (
     <Portal>
-      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
         {(toast) => (
-          <Toast.Root width={{ md: "sm" }}>
+          <Toast.Root width={{ md: 'sm' }}>
-            {toast.type === "loading" ? (
+            {toast.type === 'loading' ? (
               <Spinner size="sm" color="blue.solid" />
             ) : (
               <Toast.Indicator />
@@ -47,5 +48,5 @@ export const Toaster = () => {
         )}
       </ChakraToaster>
     </Portal>
-  )
+  );
-}
+};

front/src/components/ui/tooltip.tsx

@@ -1,13 +1,14 @@
-import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from 'react';
-import * as React from "react"
+
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react';
 
 export interface TooltipProps extends ChakraTooltip.RootProps {
-  showArrow?: boolean
+  showArrow?: boolean;
-  portalled?: boolean
+  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>
+  portalRef?: React.RefObject<HTMLElement>;
-  content: React.ReactNode
+  content: React.ReactNode;
-  contentProps?: ChakraTooltip.ContentProps
+  contentProps?: ChakraTooltip.ContentProps;
-  disabled?: boolean
+  disabled?: boolean;
 }
 
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
@@ -21,9 +22,9 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       contentProps,
       portalRef,
       ...rest
-    } = props
+    } = props;
 
-    if (disabled) return children
+    if (disabled) return children;
 
     return (
       <ChakraTooltip.Root {...rest}>
@@ -41,6 +42,6 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
           </ChakraTooltip.Positioner>
         </Portal>
       </ChakraTooltip.Root>
-    )
+    );
-  },
+  }
-)
+);

front/src/config/dayjs.ts

@@ -1,28 +0,0 @@
-import dayjs from 'dayjs';
-import 'dayjs/locale/fr';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import dayOfYear from 'dayjs/plugin/dayOfYear';
-import duration from 'dayjs/plugin/duration';
-import isBetween from 'dayjs/plugin/isBetween';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isToday from 'dayjs/plugin/isToday';
-import isTomorrow from 'dayjs/plugin/isTomorrow';
-import isYesterday from 'dayjs/plugin/isYesterday';
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import weekOfYear from 'dayjs/plugin/weekOfYear';
-
-dayjs.locale('fr');
-dayjs.extend(relativeTime);
-dayjs.extend(customParseFormat);
-dayjs.extend(weekOfYear);
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isToday);
-dayjs.extend(isTomorrow);
-dayjs.extend(isYesterday);
-dayjs.extend(dayOfYear);
-dayjs.extend(isBetween);
-dayjs.extend(advancedFormat);
-dayjs.extend(quarterOfYear);
-dayjs.extend(duration);

front/src/config/index.ts

@@ -1,2 +0,0 @@
-import './axios';
-import './dayjs';

front/src/constants/date.ts

@@ -1,2 +0,0 @@
-export const DATE_FORMAT = 'YYYY-MM-DD';
-export const DATE_FORMAT_FULL = 'dddd DD MMMM HH:mm';

front/src/constants/genericSpacing.ts

@@ -1,4 +0,0 @@
-export const BASE_WRAP_SPACING = { base: "5px", md: "10px", lg: "20px" };
-export const BASE_WRAP_WIDTH = { base: "90%", md: "45%", lg: "270px" };
-export const BASE_WRAP_HEIGHT = { base: "75px", lg: "120px" };
-export const BASE_WRAP_ICON_SIZE = { base: "50px", lg: "100px" };

front/src/constants/index.ts

@@ -1 +0,0 @@
-export * from './date'

front/src/environment.ts

@@ -42,8 +42,9 @@ export const isDevelopmentEnvironment = () => {
   return import.meta.env.MODE === 'development';
 };
 
-export const environment = isDevelopmentEnvironment() ? environment_local : environment_back_prod;
+export const environment = isDevelopmentEnvironment()
-
+  ? environment_local
+  : environment_back_prod;
 
 /**
  * get the current REST api URL. Depend on the VITE_API_BASE_URL env variable.

front/src/errors/Error401.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
+import { Box, Center, Heading, Link, Text } from '@chakra-ui/react';
 import { MdControlCamera } from 'react-icons/md';
 
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
@@ -10,15 +10,17 @@ export const Error401 = () => {
       <TopBar />
       <PageLayoutInfoCenter padding="25px">
         <Center>
-          <MdControlCamera style={{ width: "250px", height: "250px", color: "orange" }} />
+          <MdControlCamera
+            style={{ width: '250px', height: '250px', color: 'orange' }}
+          />
         </Center>
         <Box textAlign="center">
-          <Heading>Erreur 401</Heading>
+          <Heading>Error 401</Heading>
           <Text color="red.600">
-            Vous n'êtes pas autorisé a accéder a ce contenu.
+            You are not authorized to access this content.
           </Text>
           <Link as="a" href="/">
-            Retour à l'accueil
+            Back to Homepage
           </Link>
         </Box>
       </PageLayoutInfoCenter>

front/src/errors/Error403.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
+import { Box, Center, Heading, Link, Text } from '@chakra-ui/react';
 import { MdDangerous } from 'react-icons/md';
 
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
@@ -10,14 +10,14 @@ export const Error403 = () => {
       <TopBar />
       <PageLayoutInfoCenter padding="25px">
         <Center>
-          <MdDangerous style={{ width: "250px", height: "250px", color: "red" }} />
+          <MdDangerous
+            style={{ width: '250px', height: '250px', color: 'red' }}
+          />
         </Center>
         <Box textAlign="center">
-          <Heading>Erreur 403</Heading>
+          <Heading>Error 403</Heading>
-          <Text color="orange.600">Cette page vous est interdite</Text>
+          <Text color="orange.600">This page is forbidden to you.</Text>
-          <Link href="/">
+          <Link href="/">Back to Homepage</Link>
-            Retour à l'accueil
-          </Link>
         </Box>
       </PageLayoutInfoCenter>
     </>

front/src/errors/Error404.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
+import { Box, Center, Heading, Link, Text } from '@chakra-ui/react';
 import { MdSignpost } from 'react-icons/md';
 
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
@@ -10,16 +10,16 @@ export const Error404 = () => {
       <TopBar />
       <PageLayoutInfoCenter padding="25px">
         <Center>
-          <MdSignpost style={{ width: "250px", height: "250px", color: "aqua" }} />
+          <MdSignpost
+            style={{ width: '250px', height: '250px', color: 'aqua' }}
+          />
         </Center>
         <Box textAlign="center">
-          <Heading>Erreur 404</Heading>
+          <Heading>Error 404</Heading>
           <Text color="gray.600">
-            Cette page n'existe plus ou l'URL a changé
+            This page no longer exists or the URL has changed.
           </Text>
-          <Link href="/">
+          <Link href="/">Back to Homepage</Link>
-            Retour à l'accueil
-          </Link>
         </Box>
       </PageLayoutInfoCenter>
     </>

front/src/errors/ErrorBoundary.tsx

@@ -1,11 +1,6 @@
-import React, { FC } from 'react';
+import { ReactNode } from 'react';
 
-import {
+import { Alert, AlertDescription, AlertTitle, Box } from '@chakra-ui/react';
-  AlertDescription,
-  AlertTitle,
-  Box,
-  Alert,
-} from '@chakra-ui/react';
 import {
   FallbackProps,
   ErrorBoundary as ReactErrorBoundary,
@@ -17,8 +12,15 @@ const ErrorFallback = ({ error }: FallbackProps) => {
       <Alert.Root status="error" borderRadius="md">
         <Alert.Indicator height="75px" width="75px" />
         <Box flex="1">
-          <AlertTitle fontWeight="bold" fontSize="35px">An unexpected error has occurred.</AlertTitle>
+          <AlertTitle fontWeight="bold" fontSize="35px">
-          <AlertDescription padding="5" marginTop="3" fontSize="20px" lineHeight="1.4">
+            An unexpected error has occurred.
+          </AlertTitle>
+          <AlertDescription
+            padding="5"
+            marginTop="3"
+            fontSize="20px"
+            lineHeight="1.4"
+          >
             <br />
             {error.message}
           </AlertDescription>
@@ -28,6 +30,6 @@ const ErrorFallback = ({ error }: FallbackProps) => {
   );
 };
 
-export const ErrorBoundary: FC<React.PropsWithChildren<unknown>> = (props) => {
+export const ErrorBoundary = ({ children }: { children: ReactNode }) => {
   return <ReactErrorBoundary FallbackComponent={ErrorFallback} {...props} />;
 };

front/src/main.tsx

@@ -1,13 +1,13 @@
 import { StrictMode } from 'react';
 
+import { ChakraProvider } from '@chakra-ui/react';
 import ReactDOM from 'react-dom/client';
 
 import App from '@/App';
-import { ColorModeProvider } from './components/ui/color-mode';
 
-import { ChakraProvider } from '@chakra-ui/react';
+import { ColorModeProvider } from './components/ui/color-mode';
-import { systemTheme } from './theme/theme';
 import { Toaster } from './components/ui/toaster';
+import { systemTheme } from './theme/theme';
 
 // Render the app
 const rootElement = document.getElementById('root');

front/src/scene/AppRoutes.tsx

@@ -9,11 +9,12 @@ import { Error404 } from '@/errors';
 import { HelpPage } from '@/scene/home/HelpPage';
 import { HomePage } from '@/scene/home/HomePage';
 import { useHasRight } from '@/service/session';
-import { SettingsPage } from './home/SettingsPage';
+
+import { ManageAccountPage } from './account/ManageAccountPage';
+import { SignInDonePage } from './connection/SignInDonePage';
 import { SignInPage } from './connection/SignInPage';
 import { SignOutPage } from './connection/SignOutPage';
-import { SignInDonePage } from './connection/SignInDonePage';
+import { SettingsPage } from './home/SettingsPage';
-import { ManageAccountPage } from './account/ManageAccountPage';
 
 export const AppRoutes = () => {
   const { isReadable } = useHasRight('USER');
@@ -28,8 +29,14 @@ export const AppRoutes = () => {
           <>
             <Route path="/" element={<HomePage />} />
             {/* Connection page after SSO */}
-            <Route path="signin/:applicationName/:applicationData/*" element={<SignInDonePage />} />
+            <Route
-            <Route path="signin/:applicationName/*" element={<SignInDonePage />} />
+              path="signin/:applicationName/:applicationData/*"
+              element={<SignInDonePage />}
+            />
+            <Route
+              path="signin/:applicationName/*"
+              element={<SignInDonePage />}
+            />
             <Route path="signout/*" element={<SignOutPage />} />
             <Route path="manage-account/*" element={<ManageAccountPage />} />
             <Route path="help" element={<HelpPage />} />

front/src/scene/connection/SignOutPage.tsx

@@ -1,6 +1,7 @@
-
 import { useEffect } from 'react';
+
 import { useNavigate } from 'react-router-dom';
+
 import { useSessionService } from '@/service/session';
 
 export const SignOutPage = () => {

front/src/scene/connection/useLogin.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 
+import { UserResource } from '@/back-api';
+import { toaster, toasterAPIError } from '@/components/ui/toaster';
+import { useSessionService } from '@/service/session';
 //import { useSessionContext } from '@/context/SessionContext';
 import { getRestConfig } from '@/utils/http';
 import { sha512 } from '@/utils/sha512';
-import { toaster, toasterAPIError } from '@/components/ui/toaster';
-import { useSessionService } from '@/service/session';
-import { UserResource } from '@/back-api';
 
 export const useLogin = () => {
   const [isConnectionLoading, setIsConnectionLoading] =

front/src/scene/home/HelpPage.tsx

@@ -5,9 +5,7 @@ export const HelpPage = () => {
   return (
     <>
       <TopBar title="Help" />
-      <PageLayout>
+      <PageLayout>No help available right now</PageLayout>
-        No help available right now
-      </PageLayout>
     </>
   );
 };

front/src/scene/home/SettingsPage.tsx

@@ -1,14 +1,11 @@
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
 
-
 export const SettingsPage = () => {
   return (
     <>
       <TopBar title="Help" />
-      <PageLayout>
+      <PageLayout>No settings available right now</PageLayout>
-        No settings available right now
-      </PageLayout>
     </>
   );
 };

front/src/service/ApplicationToken.ts

@@ -1,11 +1,15 @@
-import { ApplicationToken, ApplicationTokenResource, CreateTokenRequestWrite, Integer, Long, RestErrorResponse } from '@/back-api';
+import {
+  ApplicationToken,
+  ApplicationTokenResource,
+  CreateTokenRequestWrite,
+  Integer,
+  Long,
+  RestErrorResponse,
+} from '@/back-api';
 import { useSessionService } from '@/service/session';
 import { useQuery, useQueryCall, useQueryCallProps } from '@/utils/query';
 
-
 export namespace ApplicationTokenService {
-
-
   export const useApplicationTokens = (applicationId: Long) => {
     const { getRestConfig } = useSessionService();
     return useQuery({
@@ -13,7 +17,7 @@ export namespace ApplicationTokenService {
         return ApplicationTokenResource.gets({
           restConfig: getRestConfig(),
           params: {
-            applicationId
+            applicationId,
           },
         });
       },
@@ -22,10 +26,15 @@ export namespace ApplicationTokenService {
 
   export const useApplicationTokenCreate = (
     applicationId: Long,
-    config: { config?: Omit<useQueryCallProps<ApplicationToken, any>, 'queryFunction'> }
+    config: {
+      config?: Omit<useQueryCallProps<ApplicationToken, any>, 'queryFunction'>;
+    }
   ) => {
     const { getRestConfig } = useSessionService();
-    const { call, ...rest } = useQueryCall<ApplicationToken, CreateTokenRequestWrite>({
+    const { call, ...rest } = useQueryCall<
+      ApplicationToken,
+      CreateTokenRequestWrite
+    >({
       queryFunction: (inputData) => {
         return ApplicationTokenResource.create({
           restConfig: getRestConfig(),
@@ -43,15 +52,18 @@ export namespace ApplicationTokenService {
     config: { config?: Omit<useQueryCallProps<void, any>, 'queryFunction'> }
   ) => {
     const { getRestConfig } = useSessionService();
-    const { call, ...rest } = useQueryCall<void, {
+    const { call, ...rest } = useQueryCall<
-      tokenId: Integer,
+      void,
-    }>({
+      {
+        tokenId: Integer;
+      }
+    >({
       queryFunction: (inputData) => {
         return ApplicationTokenResource.remove({
           restConfig: getRestConfig(),
           params: {
             applicationId,
-            ...inputData
+            ...inputData,
           },
         });
       },
@@ -59,5 +71,4 @@ export namespace ApplicationTokenService {
     });
     return { removeApplicationToken: call, ...rest };
   };
-
 }

front/src/service/ServiceContext.tsx

@@ -11,8 +11,6 @@ export type ServiceContextType = {
   session: SessionServiceProps;
 };
 
-
-
 export const ServiceContext = createContext<ServiceContextType>({
   session: {
     isConnected: false,

front/src/service/session.ts

@@ -22,7 +22,7 @@ export function getRestConfig(): RESTConfig {
 
 export type SessionServiceProps = {
   token?: string;
-  isConnected: boolean,
+  isConnected: boolean;
   setToken: (token: string) => void;
   clearToken: () => void;
   login?: string;
@@ -59,7 +59,6 @@ export const useSessionServiceWrapped = (): SessionServiceProps => {
         localStorage.setItem(TOKEN_KEY, token);
       }
     }
-
   }, [localStorage, parseToken, token]);
 
   const setTokenLocal = useCallback(
@@ -71,7 +70,7 @@ export const useSessionServiceWrapped = (): SessionServiceProps => {
   );
 
   const clearToken = useCallback(() => {
-    console.log("Clear Token");
+    console.log('Clear Token');
     setToken(undefined);
     updateRight();
   }, [updateRight, setToken]);
@@ -85,7 +84,9 @@ export const useSessionServiceWrapped = (): SessionServiceProps => {
       if (right === undefined) {
         return false;
       }
-      return [PartRight.READ, PartRight.READ_WRITE].includes(right?.[group] ?? 0);
+      return [PartRight.READ, PartRight.READ_WRITE].includes(
+        right?.[group] ?? 0
+      );
     },
     [config]
   );
@@ -99,7 +100,9 @@ export const useSessionServiceWrapped = (): SessionServiceProps => {
       if (right === undefined) {
         return false;
       }
-      return [PartRight.READ, PartRight.READ_WRITE].includes(right?.[group] ?? 0);
+      return [PartRight.READ, PartRight.READ_WRITE].includes(
+        right?.[group] ?? 0
+      );
     },
     [config]
   );

front/src/service/user.service.ts

@@ -3,13 +3,17 @@
  * @copyright 2018, Edouard DUPIN, all right reserved
  * @license PROPRIETARY (see license file)
  */
+import {
+  RESTConfig,
+  UserAuthGet,
+  UserCreateWrite,
+  UserResource,
+} from '@/back-api';
+import { useQuery, useQueryCall, useQueryCallProps } from '@/utils/query';
 
-import { RESTConfig, UserAuthGet, UserCreateWrite, UserResource } from "@/back-api";
+import { useSessionService } from './session';
-import { useQuery, useQueryCall, useQueryCallProps } from "@/utils/query";
-import { useSessionService } from "./session";
 
 export namespace UserService {
-
   // export const useGetData = <RETURN_TYPE>(queryFunction: (config: RESTConfig) => Promise<RETURN_TYPE>) => {
   // 	const { getRestConfig } = useSessionService();
   // 	return useQuery({ queryFunction: () => queryFunction(getRestConfig()) });
@@ -26,12 +30,16 @@ export namespace UserService {
     return useQuery({
       queryFunction: () => {
         return UserResource.gets({
-					restConfig: getRestConfig()
+          restConfig: getRestConfig(),
         });
       },
     });
   };
-	export const useCreate = ({ config }: { config?: Omit<useQueryCallProps<UserAuthGet, any>, 'queryFunction'> }) => {
+  export const useCreate = ({
+    config,
+  }: {
+    config?: Omit<useQueryCallProps<UserAuthGet, any>, 'queryFunction'>;
+  }) => {
     const { getRestConfig } = useSessionService();
     return useQueryCall<UserAuthGet, UserCreateWrite>({
       queryFunction: (data) => {
@@ -40,8 +48,7 @@ export namespace UserService {
           data: { ...data },
         });
       },
-			...config
+      ...config,
     });
   };
 }
-

front/src/theme/colors.ts

@@ -1,7 +1,6 @@
-
 type PandaColorModel = {
   value: string;
-}
+};
 type ThemeModel = {
   50: PandaColorModel;
   100: PandaColorModel;

front/src/theme/theme.ts

@@ -1,5 +1,11 @@
-import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
+import {
-import { colors } from "./colors"
+  SystemConfig,
+  createSystem,
+  defaultConfig,
+  mergeConfigs,
+} from '@chakra-ui/react';
+
+import { colors } from './colors';
 
 const baseTheme: SystemConfig = {
   globalCss: {
@@ -8,25 +14,23 @@ const baseTheme: SystemConfig = {
       bg: { _light: 'back.50', _dark: 'back.700' },
       color: { _light: 'text.900', _dark: 'text.50' },
       fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
-      userSelect: 'none', /* Prevents text selection */
+      userSelect: 'none' /* Prevents text selection */,
     },
     svg: {
-      width: "32px",
+      width: '32px',
-      height: "32px",
+      height: '32px',
-      aspectRatio: "square",
+      aspectRatio: 'square',
-    }
+    },
   },
   theme: {
     slotRecipes: {
       dialog: {
-        slots: [
+        slots: ['header'],
-          "header"
-        ],
         base: {
           header: {
-            fontWeight: "bold",
+            fontWeight: 'bold',
-            fontSize: "2xl",
+            fontSize: '2xl',
-            color: { _dark: "brand.400", _light: "brand.500" }
+            color: { _dark: 'brand.400', _light: 'brand.500' },
           },
         },
       },
@@ -36,21 +40,27 @@ const baseTheme: SystemConfig = {
         base: {
           borderRadius: 0,
           _hover: {
-            boxShadow: { _light: "0 8px 20px #000000e6", _dark: "0 8px 20px #000000e6" }
+            boxShadow: {
+              _light: '0 8px 20px #000000e6',
+              _dark: '0 8px 20px #000000e6',
+            },
+          },
+          transitionDuration: 'slower',
         },
-          transitionDuration: "slower"
-        }
       },
       input: {
         base: {
           borderRadius: 0,
           _hover: {
-            boxShadow: { _light: "0 2px 5px #000000e6", _dark: "0 2px 5px #000000e6" }
+            boxShadow: {
+              _light: '0 2px 5px #000000e6',
+              _dark: '0 2px 5px #000000e6',
+            },
           },
           //borderColor: { _light: "gray.800", _dark: "gray.50" },
-          backgroundColor: { _light: "gray.200", _dark: "gray.700" },
+          backgroundColor: { _light: 'gray.200', _dark: 'gray.700' },
-          transitionDuration: "slower"
+          transitionDuration: 'slower',
-        }
+        },
       },
     },
     tokens: {
@@ -62,23 +72,23 @@ const baseTheme: SystemConfig = {
     },
     semanticTokens: {
       colors: {
-        "@danger": {
+        '@danger': {
-          solid: { value: "{colors.danger.500}" },
+          solid: { value: '{colors.danger.500}' },
-          contrast: { value: "{colors.danger.100}" },
+          contrast: { value: '{colors.danger.100}' },
-          fg: { value: "{colors.danger.900}" },
+          fg: { value: '{colors.danger.900}' },
-          muted: { value: "{colors.danger.100}" },
+          muted: { value: '{colors.danger.100}' },
-          subtle: { value: "{colors.danger.200}" },
+          subtle: { value: '{colors.danger.200}' },
-          emphasized: { value: "{colors.danger.300}" },
+          emphasized: { value: '{colors.danger.300}' },
-          focusRing: { value: "{colors.danger.500}" },
+          focusRing: { value: '{colors.danger.500}' },
         },
-        "brand": {
+        brand: {
-          solid: { value: "{colors.brand.500}" },
+          solid: { value: '{colors.brand.500}' },
-          contrast: { value: "{colors.brand.100}" },
+          contrast: { value: '{colors.brand.100}' },
-          fg: { value: "{colors.brand.900}" },
+          fg: { value: '{colors.brand.900}' },
-          muted: { value: "{colors.brand.100}" },
+          muted: { value: '{colors.brand.100}' },
-          subtle: { value: "{colors.brand.200}" },
+          subtle: { value: '{colors.brand.200}' },
-          emphasized: { value: "{colors.brand.300}" },
+          emphasized: { value: '{colors.brand.300}' },
-          focusRing: { value: "{colors.brand.500}" },
+          focusRing: { value: '{colors.brand.500}' },
         },
       },
     },

front/src/utils/arrayTools.ts

@@ -1,11 +1,8 @@
-
-
 export function arrayUnique(array: any[]) {
   var a = array.concat();
   for (var i = 0; i < a.length; ++i) {
     for (var j = i + 1; j < a.length; ++j) {
-            if (a[i] === a[j])
+      if (a[i] === a[j]) a.splice(j--, 1);
-                a.splice(j--, 1);
     }
   }
 

front/src/utils/data-store.ts

@@ -6,8 +6,8 @@
 import { DependencyList, useCallback, useEffect, useState } from 'react';
 
 import { RestErrorResponse } from '@/back-api';
-import { isNullOrUndefined } from '@/utils/validator';
 import { toasterAPIError } from '@/components/ui/toaster';
+import { isNullOrUndefined } from '@/utils/validator';
 
 export type DataStoreType<TYPE> = {
   isLoading: boolean;

front/src/utils/http.ts

@@ -1,4 +1,4 @@
-import { JwtToken, RESTConfig } from '@/back-api';
+import { RESTConfig } from '@/back-api';
 import { getApiUrl } from '@/environment';
 import { getUserToken } from '@/service/session';
 

front/src/utils/query.ts

@@ -1,14 +1,15 @@
-import { RestErrorResponse } from "@/back-api";
+import { useEffect, useState } from 'react';
-import { toasterAPIError, toaster } from "@/components/ui/toaster";
+
-import { useSessionService } from "@/service/session";
+import { RestErrorResponse } from '@/back-api';
-import { useState, useEffect } from "react";
+import { toaster, toasterAPIError } from '@/components/ui/toaster';
+import { useSessionService } from '@/service/session';
 
 export type useQueryProps<TYPE> = {
   queryFunction: () => Promise<TYPE>;
   onSuccess?: (data: TYPE) => Promise<TYPE>;
   onFail?: (error: RestErrorResponse) => void;
-}
+};
-export const useQuery = <TYPE,>({
+export const useQuery = <TYPE>({
   queryFunction,
   onSuccess,
   onFail,
@@ -18,13 +19,15 @@ export const useQuery = <TYPE,>({
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<RestErrorResponse | undefined>(undefined);
   useEffect(() => {
-        queryFunction().then((received) => {
+    queryFunction()
+      .then((received) => {
         setData(received);
         setIsLoading(false);
         if (onSuccess) {
           onSuccess(received);
         }
-        }).catch((error) => {
+      })
+      .catch((error) => {
         setError(error);
         setIsLoading(false);
         if (onFail) {
@@ -35,19 +38,19 @@ export const useQuery = <TYPE,>({
           // Authentication error ==> auto_disconnect
           clearToken();
           toaster.create({
-                    title: "Disconnected by server",
+            title: 'Disconnected by server',
-                    description: "Token is no more available",
+            description: 'Token is no more available',
           });
         }
       });
-    }, [setError, setIsLoading, setData, toasterAPIError, clearToken, toaster])
+  }, [setError, setIsLoading, setData, toasterAPIError, clearToken, toaster]);
   return { data, isLoading, error };
-}
+};
 export type useQueryCallProps<RETURN_TYPE, PARAMETER_TYPE> = {
   queryFunction: (params: PARAMETER_TYPE) => Promise<RETURN_TYPE>;
   onSuccess?: (data: RETURN_TYPE) => Promise<RETURN_TYPE>;
   onFail?: (error: RestErrorResponse) => void;
-}
+};
 export const useQueryCall = <TYPE, PARAMETERS>({
   queryFunction,
   onSuccess,
@@ -57,12 +60,14 @@ export const useQueryCall = <TYPE, PARAMETERS>({
   const [isCalling, setIsCalling] = useState<boolean>(true);
   const [error, setError] = useState<RestErrorResponse | undefined>(undefined);
   const call = (params: PARAMETERS) => {
-        queryFunction(params).then((received) => {
+    queryFunction(params)
+      .then((received) => {
         setIsCalling(false);
         if (onSuccess) {
           onSuccess(received);
         }
-        }).catch((error) => {
+      })
+      .catch((error) => {
         setIsCalling(false);
         if (onFail) {
           onFail(error);
@@ -73,11 +78,11 @@ export const useQueryCall = <TYPE, PARAMETERS>({
           // Authentication error ==> auto_disconnect
           clearToken();
           toaster.create({
-                    title: "Disconnected by server",
+            title: 'Disconnected by server',
-                    description: "Token is no more available",
+            description: 'Token is no more available',
           });
         }
       });
-    }
+  };
   return { call, isCalling, error };
-}
+};

front/src/utils/sha512.ts

@@ -117,7 +117,8 @@ export function sha512(str) {
     let len = data.length * charsize;
 
     for (let i = 0; i < len; i += charsize) {
-			bin[i >> 5] |= (data.charCodeAt(i / charsize) & mask) << (32 - charsize - (i % 32));
+      bin[i >> 5] |=
+        (data.charCodeAt(i / charsize) & mask) << (32 - charsize - (i % 32));
     }
 
     return bin;
@@ -131,7 +132,8 @@ export function sha512(str) {
 
     for (let i = 0; i < length; i += 1) {
       srcByte = binarray[i >> 2] >> ((3 - (i % 4)) * 8);
-			data += hex_tab.charAt((srcByte >> 4) & 0xf) + hex_tab.charAt(srcByte & 0xf);
+      data +=
+        hex_tab.charAt((srcByte >> 4) & 0xf) + hex_tab.charAt(srcByte & 0xf);
     }
 
     return data;
@@ -154,8 +156,17 @@ export function sha512(str) {
   function safe_add_4(a, b, c, d) {
     let lsw, msw, lowOrder, highOrder;
 
-		lsw = (a.lowOrder & 0xffff) + (b.lowOrder & 0xffff) + (c.lowOrder & 0xffff) + (d.lowOrder & 0xffff);
+    lsw =
-		msw = (a.lowOrder >>> 16) + (b.lowOrder >>> 16) + (c.lowOrder >>> 16) + (d.lowOrder >>> 16) + (lsw >>> 16);
+      (a.lowOrder & 0xffff) +
+      (b.lowOrder & 0xffff) +
+      (c.lowOrder & 0xffff) +
+      (d.lowOrder & 0xffff);
+    msw =
+      (a.lowOrder >>> 16) +
+      (b.lowOrder >>> 16) +
+      (c.lowOrder >>> 16) +
+      (d.lowOrder >>> 16) +
+      (lsw >>> 16);
     lowOrder = ((msw & 0xffff) << 16) | (lsw & 0xffff);
 
     lsw =
@@ -164,7 +175,12 @@ export function sha512(str) {
       (c.highOrder & 0xffff) +
       (d.highOrder & 0xffff) +
       (msw >>> 16);
-		msw = (a.highOrder >>> 16) + (b.highOrder >>> 16) + (c.highOrder >>> 16) + (d.highOrder >>> 16) + (lsw >>> 16);
+    msw =
+      (a.highOrder >>> 16) +
+      (b.highOrder >>> 16) +
+      (c.highOrder >>> 16) +
+      (d.highOrder >>> 16) +
+      (lsw >>> 16);
     highOrder = ((msw & 0xffff) << 16) | (lsw & 0xffff);
 
     return new int64(highOrder, lowOrder);
@@ -209,8 +225,12 @@ export function sha512(str) {
 
   function maj(x, y, z) {
     return new int64(
-			(x.highOrder & y.highOrder) ^ (x.highOrder & z.highOrder) ^ (y.highOrder & z.highOrder),
+      (x.highOrder & y.highOrder) ^
-			(x.lowOrder & y.lowOrder) ^ (x.lowOrder & z.lowOrder) ^ (y.lowOrder & z.lowOrder)
+        (x.highOrder & z.highOrder) ^
+        (y.highOrder & z.highOrder),
+      (x.lowOrder & y.lowOrder) ^
+        (x.lowOrder & z.lowOrder) ^
+        (y.lowOrder & z.lowOrder)
     );
   }
 
@@ -281,7 +301,10 @@ export function sha512(str) {
 
   function shr(x, n) {
     if (n <= 32) {
-			return new int64(x.highOrder >>> n, (x.lowOrder >>> n) | (x.highOrder << (32 - n)));
+      return new int64(
+        x.highOrder >>> n,
+        (x.lowOrder >>> n) | (x.highOrder << (32 - n))
+      );
     } else {
       return new int64(0, x.highOrder << (32 - n));
     }
@@ -308,7 +331,12 @@ export function sha512(str) {
       if (j < 16) {
         W[j] = new int64(str[j * 2 + i], str[j * 2 + i + 1]);
       } else {
-				W[j] = safe_add_4(gamma1(W[j - 2]), W[j - 7], gamma0(W[j - 15]), W[j - 16]);
+        W[j] = safe_add_4(
+          gamma1(W[j - 2]),
+          W[j - 7],
+          gamma0(W[j - 15]),
+          W[j - 16]
+        );
       }
 
       T1 = safe_add_5(h, sigma1(e), ch(e, f, g), K[j], W[j]);

front/src/utils/validator.ts

@@ -1,4 +1,3 @@
-
 export function isNumeric(val: string): boolean {
   return !isNaN(Number(val));
 }