Fixed

src/components/RegistryManager.tsx

@@ -6,6 +6,7 @@ const RegistryManager = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [newItem, setNewItem] = useState({ name: "", link: "" });
+  const [showClaimants, setShowClaimants] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     fetchRegistryItems();
@@ -46,7 +47,6 @@ const RegistryManager = () => {
         throw new Error(`Failed to add item: ${response.statusText}`);
       }
 
-      // Clear form and refresh list
       setNewItem({ name: "", link: "" });
       await fetchRegistryItems();
     } catch (error: any) {
@@ -67,7 +67,6 @@ const RegistryManager = () => {
         throw new Error(`Failed to delete item: ${response.statusText}`);
       }
 
-      // Refresh the list after deletion
       await fetchRegistryItems();
     } catch (error: any) {
       setError(error.message);
@@ -75,6 +74,16 @@ const RegistryManager = () => {
     }
   };
 
+  const toggleClaimantVisibility = (itemId: string) => {
+    const newShowClaimants = new Set(showClaimants);
+    if (newShowClaimants.has(itemId)) {
+      newShowClaimants.delete(itemId);
+    } else {
+      newShowClaimants.add(itemId);
+    }
+    setShowClaimants(newShowClaimants);
+  };
+
   if (loading) {
     return <div className="text-center">Loading registry items...</div>;
   }
@@ -85,9 +94,6 @@ const RegistryManager = () => {
 
   return (
     <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">Registry Manager</h1>
-
-      {/* Add New Item Form */}
       <form onSubmit={handleAddItem} className="mb-8">
         <div className="card bg-base-100 shadow-xl">
           <div className="card-body">
@@ -130,7 +136,6 @@ const RegistryManager = () => {
         </div>
       </form>
 
-      {/* Registry Items List */}
       <div className="overflow-x-auto">
         <table className="table w-full">
           <thead>
@@ -144,7 +149,35 @@ const RegistryManager = () => {
           <tbody>
             {registryItems.map((item) => (
               <tr key={item.id}>
-                <td>{item.name}</td>
+                <td>
+                  <div className="flex items-center gap-2">
+                    {item.name}
+                    {item.taken && (
+                      <>
+                        <span className="badge badge-success">Taken</span>
+                        {item.claimedBy && (
+                          <button
+                            onClick={() => toggleClaimantVisibility(item.id)}
+                            className="btn btn-ghost btn-xs"
+                          >
+                            {showClaimants.has(item.id) ? (
+                              <i className="fas fa-eye-slash" />
+                            ) : (
+                              <i className="fas fa-eye" />
+                            )}
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                  {item.taken &&
+                    item.claimedBy &&
+                    showClaimants.has(item.id) && (
+                      <div className="text-sm text-gray-500">
+                        Claimed by: {item.claimedBy}
+                      </div>
+                    )}
+                </td>
                 <td>
                   {item.link && (
                     <a
@@ -157,13 +190,7 @@ const RegistryManager = () => {
                     </a>
                   )}
                 </td>
-                <td>
-                  {item.taken ? (
-                    <span className="badge badge-success">Taken</span>
-                  ) : (
-                    <span className="badge badge-info">Available</span>
-                  )}
-                </td>
+                <td>{item.taken ? "Claimed" : "Available"}</td>
                 <td>
                   <button
                     className="btn btn-error btn-sm"