added inpu elemts and backend API routes for changing the item table

admin/src/components/ItemTable.tsx

@@ -10,6 +10,7 @@ import {
   Heading,
   Icon,
   Tag,
+  Input,
 } from "@chakra-ui/react";
 import { Tooltip } from "@/components/ui/tooltip";
 import MyAlert from "./myChakra/MyAlert";
@@ -19,10 +20,11 @@ import {
   CirclePlus,
   CheckCircle2,
   XCircle,
+  Save,
 } from "lucide-react";
 import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
-import { deleteItem } from "@/utils/userActions";
+import { deleteItem, handleEditItems } from "@/utils/userActions";
 import AddItemForm from "./AddItemForm";
 import { formatDateTime } from "@/utils/userFuncs";
 
@@ -44,6 +46,18 @@ const ItemTable: React.FC = () => {
   const [reload, setReload] = useState(false);
   const [addForm, setAddForm] = useState(false);
 
+  const handleItemNameChange = (id: number, value: string) => {
+    setItems((prev) =>
+      prev.map((it) => (it.id === id ? { ...it, item_name: value } : it))
+    );
+  };
+
+  const handleCanBorrowRoleChange = (id: number, value: string) => {
+    setItems((prev) =>
+      prev.map((it) => (it.id === id ? { ...it, can_borrow_role: value } : it))
+    );
+  };
+
   const setError = (
     status: "error" | "success",
     message: string,
@@ -180,8 +194,22 @@ const ItemTable: React.FC = () => {
           {items.map((item) => (
             <Table.Row key={item.id}>
               <Table.Cell>{item.id}</Table.Cell>
-              <Table.Cell>{item.item_name}</Table.Cell>
-              <Table.Cell>{item.can_borrow_role}</Table.Cell>
+              <Table.Cell>
+                <Input
+                  onChange={(e) =>
+                    handleItemNameChange(item.id, e.target.value)
+                  }
+                  value={item.item_name}
+                />
+              </Table.Cell>
+              <Table.Cell>
+                <Input
+                  onChange={(e) =>
+                    handleCanBorrowRoleChange(item.id, e.target.value)
+                  }
+                  value={item.can_borrow_role}
+                />
+              </Table.Cell>
               <Table.Cell>
                 {item.inSafe ? (
                   <Tag.Root
@@ -235,6 +263,27 @@ const ItemTable: React.FC = () => {
               </Table.Cell>
               <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
               <Table.Cell>
+                <Button
+                  onClick={() =>
+                    handleEditItems(
+                      item.id,
+                      item.item_name,
+                      item.can_borrow_role
+                    ).then((response) => {
+                      if (response.success) {
+                        setError(
+                          "success",
+                          "User edited",
+                          "The user has been successfully edited."
+                        );
+                      }
+                    })
+                  }
+                  colorPalette="teal"
+                  size="sm"
+                >
+                  <Save />
+                </Button>
                 <Button
                   onClick={() =>
                     deleteItem(item.id).then((response) => {

admin/src/utils/userActions.ts

@@ -156,3 +156,16 @@ export const createItem = async (
     return { success: false };
   }
 };
+
+export const handleEditItems = async (
+  itemId: number,
+  item_name: string,
+  can_borrow_role: string
+) => {
+  try {
+      // write the logic for editing an item
+  } catch (error) {
+    console.error("Error editing item:", error);
+    return { success: false };
+  }
+};

backend/routes/api.js

@@ -20,6 +20,8 @@ import {
   createItem,
   changeUserPassword,
   changeUserPasswordFRONTEND,
+  changeInSafeStateV2,
+  updateItemByID,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
@@ -306,4 +308,25 @@ router.post("/changePWadmin", authenticate, async (req, res) => {
   return res.status(500).json({ message: "Failed to change password" });
 });
 
+router.post("/updateItemByID", authenticate, async (req, res) => {
+  const itemId = req.body.id;
+  const { item_name, can_borrow_role } = req.body || {};
+  const result = await updateItemByID(itemId, item_name, can_borrow_role);
+  if (result.success) {
+    return res.status(200).json({ message: "Item updated successfully" });
+  }
+  return res.status(500).json({ message: "Failed to update item" });
+});
+
+router.post("/setSafeState", authenticate, async (req, res) => {
+  const { itemId, state } = req.body || {};
+  const result = await changeInSafeStateV2(itemId, state);
+  if (result.success) {
+    return res
+      .status(200)
+      .json({ message: "Item safe state updated successfully" });
+  }
+  return res.status(500).json({ message: "Failed to update item safe state" });
+});
+
 export default router;

backend/services/database.js

@@ -438,3 +438,12 @@ export const changeUserPasswordFRONTEND = async (
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
 };
+
+export const updateItemByID = async (itemId, item_name, can_borrow_role) => {
+  const [result] = await pool.query(
+    "UPDATE items SET item_name = ?, can_borrow_role = ? WHERE id = ?",
+    [item_name, can_borrow_role, itemId]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};