From d39848af24bc257688c0a8235726c37d207c59bb Mon Sep 17 00:00:00 2001
From: Kunaldevxxx <khareji594@gmail.com>
Date: Thu, 12 Dec 2024 13:06:44 +0530
Subject: [PATCH 1/6] feat: Create Display Delete API Integrated

---
 src/app/platform/keys/create/page.tsx |  81 ++++++----
 src/app/platform/keys/list/page.tsx   | 205 ++++++++++++++++----------
 2 files changed, 182 insertions(+), 104 deletions(-)

diff --git a/src/app/platform/keys/create/page.tsx b/src/app/platform/keys/create/page.tsx
index 7c102f1..a5b1ba1 100644
--- a/src/app/platform/keys/create/page.tsx
+++ b/src/app/platform/keys/create/page.tsx
@@ -5,10 +5,11 @@ import { KeyIcon, ClipboardCopyIcon, CheckIcon } from "lucide-react";
 import MainHeader from "../../components/header";
 import Sidebar from "../../components/sidebar";
 import { ApiKeyNavigations } from "../navigations";
+
 const Page = () => {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
-  const [expiry, setExpiry] = useState("");
+  const [expiryDays, setExpiry] = useState("");
   const [apiKey, setApiKey] = useState("");
   const [notification, setNotification] = useState("");
   const [copied, setCopied] = useState(false);
@@ -16,13 +17,25 @@ const Page = () => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      const response = await new Promise<{ apiKey: string }>((resolve) =>
-        setTimeout(() => resolve({ apiKey: "12345-ABCDE" }), 1000)
-      );
-      setApiKey(response.apiKey);
+      const response = await fetch("/api/platform/keys", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ name, description, expiryDays: parseInt(expiryDays, 10) }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to create API key.");
+      }
+
+      const data = await response.json();
+      setApiKey(data.apiKey);
       setNotification("success");
-    } catch {
+    } catch (err) {
       setNotification("error");
+      console.error("Error creating API key:", err);
     }
   };
 
