From eb37c2f6f8c6b3970bc57610282dffc11ebb1a57 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Wed, 4 Mar 2026 16:26:53 +0800
Subject: [PATCH] Added feature

---
 .../src/app/components/checkbox/CheckBox.jsx  |  5 +-
 .../app/components/fields/styles.module.css   | 10 ++++
 frontend/src/app/components/icons/copy.jsx    | 27 ++++++++++
 frontend/src/app/organization/add/page.jsx    |  5 +-
 .../app/organization/add/styles.module.css    |  7 +++
 .../projects/view/add-from-scratch/page.jsx   | 53 +++++++++++++++----
 frontend/src/app/projects/view/page.jsx       |  9 +++-
 .../src/app/projects/view/styles.module.css   | 29 ++++++++++
 8 files changed, 131 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/app/components/icons/copy.jsx

diff --git a/frontend/src/app/components/checkbox/CheckBox.jsx b/frontend/src/app/components/checkbox/CheckBox.jsx
index e1a10e6..bdf11ac 100644
--- a/frontend/src/app/components/checkbox/CheckBox.jsx
+++ b/frontend/src/app/components/checkbox/CheckBox.jsx
@@ -6,7 +6,7 @@ import CloseIcon from "../icons/close";
 import CheckedIcon from "../icons/switchIcons/checked";
 import UnCheckedIcon from "../icons/switchIcons/unchecked";
 
