refactor: update API endpoints and enhance loan management features

FrontendV2/src/App.tsx

@@ -27,7 +27,7 @@ function App() {
   useEffect(() => {
     if (Cookies.get("token")) {
       const verifyToken = async () => {
-        const response = await fetch(`${API_BASE}/api/verifyToken`, {
+        const response = await fetch(`${API_BASE}/verify`, {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,

FrontendV2/src/components/Header.tsx

@@ -64,7 +64,7 @@ export const Header = () => {
       return;
     }
 
-    const response = await fetch(`${API_BASE}/api/changePassword`, {
+    const response = await fetch(`${API_BASE}/api/users/change-password`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

FrontendV2/src/components/footer/versionInfo.query.ts

@@ -5,7 +5,7 @@ export const useVersionInfoQuery = () =>
   useQuery({
     queryKey: ["versionInfo"],
     queryFn: async () => {
-      const response = await fetch(`${API_BASE}/server-info`, {
+      const response = await fetch(`${API_BASE}/`, {
         method: "GET",
       });
       if (response.ok) {

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"));

FrontendV2/src/pages/Landingpage.tsx

@@ -39,6 +39,8 @@ type Device = {
   can_borrow_role: string;
   inSafe: number;
   entry_created_at: string;
+  last_borrowed_person: string | null;
+  currently_borrowing: string | null;
 };
 
 const Landingpage: React.FC = () => {
@@ -68,7 +70,7 @@ const Landingpage: React.FC = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const loanRes = await fetch(`${API_BASE}/apiV2/allLoans`);
+        const loanRes = await fetch(`${API_BASE}/api/loans/all-loans`);
         const loanData = await loanRes.json();
         if (Array.isArray(loanData)) {
           setLoans(loanData);
@@ -80,7 +82,7 @@ const Landingpage: React.FC = () => {
           );
         }
 
-        const deviceRes = await fetch(`${API_BASE}/apiV2/allItems`);
+        const deviceRes = await fetch(`${API_BASE}/api/loans/all-items`);
         const deviceData = await deviceRes.json();
         if (Array.isArray(deviceData)) {
           setDevices(deviceData);
@@ -200,6 +202,14 @@ const Landingpage: React.FC = () => {
               <Text>
                 {t("rent-role")}: {device.can_borrow_role}
               </Text>
+              <Text>
+                {t("last-borrowed-person")}:{" "}
+                {device.last_borrowed_person || "N/A"}
+              </Text>
+              <Text>
+                {t("currently-borrowed-by")}:{" "}
+                {device.currently_borrowing || "N/A"}
+              </Text>
             </Card.Body>
           </Card.Root>
         ))}

FrontendV2/src/pages/LoginPage.tsx

@@ -25,7 +25,7 @@ export const LoginPage = () => {
   }, [isLoggedIn, navigate]);
 
   const loginFnc = async (username: string, password: string) => {
-    const response = await fetch(`${API_BASE}/api/login`, {
+    const response = await fetch(`${API_BASE}/api/users/login`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ username, password }),

FrontendV2/src/pages/MyLoansPage.tsx

@@ -43,7 +43,7 @@ export const MyLoansPage = () => {
     const fetchLoans = async () => {
       try {
         setIsLoading(true);
-        const res = await fetch(`${API_BASE}/api/userLoans`, {
+        const res = await fetch(`${API_BASE}/api/loans/loans`, {
           method: "GET",
           headers: {
             Authorization: `Bearer ${Cookies.get("token")}`,
@@ -75,7 +75,7 @@ export const MyLoansPage = () => {
 
   const deleteLoan = async (loanId: number) => {
     try {
-      const res = await fetch(`${API_BASE}/api/SETdeleteLoan/${loanId}`, {
+      const res = await fetch(`${API_BASE}/api/loans/delete-loan/${loanId}`, {
         method: "DELETE",
         headers: {
           Authorization: `Bearer ${Cookies.get("token")}`,

FrontendV2/src/utils/Fetcher.ts

@@ -6,7 +6,7 @@ export const getBorrowableItems = async (
   endDate: string
 ) => {
   try {
-    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
+    const response = await fetch(`${API_BASE}/api/loans/borrowable-items`, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${Cookies.get("token") || ""}`,
@@ -47,15 +47,16 @@ export const getBorrowableItems = async (
 export const createLoan = async (
   itemIds: number[],
   startDate: string,
-  endDate: string
+  endDate: string,
+  note: string | null
 ) => {
-  const response = await fetch(`${API_BASE}/api/createLoan`, {
+  const response = await fetch(`${API_BASE}/api/loans/createLoan`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${Cookies.get("token") || ""}`,
     },
-    body: JSON.stringify({ items: itemIds, startDate, endDate }),
+    body: JSON.stringify({ items: itemIds, startDate, endDate, note }),
   });
 
   if (!response.ok) {