done create credentials

frontend/src/app/credentials/add/page.jsx

@@ -5,22 +5,30 @@ import globalStyle from "../../globalStyle.module.css";
 import createCredStyle from "./styles.module.css";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
+import Prompts from "@/app/components/prompts/Prompts";
 
 const Page = () => {
-  const fileInputRef = useRef(null);
+  const [selectedFile, setSelectedFile] = useState(null);
-  const [fileName, setFileName] = useState("");
+  // Click
-
-  const handleClick = () => {
-    fileInputRef.current.click();
-  };
-
   const handleFileChange = (e) => {
     const file = e.target.files[0];
     if (file) {
-      setFileName(file.name);
+      setSelectedFile(file);
-      console.log(file); // you can send this to backend later
+      console.log(file); //send this to backend later
     }
   };
+  // Drag/Drop
+  const handleDrop = (e) => {
+    e.preventDefault();
+
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -44,6 +52,7 @@ const Page = () => {
                 {/* Content */}
                 <div className={createCredStyle.credInputField}>
                   <TextField placeHolder="Enter Credential Name" />
+                  <Prompts show={false} />
                 </div>
               </div>
               {/* Upload File */}
@@ -51,24 +60,25 @@ const Page = () => {
                 {/* Label */}
                 <div className={createCredStyle.label}>
                   <p>Upload File</p>
+                  {/* Optional or Required */}
+                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p> */}{" "}
                 </div>
-
+                {/* Upload File */}
-                {/* Hidden File Input */}
+                <label
+                  className={createCredStyle.upload}
+                  onDragOver={handleDragOver}
+                  onDrop={handleDrop}
+                >
                   <input
                     type="file"
-                  ref={fileInputRef}
                     onChange={handleFileChange}
                     style={{ display: "none" }}
                   />
-
+                  {selectedFile ? (
-                {/* Custom Upload Box */}
+                    <p className={createCredStyle.chooseTxt}>
-                <div
+                      {/* Display file name only */}
-                  className={createCredStyle.upload}
+                      {selectedFile.name}
-                  onClick={handleClick}
+                    </p>
-                  style={{ cursor: "pointer" }}
-                >
-                  {fileName ? (
-                    <p>{fileName}</p>
                   ) : (
                     <>
                       <p className={createCredStyle.chooseTxt}>
@@ -79,7 +89,7 @@ const Page = () => {
                       </p>
                     </>
                   )}
-                </div>
+                </label>
               </div>
             </div>
           </div>

frontend/src/app/credentials/add/styles.module.css

@@ -77,8 +77,18 @@
   align-self: stretch;
   border-radius: 4px;
   border: 1px dashed #5980f1;
-  border: 1px dashed color(display-p3 0.3804 0.4959 0.9137);
+  border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
+  cursor: pointer;
 }
+.upload:hover {
+  background: rgba(129, 135, 255, 0.25);
+  background: color(display-p3 0.5098 0.5294 1 / 0.25);
+}
+.upload:hover .chooseTxt {
+  color: #fff;
+  color: color(display-p3 1 1 1);
+}
+
 .chooseTxt {
   color: #5980f1;
   color: color(display-p3 0.3804 0.4959 0.9137);
@@ -90,6 +100,7 @@
   line-height: normal;
   align-self: stretch;
 }
+
 .dragTxt {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);