refactor: update API endpoints and enhance loan management features

FrontendV2/src/pages/HomePage.tsx

@@ -7,6 +7,8 @@ import {
   Spinner,
   VStack,
   Table,
+  InputGroup,
+  Span,
 } from "@chakra-ui/react";
 import { useAtom } from "jotai";
 import { getBorrowableItems } from "@/utils/Fetcher";
@@ -31,6 +33,9 @@ export const HomePage = () => {
   const [isLoadingA, setIsLoadingA] = useState(false);
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
+  const MAX_CHARACTERS = 500;
+  const [note, setNote] = useState("");
+
   // Error handling states
   const [isMsg, setIsMsg] = useState(false);
   const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
@@ -136,13 +141,29 @@ export const HomePage = () => {
                   </Table.Row>
                 ))}
               </Table.Body>
+              <InputGroup
+                endElement={
+                  <Span color="fg.muted" textStyle="xs">
+                    {note.length} / {MAX_CHARACTERS}
+                  </Span>
+                }
+              >
+                <Input
+                  placeholder={t("optional-note")}
+                  value={note}
+                  maxLength={MAX_CHARACTERS}
+                  onChange={(e) => {
+                    setNote(e.currentTarget.value.slice(0, MAX_CHARACTERS));
+                  }}
+                />
+              </InputGroup>
             </Table.Root>
           </Table.ScrollArea>
         )}
         {selectedItems.length >= 1 && (
           <Button
             onClick={() =>
-              createLoan(selectedItems, startDate, endDate).then((response) => {
+              createLoan(selectedItems, startDate, endDate, note).then((response) => {
                 if (response.status === "error") {
                   setMsgStatus("error");
                   setMsgTitle(response.title || t("error"));