[FIX] add end correction

front/src/scene/home/AddPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-import { Button, Flex, Input, Table, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Input, Table, Text } from '@chakra-ui/react';
 import { LuTrash } from 'react-icons/lu';
 import { MdCloudUpload } from 'react-icons/md';
 
@@ -20,6 +20,10 @@ import { TopBar } from '@/components/TopBar/TopBar';
 import { FormSelect } from '@/components/form/FormSelect';
 import { Formidable, useFormidable } from '@/components/formidable';
 import { PopUpUploadProgress } from '@/components/popup/PopUpUploadProgress';
+import {
+  NumberInputField,
+  NumberInputRoot,
+} from '@/components/ui/number-input';
 import { useAlbumService, useOrderedAlbums } from '@/service/Album';
 import { useArtistService, useOrderedArtists } from '@/service/Artist';
 import { useGenderService, useOrderedGenders } from '@/service/Gender';
@@ -90,7 +94,12 @@ export const AddPage = () => {
   const { store: storeTrack } = useTrackService();
   const { session } = useServiceContext();
 
-  const form = useFormidable<FormInsertData>({});
+  const form = useFormidable<FormInsertData>({
+    configuration: {
+      enableModifyNotification: false,
+      enableReset: false,
+    },
+  });
 
   const updateNeedSend = () => {
     if (parsedElement.length === 0) {
@@ -328,20 +337,22 @@ export const AddPage = () => {
       }
       setIndexUpload(index);
       console.log(
-        `Start upload of file:  ${index}: ${parsedElement[index].title}`
+        `Start upload of file:  ${index}: ${parsedElement[index].title} ==> ${JSON.stringify(parsedElement[index], null, 2)}`
       );
+      const data = {
+        title: parsedElement[index].title,
+        file: parsedElement[index].file,
+        albumId: form.values['albumId'] ?? undefined,
+        artistId: form.values['artistId'] ?? undefined,
+        genderId: form.values['genderId'] ?? undefined,
+        trackId: parsedElement[index].trackId ?? undefined,
+      };
+      console.log(`data= ${JSON.stringify(data, null, 2)}`);
       storeTrack
         .update(
           TrackResource.uploadTrack({
             restConfig: session.getRestConfig(),
-            data: {
+            data,
-              title: parsedElement[index].title,
-              file: parsedElement[index].file,
-              albumId: form.values['albumId'] ?? undefined,
-              artistId: form.values['artistId'] ?? undefined,
-              genderId: form.values['genderId'] ?? undefined,
-              trackId: parsedElement[index].trackId ?? undefined,
-            },
             callbacks: {
               progressUpload: progressUpload,
             },
@@ -358,10 +369,17 @@ export const AddPage = () => {
           setUploadError(JSON.stringify(error, null, 2));
         });
     },
-    [setUploadError, setIndexUpload, storeTrack, parsedElement]
+    [
+      setUploadError,
+      setIndexUpload,
+      storeTrack,
+      parsedElement,
+      form,
+      form.values,
+    ]
   );
 
-  const sendFile = (): void => {
+  const sendFile = (_data): void => {
     console.log(`Send file requested ... ${parsedElement.length}`);
     setUploadError(undefined);
     setIsFinishedUpload(false);
@@ -449,14 +467,12 @@ export const AddPage = () => {
                 label="Gender"
                 name="genderId"
                 options={dataGenders}
-                keyInputValue="name"
                 addNewItem={addNewGender}
               />
               <FormSelect
                 label="Artist"
                 name="artistId"
                 options={dataArtist}
-                keyInputValue="name"
                 addNewItem={addNewArtist}
                 suggestion={suggestedArtist}
               />
@@ -464,7 +480,6 @@ export const AddPage = () => {
                 label="Album"
                 name="albumId"
                 options={dataAlbums}
-                keyInputValue="name"
                 addNewItem={addNewAlbum}
                 suggestion={suggestedAlbum}
               />
@@ -475,7 +490,9 @@ export const AddPage = () => {
               >
                 <Table.Header>
                   <Table.Row>
-                    <Table.ColumnHeader>track ID</Table.ColumnHeader>
+                    <Table.ColumnHeader width="10%">
+                      track ID
+                    </Table.ColumnHeader>
                     <Table.ColumnHeader width="full">Title</Table.ColumnHeader>
                     <Table.ColumnHeader>actions</Table.ColumnHeader>
                   </Table.Row>
@@ -484,18 +501,19 @@ export const AddPage = () => {
                   {parsedElement.map((data) => (
                     <Table.Row key={data.uniqueId}>
                       <Table.Cell>
-                        <Input
+                        <NumberInputRoot
-                          type="number"
+                          value={data.trackId ? `${data.trackId}` : undefined}
-                          pattern="[0-9]{0-4}"
+                          onValueChange={(e) => onTrackId(data, e.value)}
-                          placeholder="e?"
+                          min={0}
-                          value={data.trackId}
+                          max={5000}
-                          onChange={(e) => onTrackId(data, e.target.value)}
                           backgroundColor={
                             data.trackIdDetected === true
                               ? 'darkred'
                               : undefined
                           }
-                        />
+                        >
+                          <NumberInputField />
+                        </NumberInputRoot>
                       </Table.Cell>
                       <Table.Cell>
                         <Input
@@ -518,6 +536,7 @@ export const AddPage = () => {
                       </Table.Cell>
                       <Table.Cell>
                         <Button
+                          colorPalette="@danger"
                           onClick={(e) => removeElementFromList(data, e.target)}
                         >
                           <LuTrash /> Remove
@@ -605,6 +624,7 @@ export const AddPage = () => {
               </Table.Root>
             </>
           )}
+          <Box height="250px" width="full" />
         </Flex>
         {indexUpload !== undefined && (
           <PopUpUploadProgress