-const CustomCheckbox = ({ checked, onChange, id }) => {
+const CustomCheckbox = ({ checked, setChecked, id, ...props }) => {
   const [isChecked, setIsChecked] = useState(false);
   return (
     <>
@@ -17,8 +17,9 @@ const CustomCheckbox = ({ checked, onChange, id }) => {
         checked={checked}
         onChange={() => {
           setIsChecked(!isChecked);
-          onChange;
+          setChecked();
         }}
+        {...props}
       />
 
       <label htmlFor={id} className={styles.switch}>
diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css
index 1379e46..d197282 100644
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -45,3 +45,13 @@
   font-weight: 400;
   line-height: normal;
 }
+
+.input:disabled {
+  background: rgba(75, 79, 109, 0.15);
+  border: 1px solid #616583;
+  color: #85869b;
+  cursor: not-allowed;
+
+  pointer-events: none;
+  user-select: none;
+}
diff --git a/frontend/src/app/components/icons/copy.jsx b/frontend/src/app/components/icons/copy.jsx
new file mode 100644
index 0000000..cbfe135
--- /dev/null
+++ b/frontend/src/app/components/icons/copy.jsx
@@ -0,0 +1,27 @@
+const CopyIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M5.44531 4.16645C5.44531 3.82756 5.57994 3.50255 5.81957 3.26292C6.05919 3.02329 6.3842 2.88867 6.72309 2.88867H11.8342C12.1731 2.88867 12.4981 3.02329 12.7377 3.26292C12.9774 3.50255 13.112 3.82756 13.112 4.16645V9.27756C13.112 9.61645 12.9774 9.94146 12.7377 10.1811C12.4981 10.4207 12.1731 10.5553 11.8342 10.5553H6.72309C6.3842 10.5553 6.05919 10.4207 5.81957 10.1811C5.57994 9.94146 5.44531 9.61645 5.44531 9.27756V4.16645Z"
+      stroke="black"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M10.5553 10.5554V11.8332C10.5553 12.1721 10.4207 12.4971 10.1811 12.7368C9.94146 12.9764 9.61645 13.111 9.27756 13.111H4.16645C3.82756 13.111 3.50255 12.9764 3.26292 12.7368C3.02329 12.4971 2.88867 12.1721 2.88867 11.8332V6.72211C2.88867 6.38323 3.02329 6.05822 3.26292 5.81859C3.50255 5.57896 3.82756 5.44434 4.16645 5.44434H5.44423"
+      stroke="black"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CopyIcon;
diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx
index 7798d3a..b4dfe47 100644
--- a/frontend/src/app/organization/add/page.jsx
+++ b/frontend/src/app/organization/add/page.jsx
@@ -31,7 +31,8 @@ const AddCredentials = () => {
                           alt="badge image"
                         />
                       </div>
-                      <div className={styles.addIconContainer}>
+                      <input type="file" id="file" hidden accept="image/*" />
+                      <label className={styles.addIconContainer} for="file">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           width={20}
@@ -54,7 +55,7 @@ const AddCredentials = () => {
                             strokeLinejoin="round"
                           />
                         </svg>
-                      </div>
+                      </label>
                     </div>
                   </div>
                   <div className={styles.labels}>
diff --git a/frontend/src/app/organization/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css
index 5433706..7824d5a 100644
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -89,6 +89,13 @@
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
   border-radius: 100px;
   background: #696b95;
+  transition: all 0.1;
+  cursor: pointer;
+}
+.addIconContainer:hover {
+  border-radius: 100px;
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
 }
 .labels {
   display: flex;
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx
index ad9d51e..2eff235 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -16,6 +16,9 @@ const AddServices = () => {
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [disableScaling, setDisableScaling] = useState(true);
+  const [disableReadiness, setDisableReadiness] = useState(true);
+  const [disableLiveness, setDisableLiveness] = useState(true);
   return (
     <div className={globalStyle.section}>
       {triggerAddVariable && (
@@ -136,7 +139,10 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Auto Scaling</p>
-                        <CustomCheckbox id="scalingCheckBox" />
+                        <CustomCheckbox
+                          id="scalingCheckBox"
+                          setChecked={() => setDisableScaling(!disableScaling)}
+                        />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -145,11 +151,17 @@ const AddServices = () => {
                           <div>
                             <p>Minimum pods</p>
 
-                            <TextField placeHolder="1" />
+                            <TextField
+                              placeHolder="1"
+                              disabled={disableScaling}
+                            />
                           </div>
                           <div>
                             <p>Maximum pods</p>
-                            <TextField placeHolder="1" />
+                            <TextField
+                              placeHolder="1"
+                              disabled={disableScaling}
+                            />
                           </div>
                         </div>
                       </div>
@@ -161,7 +173,12 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Readiness</p>
-                        <CustomCheckbox id="readiNessCheckBox" />
+                        <CustomCheckbox
+                          id="readiNessCheckBox"
+                          setChecked={() =>
+                            setDisableReadiness(!disableReadiness)
+                          }
+                        />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -170,11 +187,17 @@ const AddServices = () => {
                           <div>
                             <p>Readiness Path</p>
 
-                            <TextField placeHolder="Enter Readiness path" />
+                            <TextField
+                              placeHolder="Enter Readiness path"
+                              disabled={disableReadiness}
+                            />
                           </div>
                           <div>
                             <p>Readiness Port</p>
-                            <TextField placeHolder="Enter Readiness port" />
+                            <TextField
+                              placeHolder="Enter Readiness port"
+                              disabled={disableReadiness}
+                            />
                           </div>
                         </div>
                       </div>
@@ -186,7 +209,13 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Liveness</p>
-                        <CustomCheckbox id="liveNessCheckBox" />
+                        <CustomCheckbox
+                          id="liveNessCheckBox"
+                          setChecked={() => {
+                            console.log("alsdjhfkjas");
+                            setDisableLiveness(!disableLiveness);
+                          }}
+                        />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -194,12 +223,18 @@ const AddServices = () => {
                         <div>
                           <div>
                             <p>Liveness Path</p>
-                            <TextField placeHolder="Enter liveness path" />
+                            <TextField
+                              placeHolder="Enter liveness path"
+                              disabled={disableLiveness}
+                            />
                           </div>
                           <div>
                             <p>Liveness Port</p>
 
-                            <TextField placeHolder="Enter liveness port" />
+                            <TextField
+                              placeHolder="Enter liveness port"
+                              disabled={disableLiveness}
+                            />
                           </div>
                         </div>
                       </div>
diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx
index 2587121..c18db89 100644
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -5,6 +5,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import AddServicesModal from "./AddServicesModal/AddServicesModal";
 import { useRouter, usePathname } from "next/navigation";
+import CopyIcon from "@/app/components/icons/copy";
 const AddProject = () => {
   const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
   const router = useRouter();
@@ -270,7 +271,13 @@ const AddProject = () => {
                             </div>
                           </div>
                         </td>
-                        <td>{services.image}</td>
+                        <td className={styles.imageText}>
+                          <div>
+                            <CopyIcon />
+                            <p>Copy</p>
+                          </div>
+                          <p> {services.image}</p>
+                        </td>
                         <td>{services.ingress}</td>
                         <td>{services.ports}</td>
                         <td>
diff --git a/frontend/src/app/projects/view/styles.module.css b/frontend/src/app/projects/view/styles.module.css
index ab3a65a..2e2466f 100644
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -151,3 +151,32 @@
 .iconButton:hover path {
   stroke: white;
 }
+.imageText {
+  transition: all 0.15s;
+  position: relative;
+}
+.tableContainer > .imageText {
+  padding: 0px;
+}
+.imageText > div {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  transform: translateX(50%) translateY(-50%);
+  border-radius: 100px;
+  background: #fff;
+  box-shadow: 0 0 10px 0 #000;
+  color: black;
+  opacity: 0;
+}
+.imageText > p {
+  height: 100%;
+}
+.imageText:hover > div {
+  opacity: 1;
+}