feat: add user confirmation functionality and dynamic table creation; enhance MainForm with user selection and next ID display

frontend/src/pages/MainForm.tsx

@@ -6,6 +6,7 @@ import {
   Alert,
   CircularProgress,
   Autocomplete,
+  Chip,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
@@ -22,6 +23,7 @@ export const MainForm = () => {
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [nextID, setNextID] = useState<number | null>(null);
   const [formData, setFormData] = useState({
     firstName: "",
     lastName: "",
@@ -63,6 +65,22 @@ export const MainForm = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
+  const handleUserSelection = (selectedUser: string | null) => {
+    if (!selectedUser) return;
+    const confirmUser = async () => {
+      try {
+        const response = await fetch(
+          `http://localhost:8004/default/confirm-user?username=${selectedUser}`
+        );
+        const data = await response.json();
+        setNextID(data.nextID);
+      } catch (error) {
+        console.error("Error confirming user:", error);
+      }
+    };
+    confirmUser();
+  };
+
   const handleSubmit = async () => {
     setIsLoading(true);
     try {
@@ -87,6 +105,7 @@ export const MainForm = () => {
 
   return (
     <>
+      <Chip label={`${t("next-id")}#${nextID ?? "N/A"}`} />
       <form
         onSubmit={(e) => {
           e.preventDefault();
@@ -98,6 +117,12 @@ export const MainForm = () => {
           options={users}
           sx={{ width: 300 }}
           renderInput={(params) => <TextField {...params} label={t("user")} />}
+          onChange={(_event, value) => handleUserSelection(value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.defaultMuiPrevented = true;
+            }
+          }}
         />
         <TextField
           required