@@ -41,14 +54,21 @@ const Page = () => {
             <div className="p-3 bg-blue-100 rounded-lg">
               <KeyIcon className="h-8 w-8 text-blue-600" />
             </div>
-            <span className="ml-4 text-2xl font-bold text-gray-900">Create New API Key</span>
+            <span className="ml-4 text-2xl font-bold text-gray-900">
+              Manage API Keys
+            </span>
           </div>
         </MainHeader>
 
-        <form onSubmit={handleSubmit} className="mt-8 space-y-8 bg-white rounded-xl shadow-sm border border-gray-200 p-8">
+        <form
+          onSubmit={handleSubmit}
+          className="mt-8 space-y-8 bg-white rounded-xl shadow-sm border border-gray-200 p-8"
+        >
           <div className="space-y-6">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Name
+              </label>
               <input
                 type="text"
                 value={name}
@@ -60,7 +80,9 @@ const Page = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Description
+              </label>
               <textarea
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
@@ -72,9 +94,11 @@ const Page = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Expiration Period</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Expiration Period
+              </label>
               <select
-                value={expiry}
+                value={expiryDays}
                 onChange={(e) => setExpiry(e.target.value)}
                 className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                 required
@@ -88,20 +112,21 @@ const Page = () => {
             </div>
           </div>
 
-          <div className="pt-6 border-t border-gray-200">
-            <button
-              type="submit"
-              className="w-full px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition duration-200 flex items-center justify-center space-x-2"
-            >
-              <KeyIcon className="h-5 w-5" />
-              <span>Generate API Key</span>
-            </button>
-          </div>
+          <div className="pt-6 border-t border-gray-200"></div>
+          <button
+            type="submit"
+            className="w-full px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition duration-200 flex items-center justify-center space-x-2"
+          >
+            <KeyIcon className="h-5 w-5" />
+            <span>Generate API Key</span>
+          </button>
         </form>
 
         {notification === "success" && (
           <div className="mt-6 p-6 rounded-xl bg-green-50 border border-green-200">
-            <h3 className="text-sm font-medium text-green-800 mb-3">API Key Generated Successfully</h3>
+            <h3 className="text-sm font-medium text-green-800 mb-3">
+              API Key Generated Successfully
+            </h3>
             <div className="flex items-center justify-between bg-white p-4 rounded-lg border border-green-200">
               <code className="text-sm text-gray-800 font-mono">{apiKey}</code>
               <button
@@ -122,7 +147,8 @@ const Page = () => {
               </button>
             </div>
             <p className="mt-3 text-sm text-green-700">
-              Make sure to copy your API key now. You wont be able to see it again!
+              Make sure to copy your API key now. You won’t be able to see it
+              again!
             </p>
           </div>
         )}
@@ -134,9 +160,12 @@ const Page = () => {
                 <span className="text-red-600 text-xl">!</span>
               </div>
               <div>
-                <h3 className="text-sm font-medium text-red-800">Error Creating API Key</h3>
+                <h3 className="text-sm font-medium text-red-800">
+                  Error Creating API Key
+                </h3>
                 <p className="mt-1 text-sm text-red-700">
-                  Something went wrong. Please try again or contact support if the problem persists.
+                  Something went wrong. Please try again or contact support if
+                  the problem persists.
                 </p>
               </div>
             </div>
@@ -147,4 +176,4 @@ const Page = () => {
   );
 };
 
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/src/app/platform/keys/list/page.tsx b/src/app/platform/keys/list/page.tsx
index 38ca1fa..99a1295 100644
--- a/src/app/platform/keys/list/page.tsx
+++ b/src/app/platform/keys/list/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { KeyIcon, MoreVertical } from "lucide-react";
 import MainHeader from "../../components/header";
 import Sidebar from "../../components/sidebar";
@@ -10,7 +10,7 @@ interface ApiKey {
   id: string;
   name: string;
   description: string;
-  expiryDays: number;
+  expiry: string | null; 
 }
 
 const Page = () => {
@@ -19,23 +19,35 @@ const Page = () => {
   const [showModal, setShowModal] = useState(false);
   const [showIDModal, setShowIDModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [apiKeys, setApiKeys] = useState<ApiKey[]>([
-    {
-      id: "a1b2",
-      name: "Production API Key",
-      description: "This key is used for production environment with full access to all endpoints and services. Handle with care.",
-      expiryDays: 30
-    },
-    {
-      id: "h8g7f6ueiiweuwoefgfeogeuwofwfc9efcefeifc",
-      name: "Development API Key",
-      description: "Development environment key.",
-      expiryDays: 60
-    }
-  ]);
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchApiKeys = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await fetch("/api/platform/keys", {
+          method: "GET",
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch API keys.");
+        }
+        const data = await response.json();
+        setApiKeys(data.keys); 
+      } catch (err) {
+        setError((err as Error).message || "Something went wrong.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApiKeys();
+  }, []);
 
   const truncateDescription = (text: string) => {
-    const words = text.split(' ').slice(0, 4).join(' ');
+    const words = text.split(" ").slice(0, 4).join(" ");
     return text.length > words.length ? `${words}...` : text;
   };
 
@@ -43,10 +55,32 @@ const Page = () => {
     return id.length > 6 ? `${id.slice(0, 4)}...` : id;
   };
 
-  const handleDelete = (id: string) => {
-    setApiKeys(apiKeys.filter(key => key.id !== id));
-    setShowDeleteModal(false);
+  const handleDelete = async (id: string) => {
+    try {
+      const response = await fetch("/api/platform/keys", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ id }),
+      });
+  
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to delete API key.");
+      }
+  
+      setApiKeys((prevKeys) => prevKeys.filter((key) => key.id !== id));
+      setShowDeleteModal(false);
+    } catch (err) {
+      if (err instanceof Error) {
+        console.error("Error deleting API key:", err.message);
+      } else {
+        console.error("Unknown error occurred while deleting API key.");
+      }
+    }
   };
+  
 
   return (
     <div className="flex min-h-screen bg-gray-50">
@@ -62,67 +96,82 @@ const Page = () => {
         </MainHeader>
 
         <div className="mt-6">
-          <table className="min-w-full bg-white rounded-lg shadow">
-            <thead className="bg-gray-100">
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiry Days</th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Options</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-300">
-              {apiKeys.map((key) => (
-                <tr key={key.id} className="hover:bg-gray-50">
-                  <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">
-                    <button
-                      onClick={() => {
-                        setSelectedID(key.id);
-                        setShowIDModal(true);
-                      }}
-                      className="hover:text-blue-600"
-                    >
-                      {truncateId(key.id)}
-                    </button>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{key.name}</td>
-                  <td className="px-6 py-4 text-sm text-gray-500">
-                    <button
-                      onClick={() => {
-                        setSelectedDescription(key.description);
-                        setShowModal(true);
-                      }}
-                      className="hover:text-blue-600"
-                    >
-                      {truncateDescription(key.description)}
-                    </button>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{key.expiryDays}</td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    <div className="relative group">
-                      <button className="p-1 hover:bg-gray-100 rounded">
-                        <MoreVertical className="h-5 w-5" />
+          {loading && <p>Loading...</p>}
+          {error && <p className="text-red-600">{error}</p>}
+          {!loading && !error && (
+            <table className="min-w-full bg-white rounded-lg shadow">
+              <thead className="bg-gray-100">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    ID
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Name
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Description
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Expiry
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Options
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-300">
+                {apiKeys.map((key) => (
+                  <tr key={key.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">
+                      <button
+                        onClick={() => {
+                          setSelectedID(key.id);
+                          setShowIDModal(true);
+                        }}
+                        className="hover:text-blue-600"
+                      >
+                        {truncateId(key.id)}
+                      </button>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{key.name}</td>
+                    <td className="px-6 py-4 text-sm text-gray-500">
+                      <button
+                        onClick={() => {
+                          setSelectedDescription(key.description);
+                          setShowModal(true);
+                        }}
+                        className="hover:text-blue-600"
+                      >
+                        {truncateDescription(key.description)}
                       </button>
-                      <div className="hidden group-hover:block absolute right-0 mt-0 w-48 bg-white rounded-md shadow-lg z-10">
-                        <button
-                          onClick={() => {
-                            setSelectedID(key.id);
-                            setShowDeleteModal(true);
-                          }}
-                          className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
-                        >
-                          Delete
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      {key.expiry ? new Date(key.expiry).toLocaleDateString() : "N/A"}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <div className="relative group">
+                        <button className="p-1 hover:bg-gray-100 rounded">
+                          <MoreVertical className="h-5 w-5" />
                         </button>
+                        <div className="hidden group-hover:block absolute right-0 mt-0 w-48 bg-white rounded-md shadow-lg z-10">
+                          <button
+                            onClick={() => {
+                              setSelectedID(key.id);
+                              setShowDeleteModal(true);
+                            }}
+                            className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+                          >
+                            Delete
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
         </div>
-
         {showModal && (
           <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
             <div className="bg-white p-6 rounded-lg max-w-lg w-full">
@@ -178,4 +227,4 @@ const Page = () => {
   );
 };
 
-export default Page;
\ No newline at end of file
+export default Page;

From a4198d931f64a0bfbac83915926fc7e96cf49914 Mon Sep 17 00:00:00 2001
From: Kunaldevxxx <khareji594@gmail.com>
Date: Thu, 12 Dec 2024 14:13:01 +0530
Subject: [PATCH 2/6] feat: Enhance API key creation and listing with loading
 state and improved UI

---
 src/app/platform/keys/create/page.tsx | 19 ++++++++++++++-----
 src/app/platform/keys/list/page.tsx   | 24 +++++++++++++++++-------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/app/platform/keys/create/page.tsx b/src/app/platform/keys/create/page.tsx
index a5b1ba1..adcf9c4 100644
--- a/src/app/platform/keys/create/page.tsx
+++ b/src/app/platform/keys/create/page.tsx
@@ -13,9 +13,10 @@ const Page = () => {
   const [apiKey, setApiKey] = useState("");
   const [notification, setNotification] = useState("");
   const [copied, setCopied] = useState(false);
-
+  const [loading, setLoading] = useState(false);
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setLoading(true);
     try {
       const response = await fetch("/api/platform/keys", {
         method: "POST",
@@ -31,14 +32,20 @@ const Page = () => {
       }
 
       const data = await response.json();
-      setApiKey(data.apiKey);
+      setApiKey(data.key); // Use data.key to set the API key
       setNotification("success");
+
+      setName("");
+      setDescription("");
+      setExpiry("");
+
     } catch (err) {
       setNotification("error");
       console.error("Error creating API key:", err);
+    } finally {
+      setLoading(false);
     }
   };
-
   const handleCopy = () => {
     navigator.clipboard.writeText(apiKey);
     setCopied(true);
@@ -55,7 +62,7 @@ const Page = () => {
               <KeyIcon className="h-8 w-8 text-blue-600" />
             </div>
             <span className="ml-4 text-2xl font-bold text-gray-900">
-              Manage API Keys
+              Create API Key
             </span>
           </div>
         </MainHeader>
@@ -115,10 +122,11 @@ const Page = () => {
           <div className="pt-6 border-t border-gray-200"></div>
           <button
             type="submit"
+            disabled={loading}
             className="w-full px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition duration-200 flex items-center justify-center space-x-2"
           >
             <KeyIcon className="h-5 w-5" />
-            <span>Generate API Key</span>
+            <span>{loading ? "Generating..." : "Generate API Key"}</span>
           </button>
         </form>
 
@@ -153,6 +161,7 @@ const Page = () => {
           </div>
         )}
 
+
         {notification === "error" && (
           <div className="mt-6 p-6 rounded-xl bg-red-50 border border-red-200">
             <div className="flex items-center space-x-3">
diff --git a/src/app/platform/keys/list/page.tsx b/src/app/platform/keys/list/page.tsx
index 99a1295..ba39650 100644
--- a/src/app/platform/keys/list/page.tsx
+++ b/src/app/platform/keys/list/page.tsx
@@ -6,11 +6,12 @@ import MainHeader from "../../components/header";
 import Sidebar from "../../components/sidebar";
 import { ApiKeyNavigations } from "../navigations";
 
+
 interface ApiKey {
   id: string;
   name: string;
   description: string;
-  expiry: string | null; 
+  expiry: string | null;
 }
 
 const Page = () => {
@@ -21,6 +22,7 @@ const Page = () => {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
   const [loading, setLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -35,7 +37,7 @@ const Page = () => {
           throw new Error("Failed to fetch API keys.");
         }
         const data = await response.json();
-        setApiKeys(data.keys); 
+        setApiKeys(data.keys);
       } catch (err) {
         setError((err as Error).message || "Something went wrong.");
       } finally {
@@ -64,12 +66,12 @@ const Page = () => {
         },
         body: JSON.stringify({ id }),
       });
-  
+
       if (!response.ok) {
         const errorData = await response.json();
         throw new Error(errorData.message || "Failed to delete API key.");
       }
-  
+
       setApiKeys((prevKeys) => prevKeys.filter((key) => key.id !== id));
       setShowDeleteModal(false);
     } catch (err) {
@@ -80,7 +82,7 @@ const Page = () => {
       }
     }
   };
-  
+
 
   return (
     <div className="flex min-h-screen bg-gray-50">
@@ -150,14 +152,22 @@ const Page = () => {
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                       <div className="relative group">
-                        <button className="p-1 hover:bg-gray-100 rounded">
+                        <button
+                          className="p-1 hover:bg-gray-100 rounded"
+                          onClick={() => setIsOpen(!isOpen)} 
+                        >
                           <MoreVertical className="h-5 w-5" />
                         </button>
-                        <div className="hidden group-hover:block absolute right-0 mt-0 w-48 bg-white rounded-md shadow-lg z-10">
+
+                        <div
+                          className={`absolute right-0 mt-0 w-48 bg-white rounded-md shadow-lg z-10 ${isOpen ? 'block' : 'hidden'
+                            }`}
+                        >
                           <button
                             onClick={() => {
                               setSelectedID(key.id);
                               setShowDeleteModal(true);
+                              setIsOpen(false); 
                             }}
                             className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                           >

From 77da19627c49799c41f6b7e23908873b1b00b754 Mon Sep 17 00:00:00 2001
From: Kunaldevxxx <khareji594@gmail.com>
Date: Thu, 12 Dec 2024 15:14:49 +0530
Subject: [PATCH 3/6] feat: Add validation for API key creation and implement
 dropdown toggle functionality in the API keys list

---
 src/app/platform/keys/create/page.tsx | 15 ++++++++---
 src/app/platform/keys/list/page.tsx   | 37 ++++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/app/platform/keys/create/page.tsx b/src/app/platform/keys/create/page.tsx
index adcf9c4..fa1107c 100644
--- a/src/app/platform/keys/create/page.tsx
+++ b/src/app/platform/keys/create/page.tsx
@@ -14,8 +14,16 @@ const Page = () => {
   const [notification, setNotification] = useState("");
   const [copied, setCopied] = useState(false);
   const [loading, setLoading] = useState(false);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (!name || !description || !expiryDays) {
+      setNotification("error");
+      console.error("Validation error: All fields are required.");
+      return;
+    }
+
     setLoading(true);
     try {
       const response = await fetch("/api/platform/keys", {
@@ -32,9 +40,10 @@ const Page = () => {
       }
 
       const data = await response.json();
-      setApiKey(data.key); // Use data.key to set the API key
+      setApiKey(data.key); 
       setNotification("success");
 
+     
       setName("");
       setDescription("");
       setExpiry("");
@@ -46,6 +55,7 @@ const Page = () => {
       setLoading(false);
     }
   };
+
   const handleCopy = () => {
     navigator.clipboard.writeText(apiKey);
     setCopied(true);
@@ -161,7 +171,6 @@ const Page = () => {
           </div>
         )}
 
-
         {notification === "error" && (
           <div className="mt-6 p-6 rounded-xl bg-red-50 border border-red-200">
             <div className="flex items-center space-x-3">
@@ -185,4 +194,4 @@ const Page = () => {
   );
 };
 
-export default Page;
+export default Page;
\ No newline at end of file
diff --git a/src/app/platform/keys/list/page.tsx b/src/app/platform/keys/list/page.tsx
index ba39650..1f748aa 100644
--- a/src/app/platform/keys/list/page.tsx
+++ b/src/app/platform/keys/list/page.tsx
@@ -15,6 +15,31 @@ interface ApiKey {
 }
 
 const Page = () => {
+  const [dropdownStates, setDropdownStates] = useState<{ [key: string]: boolean }>({});
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!(event.target as Element).closest('.dropdown-container')) {
+        closeAllDropdowns();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleDropdown = (id: string) => {
+    setDropdownStates((prevState) => ({
+      ...prevState,
+      [id]: !prevState[id], 
+    }));
+  };
+
+  const closeAllDropdowns = () => {
+    setDropdownStates({});
+  };
   const [selectedDescription, setSelectedDescription] = useState<string>("");
   const [selectedID, setSelectedID] = useState<string>("");
   const [showModal, setShowModal] = useState(false);
@@ -22,7 +47,6 @@ const Page = () => {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
   const [loading, setLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -151,23 +175,24 @@ const Page = () => {
                       {key.expiry ? new Date(key.expiry).toLocaleDateString() : "N/A"}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <div className="relative group">
+                    <div className="relative">
                         <button
                           className="p-1 hover:bg-gray-100 rounded"
-                          onClick={() => setIsOpen(!isOpen)} 
+                          onClick={() => toggleDropdown(key.id)}
                         >
                           <MoreVertical className="h-5 w-5" />
                         </button>
 
                         <div
-                          className={`absolute right-0 mt-0 w-48 bg-white rounded-md shadow-lg z-10 ${isOpen ? 'block' : 'hidden'
-                            }`}
+                          className={`absolute right-0 mt-0 w-48 bg-white rounded-md shadow-lg z-10 ${
+                            dropdownStates[key.id] ? "block" : "hidden"
+                          }`}
                         >
                           <button
                             onClick={() => {
                               setSelectedID(key.id);
                               setShowDeleteModal(true);
-                              setIsOpen(false); 
+                              closeAllDropdowns(); // Close dropdowns
                             }}
                             className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                           >

From 1612ac51ad685aab0f76ffd17237b6b62f506c54 Mon Sep 17 00:00:00 2001
From: Kunaldevxxx <khareji594@gmail.com>
Date: Thu, 12 Dec 2024 18:08:47 +0530
Subject: [PATCH 4/6] fix:Bug Fixed

---
 src/app/platform/keys/list/page.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/platform/keys/list/page.tsx b/src/app/platform/keys/list/page.tsx
index 1f748aa..93fc95b 100644
--- a/src/app/platform/keys/list/page.tsx
+++ b/src/app/platform/keys/list/page.tsx
@@ -175,10 +175,13 @@ const Page = () => {
                       {key.expiry ? new Date(key.expiry).toLocaleDateString() : "N/A"}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    <div className="relative">
+                    <div className="relative dropdown-container">
                         <button
                           className="p-1 hover:bg-gray-100 rounded"
-                          onClick={() => toggleDropdown(key.id)}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleDropdown(key.id);
+                          }}
                         >
                           <MoreVertical className="h-5 w-5" />
                         </button>
@@ -189,10 +192,11 @@ const Page = () => {
                           }`}
                         >
                           <button
-                            onClick={() => {
+                            onClick={(e) => {
+                              e.stopPropagation();
                               setSelectedID(key.id);
                               setShowDeleteModal(true);
-                              closeAllDropdowns(); // Close dropdowns
+                              closeAllDropdowns();
                             }}
                             className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                           >

From 513606579a6c2b9620e682654653f25fe866a83d Mon Sep 17 00:00:00 2001
From: Kunaldevxxx <khareji594@gmail.com>
Date: Sat, 14 Dec 2024 17:27:17 +0530
Subject: [PATCH 5/6] feat: Refactor Navbar component and optimize API key
 creation and listing with memoization and callbacks

---
 src/app/platform/components/navbar.tsx |  10 +-
 src/app/platform/keys/create/page.tsx  | 139 +++++++++++++------------
 src/app/platform/keys/list/page.tsx    |  21 ++--
 3 files changed, 89 insertions(+), 81 deletions(-)

diff --git a/src/app/platform/components/navbar.tsx b/src/app/platform/components/navbar.tsx
index 2fc6b83..4753186 100644
--- a/src/app/platform/components/navbar.tsx
+++ b/src/app/platform/components/navbar.tsx
@@ -1,3 +1,4 @@
+import React, { memo } from 'react';
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { UserCircleIcon } from "@heroicons/react/16/solid";
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
@@ -10,7 +11,7 @@ function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
-export default function Navbar() {
+const Navbar = () => {
   const navigation = [
     { name: 'API Keys', href: '/platform/keys', current: false },
   ]
@@ -31,8 +32,8 @@ export default function Navbar() {
             <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
               <span className="absolute -inset-0.5" />
               <span className="sr-only">Open main menu</span>
-              <Bars3Icon aria-hidden="true" className="block size-6 group-data-[open]:hidden" />
-              <XMarkIcon aria-hidden="true" className="hidden size-6 group-data-[open]:block" />
+              <Bars3Icon aria-hidden="true" className="block h-8 w-8 group-data-[open]:hidden" />
+              <XMarkIcon aria-hidden="true" className="hidden h-8 w-8 group-data-[open]:block" />
             </DisclosureButton>
           </div>
           <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
@@ -66,7 +67,7 @@ export default function Navbar() {
                 <MenuButton className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                   <span className="absolute -inset-1.5" />
                   <span className="sr-only">Open user menu</span>
-                  <UserCircleIcon className="h-8 w-8 text-gray-300" />
+                  <UserCircleIcon className="h-10 w-10 text-gray-300" />
                 </MenuButton>
               </div>
               <MenuItems
@@ -117,3 +118,4 @@ export default function Navbar() {
   )
 }
 
+export default memo(Navbar);
\ No newline at end of file
diff --git a/src/app/platform/keys/create/page.tsx b/src/app/platform/keys/create/page.tsx
index fa1107c..d1647f1 100644
--- a/src/app/platform/keys/create/page.tsx
+++ b/src/app/platform/keys/create/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { KeyIcon, ClipboardCopyIcon, CheckIcon } from "lucide-react";
 import MainHeader from "../../components/header";
 import Sidebar from "../../components/sidebar";
@@ -15,7 +15,7 @@ const Page = () => {
   const [copied, setCopied] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
 
     if (!name || !description || !expiryDays) {
@@ -43,7 +43,6 @@ const Page = () => {
       setApiKey(data.key); 
       setNotification("success");
 
-     
       setName("");
       setDescription("");
       setExpiry("");
@@ -54,13 +53,78 @@ const Page = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }, [name, description, expiryDays]);
 
-  const handleCopy = () => {
+  const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(apiKey);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
-  };
+  }, [apiKey]);
+
+  const formContent = useMemo(() => (
+    <form
+      onSubmit={handleSubmit}
+      className="mt-8 space-y-8 bg-white rounded-xl shadow-sm border border-gray-200 p-8"
+    >
+      <div className="space-y-6">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Name
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
+            placeholder="e.g. API Key"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Description
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
+            placeholder="What will this API key be used for?"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Expiration Period
+          </label>
+          <select
+            value={expiryDays}
+            onChange={(e) => setExpiry(e.target.value)}
+            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
+            required
+          >
+            <option value="">Select duration</option>
+            <option value="30">30 days</option>
+            <option value="60">60 days</option>
+            <option value="90">90 days</option>
+            <option value="365">1 year</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="pt-6 border-t border-gray-200"></div>
+      <button
+        type="submit"
+        disabled={loading}
+        className="w-full px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition duration-200 flex items-center justify-center space-x-2"
+      >
+        <KeyIcon className="h-5 w-5" />
+        <span>{loading ? "Generating..." : "Generate API Key"}</span>
+      </button>
+    </form>
+  ), [handleSubmit, name, description, expiryDays, loading]);
 
   return (
     <div className="flex min-h-screen bg-gray-50">
@@ -77,68 +141,7 @@ const Page = () => {
           </div>
         </MainHeader>
 
-        <form
-          onSubmit={handleSubmit}
-          className="mt-8 space-y-8 bg-white rounded-xl shadow-sm border border-gray-200 p-8"
-        >
-          <div className="space-y-6">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Name
-              </label>
-              <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
-                placeholder="e.g. API Key"
-                required
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Description
-              </label>
-              <textarea
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={3}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
-                placeholder="What will this API key be used for?"
-                required
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Expiration Period
-              </label>
-              <select
-                value={expiryDays}
-                onChange={(e) => setExpiry(e.target.value)}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
-                required
-              >
-                <option value="">Select duration</option>
-                <option value="30">30 days</option>
-                <option value="60">60 days</option>
-                <option value="90">90 days</option>
-                <option value="365">1 year</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="pt-6 border-t border-gray-200"></div>
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition duration-200 flex items-center justify-center space-x-2"
-          >
-            <KeyIcon className="h-5 w-5" />
-            <span>{loading ? "Generating..." : "Generate API Key"}</span>
-          </button>
-        </form>
+        {formContent}
 
         {notification === "success" && (
           <div className="mt-6 p-6 rounded-xl bg-green-50 border border-green-200">
diff --git a/src/app/platform/keys/list/page.tsx b/src/app/platform/keys/list/page.tsx
index 93fc95b..64b9293 100644
--- a/src/app/platform/keys/list/page.tsx
+++ b/src/app/platform/keys/list/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { KeyIcon, MoreVertical } from "lucide-react";
 import MainHeader from "../../components/header";
 import Sidebar from "../../components/sidebar";
@@ -81,7 +81,8 @@ const Page = () => {
     return id.length > 6 ? `${id.slice(0, 4)}...` : id;
   };
 
-  const handleDelete = async (id: string) => {
+  const handleDelete = useCallback(async (id: string) => {
+    setLoading(true);
     try {
       const response = await fetch("/api/platform/keys", {
         method: "DELETE",
@@ -98,15 +99,17 @@ const Page = () => {
 
       setApiKeys((prevKeys) => prevKeys.filter((key) => key.id !== id));
       setShowDeleteModal(false);
-    } catch (err) {
-      if (err instanceof Error) {
-        console.error("Error deleting API key:", err.message);
-      } else {
-        console.error("Unknown error occurred while deleting API key.");
-      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
     }
-  };
+  }, []);
 
+  useEffect(() => {
+    if (loading) {
+    }
+  }, [loading]);
 
   return (
     <div className="flex min-h-screen bg-gray-50">

From 11a8ea1f623dc4bbd9c5c8e7cf35a9687ebf57b5 Mon Sep 17 00:00:00 2001
From: Kunaldevxxx <khareji594@gmail.com>
Date: Sat, 14 Dec 2024 17:39:49 +0530
Subject: [PATCH 6/6] feat: Add SafeDep icon to layout and include SVG file

---
 public/safedep.svg | 1 +
 src/app/layout.tsx | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 public/safedep.svg

diff --git a/public/safedep.svg b/public/safedep.svg
new file mode 100644
index 0000000..39baf6e
--- /dev/null
+++ b/public/safedep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="98" zoomAndPan="magnify" viewBox="0 0 73.5 73.499996" height="98" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="e3e411ea6e"><path d="M 0 0 L 73.003906 0 L 73.003906 73.003906 L 0 73.003906 Z M 0 0 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#e3e411ea6e)"><path fill="#ffffff" d="M 0 0 L 73.003906 0 L 73.003906 73.003906 L 0 73.003906 Z M 0 0 " fill-opacity="1" fill-rule="nonzero"/><path fill="#4360e0" d="M 0 0 L 73.003906 0 L 73.003906 73.003906 L 0 73.003906 Z M 0 0 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#f7f7f7" d="M 42.21875 58.5 L 12.777344 58.5 L 12.777344 46.292969 L 15.433594 46.292969 C 15.671875 46.292969 15.855469 46.484375 15.855469 46.71875 L 15.855469 54.84375 C 15.855469 55.082031 16.050781 55.265625 16.28125 55.265625 L 38.628906 55.265625 C 38.863281 55.265625 39.054688 55.074219 39.054688 54.84375 L 39.054688 34.527344 C 39.054688 34.296875 38.871094 34.105469 38.640625 34.105469 C 29.761719 34.105469 12.769531 34.105469 12.769531 34.105469 C 12.769531 34.105469 12.769531 32.648438 12.769531 30.648438 C 12.777344 28.238281 13.492188 23.769531 15.269531 21.25 C 19.023438 15.941406 24.097656 13.9375 30.457031 14.988281 C 36.023438 15.914062 40.898438 21.171875 42.054688 26.78125 L 39.035156 26.78125 C 38.851562 26.78125 38.6875 26.664062 38.628906 26.492188 C 37.308594 22.542969 34.507812 19.378906 30.410156 18.308594 C 22.785156 16.308594 16.175781 22.3125 15.941406 30.214844 C 15.941406 30.457031 16.136719 30.648438 16.378906 30.648438 L 41.699219 30.648438 C 41.980469 30.648438 42.210938 30.871094 42.210938 31.152344 L 42.210938 58.480469 Z M 42.21875 58.5 " fill-opacity="1" fill-rule="nonzero"/><path fill="#f7f7f7" d="M 46.226562 58.34375 L 46.226562 55.796875 C 46.226562 55.59375 46.398438 55.421875 46.609375 55.402344 C 50.046875 55.101562 52.804688 53.65625 54.9375 51.097656 C 56.503906 49.234375 57.265625 46.929688 57.246094 44.585938 C 57.226562 41.707031 56.183594 39.277344 54.023438 37.164062 C 51.984375 35.175781 49.535156 34 46.621094 33.757812 C 46.398438 33.738281 46.226562 33.574219 46.226562 33.363281 L 46.226562 30.8125 C 50.800781 31.132812 55.226562 33.160156 57.902344 37.078125 C 61.203125 41.902344 61.347656 46.957031 58.113281 51.859375 C 55.429688 55.921875 51.425781 58.027344 46.226562 58.335938 Z M 46.226562 58.34375 " fill-opacity="1" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ad079fb..23ecbad 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,6 +20,9 @@ export const metadata: Metadata = {
   title: "SafeDep | Open Source Software Supply Chain Security Platform",
   description:
     "Welcome to SafeDep. Onboard to SafeDep cloud, generate authentication credentials and access platform APIs",
+  icons: {
+    icon: '/safedep.svg',
+  },
 };
 
 export default function RootLayout({