Changes

src/components/RegistryManager.tsx

@@ -88,6 +88,27 @@ const RegistryManager = () => {
     }
   };
 
+  const handleReleaseClaim = async (id: string) => {
+    try {
+      const response = await fetchWithAuth(`/api/registry/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ taken: false, claimedBy: null }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to release claim: ${response.statusText}`);
+      }
+
+      await fetchRegistryItems();
+    } catch (error: any) {
+      setError(error.message);
+      console.error("Error releasing claim:", error);
+    }
+  };
+
   const toggleShowClaimant = (id: string) => {
     const newShowClaimants = new Set(showClaimants);
     if (newShowClaimants.has(id)) {
@@ -111,26 +132,32 @@ const RegistryManager = () => {
 
   return (
     <div className="container mx-auto p-4">
-      <form onSubmit={handleAddItem} className="mb-8">
-        <div className="flex flex-col gap-4">
-          <input
-            type="text"
-            value={newItem.name}
-            onChange={(e) => setNewItem({ ...newItem, name: e.target.value })}
-            placeholder="Item name"
-            className="input input-bordered"
-            required
-          />
-          <input
-            type="url"
-            value={newItem.link}
-            onChange={(e) => setNewItem({ ...newItem, link: e.target.value })}
-            placeholder="Item link (optional)"
-            className="input input-bordered"
-          />
-          <button type="submit" className="btn btn-primary">
-            Add Item
-          </button>
+      <form onSubmit={handleAddItem} className="mb-8 max-w-2xl mx-auto">
+        <div className="grid grid-cols-1 gap-4">
+          <div className="form-control w-full">
+            <input
+              type="text"
+              value={newItem.name}
+              onChange={(e) => setNewItem({ ...newItem, name: e.target.value })}
+              placeholder="Item name"
+              className="input input-bordered w-full"
+              required
+            />
+          </div>
+          <div className="form-control w-full">
+            <input
+              type="url"
+              value={newItem.link}
+              onChange={(e) => setNewItem({ ...newItem, link: e.target.value })}
+              placeholder="Item link (optional)"
+              className="input input-bordered w-full"
+            />
+          </div>
+          <div className="form-control w-full">
+            <button type="submit" className="btn btn-primary w-full">
+              Add Item
+            </button>
+          </div>
         </div>
       </form>
 
@@ -185,12 +212,22 @@ const RegistryManager = () => {
                   )}
                 </td>
                 <td>
-                  <button
-                    onClick={() => handleDeleteItem(item.id)}
-                    className="btn btn-error btn-sm"
-                  >
-                    Delete
-                  </button>
+                  <div className="flex gap-2">
+                    {item.taken && (
+                      <button
+                        onClick={() => handleReleaseClaim(item.id)}
+                        className="btn btn-warning btn-sm"
+                      >
+                        Release Claim
+                      </button>
+                    )}
+                    <button
+                      onClick={() => handleDeleteItem(item.id)}
+                      className="btn btn-error btn-sm"
+                    >
+                      Delete
+                    </button>
+                  </div>
                 </td>
               </tr>
             ))}