Enhance item management: update API key display, add locker number input, and modify database schema for unique locker numbers

admin/src/components/APIKeyTable.tsx

@@ -124,8 +124,8 @@ const APIKeyTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
-      <Heading marginBottom={4} size="md">
-        Gegenstände
+      <Heading marginBottom={4} size="2xl">
+        API Keys
       </Heading>
       {isError && (
         <MyAlert

admin/src/components/AddItemForm.tsx

@@ -25,15 +25,19 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
         <Card.Body>
           <Stack gap="4" w="full">
             <Field.Root>
-              <Field.Label>Gegenstandsname</Field.Label>
+              <Field.Label>Gegenstandsname (muss einzigartig sein)</Field.Label>
               <Input id="item_name" placeholder="z.B. Laptop" />
             </Field.Root>
+            <Field.Root>
+              <Field.Label>Schließfachnummer (immer zwei Zahlen)</Field.Label>
+              <Input id="lockerNumber" placeholder="Nummer 01 - 06" />
+            </Field.Root>
             <Field.Root>
               <Field.Label>Ausleih-Berechtigung (Rolle)</Field.Label>
               <Input
                 id="can_borrow_role"
                 type="number"
-                placeholder="Zahl (1 - 4)"
+                placeholder="Zahl (1 - 6)"
               />
             </Field.Root>
           </Stack>
@@ -53,10 +57,17 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
                 (document.getElementById("can_borrow_role") as HTMLInputElement)
                   ?.value
               );
+              const lockerValue = (
+                document.getElementById("lockerNumber") as HTMLInputElement
+              )?.value.trim();
+
+              const lockerNumber =
+                lockerValue === "" ? null : Number(lockerValue);
 
               if (!name || Number.isNaN(role)) return;
+              if (lockerNumber !== null && Number.isNaN(lockerNumber)) return;
 
-              const res = await createItem(name, role);
+              const res = await createItem(name, role, lockerNumber);
               if (res.success) {
                 alert(
                   "success",

admin/src/components/ItemTable.tsx

@@ -38,6 +38,7 @@ type Items = {
   item_name: string;
   can_borrow_role: string;
   in_safe: boolean;
+  safe_nr: string;
   entry_created_at: string;
   entry_updated_at: string;
   last_borrowed_person: string | null;
@@ -66,6 +67,12 @@ const ItemTable: React.FC = () => {
     );
   };
 
+  const handleLockerNumberChange = (id: number, value: string) => {
+    setItems((prev) =>
+      prev.map((it) => (it.id === id ? { ...it, lockerNumber: value } : it))
+    );
+  };
+
   const setError = (
     status: "error" | "success",
     message: string,
@@ -201,6 +208,9 @@ const ItemTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>Im Schließfach</strong>
               </Table.ColumnHeader>
+              <Table.ColumnHeader>
+                <strong>Schließfachnummer</strong>
+              </Table.ColumnHeader>
               <Table.ColumnHeader>
                 <strong>Eintrag erstellt am</strong>
               </Table.ColumnHeader>
@@ -208,10 +218,10 @@ const ItemTable: React.FC = () => {
                 <strong>Eintrag aktualisiert am</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Letzte ausleihende Person</strong>
+                <strong>LaP *</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Derzeit ausgeliehen von</strong>
+                <strong>Dav **</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
                 <strong>Aktionen</strong>
@@ -277,6 +287,16 @@ const ItemTable: React.FC = () => {
                     </Text>
                   </Button>
                 </Table.Cell>
+                <Table.Cell>
+                  <Input
+                    size="sm"
+                    w="max-content"
+                    onChange={(e) =>
+                      handleLockerNumberChange(item.id, e.target.value)
+                    }
+                    value={item.safe_nr}
+                  />
+                </Table.Cell>
                 <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
                 <Table.Cell>{formatDateTime(item.entry_updated_at)}</Table.Cell>
                 <Table.Cell>{item.last_borrowed_person}</Table.Cell>
@@ -287,6 +307,7 @@ const ItemTable: React.FC = () => {
                       handleEditItems(
                         item.id,
                         item.item_name,
+                        item.safe_nr,
                         item.can_borrow_role
                       ).then((response) => {
                         if (response.success) {
@@ -333,6 +354,8 @@ const ItemTable: React.FC = () => {
           </Table.Body>
         </Table.Root>
       </Box>
+      <Text>* LaP = Letzte ausleihende Person</Text>
+      <Text>** Dav = Derzeit ausgeliehen von</Text>
     </>
   );
 };