done searchbar but not final

frontend/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.1.6",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "react-hook-form": "^7.71.2"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
@@ -6934,6 +6935,22 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.71.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
+      "integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

frontend/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "16.1.6",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

frontend/src/app/agents/[agentsId]/page.jsx

@@ -0,0 +1,202 @@
+"use client";
+import React, { useState } from "react";
+import TextField from "@/app/components/fields/textfield";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import globalStyle from "../../globalStyle.module.css";
+import createAgentStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+import useAgentForm from "@/app/hooks/useAgentForm";
+import Alert from "@/app/components/alerts/Alert";
+import Checkbox from "@/app/components/customCheckbox/Checkbox";
+import useIsMobile from "@/app/hooks/useIsMobile";
+
+const ViewAgentPage = () => {
+  const [useVpn, setUseVpn] = useState(false);
+  const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
+
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useAgentForm();
+
+  return (
+    <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create New Agent"
+        />
+      )}
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            topbarTitle="View Agent"
+            state="add"
+            requiredButtons={["edit", "back"]}
+          />
+          {/* Create agent Container */}
+          <form
+            className={createAgentStyle.formContainer}
+            id="form"
+            onSubmit={handleSubmit(onSubmit)}
+          >
+            <div className={createAgentStyle.createAgentContainer}>
+              <div className={createAgentStyle.div}></div>
+              <div className={createAgentStyle.inputMainContainer}>
+                {/* AGENT FORM */}
+                <div className={createAgentStyle.headerContainer}>
+                  <div className={createAgentStyle.headerTxt}>
+                    {isMobile ? "" : <p>Agent Details</p>}
+                  </div>
+                </div>
+                <div className={createAgentStyle.inputContainer}>
+                  <div className={createAgentStyle.labelContainer}>
+                    <p>Agent Name</p>
+                    {/* <p className={createAgentStyle.required}>*</p> */}
+                  </div>
+                  <TextField
+                    placeHolder="Enter agent name"
+                    {...register("agentName", { required: true })}
+                    hasError={!!errors.agentName}
+                  />
+                  <Prompts show={false} />
+                </div>
+                <div className={createAgentStyle.inputContainer}>
+                  <div className={createAgentStyle.labelContainer}>
+                    <p>Kubernetes API Proxy Name</p>
+                    {/* <p className={createAgentStyle.required}>*</p> */}
+                  </div>
+                  <TextField
+                    placeHolder="Enter proxy name"
+                    {...register("proxyName", { required: true })}
+                    hasError={!!errors.proxyName}
+                  />
+                  <Prompts show={false} />
+                </div>
+                <Checkbox
+                  checked={useVpn}
+                  onChange={(e) => setUseVpn(e.target.checked)}
+                  label="Use Tailscale VPN"
+                  description={
+                    <>
+                      Enable Tailscale for secure private networking. When
+                      enabled, <br />
+                      the endpoint will be automatically resolved from
+                      Tailscale.
+                    </>
+                  }
+                />
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.agentInputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
+                  </div>
+                )}
+              </div>
+
+              <div className={createAgentStyle.lokiContainer}>
+                <div className={createAgentStyle.headerContainer}>
+                  <div className={createAgentStyle.headerTxt}>
+                    <p>Loki Integration (Optional)</p>
+                  </div>
+                </div>
+                <Checkbox
+                  checked={enableLoki}
+                  onChange={(e) => setEnableLoki(e.target.checked)}
+                  label="Enable Loki Logging"
+                  description="Configure Loki for centralized logging and log streaming."
+                />
+
+                {enableLoki && (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Loki Endpoint</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="https://loki.project-moonshot.com/"
+                        {...register("endpoint", { required: true })}
+                        hasError={!!errors.endpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tenant Name</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="doks-dev"
+                        {...register("tenantName", { required: true })}
+                        hasError={!!errors.tenantName}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Password</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="Enter Password"
+                        {...register("password", { required: true })}
+                        hasError={!!errors.password}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewAgentPage;

frontend/src/app/agents/[agentsId]/styles.module.css

@@ -0,0 +1,141 @@
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.createAgentContainer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 16px;
+  flex: 1 1 auto;
+  padding-top: 48px;
+  height: calc(100vh - 100px - 70px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.inputMainContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 50px;
+  align-self: stretch;
+}
+.headerContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+}
+.headerTxt > p {
+  /* width: 163px; */
+  align-self: stretch;
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.inputContainer,
+.agentInputContainer {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.labelContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.labelContainer > p {
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.labelContainer > .required {
+  color: #cfb000;
+  font-weight: 600;
+}
+
+.lokiContainer {
+  display: flex;
+  width: 100%;
+  width: 548px;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+@media (max-width: 1024px) {
+  .createAgentContainer {
+    display: flex;
+    padding: 16px 16px; /*did some math 32 ang orig top*/
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 24px;
+    height: calc(100vh - 100px - 60px);
+    align-self: stretch;
+  }
+  .div {
+    display: none;
+  }
+  .inputMainContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 0px;
+    /* align-self: stretch;   */
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    width: 500px;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer,
+  .agentInputContainer {
+    width: 100%;
+  }
+  .agentInputContainer {
+    padding-top: 8px;
+  }
+  .headerTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}

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

@@ -0,0 +1,204 @@
+"use client";
+import React, { useState } from "react";
+import TextField from "@/app/components/fields/textfield";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import globalStyle from "../../globalStyle.module.css";
+import createAgentStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+import useAgentForm from "@/app/hooks/useAgentForm";
+import Alert from "@/app/components/alerts/Alert";
+import Checkbox from "@/app/components/customCheckbox/Checkbox";
+import useIsMobile from "@/app/hooks/useIsMobile";
+
+const AddAgentPage = () => {
+  const [useVpn, setUseVpn] = useState(false);
+  const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useAgentForm();
+
+  return (
+    <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create New Agent"
+        />
+      )}
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            topbarTitle="Create New Agent"
+            state="add"
+            requiredButtons={["title", "save"]}
+          />
+          {isMobile ? "" : <TopToolTip />}
+          {/* Create agent Container */}
+          <form
+            className={createAgentStyle.formContainer}
+            id="form"
+            onSubmit={handleSubmit(onSubmit)}
+          >
+            <div className={createAgentStyle.createAgentContainer}>
+              <div className={createAgentStyle.inputMainContainer}>
+                {/* AGENT FORM */}
+                <div className={createAgentStyle.headerContainer}>
+                  <div className={createAgentStyle.headerTxt}>
+                    {isMobile ? "" : <p>Agent Details</p>}
+                  </div>
+                </div>
+                <div className={createAgentStyle.inputContainer}>
+                  <div className={createAgentStyle.labelContainer}>
+                    <p>Agent Name</p>
+                    <p className={createAgentStyle.required}>*</p>
+                  </div>
+                  <TextField
+                    placeHolder="Enter agent name"
+                    {...register("agentName", { required: true })}
+                    hasError={!!errors.agentName}
+                  />
+                  <Prompts show={false} />
+                </div>
+                <div className={createAgentStyle.inputContainer}>
+                  <div className={createAgentStyle.labelContainer}>
+                    <p>Kubernetes API Proxy Name</p>
+                    <p className={createAgentStyle.required}>*</p>
+                  </div>
+                  <TextField
+                    placeHolder="Enter proxy name"
+                    {...register("proxyName", { required: true })}
+                    hasError={!!errors.proxyName}
+                  />
+                  <Prompts show={false} />
+                </div>
+                <Checkbox
+                  checked={useVpn}
+                  onChange={(e) => setUseVpn(e.target.checked)}
+                  label="Use Tailscale VPN"
+                  description={
+                    <>
+                      Enable Tailscale for secure private networking. When
+                      enabled, <br />
+                      the endpoint will be automatically resolved from
+                      Tailscale.
+                    </>
+                  }
+                />
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.agentInputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
+                  </div>
+                )}
+              </div>
+
+              <div className={createAgentStyle.lokiContainer}>
+                {/* Header */}
+                <div className={createAgentStyle.headerContainer}>
+                  <div className={createAgentStyle.headerTxt}>
+                    <p>Loki Integration (Optional)</p>
+                  </div>
+                </div>
+                <Checkbox
+                  checked={enableLoki}
+                  onChange={(e) => setEnableLoki(e.target.checked)}
+                  label="Enable Loki Logging"
+                  description="Configure Loki for centralized logging and log streaming."
+                />
+
+                {enableLoki && (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Loki Endpoint</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="https://loki.project-moonshot.com/"
+                        {...register("endpoint", { required: true })}
+                        hasError={!!errors.endpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tenant Name</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="doks-dev"
+                        {...register("tenantName", { required: true })}
+                        hasError={!!errors.tenantName}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Password</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="Enter Password"
+                        {...register("password", { required: true })}
+                        hasError={!!errors.password}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddAgentPage;

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

@@ -0,0 +1,134 @@
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.createAgentContainer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+  /* Ibalhin ni ang padding sa formcontainer maoang nasa figma */
+  padding-top: 48px;
+  gap: 16px;
+  flex: 1 1 auto;
+  height: calc(100vh - 100px - 5px - 110px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.inputMainContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.headerTxt > p {
+  /* width: 163px; */
+  align-self: stretch;
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.inputContainer,
+.agentInputContainer {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.labelContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.labelContainer > p {
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.labelContainer > .required {
+  color: #cfb000;
+  font-weight: 600;
+}
+
+.lokiContainer {
+  display: flex;
+  width: 548px;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+@media (max-width: 1024px) {
+  .createAgentContainer {
+    display: flex;
+    padding: 16px 16px; /*did some math 32 ang orig top*/
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: calc(100vh - 100px - 5px - 50px);
+    gap: 24px;
+    align-self: stretch;
+  }
+  .div {
+    display: none;
+  }
+  .inputMainContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 0px;
+    /* align-self: stretch;   */
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    width: 500px;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer,
+  .agentInputContainer {
+    width: 100%;
+  }
+  .agentInputContainer {
+    padding-top: 8px;
+  }
+  .headerTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}

frontend/src/app/agents/card/Card.jsx

@@ -0,0 +1,37 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer} {...props}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>{props?.data?.name}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Endpoint</p>
+          <p>{props?.data?.endPoint}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Type</p>
+          <p>{props?.data?.type}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Proxy Name</p>
+          <p>{props?.data?.proxyName}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Date Created</p>
+          <p>{props?.data?.dateCreated}</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/agents/card/styles.module.css

@@ -0,0 +1,42 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}

frontend/src/app/agents/page.jsx

@@ -1,8 +1,21 @@
+"use client";
+
 import React from "react";
 import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
+import { useRouter } from "next/navigation";
+import ActionButton from "../components/actionButton/ActionButton";
+import DeleteIcon from "../components/icons/delete";
+import ViewIcon from "../components/icons/view";
+import useIsMobile from "../hooks/useIsMobile";
+import Card from "./card/Card";
+import SearchIcon from "../components/icons/search";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
+
 const AgentsPage = () => {
+  const router = useRouter();
+
   const sampleData = [
     {
       name: "DOKS OneCB Dev",
@@ -89,11 +102,31 @@ const AgentsPage = () => {
       dateCreated: "2/11/2026",
     },
   ];
+  const isMobile = useIsMobile();
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add Agents" topbarTitle="Agents" />
+          <TopHeader
+            buttonText="Add Agents"
+            topbarTitle="Agents"
+            requiredButtons={["title", "add", "search"]}
+          />
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => {
+                return (
+                  <Card
+                    data={data}
+                    key={key}
+                    onClick={() => router.push(`/agents/${key}`)}
+                  />
+                );
+              })}
+          </div>
+
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead>
@@ -109,89 +142,33 @@ const AgentsPage = () => {
               </thead>
 
               <tbody>
-                {sampleData.map((org, index) => {
+                {!isMobile &&
-                  return (
+                  sampleData.map((org, index) => {
-                    <tr key={index}>
+                    return (
-                      <td>{org.name}</td>
+                      <tr
-                      <td>{org.endPoint}</td>
+                        key={index}
-                      <td>
+                        onClick={() => router.push(`/agents/${org.name}`)}
-                        <div className={styles.type}>{org.type}</div>
+                      >
-                      </td>
+                        <td>{org.name}</td>
-                      <td>{org.proxyName}</td>
+                        <td>{org.endPoint}</td>
-                      <td>{org.dateCreated}</td>
+                        <td>
-                      <td>
+                          <div className={styles.type}>{org.type}</div>
-                        <div className={styles.actions}>
+                        </td>
-                          <div>
+                        <td>{org.proxyName}</td>
-                            <button className={styles.iconButton}>
+                        <td>{org.dateCreated}</td>
-                              <svg
+                        <td>
-                                xmlns="http://www.w3.org/2000/svg"
+                          <div className={styles.actions}>
-                                width={20}
+                            <div>
-                                height={20}
+                              <ActionButton icon={<ViewIcon />} />
-                                viewBox="0 0 20 20"
+                            </div>
-                                fill="none"
+                            <div>
-                              >
+                              <ActionButton icon={<DeleteIcon />} />
-                                <path
+                            </div>
-                                  d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                              </svg>
-                            </button>
                           </div>
-                          <div>
+                        </td>
-                            <button className={styles.iconButton}>
+                      </tr>
-                              <svg
+                    );
-                                xmlns="http://www.w3.org/2000/svg"
+                  })}
-                                width={20}
-                                height={20}
-                                viewBox="0 0 20 20"
-                                fill="none"
-                              >
-                                <path
-                                  d="M3.61133 6.00684H16.3891"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M8.40234 9.20117V13.9928"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M11.5977 9.20117V13.9928"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                                <path
-                                  d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
-                                  stroke="#969AF9"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
               </tbody>
             </table>
           </div>

frontend/src/app/agents/styles.module.css

@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -65,32 +65,11 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
-.iconButton {
-  display: flex;
-  padding: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  aspect-ratio: 1/1;
-  background-color: rgba(255, 255, 255, 0);
-  outline: none;
-  border: 1px solid #959aff00;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.iconButton:hover {
-  border: 1px solid #959aff;
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-}
-.iconButton:hover path {
-  stroke: white;
-}
 .actions {
   display: flex;
   justify-content: start;
@@ -98,3 +77,49 @@
   gap: 12px;
   align-self: stretch;
 }
+.cardContainer {
+  display: flex;
+  padding: 0 16px;
+  padding-bottom: 50px;
+  height: calc(100vh - 170px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
+}
+.searchBarContainer {
+  display: flex;
+
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  position: relative;
+}
+.searchBarContainer > input {
+  width: 100%;
+  padding: 11px 12px;
+  padding-left: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  font-family: Inter;
+  font-size: 1rem;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.searchIcon {
+  position: absolute;
+}

frontend/src/app/components/actionButton/ActionButton.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const ActionButton = ({ icon }) => {
+  return <button className={styles.iconButton}>{icon}</button>;
+};
+
+export default ActionButton;

frontend/src/app/components/actionButton/styles.module.css

@@ -0,0 +1,21 @@
+.iconButton {
+  display: flex;
+  padding: 3px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}

frontend/src/app/components/alerts/Alert.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import BoxedCheckIcon from "../icons/boxedCheck";
+import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
+const Alert = (props) => {
+  const [hide, setHide] = useState(false);
+  const body = props?.body;
+  const handleHide = () => {
+    setHide(true);
+    setTimeout(() => {
+      props.setTriggerAlert(false);
+    }, 250);
+  };
+
+  const handleConfirm = () => {
+    setHide(true);
+    setTimeout(() => {
+      props.setTriggerAlert(false);
+      props?.setEditState?.(false);
+    }, 250);
+  };
+  return (
+    <div className={styles.container}>
+      <div
+        className={`${styles.alertContainer} ${hide ? styles.hide : styles.show}`}
+      >
+        <div className={styles.headers}>
+          <div className={styles.iconContainer}>
+            <BoxedCheckIcon />
+          </div>
+          <p>{props.title}</p>
+        </div>
+        <div className={styles.alertBody}>
+          <p>
+            {body ||
+              " You are about to add a new record. Please review the details before continuing. Do you want to proceed?"}
+          </p>
+        </div>
+        <div className={styles.actionButtons}>
+          <PrimaryButton text="Confirm" onClick={handleConfirm} />
+          <SecondaryButton text="Cancel" onClick={handleHide} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Alert;

frontend/src/app/components/alerts/styles.module.css

@@ -0,0 +1,110 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.alertContainer {
+  display: flex;
+  width: 449px;
+  padding: 24px 16px 16px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 14px;
+  background: #21232f;
+  animation-name: showAlert;
+  animation-duration: 0.3s;
+}
+.show {
+  animation-name: showAlert;
+  animation-duration: 0.3s;
+}
+.hide {
+  animation-name: hideAlert;
+  animation-duration: 0.3s;
+}
+
+@keyframes showAlert {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes hideAlert {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+}
+.headers {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
+.iconContainer {
+  display: flex;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 50%;
+  background: #2e305f;
+}
+.headers > p {
+  color: #fff;
+  font-family: Inter;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.5px;
+}
+.alertBody {
+  display: flex;
+  padding: 12px 0;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.body > p {
+  color: #fff;
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+.actionButtons {
+  display: flex;
+  padding-top: 12px;
+  justify-content: center;
+  align-items: flex-end;
+
+  gap: 10px;
+  align-self: stretch;
+}
+.actionButtons > button {
+  width: 100%;
+}

frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./styles.module.css";
+import AddIcon from "../../icons/add";
+const PrimaryButton = (props) => {
+  return (
+    <button className={styles.button} {...props} type="submit">
+      {props?.icon}
+      {props.text}
+    </button>
+  );
+};
+
+export default PrimaryButton;

frontend/src/app/components/buttons/primarybutton/styles.module.css

@@ -0,0 +1,20 @@
+.button {
+  display: flex;
+  padding: 8px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border: 0.5px solid #8187ff;
+  background: rgba(83, 89, 242, 0.25);
+  color: white;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.button:hover {
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}

frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./styles.module.css";
+const SecondaryButton = (props) => {
+  return (
+    <button className={styles.button} {...props}>
+      <p>{props.text}</p>
+    </button>
+  );
+};
+
+export default SecondaryButton;

frontend/src/app/components/buttons/secondaryButton/styles.module.css

@@ -0,0 +1,25 @@
+.button {
+  display: flex;
+  height: 36px;
+  padding: 9px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 0.5px solid #4e537e;
+  cursor: pointer;
+  color: #d2d3e1;
+  font-size: 1rem;
+
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+  background: transparent;
+}
+.button:hover {
+  border-radius: 6px;
+  border: 1px solid #8e98e7;
+  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
+}

frontend/src/app/components/checkbox/CheckBox.jsx

@@ -0,0 +1,43 @@
+"use client";
+import { useState } from "react";
+import CheckIcon from "../icons/check";
+import styles from "./styles.module.css";
+import CloseIcon from "../icons/close";
+import CheckedIcon from "../icons/switchIcons/checked";
+import UnCheckedIcon from "../icons/switchIcons/unchecked";
+
+const CustomCheckbox = ({ checked, setChecked, id, ...props }) => {
+  const [isChecked, setIsChecked] = useState(false);
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.check}
+        checked={checked}
+        onChange={() => {
+          setIsChecked(!isChecked);
+          setChecked();
+        }}
+        {...props}
+      />
+
+      <label htmlFor={id} className={styles.switch}>
+        <span className={styles.knob}>
+          {isChecked ? (
+            <CheckedIcon
+              width={16}
+              height={16}
+              color="#4F378A"
+              viewBox="0 0 20 20"
+            />
+          ) : (
+            <UnCheckedIcon width={16} height={16} color="#fff" />
+          )}
+        </span>
+      </label>
+    </>
+  );
+};
+
+export default CustomCheckbox;

frontend/src/app/components/checkbox/styles.module.css

@@ -0,0 +1,43 @@
+.switch {
+  display: flex;
+  width: 50px;
+  height: 30px;
+  align-items: center;
+  background-color: white;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 150px;
+  position: relative;
+  border: 2px solid #6d6d6d;
+  overflow: hidden;
+}
+
+.check {
+  display: none;
+}
+.knob {
+  width: 22px;
+  height: 22px;
+  background-color: #6d6d6d;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: all 0.15s ease-in-out;
+}
+.switch:hover > .knob {
+  box-shadow: 0 0 0px 5px #33333327;
+  background-color: #333;
+}
+
+.check:checked + .switch .knob {
+  transform: translateX(90%);
+  background-color: white;
+}
+
+/* Optional background change */
+.check:checked + .switch {
+  background-color: #8187ff;
+  border: 2px solid #8187ff;
+}

frontend/src/app/components/customCheckbox/Checkbox.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const Checkbox = ({ checked, onChange, label, description }) => {
+  return (
+    <>
+      {/* Checkbox */}
+      <div className={styles.checkboxMainContainer}>
+        <div className={styles.checkboxContainer}>
+          <div className={styles.checkbox}>
+            {/* Checkbox */}
+            <div className={styles.check}>
+              <input
+                type="checkbox"
+                checked={checked}
+                onChange={onChange}
+                className={styles.hiddenCheckbox}
+              />
+            </div>
+            {/* List */}
+            <div className={styles.list}>
+              <p className={styles.placeholderTxt}>{label}</p>
+              <p className={styles.secondaryTxt}>{description}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Checkbox;

frontend/src/app/components/customCheckbox/styles.module.css

@@ -0,0 +1,88 @@
+.checkboxMainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.checkbox {
+  display: flex;
+  padding: 10px 12px;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1 0 0;
+  border-radius: 8px;
+  background: #1d1e2a;
+}
+.check {
+  display: flex;
+  padding-top: 4px;
+  align-items: flex-start;
+  gap: 10px;
+}
+.hiddenCheckbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+
+  background: #fff;
+}
+.hiddenCheckbox:checked {
+  border-radius: 4px;
+  border: 1px solid #0067fd;
+  background: #0067fd;
+}
+.hiddenCheckbox::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0;
+}
+.hiddenCheckbox:checked::after {
+  opacity: 1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.placeholderTxt {
+  align-self: stretch;
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.08px;
+}
+.secondaryTxt {
+  align-self: stretch;
+  color: #697281;
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.07px;
+}

frontend/src/app/components/fields/styles.module.css

@@ -1,6 +1,6 @@
 .input {
   display: flex;
-  padding: 12px;
+  padding: 12px 16px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
@@ -12,7 +12,7 @@
   background-color: transparent;
   color: white;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   outline: none;
   font-style: normal;
   font-weight: 400;
@@ -21,17 +21,39 @@
 }
 .input:focus {
   border-radius: 6px;
-  border: 1px solid #a8aac1;
+  border: 1px solid #959aff;
   background: rgba(75, 79, 109, 0.25);
 }
+.input:focus::placeholder {
+  color: #4b4f6d;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 .input:hover {
   background: rgba(75, 79, 109, 0.25);
 }
 .input::placeholder {
   color: #85869b;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   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;
+}
+.error,
+.error:focus,
+.error:hover {
+  border: 1px solid #b43939;
+}

frontend/src/app/components/fields/textfield.jsx

@@ -1,8 +1,14 @@
-import React from "react";
+"use client";
 import styles from "./styles.module.css";
-const TextField = ({ placeHolder }) => {
+const TextField = ({ placeHolder, hasError, ...props }) => {
   return (
-    <input className={styles.input} type="text" placeholder={placeHolder} />
+    <input
+      className={`${styles.input} ${hasError ? styles.error : null}`}
+      type="text"
+      pattern="[a-z]*"
+      placeholder={placeHolder}
+      {...props}
+    />
   );
 };
 

frontend/src/app/components/header/Header.jsx

@@ -1,15 +0,0 @@
-"use client";
-
-import React from "react";
-import styles from "./styles.module.css";
-import HeaderDetails from "./components/HeaderDetails";
-
-const Header = () => {
-  return (
-    <div className={styles.mainContainer}>
-      <HeaderDetails />
-    </div>
-  );
-};
-
-export default Header;

frontend/src/app/components/header/components/HeaderDetails.jsx

@@ -1,281 +0,0 @@
-"use client";
-
-import React from "react";
-import orgStyle from "./Organization.module.css";
-import profileStyle from "./Profile.module.css";
-
-import { useState } from "react";
-
-const HeaderDetails = () => {
-  const orgList = [
-    { name: "Project Moonshot Inc." },
-    { name: "Organization X" },
-    { name: "Organization Y" },
-    { name: "Organization Z" },
-  ];
-  const [openOrgDropdown, setOpenOrgDropdown] = useState(false);
-  const [openProfileDropdown, setOpenProfileDropdown] = useState(false);
-  const [selectedOrg, setSelectedOrg] = useState(null);
-
-  const handleOrgSelect = (index) => {
-    setSelectedOrg(index);
-  };
-
-  return (
-    <>
-      {/* Organization and Dropdown Section*/}
-      <div className={orgStyle.organizationContainer}>
-        <div className={orgStyle.orgContainer}>
-          {/* Logo */}
-          <div className={orgStyle.orgLogo}></div>
-          <div className={orgStyle.orgName}>
-            <p>Organization</p>
-            <div className={orgStyle.dropdownContainer}>
-              {/* Dropdown Menu*/}
-              {openOrgDropdown && (
-                <div className={orgStyle.dropdown}>
-                  {/* Organization Header and Search  */}
-                  <div className={orgStyle.orgSearchContainer}>
-                    {/* Header */}
-                    <div className={orgStyle.createBtnContainer}>
-                      <p>Organization</p>
-                      <div className={orgStyle.createBtn}>
-                        <p>Create</p>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 16 16"
-                          fill="none"
-                        >
-                          <g clipPath="url(#clip0_548_2226)">
-                            <path
-                              d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
-                              stroke="#8287FF"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M8 4.8291V11.172"
-                              stroke="#8287FF"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M4.82812 8H11.171"
-                              stroke="#8287FF"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </g>
-                          <defs>
-                            <clipPath id="clip0_548_2226">
-                              <rect width="16" height="16" fill="white" />
-                            </clipPath>
-                          </defs>
-                        </svg>
-                      </div>
-                    </div>
-                    {/* Search */}
-                    <div className={orgStyle.srchInputContainer}>
-                      <div className={orgStyle.srchInputGroup}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="18"
-                          height="18"
-                          viewBox="0 0 18 18"
-                          fill="none"
-                        >
-                          <g clipPath="url(#clip0_23_1333)">
-                            <path
-                              d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
-                              stroke="#858699"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M16.8359 16.835L12.6172 12.6162"
-                              stroke="#858699"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </g>
-                          <defs>
-                            <clipPath id="clip0_23_1333">
-                              <rect width="18" height="18" fill="white" />
-                            </clipPath>
-                          </defs>
-                        </svg>
-                        <input
-                          className={orgStyle.placeholderTxt}
-                          type="text"
-                          name="search"
-                          id=""
-                          placeholder="Search"
-                        />
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Select Options */}
-                  <div className={orgStyle.optionsContainer}>
-                    {orgList.map((org, index) => {
-                      return (
-                        <div
-                          className={orgStyle.orgList}
-                          key={index}
-                          onClick={() => handleOrgSelect(index)}
-                        >
-                          <div
-                            className={`${orgStyle.iconTxt} ${index === selectedOrg ? orgStyle.active : ""}`}
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="20"
-                              height="20"
-                              viewBox="0 0 20 20"
-                              fill="none"
-                            >
-                              <path
-                                d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
-                                fill="#8287FF"
-                                style={{
-                                  fill: "#8287FF",
-                                  fillOpacity: 1,
-                                }}
-                              />
-                            </svg>
-                            <p>{org.name}</p>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
-              {/* Button */}
-              <div
-                className={orgStyle.dropdownBtn}
-                onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
-              >
-                <p>Project Moonshot Inc.</p>
-                <div>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="12"
-                    height="12"
-                    viewBox="0 0 12 12"
-                    fill="none"
-                  >
-                    <path
-                      d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
-                      stroke="#969AF9"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Profile Section */}
-      <div
-        className={profileStyle.profileContainer}
-        onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
-      >
-        {/* Profile */}
-        <div className={profileStyle.profileBadge}>
-          {/* Username and Role*/}
-          <div className={profileStyle.nameRole}>
-            <p className={profileStyle.userName}>JM Grills</p>
-            <p className={profileStyle.userRole}>Super Admin</p>
-          </div>
-
-          {/* User profile*/}
-          <div className={profileStyle.userImgContainer}>
-            <div className={profileStyle.userPic}></div>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
-                fill="#858699"
-              />
-            </svg>
-          </div>
-        </div>
-
-        {/* Dropdown */}
-        {openProfileDropdown && (
-          <div className={profileStyle.dropdownContainer}>
-            {/* Settings */}
-            <div className={profileStyle.settingsBtn}>
-              {/* Icon */}
-              <div className={profileStyle.btn}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={20}
-                  height={20}
-                  viewBox="0 0 20 20"
-                  fill="none"
-                >
-                  <path
-                    d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-              <p>Settings</p>
-            </div>
-            {/* Logout */}
-            <div className={profileStyle.logoutBtn}>
-              {/* Icon */}
-              <div className={profileStyle.btn}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={20}
-                  height={20}
-                  viewBox="0 0 20 20"
-                  fill="none"
-                >
-                  <path
-                    d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-              <p>Logout</p>
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default HeaderDetails;

frontend/src/app/components/header/styles.module.css

@@ -1,10 +0,0 @@
-.mainContainer {
-  display: flex;
-  height: 84px;
-  padding: 12px 24px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  border-bottom: 1px solid #2c2d3d;
-  border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
-}

frontend/src/app/components/icons/add.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+const AddIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10 4.41016V15.5907"
+        stroke="currentColor"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.41016 10H15.5907"
+        stroke="currentColor"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AddIcon;

frontend/src/app/components/icons/arrowDown.jsx

@@ -0,0 +1,28 @@
+const ArrowDownIcon = ({
+  width = 18,
+  height = 18,
+  color = "#4C4F6B",
+
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M1.55859 5.2793L9.00047 12.7212L16.4423 5.2793"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDownIcon;

frontend/src/app/components/icons/back.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const BackIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5 12H19"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 12L11 18"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 12L11 6"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BackIcon;

frontend/src/app/components/icons/boxedCheck.jsx

@@ -0,0 +1,35 @@
+const BoxedCheckIcon = ({
+  width = 24,
+  height = 24,
+  color = "white",
+  strokeWidth = 2,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 12L11 14L15 10"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BoxedCheckIcon;

frontend/src/app/components/icons/check.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const CheckIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M14.625 6.14583V16.9375L10 13.8542L5.375 16.9375V6.14583C5.375 5.32808 5.69985 4.54382 6.27809 3.96559C6.85632 3.38735 7.64058 3.0625 8.45833 3.0625H11.5417C12.3594 3.0625 13.1437 3.38735 13.7219 3.96559C14.3001 4.54382 14.625 5.32808 14.625 6.14583Z"
+        stroke="white"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;

frontend/src/app/components/icons/circledCheck.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const CircledChececkIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+        stroke="#016730"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CircledChececkIcon;

frontend/src/app/components/icons/clone.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const CloneIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.20898 9.76388C7.20898 9.08602 7.47826 8.43593 7.95758 7.95661C8.4369 7.47729 9.087 7.20801 9.76486 7.20801H18.0698C18.7476 7.20801 19.3977 7.47729 19.8771 7.95661C20.3564 8.43593 20.6257 9.08602 20.6257 9.76388V18.0688C20.6257 18.7467 20.3564 19.3968 19.8771 19.8761C19.3977 20.3554 18.7476 20.6247 18.0698 20.6247H9.76486C9.087 20.6247 8.4369 20.3554 7.95758 19.8761C7.47826 19.3968 7.20898 18.7467 7.20898 18.0688V9.76388Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.34483 16.5396C4.05062 16.3725 3.80591 16.1304 3.63557 15.838C3.46523 15.5456 3.37533 15.2134 3.375 14.875V5.29167C3.375 4.2375 4.2375 3.375 5.29167 3.375H14.875C15.5938 3.375 15.9848 3.74396 16.3125 4.33333"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.041 13.917H16.791"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.916 11.042V16.792"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloneIcon;

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;

frontend/src/app/components/icons/create.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const create = ({ width = "16", height = "16" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_548_2226)">
+        <path
+          d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
+          stroke="#8287FF"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8 4.8291V11.172"
+          stroke="#8287FF"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4.82812 8H11.171"
+          stroke="#8287FF"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_548_2226">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default create;

frontend/src/app/components/icons/download.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+const DownloadIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_306_15402)">
+        <path
+          d="M7.98047 13.6074L11.9983 17.6253L16.0162 13.6074"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M12 17.625V6.375"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M11.9992 22.4466C17.7686 22.4466 22.4456 17.7696 22.4456 12.0001C22.4456 6.23074 17.7686 1.55371 11.9992 1.55371C6.22976 1.55371 1.55273 6.23074 1.55273 12.0001C1.55273 17.7696 6.22976 22.4466 11.9992 22.4466Z"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_306_15402">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            style={{ fillOpacity: 1 }}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default DownloadIcon;

frontend/src/app/components/icons/edit.jsx

@@ -0,0 +1,33 @@
+const EditIcon = ({ width = 20, height = 20, color = "white", ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5.83398 5.83301H5.00065C4.55862 5.83301 4.1347 6.0086 3.82214 6.32116C3.50958 6.63372 3.33398 7.05765 3.33398 7.49967V14.9997C3.33398 15.4417 3.50958 15.8656 3.82214 16.1782C4.1347 16.4907 4.55862 16.6663 5.00065 16.6663H12.5007C12.9427 16.6663 13.3666 16.4907 13.6792 16.1782C13.9917 15.8656 14.1673 15.4417 14.1673 14.9997V14.1663"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.9875 5.48759C17.3157 5.15938 17.5001 4.71424 17.5001 4.25009C17.5001 3.78594 17.3157 3.34079 16.9875 3.01259C16.6593 2.68438 16.2142 2.5 15.75 2.5C15.2858 2.5 14.8407 2.68438 14.5125 3.01259L7.5 10.0001V12.5001H10L16.9875 5.48759Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.334 4.16699L15.834 6.66699"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EditIcon;

frontend/src/app/components/icons/ellipsis.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const ellipsis = ({ width = "24", height = "24", style }) => {
+  return (
+    <svg
+      className={style}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ellipsis;

frontend/src/app/components/icons/env.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+const EnviromentIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.084 15.3955H17.709"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.3965 13.083V17.708"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EnviromentIcon;

frontend/src/app/components/icons/file.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+const FileIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default FileIcon;

frontend/src/app/components/icons/hamburger.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const hamburger = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
+        fill="currentColor"
+        style={{ fillOpacity: 1 }}
+      />
+    </svg>
+  );
+};
+
+export default hamburger;

frontend/src/app/components/icons/key.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const KeyIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M14.875 9.12482H14.8846M16.3652 4.18269L19.8171 7.63461C20.0732 7.89064 20.2763 8.1946 20.4149 8.52913C20.5535 8.86367 20.6248 9.22223 20.6248 9.58434C20.6248 9.94644 20.5535 10.305 20.4149 10.6395C20.2763 10.9741 20.0732 11.278 19.8171 11.5341L17.2843 14.0669C17.0282 14.323 16.7243 14.5261 16.3897 14.6647C16.0552 14.8033 15.6966 14.8746 15.3345 14.8746C14.9724 14.8746 14.6139 14.8033 14.2793 14.6647C13.9448 14.5261 13.6408 14.323 13.3848 14.0669L13.0963 13.7785L6.81158 20.0632C6.49315 20.3816 6.07278 20.5777 5.62421 20.6171L5.4565 20.6248H4.33333C4.09861 20.6248 3.87205 20.5386 3.69664 20.3826C3.52123 20.2267 3.40917 20.0117 3.38171 19.7786L3.375 19.6665V18.5433C3.37511 18.0933 3.53354 17.6577 3.82254 17.3128L3.93658 17.1882L4.33333 16.7915H6.25V14.8748H8.16667V12.9581L10.2213 10.9035L9.93287 10.615C9.67681 10.359 9.47368 10.055 9.3351 9.7205C9.19651 9.38596 9.12518 9.0274 9.12518 8.66529C9.12518 8.30319 9.19651 7.94463 9.3351 7.61009C9.47368 7.27556 9.67681 6.97159 9.93287 6.71557L12.4657 4.18269C12.7218 3.92662 13.0257 3.7235 13.3603 3.58491C13.6948 3.44633 14.0534 3.375 14.4155 3.375C14.7776 3.375 15.1361 3.44633 15.4707 3.58491C15.8052 3.7235 16.1092 3.92662 16.3652 4.18269Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default KeyIcon;

frontend/src/app/components/icons/link.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const Link = ({ color = "#969AF9", width = "24", height = "24" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={height}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M9 15L15 9"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Link;

frontend/src/app/components/icons/logo.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+const LogoIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="37"
+      height="36"
+      viewBox="0 0 37 36"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M15.465 11.0234C13.7773 12.2949 12.0608 13.7836 10.3874 15.457C2.90925 22.9352 -0.879626 31.2707 1.92467 34.0751C4.72895 36.8792 13.0645 33.0904 20.5426 25.6123C22.2161 23.9388 23.7048 22.2224 24.9762 20.5347"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+      <path
+        d="M24.9762 20.5353C29.3864 26.3895 31.1822 31.8988 29.0053 34.0757C26.201 36.88 17.8655 33.091 10.3874 25.6129C2.90925 18.1348 -0.879626 9.79927 1.92467 6.99498C4.10141 4.81824 9.61081 6.61397 15.465 11.0241"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+      <path
+        d="M14.1504 20.5347C14.1504 21.261 14.7391 21.8497 15.4654 21.8497C16.1916 21.8497 16.7804 21.261 16.7804 20.5347C16.7804 19.8085 16.1916 19.2197 15.4654 19.2197C14.7391 19.2197 14.1504 19.8085 14.1504 20.5347Z"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+      <path
+        d="M20.7505 9.08429C19.9243 8.94056 19.9243 7.75456 20.7505 7.61083C23.7436 7.09012 26.124 4.81039 26.7737 1.84263L26.8236 1.61514C27.0022 0.798617 28.1649 0.793535 28.3509 1.60847L28.4114 1.87358C29.0849 4.82732 31.4661 7.0878 34.4509 7.60707C35.2814 7.75154 35.2814 8.94358 34.4509 9.08805C31.4661 9.60732 29.0849 11.8678 28.4114 14.8216L28.3509 15.0867C28.1649 15.9016 27.0022 15.8965 26.8236 15.08L26.7737 14.8525C26.124 11.8848 23.7436 9.605 20.7505 9.08429Z"
+        stroke="#969AF9"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeOpacity: 1 }}
+        fill="none"
+      />
+    </svg>
+  );
+};
+
+export default LogoIcon;

frontend/src/app/components/icons/logout.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const logout = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default logout;

frontend/src/app/components/icons/manageEnv.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const ManageEnvIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M6.25065 11.9997C5.74232 11.9997 5.25481 11.7977 4.89536 11.4383C4.53592 11.0789 4.33398 10.5913 4.33398 10.083C4.33398 9.57468 4.53592 9.08716 4.89536 8.72772C5.25481 8.36828 5.74232 8.16634 6.25065 8.16634M6.25065 11.9997C6.75898 11.9997 7.24649 11.7977 7.60594 11.4383C7.96538 11.0789 8.16732 10.5913 8.16732 10.083C8.16732 9.57468 7.96538 9.08716 7.60594 8.72772C7.24649 8.36828 6.75898 8.16634 6.25065 8.16634M6.25065 11.9997L6.25065 19.6663M6.25065 8.16634L6.25065 4.33301M13.1497 14.2987C12.9066 14.1167 12.6238 13.9951 12.3246 13.9439C12.0253 13.8926 11.7182 13.9132 11.4284 14.0039C11.1387 14.0946 10.8746 14.2528 10.658 14.4655C10.4414 14.6783 10.2784 14.9394 10.1825 15.2275C10.0865 15.5156 10.0604 15.8223 10.1063 16.1225C10.1521 16.4226 10.2686 16.7075 10.4462 16.9538C10.6237 17.2001 10.8573 17.4007 11.1275 17.5391C11.3978 17.6774 11.697 17.7496 12.0007 17.7497V19.6663M12.0007 4.33301V13.9163M17.7507 9.12467C17.2423 9.12467 16.7548 8.92274 16.3954 8.5633C16.0359 8.20385 15.834 7.71634 15.834 7.20801C15.834 6.69968 16.0359 6.21216 16.3954 5.85272C16.7548 5.49328 17.2423 5.29134 17.7507 5.29134M17.7507 9.12467C18.259 9.12467 18.7465 8.92274 19.1059 8.5633C19.4654 8.20385 19.6673 7.71634 19.6673 7.20801C19.6673 6.69968 19.4654 6.21216 19.1059 5.85272C18.7465 5.49328 18.259 5.29134 17.7507 5.29134M17.7507 9.12467V11.5205M17.7507 5.29134V4.33301M18.7099 20.6247C18.4582 20.6247 18.209 20.5751 17.9765 20.4788C17.7439 20.3825 17.5326 20.2413 17.3547 20.0633C17.1767 19.8853 17.0355 19.674 16.9392 19.4415C16.8429 19.2089 16.7933 18.9597 16.7933 18.708C16.7933 18.4563 16.8429 18.2071 16.9392 17.9745C17.0355 17.742 17.1767 17.5307 17.3547 17.3527C17.5326 17.1747 17.7439 17.0336 17.9765 16.9372C18.209 16.8409 18.4582 16.7913 18.7099 16.7913M18.7099 20.6247C18.9616 20.6247 19.2109 20.5751 19.4434 20.4788C19.676 20.3825 19.8873 20.2413 20.0652 20.0633C20.2432 19.8853 20.3844 19.674 20.4807 19.4415C20.577 19.2089 20.6266 18.9597 20.6266 18.708C20.6266 18.4563 20.577 18.2071 20.4807 17.9745C20.3844 17.742 20.2432 17.5307 20.0652 17.3527C19.8873 17.1747 19.676 17.0336 19.4434 16.9372C19.2109 16.8409 18.9616 16.7913 18.7099 16.7913M18.7099 20.6247V22.0622M18.7099 16.7913V15.3538M21.6147 17.0309L20.3698 17.7497M17.0511 19.6663L15.8052 20.3851M15.8052 17.0309L17.0511 17.7497M20.3698 19.6663L21.6156 20.3851"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ManageEnvIcon;

frontend/src/app/components/icons/menu.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const MenuIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M9.20117 9.99978C9.20117 10.1047 9.22183 10.2085 9.26196 10.3054C9.3021 10.4023 9.36092 10.4903 9.43508 10.5645C9.50924 10.6386 9.59728 10.6975 9.69417 10.7376C9.79106 10.7777 9.89491 10.7984 9.99978 10.7984C10.1047 10.7984 10.2085 10.7777 10.3054 10.7376C10.4023 10.6975 10.4903 10.6386 10.5645 10.5645C10.6386 10.4903 10.6975 10.4023 10.7376 10.3054C10.7777 10.2085 10.7984 10.1047 10.7984 9.99978C10.7984 9.89491 10.7777 9.79106 10.7376 9.69417C10.6975 9.59728 10.6386 9.50924 10.5645 9.43508C10.4903 9.36092 10.4023 9.3021 10.3054 9.26196C10.2085 9.22183 10.1047 9.20117 9.99978 9.20117C9.89491 9.20117 9.79106 9.22183 9.69417 9.26196C9.59728 9.3021 9.50924 9.36092 9.43508 9.43508C9.36092 9.50924 9.3021 9.59728 9.26196 9.69417C9.22183 9.79106 9.20117 9.89491 9.20117 9.99978Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.20117 15.5906C9.20117 15.6955 9.22183 15.7993 9.26196 15.8962C9.3021 15.9931 9.36092 16.0811 9.43508 16.1553C9.50924 16.2295 9.59728 16.2883 9.69417 16.3284C9.79106 16.3686 9.89491 16.3892 9.99978 16.3892C10.1047 16.3892 10.2085 16.3686 10.3054 16.3284C10.4023 16.2883 10.4903 16.2295 10.5645 16.1553C10.6386 16.0811 10.6975 15.9931 10.7376 15.8962C10.7777 15.7993 10.7984 15.6955 10.7984 15.5906C10.7984 15.4857 10.7777 15.3819 10.7376 15.285C10.6975 15.1881 10.6386 15.1001 10.5645 15.0259C10.4903 14.9517 10.4023 14.8929 10.3054 14.8528C10.2085 14.8126 10.1047 14.792 9.99978 14.792C9.89491 14.792 9.79106 14.8126 9.69417 14.8528C9.59728 14.8929 9.50924 14.9517 9.43508 15.0259C9.36092 15.1001 9.3021 15.1881 9.26196 15.285C9.22183 15.3819 9.20117 15.4857 9.20117 15.5906Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.20117 4.40994C9.20117 4.51481 9.22183 4.61866 9.26196 4.71555C9.3021 4.81245 9.36092 4.90048 9.43508 4.97464C9.50924 5.0488 9.59728 5.10763 9.69417 5.14776C9.79106 5.18789 9.89491 5.20855 9.99978 5.20855C10.1047 5.20855 10.2085 5.18789 10.3054 5.14776C10.4023 5.10763 10.4903 5.0488 10.5645 4.97464C10.6386 4.90048 10.6975 4.81245 10.7376 4.71555C10.7777 4.61866 10.7984 4.51481 10.7984 4.40994C10.7984 4.30506 10.7777 4.20122 10.7376 4.10432C10.6975 4.00743 10.6386 3.91939 10.5645 3.84524C10.4903 3.77108 10.4023 3.71225 10.3054 3.67212C10.2085 3.63198 10.1047 3.61133 9.99978 3.61133C9.89491 3.61133 9.79106 3.63198 9.69417 3.67212C9.59728 3.71225 9.50924 3.77108 9.43508 3.84524C9.36092 3.91939 9.3021 4.00743 9.26196 4.10432C9.22183 4.20122 9.20117 4.30506 9.20117 4.40994Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MenuIcon;

frontend/src/app/components/icons/outlineDownload.jsx

@@ -0,0 +1,26 @@
+const OutlineDownloadIcon = ({
+  width = 24,
+  height = 24,
+  color = "#D2D3E0",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.33398 16.7913V18.708C4.33398 19.2163 4.53592 19.7039 4.89536 20.0633C5.25481 20.4227 5.74232 20.6247 6.25065 20.6247H17.7507C18.259 20.6247 18.7465 20.4227 19.1059 20.0633C19.4654 19.7039 19.6673 19.2163 19.6673 18.708V16.7913M7.20898 11.0413L12.0007 15.833M12.0007 15.833L16.7923 11.0413M12.0007 15.833V4.33301"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default OutlineDownloadIcon;

frontend/src/app/components/icons/plus.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+const plus = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M12 5.29199V18.7087"
+          stroke="#333649"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M5.29102 12H18.7077"
+          stroke="#333649"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </>
+  );
+};
+
+export default plus;

frontend/src/app/components/icons/publish.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const PublishIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M20 8L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L6 4C5.46957 4 4.96086 4.21072 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6L4 8M17 14L12 9M12 9L7 14M12 9L12 21"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default PublishIcon;

frontend/src/app/components/icons/restart.jsx

@@ -0,0 +1,26 @@
+const RestartIcon = ({
+  width = 24,
+  height = 24,
+  color = "#D2D3E0",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M19.6673 11.0417C19.4329 9.35521 18.6506 7.79259 17.4408 6.59452C16.2309 5.39645 14.6608 4.62938 12.9721 4.41149C11.2834 4.1936 9.56996 4.53697 8.09564 5.3887C6.62132 6.24043 5.46793 7.55328 4.81315 9.125M4.33398 5.29167V9.125H8.16732M4.33398 12.9583C4.56835 14.6448 5.35071 16.2074 6.56054 17.4055C7.77037 18.6036 9.34055 19.3706 11.0292 19.5885C12.7179 19.8064 14.4313 19.463 15.9057 18.6113C17.38 17.7596 18.5334 16.4467 19.1882 14.875M19.6673 18.7083V14.875H15.834"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RestartIcon;

frontend/src/app/components/icons/robot.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const RobotIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8.16667 3.375L10.0833 6.25M15.8333 3.375L13.9167 6.25M9.125 12.9583V11.0417M14.875 11.0417V12.9583M3.375 10.0833C3.375 9.06667 3.77887 8.09165 4.49776 7.37276C5.21665 6.65387 6.19167 6.25 7.20833 6.25H16.7917C17.8083 6.25 18.7834 6.65387 19.5022 7.37276C20.2211 8.09165 20.625 9.06667 20.625 10.0833V15.8333C20.625 16.85 20.2211 17.825 19.5022 18.5439C18.7834 19.2628 17.8083 19.6667 16.7917 19.6667H7.20833C6.19167 19.6667 5.21665 19.2628 4.49776 18.5439C3.77887 17.825 3.375 16.85 3.375 15.8333V10.0833Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RobotIcon;

frontend/src/app/components/icons/search.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const SearchIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
+        stroke="currentColor" //858699
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default SearchIcon;

frontend/src/app/components/icons/settings.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const settings = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default settings;

frontend/src/app/components/icons/sun.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const sun = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
+        stroke="white"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
+        stroke="white"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default sun;

frontend/src/app/components/icons/switchIcons/checked.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const CheckedIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CheckedIcon;

frontend/src/app/components/icons/switchIcons/unchecked.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const UnCheckedIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+
+  viewBox = "0 0 28 28",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.7077 7.29199L7.29102 20.7087"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.29102 7.29199L20.7077 20.7087"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UnCheckedIcon;

frontend/src/app/components/icons/toastClose.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const ToastCloseIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M15 5L5 15M5 5L15 15"
+        stroke="#016730"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ToastCloseIcon;

frontend/src/app/components/icons/update.jsx

@@ -0,0 +1,35 @@
+const UpdateIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M16.25 9.2188C16.0589 7.84397 15.4211 6.57009 14.4349 5.5934C13.4486 4.61671 12.1686 3.99139 10.7919 3.81376C9.4153 3.63613 8.01845 3.91605 6.81656 4.61039C5.61467 5.30474 4.67441 6.375 4.14062 7.6563M3.75 4.5313V7.6563H6.875"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.75 10.7812C3.94106 12.1561 4.57885 13.43 5.56513 14.4066C6.5514 15.3833 7.83144 16.0087 9.20807 16.1863C10.5847 16.3639 11.9815 16.084 13.1834 15.3897C14.3853 14.6953 15.3256 13.6251 15.8594 12.3437M16.25 15.4687V12.3437H13.125"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UpdateIcon;

frontend/src/app/components/icons/viewLogs.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const ViewLogsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M14.5 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V12M6 5L4 7L6 9M10 9L12 7L10 5"
+        stroke="#D2D3E0"
+        style={{ stroke: "#D2D3E0", strokeOpacity: 1 }}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ViewLogsIcon;

frontend/src/app/components/icons/warning.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const WarningIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+        stroke="#CCA04F"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 6.66699V10.0003"
+        stroke="#CCA04F"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 13.333H10.0083"
+        stroke="#CCA04F"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default WarningIcon;

frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import SearchIcon from "../icons/search";
+
+const MobileSearchBar = (props) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <form className={`${styles.searchBarContainer} ${open ? styles.open : ""}`}>
+      <input type="text" placeholder="Search" className={styles.searchBar} />
+      <div
+        className={styles.searchBtn}
+        onClick={() => setOpen((open) => !open)}
+      >
+        <SearchIcon />
+      </div>
+    </form>
+  );
+};
+
+export default MobileSearchBar;

frontend/src/app/components/mobileSearchBar/styles.module.css

@@ -0,0 +1,68 @@
+.searchBarContainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  position: relative;
+  width: 100%;
+  border: 1px solid #31324a00;
+  transition: width 0.35s ease;
+}
+.searchBar:focus-within {
+  background: #292a36;
+  border-radius: 6px;
+}
+
+.open {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+}
+
+.searchBar {
+  width: 100%;
+  padding: 11px 12px;
+  padding-left: 40px;
+  background-color: transparent;
+  border: none;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  outline: none;
+  color: #85869b;
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  caret-color: #575bc7;
+}
+.searchBar::placeholder {
+  color: #85869b;
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.open > .searchBar {
+  opacity: 1;
+  transition-delay: 0.1s;
+}
+.searchBtn {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-40%);
+  cursor: pointer;
+  color: #858699;
+}
+.searchBtn:hover {
+  color: #959aff;
+}

frontend/src/app/components/mobileToggleTab/Toggle.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styles from "./styles.module.css";
+import MobileSearchBar from "@/app/components/mobileSearchBar/MobileSearchBar";
+import useIsMobile from "@/app/hooks/useIsMobile";
+import PlusIcon from "../icons/plus";
+
+const Toggle = ({ tabs = [], activeTab, onChange }) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.toggleContainer}>
+      <div className={styles.buttonToggles}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            className={`${styles.buttonStyle} ${activeTab === tab.value ? styles.active : ""}`}
+            onClick={() => onChange(tab.value)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {isMobile && activeTab === "permissions" && (
+        <div className={styles.container}>
+          <div className={styles.searchBar}>
+            <MobileSearchBar />
+          </div>
+
+          <button>
+            <PlusIcon />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Toggle;

frontend/src/app/components/mobileToggleTab/styles.module.css

@@ -0,0 +1,61 @@
+.toggleContainer {
+  display: none;
+}
+
+@media (max-width: 950px) {
+  .toggleContainer {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 16px;
+  }
+  .buttonToggles {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+  }
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 0 0;
+    padding: 8px 0;
+  }
+  .searchBar {
+    width: 100%;
+  }
+
+  .container > button {
+    display: flex;
+    padding: 8px;
+    border: none;
+    justify-content: center;
+    align-items: end;
+    gap: 12px;
+    border-radius: 6px;
+    background: #27293b;
+  }
+
+  .buttonStyle {
+    display: flex;
+    background: none;
+    border: none;
+    padding: 24px 4px 16px 4px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 5px;
+    color: #85869b;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0.18px;
+  }
+  .active {
+    border-bottom: 1px solid #959aff;
+    color: #959aff;
+  }
+}

frontend/src/app/components/navbar/Navbar.jsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import NavLeft from "./navleft/Header";
+import NavRight from "./navright/Profile";
+import HamburgerIcon from "../../components/icons/hamburger";
+import useIsMobile from "@/app/hooks/useIsMobile";
+import LogoIcon from "../icons/logo";
+import HomeIcon from "../icons/home";
+import OrganizationIcon from "../icons/organization";
+import ProjectIcon from "../icons/project";
+import UserIcon from "../icons/user";
+import RolesIcon from "../icons/roles";
+import CredentialsIcon from "../icons/credentials";
+import AgentIcon from "../icons/agent";
+import DownloadIcon from "../icons/download";
+import useNavigations from "@/app/hooks/useNagivation";
+import { usePathname } from "next/navigation";
+
+const Navbar = () => {
+  const [triggerDropDown, setTriggerDropDown] = useState(false);
+  const {
+    navToAgents,
+    navToCredentials,
+    navToProject,
+    navToRoles,
+    navToHome,
+    navToOrganization,
+    navToUsers,
+  } = useNavigations(setTriggerDropDown);
+
+  const pathname = usePathname();
+
+  const isMobile = useIsMobile();
+  return (
+    <div
+      className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
+    >
+      {/* Mobile Hamburger Button */}
+      <div className={styles.mobileHamburger}>
+        <div className={styles.hamburgerMenu}>
+          <HamburgerIcon
+            onClick={() => setTriggerDropDown(!triggerDropDown)}
+            className={triggerDropDown ? styles.active : ""}
+          />
+          {triggerDropDown && (
+            <div className={styles.dropDownMenu}>
+              <div className={styles.headings}>
+                <div>
+                  <div className={styles.logoContainer}>
+                    <LogoIcon />
+                  </div>
+                  <div className={styles.info}>
+                    <p>Internal Developer Platform</p>
+                    <p>By Project Moonshot Inc.</p>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.navs}>
+                <div className={styles.nav} onClick={navToHome}>
+                  <HomeIcon />
+                  <p>Home</p>
+                </div>
+                <div className={styles.nav} onClick={navToOrganization}>
+                  <OrganizationIcon />
+                  <p>Organization</p>
+                </div>
+                <div className={styles.nav} onClick={navToProject}>
+                  <ProjectIcon />
+                  <p>Project</p>
+                </div>
+                <div className={styles.nav} onClick={navToUsers}>
+                  <UserIcon />
+                  <p>Users</p>
+                </div>
+                <div className={styles.nav} onClick={navToRoles}>
+                  <RolesIcon />
+                  <p>Roles</p>
+                </div>
+                <div className={styles.nav} onClick={navToCredentials}>
+                  <CredentialsIcon />
+                  <p>Credentials</p>
+                </div>
+                <div className={styles.nav} onClick={navToAgents}>
+                  <AgentIcon />
+                  <p>Agents</p>
+                </div>
+              </div>
+              <div className={styles.footer}>
+                <div>
+                  <div>
+                    <p>Download ICTL v3</p>
+                    <DownloadIcon />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <NavLeft />
+      </div>
+      {/* Mobile Menu Button */}
+      <NavRight />
+    </div>
+  );
+};
+
+export default Navbar;

frontend/src/app/components/navbar/navleft/Header.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import HeaderDropdown from "./HeaderDropdown";
+import styles from "./styles.module.css";
+import ArrowDownIcon from "../../icons/arrowDown";
+import useIsMobile from "@/app/hooks/useIsMobile";
+
+const Header = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState(0);
+  const sampleData = [
+    { name: "Project Moonshot Inc." },
+    { name: "Organization X" },
+    { name: "Organization Y" },
+    { name: "Organization Z" },
+  ];
+
+  const isMobile = useIsMobile();
+  return (
+    <>
+      {/* Organization Header */}
+      <div className={styles.organizationContainer}>
+        <div
+          className={styles.orgContainer}
+          onClick={isMobile ? () => setOpen(!open) : null} //toggler entire header
+        >
+          {/* Logo */}
+          <div className={styles.orgLogo}></div>
+          <div className={styles.orgName}>
+            <p
+              className={`${styles.orgNameText} ${isMobile && open ? styles.orgNameActive : ""}`}
+            >
+              Organization
+            </p>
+            <div className={styles.dropdownContainer}>
+              {/* Dropdown Menu*/}
+              {open && (
+                <HeaderDropdown
+                  setOpen={setOpen}
+                  sampleData={sampleData}
+                  selectedOrg={selectedOrg}
+                  setSelectedOrg={setSelectedOrg}
+                />
+              )}
+              {/* Toggle Button */}
+              <div
+                className={styles.dropdownBtn}
+                onClick={() => {
+                  if (!isMobile) setOpen(!open); //toggle only org
+                }}
+              >
+                <p
+                  className={`${styles.projectName} ${isMobile && open ? styles.projectNameActive : ""}`}
+                >
+                  {sampleData[selectedOrg].name}
+                </p>
+                <div
+                  className={`${styles.arrowIcon} ${isMobile && open ? styles.arrowRotate : ""}`}
+                >
+                  <ArrowDownIcon width={12} height={12} color="#969AF9" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Header;

frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import CreateIcon from "../../icons/create";
+import styles from "./styles.module.css";
+import useIsMobile from "@/app/hooks/useIsMobile";
+import SearchIcon from "../../icons/search";
+
+const HeaderDropdown = ({
+  setOpen,
+  sampleData,
+  selectedOrg,
+  setSelectedOrg,
+}) => {
+  const isMobile = useIsMobile();
+
+  const handleOrgSelect = (index) => {
+    setSelectedOrg(index);
+    setOpen(false);
+  };
+
+  return (
+    <div className={styles.dropdown}>
+      {/* Organization Header and Search  */}
+      <div className={styles.orgSearchContainer}>
+        {/* Header */}
+        <div className={styles.createBtnContainer}>
+          <p>Organization</p>
+          <div className={styles.createBtn}>
+            <p>Create</p>
+            {isMobile ? <CreateIcon width="24" height="24" /> : <CreateIcon />}
+          </div>
+        </div>
+        {/* Search */}
+        <div className={styles.srchInputContainer}>
+          <form className={styles.srchInputGroup}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+              fill="none"
+            >
+              <g clipPath="url(#clip0_23_1333)">
+                <path
+                  d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
+                  stroke="#858699"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M16.8359 16.835L12.6172 12.6162"
+                  stroke="#858699"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_23_1333">
+                  <rect width="18" height="18" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            <input
+              className={styles.placeholderTxt}
+              type="text"
+              name="search"
+              id=""
+              placeholder="Search"
+            />
+          </form>
+        </div>
+      </div>
+
+      {/* Select Options */}
+      <div className={styles.optionsContainer}>
+        {sampleData.map((org, index) => {
+          return (
+            <div
+              className={styles.orgList}
+              key={index}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleOrgSelect(index);
+              }}
+            >
+              <div
+                className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
+                    fill="#8287FF"
+                    style={{
+                      fill: "#8287FF",
+                      fillOpacity: 1,
+                    }}
+                  />
+                </svg>
+                <p>{org.name}</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default HeaderDropdown;

frontend/src/app/components/navbar/navleft/styles.module.css

@@ -9,7 +9,9 @@
   align-items: center;
   gap: 16px;
   border-radius: 4px;
+  align-self: stretch;
 }
+
 .orgLogo {
   width: 38px;
   height: 38px;
@@ -29,9 +31,8 @@
   align-items: flex-start;
   gap: 4px;
 }
-.orgName > p {
+.orgNameText {
   color: #eeeffd;
-  color: color(display-p3 0.9333 0.9373 0.9882);
   font-family: Inter;
   font-size: 14px;
   font-style: normal;
@@ -51,16 +52,15 @@
   align-items: center;
   gap: 16px;
 }
-.dropdownBtn > p {
+.projectName {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
-.dropdownBtn > div {
+.arrowIcon {
   display: inline-flex;
   padding: 8px;
   justify-content: center;
@@ -68,8 +68,12 @@
   gap: 10px;
   border-radius: 100px;
   border: 1px solid #b8badc00;
+  transition: transform 0.3s ease;
 }
-.dropdownBtn > div:hover {
+.arrowRotate {
+  transform: rotate(180deg);
+}
+.arrowIcon:hover {
   border: 1px solid #b8badc;
   background: linear-gradient(
     180deg,
@@ -85,11 +89,9 @@
   gap: 12px;
   border-radius: 6px;
   background: #2d3143;
-  background: color(display-p3 0.1804 0.1922 0.2588);
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
-  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
   position: absolute;
-  z-index: 1;
+  z-index: 30;
   top: 100%;
   margin-top: 8px;
   left: 0;
@@ -109,7 +111,8 @@
 
 .orgSearchContainer {
   display: flex;
-  width: 318px;
+  width: 100%;
+  min-width: 318px;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
@@ -181,7 +184,6 @@
   flex: 1 0 0;
   border-radius: 4px;
   background: #282c3c;
-  background: color(display-p3 0.1593 0.1702 0.2316);
 }
 
 .placeholderTxt {
@@ -194,7 +196,6 @@
 }
 .placeholderTxt::placeholder {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -205,18 +206,15 @@
 
 .optionsContainer {
   display: flex;
-  width: 318px;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
 }
-
 .orgList:hover {
   border-radius: 4px;
   background: #3c4159;
   color: #acb0ff;
-  background: color(display-p3 0.2398 0.2548 0.3399);
 }
-
 .orgList {
   display: flex;
   padding: 6px;
@@ -243,10 +241,67 @@
 
 .iconTxt > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
+
+/* Mobile */
+@media (max-width: 768px) {
+  .dropdown {
+    display: flex;
+    background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
+    border-radius: 0;
+    position: fixed;
+    top: 80px;
+    left: 0;
+    width: 100%;
+    margin-top: 0;
+    box-shadow: none;
+  }
+  .orgSearchContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+  }
+  .createBtnContainer {
+    padding: 8px 0;
+  }
+  .createBtnContainer > p {
+    font-size: 16px;
+  }
+  .createBtn {
+    gap: 8px;
+  }
+  .createBtn > p {
+    font-size: 16px;
+  }
+  .srchInputGroup {
+    display: flex;
+    width: 358px;
+    height: 38px;
+    padding: 10px 12px;
+    border-radius: 6px;
+  }
+  .optionsContainer {
+    align-self: stretch;
+  }
+  .iconTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .orgNameText {
+    color: #85869b;
+  }
+  .orgNameActive {
+    color: #eeeffd;
+  }
+  .projectNameActive {
+    color: #959aff;
+  }
+}

frontend/src/app/components/navbar/navright/Profile.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import EllipsisIcon from "../../icons/ellipsis";
+import ProfileDropdown from "./ProfileDropdown";
+import styles from "./styles.module.css";
+import useIsMobile from "@/app/hooks/useIsMobile";
+const Profile = () => {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+  const sampleData = [
+    {
+      name: "JM Grills",
+      role: "Super Admin",
+    },
+  ];
+
+  return (
+    <>
+      {/* Profile Section */}
+      <div className={styles.profileContainer}>
+        {/* Profile */}
+
+        <div
+          className={styles.profileBadgeButton}
+          onClick={() => setOpen(!open)}
+        >
+          {/* Username and Role*/}
+          {sampleData.map((data, index) => {
+            return (
+              <div className={styles.nameRole} key={index}>
+                <p className={styles.userName}>{data.name}</p>
+                <p className={styles.userRole}>{data.role}</p>
+              </div>
+            );
+          })}
+
+          {/* User profile*/}
+          <div className={styles.userImgContainer}>
+            <div className={styles.userPic}></div>
+            <EllipsisIcon />
+          </div>
+        </div>
+
+        {/* Mobile Ellipsis */}
+
+        <div
+          className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
+          onClick={() => setOpen(!open)}
+        >
+          <EllipsisIcon style={isMobile ? styles.rotated : ""} />
+        </div>
+
+        {/* Dropdown */}
+        {open && <ProfileDropdown isMobile={isMobile} user={sampleData[0]} />}
+      </div>
+    </>
+  );
+};
+
+export default Profile;

frontend/src/app/components/navbar/navright/ProfileDropdown.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import styles from "./styles.module.css";
+import SettingsIcon from "../../icons/settings";
+import LogoutIcon from "../../icons/logout";
+
+const ProfileDropdown = ({ isMobile, user }) => {
+  return (
+    <div className={styles.dropdownContainer}>
+      {/* Settings */}
+
+      {/* Mobile View */}
+      {isMobile && (
+        <>
+          <div className={styles.profileBadge}>
+            {/* User profile*/}
+            <div className={styles.userImgContainer}>
+              <div className={styles.userPic}></div>
+            </div>
+
+            {/* Username and Role*/}
+            <div className={styles.nameRole}>
+              <p className={styles.userName}>{user.name}</p>
+              <p className={styles.userRole}>{user.role}</p>
+            </div>
+          </div>
+          <div className={styles.divider}></div>
+        </>
+      )}
+
+      <div className={styles.actionButtons}>
+        <div className={styles.settingsBtn}>
+          {/* Icon */}
+          <div className={styles.btn}>
+            <SettingsIcon />
+          </div>
+          <p>Settings</p>
+        </div>
+        {/* Logout */}
+        <div className={styles.logoutBtn}>
+          {/* Icon */}
+          <div className={styles.btn}>
+            <LogoutIcon />
+          </div>
+          <p>Logout</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileDropdown;

frontend/src/app/components/navbar/navright/styles.module.css

@@ -7,7 +7,8 @@
   cursor: pointer;
   position: relative;
 }
-.profileBadge {
+.profileBadge,
+.profileBadgeButton {
   display: flex;
   padding: 6px 0 6px 8px;
   justify-content: flex-end;
@@ -15,12 +16,10 @@
   gap: 10px;
   border-radius: 6px;
 }
-.profileBadge:hover {
+.profileBadgeButton:hover {
   border-radius: 6px;
   background: #21232f;
-  background: color(display-p3 0.1294 0.1373 0.1804);
 }
-
 .nameRole {
   display: flex;
   flex-direction: column;
@@ -31,7 +30,6 @@
 .userName {
   align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   text-align: right;
   leading-trim: both;
   text-edge: cap;
@@ -46,7 +44,6 @@
 .userRole {
   align-self: stretch;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   text-align: right;
   leading-trim: both;
   text-edge: cap;
@@ -81,12 +78,10 @@
   left: 0;
   border-radius: 6px;
   background: #2d3144;
-  background: color(display-p3 0.1787 0.1913 0.2605);
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
-  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
   cursor: pointer;
   position: absolute;
-  z-index: 10;
+  z-index: 30;
   top: 100%;
   margin-top: 3px;
   animation-name: dropDownAnimation;
@@ -103,6 +98,13 @@
   }
 }
 
+.actionButtons {
+  display: flex;
+  flex-direction: column;
+
+  gap: 6px;
+  width: 100%;
+}
 .settingsBtn,
 .logoutBtn {
   display: flex;
@@ -113,13 +115,14 @@
   color: #acb0ff;
   border-radius: 4px;
 }
-.settingsBtn:hover,
+
+.settingsBtn:hover {
+  background: #3c4159;
+  color: #d2d3e1;
+}
 .logoutBtn:hover {
   background: #3c4159;
-  background: color(display-p3 0.2392 0.2549 0.3412);
-
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
 }
 .btn {
   display: flex;
@@ -128,13 +131,102 @@
   gap: 12px;
 }
 
-.settingsBtn,
+.settingsBtn > p {
-.logoutBtn > p {
+  color: inherit;
-  color: #acb0ff;
-  color: color(display-p3 0.678 0.6895 1);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
 }
+
+.logoutBtn > p {
+  color: inherit;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.rotated {
+  transform: rotate(90deg);
+}
+.mobileEllipsis {
+  display: none;
+}
+.mobileEllipsis.active {
+  color: #959aff;
+}
+/* Mobile */
+@media (max-width: 768px) {
+  .dropdownContainer {
+    display: flex;
+    width: 390px;
+    padding: 16px;
+    border-radius: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
+    position: fixed;
+    top: 80px;
+    left: 0;
+    width: 100%;
+    margin-top: 0;
+    box-shadow: none;
+  }
+  .mobileEllipsis {
+    display: flex;
+    height: 61px;
+    align-items: center;
+    gap: 10px;
+    padding-right: 10px;
+    cursor: pointer;
+    color: #85869b;
+  }
+  .profileBadgeButton {
+    display: none;
+  }
+  .profileBadge {
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 24px;
+  }
+  .userImgContainer {
+    width: 50px;
+    height: 50px;
+    aspect-ratio: 1/1;
+  }
+  .userPic {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .nameRole {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .userName {
+    text-align: start;
+    font-size: 18px;
+    letter-spacing: -0.18px;
+  }
+  .userRole {
+    font-size: 14px;
+  }
+  .divider {
+    height: 1px;
+    align-self: stretch;
+    background: #393d53;
+  }
+  .actionButtons {
+    border-radius: 6px;
+    padding: 6px;
+    align-items: center;
+    gap: 6px;
+    align-self: stretch;
+  }
+}

frontend/src/app/components/navbar/styles.module.css

@@ -0,0 +1,174 @@
+.mainContainer {
+  display: flex;
+  height: 84px;
+  padding: 12px 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+
+/* Mobile */
+
+.hamburgerMenu {
+  display: none;
+  height: 61px;
+  padding-left: 16px;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.active path {
+  color: #8187ff;
+}
+.dropDownMenu {
+  display: flex;
+  width: 100vw;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
+  left: 0;
+  z-index: 2;
+  top: 60px;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+.headings {
+  display: flex;
+  padding: 32px 16px 16px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  align-self: stretch;
+}
+.headings > div {
+  display: flex;
+  padding-right: 6px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.logoContainer {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  gap: 9px;
+  aspect-ratio: 1/1;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+
+.info p {
+  color: #85869b;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.07px;
+}
+.info > p:nth-child(1) {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 18px; /* 100% */
+}
+.navs {
+  display: flex;
+  padding: 16px 0;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.nav {
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.nav:hover {
+  background: rgba(149, 154, 255, 0.05);
+}
+.nav path {
+  stroke: #858699;
+}
+.nav:hover path {
+  stroke: #d2d3e0;
+}
+.nav p {
+  color: #d2d3e1;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: normal;
+}
+.footer {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.footer > div {
+  display: flex;
+  padding: 12px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #1d1e2c;
+}
+.footer > div > div {
+  display: flex;
+  height: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-5%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (max-width: 768px) {
+  .mobileHamburger {
+    display: flex;
+    height: 61px;
+
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .mainContainer {
+    display: flex;
+    padding: 12px 0px;
+    align-items: center;
+    border-bottom: none;
+  }
+  .hamburgerMenu {
+    display: flex;
+  }
+  .onAdd {
+    display: none;
+  }
+}

frontend/src/app/components/permissions/Permissions.jsx

@@ -0,0 +1,49 @@
+import ActionButton from "../actionButton/ActionButton";
+import DeleteIcon from "../icons/delete";
+import FileIcon from "../icons/file";
+import editUserStyle from "./styles.module.css";
+import React from "react";
+import PlusIcon from "../icons/plus";
+
+const Permissions = ({ sampleData = [] }) => {
+  return (
+    <>
+      {/* Permissions */}
+      <div className={editUserStyle.permissionsContainer}>
+        <div className={editUserStyle.permissionsHeader}>
+          <p>Permissions</p>
+          <div className={editUserStyle.svgContainer}>
+            {/* Button ni */}
+            <button>
+              <PlusIcon />
+            </button>
+          </div>
+        </div>
+
+        {sampleData.length === 0 ? (
+          <div className={editUserStyle.permissionDefaultState}>
+            <p>No permission added yet</p>
+          </div>
+        ) : (
+          <div className={editUserStyle.permissionsList}>
+            {sampleData.map((perm, index) => {
+              return (
+                <div className={editUserStyle.permissions} key={index}>
+                  <div className={editUserStyle.permissionsItem}>
+                    <FileIcon />
+                    <p>{perm.permission}</p>
+                  </div>
+                  <div className={editUserStyle.deleteBtn}>
+                    <ActionButton icon={<DeleteIcon />} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Permissions;

frontend/src/app/components/permissions/styles.module.css

@@ -0,0 +1,168 @@
+.permissionsContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #1d1e2a;
+}
+.permissionsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+
+.permissionsHeader > p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  width: 163px;
+}
+.svgContainer {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+  border-radius: 6px;
+  background: #27293b;
+}
+
+.svgContainer > button {
+  display: flex;
+  padding: 8px;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  background: #27293b;
+}
+
+.permissionDefaultState {
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: 43.813px;
+  padding: 8px 16px;
+}
+.permissionDefaultState p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.permissionsList {
+  width: 100%;
+}
+.permissions {
+  display: flex;
+  height: 43.813px;
+  padding: 8px 8px 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 0.5px solid #2e3042;
+}
+
+.permissions:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.permissionsItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.permissionsItem > p {
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.deleteBtn {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.deleteSvg {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #959aff00;
+  color: #969af9;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+}
+
+.deleteSvg:hover {
+  color: #fff;
+  stroke-width: 1px;
+  stroke: color(display-p3 1 1 1);
+  border-radius: 100px;
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+
+@media (max-width: 768px) {
+  .permissionsContainer {
+    border-radius: 4px;
+    padding: 0 0 24px 0;
+  }
+  .permissionsHeader {
+    padding: 12px 16px;
+  }
+
+  .permissionsHeader > p {
+    color: #fff;
+    font-size: 18px;
+    align-self: stretch;
+  }
+
+  .svgContainer {
+    display: none;
+  }
+  .permissionDefaultState {
+    gap: 12px;
+    align-self: stretch;
+    padding: 24px 16px 0 16px;
+  }
+  .permissionsList {
+    padding-top: 16px;
+  }
+  .permissions {
+    padding: 8px 16px;
+  }
+  .permissionDefaultState > p {
+    font-weight: 500;
+    text-align: center;
+  }
+}

frontend/src/app/components/prompts/Prompts.jsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import styles from "./styles.module.css";
 
 const Prompts = ({ show }) => {

frontend/src/app/components/radio-button/RadioButton.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./styles.module.css";
+const RadioButton = (props) => {
+  return (
+    <div className={styles.container}>
+      <label className={styles.radio}>
+        <input type="radio" {...props} />
+        <span className={styles.custom}></span>
+        <span className={styles.labelText}>{props?.label}</span>
+      </label>
+    </div>
+  );
+};
+
+export default RadioButton;

frontend/src/app/components/radio-button/styles.module.css

@@ -0,0 +1,44 @@
+.radioButtonsContainer > div > div > div {
+  display: flex;
+  padding: 12px 4px;
+  align-items: center;
+  gap: 12px;
+}
+.radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+}
+.radio input {
+  display: none;
+}
+
+.radio .custom {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #4b4f6d;
+  border-radius: 50%;
+  position: relative;
+  background-color: #fff;
+}
+
+.radio .custom::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  background: #5980f1;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.radio input:checked + .custom::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+.radio input:not(:checked) + .custom + span,
+.radio input:not(:checked) + .custom + * {
+  color: #85869b;
+}

frontend/src/app/components/searchbar/SearchBar.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import searchBarStyle from "./styles.module.css";
+import SearchIcon from "../icons/search";
+
+const SearchBar = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <form
+      className={`${searchBarStyle.searchBarContainer} ${open ? searchBarStyle.open : ""}`}
+    >
+      <input
+        className={searchBarStyle.input}
+        type="text"
+        name=""
+        id=""
+        placeholder="Search"
+      />
+      <div
+        className={searchBarStyle.searchBtn}
+        onClick={() => setOpen((open) => !open)}
+      >
+        <SearchIcon />
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;

frontend/src/app/components/searchbar/styles.module.css

@@ -0,0 +1,65 @@
+.searchBarContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 40px;
+  border-radius: 6px;
+  padding: 6px;
+  height: auto;
+  overflow: hidden;
+  transition: width 0.35s ease;
+  position: absolute;
+}
+.searchBarContainer:focus-within {
+  background: #292a36;
+}
+.open {
+  width: 260px;
+  padding: 6px 6px 6px 12px;
+  justify-content: space-between;
+  border: 1px solid #31324a;
+  border-radius: 6px;
+}
+.input {
+  background: transparent;
+  outline: none;
+  border: none;
+  width: 100%;
+  opacity: 0; /*hide input kung collapse*/
+  transition: opacity 0.35s ease;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 1.18rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  caret-color: #575bc7;
+}
+
+.open > .input {
+  opacity: 1; /*show input when open*/
+  transition-delay: 0.1s;
+}
+
+.input::placeholder {
+  color: #85869b;
+  text-align: start;
+  font-family: Inter;
+  font-size: 1.18rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.searchBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #858699;
+}
+.searchBtn:hover {
+  color: #959aff;
+}

frontend/src/app/components/select/SelectField.jsx

@@ -0,0 +1,69 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import styles from "./styles.module.css";
+import ArrowDownIcon from "../icons/arrowDown";
+
+const SelectField = ({ label, options, ...props }) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [dropUp, setDropUp] = useState(false);
+
+  const selectRef = useRef(null);
+
+  const [currentSelected, setCurrentSelected] = useState({
+    label: label,
+    value: "",
+  });
+
+  useEffect(() => {
+    if (!showOptions || !selectRef.current) return;
+
+    const rect = selectRef.current.getBoundingClientRect();
+
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    const dropdownHeight = 150;
+
+    setDropUp(spaceBelow < dropdownHeight && spaceAbove > dropdownHeight);
+  }, [showOptions]);
+
+  return (
+    <div
+      ref={selectRef}
+      className={`${styles.select} ${showOptions ? styles.isFocused : ""}`}
+      onClick={() => setShowOptions(!showOptions)}
+      {...props}
+    >
+      <label
+        className={`${styles.label} ${currentSelected.value ? styles.selected : ""}`}
+      >
+        {currentSelected.label}
+      </label>
+      <ArrowDownIcon />
+
+      {showOptions && (
+        <div
+          className={`${styles.optionsContainer} ${
+            dropUp ? styles.dropUp : ""
+          }`}
+        >
+          {options.map((opt, key) => {
+            return (
+              <div
+                key={key}
+                onClick={() => {
+                  setCurrentSelected(opt);
+                  setShowOptions(false);
+                }}
+              >
+                <p>{opt.label}</p>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectField;

frontend/src/app/components/select/styles.module.css

@@ -0,0 +1,87 @@
+.select {
+  display: flex;
+  padding: 12px;
+  align-items: flex-start;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  background-color: transparent;
+  position: relative;
+}
+.label {
+  color: #858699;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.selected {
+  color: white;
+}
+.optionsContainer {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  border-radius: 6px;
+  border: 1px solid #4e5474;
+  background: #282b39;
+  animation-name: showDD;
+  animation-duration: 200ms;
+  z-index: 20;
+}
+.isFocused {
+  border: 1px solid #969af9;
+  background: #282b39;
+}
+
+@keyframes showDD {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+.optionsContainer > div {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
+.optionsContainer p {
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.optionsContainer > div:hover,
+.optionsContainer > div:hover p {
+  background: #3c4159;
+  color: white;
+}
+.optionsContainer {
+  top: 0%;
+  margin-top: 6px;
+}
+
+/* When flipping upward */
+.dropUp {
+  bottom: 0%;
+  top: auto;
+  margin-bottom: 6px;
+}

frontend/src/app/components/sidebar/Sidebar.jsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 
 import { usePathname, useRouter } from "next/navigation";
@@ -10,86 +10,46 @@ import UserIcon from "../icons/user";
 import RolesIcon from "../icons/roles";
 import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
+import DownloadIcon from "../icons/download";
+import LogoIcon from "../icons/logo";
+import ArrowDownIcon from "../icons/arrowDown";
+import useNavigations from "@/app/hooks/useNagivation";
 
 const Sidebar = () => {
-  const router = useRouter();
+  const [isCollapsed, setIsCollapsed] = useState(false);
-  const navToHome = () => {
+  const {
-    router.push("/home");
+    navToAgents,
-  };
+    navToCredentials,
-  const navToOrganization = () => {
+    navToProject,
-    router.push("/organization");
+    navToRoles,
-  };
+    navToHome,
-  const navToProject = () => {
+    navToOrganization,
-    router.push("/projects");
+    navToUsers,
-  };
+  } = useNavigations();
-  const navToUsers = () => {
-    router.push("/users");
-  };
-  const navToRoles = () => {
-    router.push("/roles");
-  };
-  const navToCredentials = () => {
-    router.push("/credentials");
-  };
-  const navToAgents = () => {
-    router.push("/agents");
-  };
 
   const pathname = usePathname();
-  console.log(pathname);
   return (
-    <div className={styles.mainContainer}>
+    <div
+      className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
+    >
       <div className={styles.topContainer}>
         {/* Logo Container */}
         <div className={styles.logoContainer}>
+          <div
+            className={styles.toggleContainer}
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            <ArrowDownIcon
+              className={`${styles.arrowIcon} ${isCollapsed ? styles.notToggle : styles.toggle}`}
+            />
+          </div>
           <div>
             <div className={styles.logoIconContainer}>
-              <svg
+              <LogoIcon />
-                xmlns="http://www.w3.org/2000/svg"
-                width="37"
-                height="36"
-                viewBox="0 0 37 36"
-                fill="none"
-              >
-                <path
-                  d="M15.465 11.0234C13.7773 12.2949 12.0608 13.7836 10.3874 15.457C2.90925 22.9352 -0.879626 31.2707 1.92467 34.0751C4.72895 36.8792 13.0645 33.0904 20.5426 25.6123C22.2161 23.9388 23.7048 22.2224 24.9762 20.5347"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-                <path
-                  d="M24.9762 20.5353C29.3864 26.3895 31.1822 31.8988 29.0053 34.0757C26.201 36.88 17.8655 33.091 10.3874 25.6129C2.90925 18.1348 -0.879626 9.79927 1.92467 6.99498C4.10141 4.81824 9.61081 6.61397 15.465 11.0241"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-                <path
-                  d="M14.1504 20.5347C14.1504 21.261 14.7391 21.8497 15.4654 21.8497C16.1916 21.8497 16.7804 21.261 16.7804 20.5347C16.7804 19.8085 16.1916 19.2197 15.4654 19.2197C14.7391 19.2197 14.1504 19.8085 14.1504 20.5347Z"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-                <path
-                  d="M20.7505 9.08429C19.9243 8.94056 19.9243 7.75456 20.7505 7.61083C23.7436 7.09012 26.124 4.81039 26.7737 1.84263L26.8236 1.61514C27.0022 0.798617 28.1649 0.793535 28.3509 1.60847L28.4114 1.87358C29.0849 4.82732 31.4661 7.0878 34.4509 7.60707C35.2814 7.75154 35.2814 8.94358 34.4509 9.08805C31.4661 9.60732 29.0849 11.8678 28.4114 14.8216L28.3509 15.0867C28.1649 15.9016 27.0022 15.8965 26.8236 15.08L26.7737 14.8525C26.124 11.8848 23.7436 9.605 20.7505 9.08429Z"
-                  stroke="#969AF9"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                  fill="none"
-                />
-              </svg>
             </div>
-            <div className={styles.logoDescription}>
+            <div
+              className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
               <p>Internal Developer Platform</p>
               <p>By Project Moonshot Inc.</p>
             </div>
@@ -102,49 +62,77 @@ const Sidebar = () => {
             onClick={navToHome}
           >
             <HomeIcon />
-            <p>Home</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Home
+            </p>
           </div>
           <div
             className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
             onClick={navToOrganization}
           >
             <OrganizationIcon />
-            <p>Organization</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Organization
+            </p>
           </div>
           <div
             onClick={navToProject}
             className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
           >
             <ProjectIcon />
-            <p>Project</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Project
+            </p>
           </div>
           <div
             onClick={navToUsers}
             className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
           >
             <UserIcon />
-            <p>Users</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Users
+            </p>
           </div>
           <div
             onClick={navToRoles}
             className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
           >
             <RolesIcon />
-            <p>Roles</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Roles
+            </p>
           </div>
           <div
             onClick={navToCredentials}
             className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
           >
             <CredentialsIcon />
-            <p>Credentials</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Credentials
+            </p>
           </div>
           <div
             onClick={navToAgents}
             className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
           >
             <AgentIcon />
-            <p>Agents</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Agents
+            </p>
           </div>
         </div>
       </div>
@@ -152,51 +140,12 @@ const Sidebar = () => {
       <div className={styles.navFooterContainer}>
         <div>
           <div>
-            <p>Download ICTL v3</p>
+            <p
-            <svg
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
             >
-              <g clipPath="url(#clip0_306_15402)">
+              Download ICTL v3
-                <path
+            </p>
-                  d="M7.98047 13.6074L11.9983 17.6253L16.0162 13.6074"
+            <DownloadIcon />
-                  stroke="#8287FF"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                />
-                <path
-                  d="M12 17.625V6.375"
-                  stroke="#8287FF"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                />
-                <path
-                  d="M11.9992 22.4466C17.7686 22.4466 22.4456 17.7696 22.4456 12.0001C22.4456 6.23074 17.7686 1.55371 11.9992 1.55371C6.22976 1.55371 1.55273 6.23074 1.55273 12.0001C1.55273 17.7696 6.22976 22.4466 11.9992 22.4466Z"
-                  stroke="#8287FF"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{ strokeOpacity: 1 }}
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_306_15402">
-                  <rect
-                    width="24"
-                    height="24"
-                    fill="white"
-                    style={{ fillOpacity: 1 }}
-                  />
-                </clipPath>
-              </defs>
-            </svg>
           </div>
         </div>
       </div>

frontend/src/app/components/sidebar/styles.module.css

@@ -11,12 +11,14 @@
   user-select: none;
   border-right: 1px solid #2c2d3d;
   background: #191a24;
+  transition: all 150ms;
 }
 .topContainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
+
   align-self: stretch;
 }
 .logoContainer {
@@ -26,8 +28,10 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+  position: relative;
   gap: 12px;
   align-self: stretch;
+
   border-bottom: 1px solid #2c2d3d;
   border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
@@ -60,18 +64,14 @@
 .logoDescription > p:nth-child(1) {
   color: #fff;
   color: color(display-p3 1 1 1);
-  font-size: 15px;
+  font-size: 0.94rem;
-  font-style: normal;
   font-weight: 500;
   line-height: 18px;
 }
 .logoDescription > p:nth-child(2) {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
-  font-size: 10px;
+  font-size: 0.63rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   letter-spacing: 0.05px;
   align-self: stretch;
 }
@@ -87,11 +87,7 @@
   align-items: center;
   cursor: pointer;
   gap: 16px;
-  font-family: Inter;
+  font-size: 1rem;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   border-left: 2px solid #959aff00;
   align-self: stretch;
 }
@@ -108,11 +104,7 @@
   border-left: 2px solid #959aff;
   background: rgba(149, 154, 255, 0.05);
   color: #959aff;
-  font-family: Inter;
+  font-size: 1rem;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
 }
 .active:hover path {
   stroke: #969af9;
@@ -142,16 +134,73 @@
 }
 .navFooterContainer > div > div {
   display: flex;
-  width: 186px;
+  width: 100%;
   justify-content: space-between;
   align-items: center;
   flex: 1 0 0;
 }
 .navFooterContainer > div > div > p {
   color: #d2d3e1;
-  font-family: Inter;
+  font-size: 1rem;
-  font-size: 16px;
-  font-style: normal;
   font-weight: 500;
-  line-height: normal;
+}
+.collapsed {
+  width: 80px;
+}
+.noDisplay {
+  display: none;
+}
+.blockDisplay {
+  display: block;
+}
+
+.logoContainer .toggleContainer {
+  position: absolute;
+  right: -15px;
+  bottom: 50%;
+  transform: translateY(50%);
+  background-color: #191a24;
+  padding: 5px;
+  border-radius: 50%;
+  border: 1px solid #292b43;
+  transition: all 150ms;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arrowIcon {
+  transition: all 400ms;
+}
+.arrowIcon path {
+  stroke: rgba(255, 255, 255, 0.858);
+}
+.toggle {
+  transform: rotate(90deg) scale(0.8);
+}
+.notToggle {
+  transform: rotate(-90deg) scale(0.8);
+}
+
+.toggleContainer:hover {
+  background-color: #333652;
+}
+@media (max-width: 1050px) {
+  .mainContainer {
+    width: 80px;
+  }
+  .label {
+    display: none;
+  }
+  .logoContainer .toggleContainer {
+    display: none;
+  }
+}
+@media (max-width: 768px) {
+  .mainContainer {
+    display: none;
+  }
+  .label {
+    display: none;
+  }
 }

frontend/src/app/components/toast/success/styles.module.css

@@ -9,7 +9,20 @@
   position: absolute;
   bottom: 25px;
   z-index: 11;
-  right: 20px;
+  right: 10px;
+  animation-name: showToast;
+  animation-duration: 0.15s;
+  animation-timing-function: ease-in-out;
+}
+@keyframes showToast {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
 }
 .messageContainer {
   display: flex;
@@ -28,7 +41,7 @@
 .messageContainer p {
   color: #006929;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/components/toast/success/successToast.jsx

@@ -1,43 +1,17 @@
 import React from "react";
 import styles from "./styles.module.css";
+import CircledChececkIcon from "../../icons/circledCheck";
+import ToastCloseIcon from "../../icons/toastClose";
 const SuccessToast = ({ message }) => {
   return (
     <div className={styles.toastContainer}>
       <div className={styles.messageContainer}>
         <div className={styles.iconContainer}>
-          <svg
+          <CircledChececkIcon />
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-          >
-            <path
-              d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
-              stroke="#016730"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
         </div>
         <p>{message}</p>
       </div>
-      <svg
+      <ToastCloseIcon />
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <path
-          d="M15 5L5 15M5 5L15 15"
-          stroke="#016730"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
     </div>
   );
 };

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -2,348 +2,218 @@
 import React, { useState } from "react";
 import styles from "./styles.module.css";
 import { usePathname, useRouter, useParams } from "next/navigation";
+import BackIcon from "../icons/back";
+import SearchIcon from "../icons/search";
+import EnviromentIcon from "../icons/env";
+import AddIcon from "../icons/add";
+import CheckIcon from "../icons/check";
+import MenuIcon from "../icons/menu";
+import CloneIcon from "../icons/clone";
+import RobotIcon from "../icons/robot";
+import KeyIcon from "../icons/key";
+import ManageEnvIcon from "../icons/manageEnv";
+import Alert from "../alerts/Alert";
+import DownloadIcon from "../icons/download";
+import OutlineDownloadIcon from "../icons/outlineDownload";
+import RestartIcon from "../icons/restart";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
+import EditIcon from "../icons/edit";
+import UpdateIcon from "../icons/update";
+import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
+import SearchBar from "../searchbar/SearchBar";
+import ViewLogsIcon from "../icons/viewLogs";
+import PublishIcon from "../icons/publish";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
+  const [triggerAlert, setTriggerAlert] = useState(false);
   const pathName = usePathname();
   const router = useRouter();
+  const [editState, setEditState] = useState(false);
   const params = useParams();
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
+  const isMobile = useIsMobile();
   return (
-    <div className={styles.container}>
+    <>
-      <div className={styles.title}>
+      {triggerAlert && (
-        {((pathName.includes("/view") && props.state === "view") ||
+        <Alert
-          params.usersId ||
+          setTriggerAlert={setTriggerAlert}
-          params.roleId) && (
+          setEditState={setEditState}
-          <div onClick={() => router.back()}>
+          title={!editState ? props.topbarTitle : "Save Changes"}
-            <svg
+          body="You are about to save the changes. Do you want to continue?"
-              xmlns="http://www.w3.org/2000/svg"
+          editState={editState}
-              width="24"
+        />
-              height="24"
+      )}
-              viewBox="0 0 24 24"
+      <div
-              fill="none"
+        className={`${styles.container} ${pathName.includes("/add") ? styles.column : ""}`}
-            >
+      >
-              <path
+        <div
-                d="M5 12H19"
+          className={`${styles.title} ${pathName.includes("/add") ? styles.fullWidth : ""}`}
-                stroke="#8287FF"
+        >
-                strokeWidth="2"
+          {props.requiredButtons.includes("back") && (
-                strokeLinecap="round"
+            <div onClick={() => router.back()}>
-                strokeLinejoin="round"
+              <BackIcon />
-              />
-              <path
-                d="M5 12L11 18"
-                stroke="#8287FF"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M5 12L11 6"
-                stroke="#8287FF"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-        )}
-        <p>{props.topbarTitle}</p>
-      </div>
-      <div className={styles.actionBar}>
-        {(pathName === "/projects/view" || !props.state) && (
-          <div className={styles.searchBarContainer}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-                stroke="#858699"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-        )}
-        {pathName === "/credentials" ? (
-          <div className={styles.mngEnvKeyButton}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={20}
-              height={20}
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M13.084 15.3955H17.709"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M15.3965 13.083V17.708"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
-                stroke="#8287FF"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            <p>Manage Env. Key</p>
-          </div>
-        ) : (
-          ""
-        )}
-        {pathName === "/projects/view" && (
-          <div
-            className={styles.button}
-            onClick={() => props.trigger(!props.triggerState)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10 4.41016V15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M4.41016 10H15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            <p>{props.buttonText}</p>
-          </div>
-        )}
-        {!props.state && (
-          <div className={styles.button} onClick={handleNavigateToAdd}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10 4.41016V15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M4.41016 10H15.5907"
-                stroke="currentColor"
-                strokeOpacity={1}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            <p>{props.buttonText}</p>
-          </div>
-        )}
-        {props.state === "add" ? (
-          <>
-            <div className={styles.button}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={20}
-                height={20}
-                viewBox="0 0 20 20"
-                fill="none"
-              >
-                <path
-                  d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
-                  stroke="white"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-              <p>{props.buttonText}</p>
             </div>
-            <div className={styles.cancelButton} onClick={() => router.back()}>
+          )}
-              <p>{props.cancelButtonText}</p>
+          <p>{props.topbarTitle}</p>
+        </div>
+        <div
+          className={`${styles.actionBar}  ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
+          {props?.requiredButtons.includes("search") && (
+            <div className={styles.searchBarContainer}>
+              {!isMobile && <SearchBar />}
             </div>
-          </>
+          )}
-        ) : (
+          {props?.requiredButtons.includes("env") && (
-          ""
+            <div className={styles.mngEnvKeyButton}>
-        )}
+              <EnviromentIcon />
-        {/* Projects 3 dots menu */}
+              {!isMobile && <p>Manage Env. Key</p>}
-        {pathName === "/projects/view" && (
-          <div
-            className={styles.menu}
-            onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
-          >
-            <div className={styles.dotMenu}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-              >
-                <path
-                  d="M9.20117 9.99978C9.20117 10.1047 9.22183 10.2085 9.26196 10.3054C9.3021 10.4023 9.36092 10.4903 9.43508 10.5645C9.50924 10.6386 9.59728 10.6975 9.69417 10.7376C9.79106 10.7777 9.89491 10.7984 9.99978 10.7984C10.1047 10.7984 10.2085 10.7777 10.3054 10.7376C10.4023 10.6975 10.4903 10.6386 10.5645 10.5645C10.6386 10.4903 10.6975 10.4023 10.7376 10.3054C10.7777 10.2085 10.7984 10.1047 10.7984 9.99978C10.7984 9.89491 10.7777 9.79106 10.7376 9.69417C10.6975 9.59728 10.6386 9.50924 10.5645 9.43508C10.4903 9.36092 10.4023 9.3021 10.3054 9.26196C10.2085 9.22183 10.1047 9.20117 9.99978 9.20117C9.89491 9.20117 9.79106 9.22183 9.69417 9.26196C9.59728 9.3021 9.50924 9.36092 9.43508 9.43508C9.36092 9.50924 9.3021 9.59728 9.26196 9.69417C9.22183 9.79106 9.20117 9.89491 9.20117 9.99978Z"
-                  fill="#8287FF"
-                  stroke="#8287FF"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M9.20117 15.5906C9.20117 15.6955 9.22183 15.7993 9.26196 15.8962C9.3021 15.9931 9.36092 16.0811 9.43508 16.1553C9.50924 16.2295 9.59728 16.2883 9.69417 16.3284C9.79106 16.3686 9.89491 16.3892 9.99978 16.3892C10.1047 16.3892 10.2085 16.3686 10.3054 16.3284C10.4023 16.2883 10.4903 16.2295 10.5645 16.1553C10.6386 16.0811 10.6975 15.9931 10.7376 15.8962C10.7777 15.7993 10.7984 15.6955 10.7984 15.5906C10.7984 15.4857 10.7777 15.3819 10.7376 15.285C10.6975 15.1881 10.6386 15.1001 10.5645 15.0259C10.4903 14.9517 10.4023 14.8929 10.3054 14.8528C10.2085 14.8126 10.1047 14.792 9.99978 14.792C9.89491 14.792 9.79106 14.8126 9.69417 14.8528C9.59728 14.8929 9.50924 14.9517 9.43508 15.0259C9.36092 15.1001 9.3021 15.1881 9.26196 15.285C9.22183 15.3819 9.20117 15.4857 9.20117 15.5906Z"
-                  fill="#8287FF"
-                  stroke="#8287FF"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M9.20117 4.40994C9.20117 4.51481 9.22183 4.61866 9.26196 4.71555C9.3021 4.81245 9.36092 4.90048 9.43508 4.97464C9.50924 5.0488 9.59728 5.10763 9.69417 5.14776C9.79106 5.18789 9.89491 5.20855 9.99978 5.20855C10.1047 5.20855 10.2085 5.18789 10.3054 5.14776C10.4023 5.10763 10.4903 5.0488 10.5645 4.97464C10.6386 4.90048 10.6975 4.81245 10.7376 4.71555C10.7777 4.61866 10.7984 4.51481 10.7984 4.40994C10.7984 4.30506 10.7777 4.20122 10.7376 4.10432C10.6975 4.00743 10.6386 3.91939 10.5645 3.84524C10.4903 3.77108 10.4023 3.71225 10.3054 3.67212C10.2085 3.63198 10.1047 3.61133 9.99978 3.61133C9.89491 3.61133 9.79106 3.63198 9.69417 3.67212C9.59728 3.71225 9.50924 3.77108 9.43508 3.84524C9.36092 3.91939 9.3021 4.00743 9.26196 4.10432C9.22183 4.20122 9.20117 4.30506 9.20117 4.40994Z"
-                  fill="#8287FF"
-                  stroke="#8287FF"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
             </div>
-            {triggerDropDownMenu && (
+          )}
-              <div className={styles.dropDown}>
+          {props?.requiredButtons.includes("add-services") && (
-                <div>
+            <PrimaryButton
-                  <div>
+              icon={<AddIcon />}
-                    <svg
+              text={isMobile ? "" : props.buttonText}
-                      xmlns="http://www.w3.org/2000/svg"
+              onClick={() => props?.trigger(!props?.triggerState)}
-                      width="24"
+            />
-                      height="24"
+          )}
-                      viewBox="0 0 24 24"
+          {!editState && props?.requiredButtons.includes("edit") && (
-                      fill="none"
+            <PrimaryButton
-                    >
+              icon={<EditIcon />}
-                      <path
+              text="Edit"
-                        d="M7.20898 9.76388C7.20898 9.08602 7.47826 8.43593 7.95758 7.95661C8.4369 7.47729 9.087 7.20801 9.76486 7.20801H18.0698C18.7476 7.20801 19.3977 7.47729 19.8771 7.95661C20.3564 8.43593 20.6257 9.08602 20.6257 9.76388V18.0688C20.6257 18.7467 20.3564 19.3968 19.8771 19.8761C19.3977 20.3554 18.7476 20.6247 18.0698 20.6247H9.76486C9.087 20.6247 8.4369 20.3554 7.95758 19.8761C7.47826 19.3968 7.20898 18.7467 7.20898 18.0688V9.76388Z"
+              onClick={() => {
-                        stroke="#D2D3E0"
+                setEditState(true);
-                        strokeLinecap="round"
+              }}
-                        strokeLinejoin="round"
+            />
-                      />
+          )}
-                      <path
+          {props?.requiredButtons.includes("add") && (
-                        d="M4.34483 16.5396C4.05062 16.3725 3.80591 16.1304 3.63557 15.838C3.46523 15.5456 3.37533 15.2134 3.375 14.875V5.29167C3.375 4.2375 4.2375 3.375 5.29167 3.375H14.875C15.5938 3.375 15.9848 3.74396 16.3125 4.33333"
+            <PrimaryButton
-                        stroke="#D2D3E0"
+              icon={<AddIcon />}
-                        strokeLinecap="round"
+              text={isMobile ? "" : props?.buttonText}
-                        strokeLinejoin="round"
+              onClick={handleNavigateToAdd}
-                      />
+            />
-                      <path
+          )}
-                        d="M11.041 13.917H16.791"
+          {editState || props?.requiredButtons?.includes("save") ? (
-                        stroke="#D2D3E0"
+            <>
-                        strokeLinecap="round"
+              <PrimaryButton
-                        strokeLinejoin="round"
+                text="Save"
-                      />
+                form="form"
-                      <path
+                type="submit"
-                        d="M13.916 11.042V16.792"
+                onClick={() =>
-                        stroke="#D2D3E0"
+                  editState ? setTriggerAlert(!triggerAlert) : ""
-                        strokeLinecap="round"
+                }
-                        strokeLinejoin="round"
+                icon={<CheckIcon width={20} height={20} />}
-                      />
+              />
-                    </svg>
+
-                    <p>Clone Project</p>
+              <SecondaryButton
-                  </div>
+                text="Cancel"
-                </div>
+                onClick={
-                <div>
+                  editState
-                  <div>
+                    ? () => setEditState(!editState)
-                    <svg
+                    : () => router.back()
-                      xmlns="http://www.w3.org/2000/svg"
+                }
-                      width="24"
+              />
-                      height="24"
+            </>
-                      viewBox="0 0 24 24"
+          ) : null}
-                      fill="none"
+          {props?.requiredButtons.includes("update") && (
-                    >
+            <>
-                      <path
+              <PrimaryButton
-                        d="M8.16667 3.375L10.0833 6.25M15.8333 3.375L13.9167 6.25M9.125 12.9583V11.0417M14.875 11.0417V12.9583M3.375 10.0833C3.375 9.06667 3.77887 8.09165 4.49776 7.37276C5.21665 6.65387 6.19167 6.25 7.20833 6.25H16.7917C17.8083 6.25 18.7834 6.65387 19.5022 7.37276C20.2211 8.09165 20.625 9.06667 20.625 10.0833V15.8333C20.625 16.85 20.2211 17.825 19.5022 18.5439C18.7834 19.2628 17.8083 19.6667 16.7917 19.6667H7.20833C6.19167 19.6667 5.21665 19.2628 4.49776 18.5439C3.77887 17.825 3.375 16.85 3.375 15.8333V10.0833Z"
+                icon={<UpdateIcon color="white" />}
-                        stroke="#D2D3E0"
+                text="Update"
-                        strokeLinecap="round"
+              />
-                        strokeLinejoin="round"
+              <SecondaryButton text="Cancel" onClick={() => router.back()} />
-                      />
+            </>
-                    </svg>
+          )}
-                    <p>Robots</p>
+          {props?.requiredButtons?.includes("services-drop-down") && (
-                  </div>
+            <div
-                </div>
+              className={styles.menu}
-                <div>
+              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
-                  <div>
+            >
-                    <svg
+              <div className={styles.dotMenu}>
-                      xmlns="http://www.w3.org/2000/svg"
+                <MenuIcon />
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                    >
-                      <path
-                        d="M14.875 9.12482H14.8846M16.3652 4.18269L19.8171 7.63461C20.0732 7.89064 20.2763 8.1946 20.4149 8.52913C20.5535 8.86367 20.6248 9.22223 20.6248 9.58434C20.6248 9.94644 20.5535 10.305 20.4149 10.6395C20.2763 10.9741 20.0732 11.278 19.8171 11.5341L17.2843 14.0669C17.0282 14.323 16.7243 14.5261 16.3897 14.6647C16.0552 14.8033 15.6966 14.8746 15.3345 14.8746C14.9724 14.8746 14.6139 14.8033 14.2793 14.6647C13.9448 14.5261 13.6408 14.323 13.3848 14.0669L13.0963 13.7785L6.81158 20.0632C6.49315 20.3816 6.07278 20.5777 5.62421 20.6171L5.4565 20.6248H4.33333C4.09861 20.6248 3.87205 20.5386 3.69664 20.3826C3.52123 20.2267 3.40917 20.0117 3.38171 19.7786L3.375 19.6665V18.5433C3.37511 18.0933 3.53354 17.6577 3.82254 17.3128L3.93658 17.1882L4.33333 16.7915H6.25V14.8748H8.16667V12.9581L10.2213 10.9035L9.93287 10.615C9.67681 10.359 9.47368 10.055 9.3351 9.7205C9.19651 9.38596 9.12518 9.0274 9.12518 8.66529C9.12518 8.30319 9.19651 7.94463 9.3351 7.61009C9.47368 7.27556 9.67681 6.97159 9.93287 6.71557L12.4657 4.18269C12.7218 3.92662 13.0257 3.7235 13.3603 3.58491C13.6948 3.44633 14.0534 3.375 14.4155 3.375C14.7776 3.375 15.1361 3.44633 15.4707 3.58491C15.8052 3.7235 16.1092 3.92662 16.3652 4.18269Z"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                    <p>Init Key</p>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                    >
-                      <path
-                        d="M6.25065 11.9997C5.74232 11.9997 5.25481 11.7977 4.89536 11.4383C4.53592 11.0789 4.33398 10.5913 4.33398 10.083C4.33398 9.57468 4.53592 9.08716 4.89536 8.72772C5.25481 8.36828 5.74232 8.16634 6.25065 8.16634M6.25065 11.9997C6.75898 11.9997 7.24649 11.7977 7.60594 11.4383C7.96538 11.0789 8.16732 10.5913 8.16732 10.083C8.16732 9.57468 7.96538 9.08716 7.60594 8.72772C7.24649 8.36828 6.75898 8.16634 6.25065 8.16634M6.25065 11.9997L6.25065 19.6663M6.25065 8.16634L6.25065 4.33301M13.1497 14.2987C12.9066 14.1167 12.6238 13.9951 12.3246 13.9439C12.0253 13.8926 11.7182 13.9132 11.4284 14.0039C11.1387 14.0946 10.8746 14.2528 10.658 14.4655C10.4414 14.6783 10.2784 14.9394 10.1825 15.2275C10.0865 15.5156 10.0604 15.8223 10.1063 16.1225C10.1521 16.4226 10.2686 16.7075 10.4462 16.9538C10.6237 17.2001 10.8573 17.4007 11.1275 17.5391C11.3978 17.6774 11.697 17.7496 12.0007 17.7497V19.6663M12.0007 4.33301V13.9163M17.7507 9.12467C17.2423 9.12467 16.7548 8.92274 16.3954 8.5633C16.0359 8.20385 15.834 7.71634 15.834 7.20801C15.834 6.69968 16.0359 6.21216 16.3954 5.85272C16.7548 5.49328 17.2423 5.29134 17.7507 5.29134M17.7507 9.12467C18.259 9.12467 18.7465 8.92274 19.1059 8.5633C19.4654 8.20385 19.6673 7.71634 19.6673 7.20801C19.6673 6.69968 19.4654 6.21216 19.1059 5.85272C18.7465 5.49328 18.259 5.29134 17.7507 5.29134M17.7507 9.12467V11.5205M17.7507 5.29134V4.33301M18.7099 20.6247C18.4582 20.6247 18.209 20.5751 17.9765 20.4788C17.7439 20.3825 17.5326 20.2413 17.3547 20.0633C17.1767 19.8853 17.0355 19.674 16.9392 19.4415C16.8429 19.2089 16.7933 18.9597 16.7933 18.708C16.7933 18.4563 16.8429 18.2071 16.9392 17.9745C17.0355 17.742 17.1767 17.5307 17.3547 17.3527C17.5326 17.1747 17.7439 17.0336 17.9765 16.9372C18.209 16.8409 18.4582 16.7913 18.7099 16.7913M18.7099 20.6247C18.9616 20.6247 19.2109 20.5751 19.4434 20.4788C19.676 20.3825 19.8873 20.2413 20.0652 20.0633C20.2432 19.8853 20.3844 19.674 20.4807 19.4415C20.577 19.2089 20.6266 18.9597 20.6266 18.708C20.6266 18.4563 20.577 18.2071 20.4807 17.9745C20.3844 17.742 20.2432 17.5307 20.0652 17.3527C19.8873 17.1747 19.676 17.0336 19.4434 16.9372C19.2109 16.8409 18.9616 16.7913 18.7099 16.7913M18.7099 20.6247V22.0622M18.7099 16.7913V15.3538M21.6147 17.0309L20.3698 17.7497M17.0511 19.6663L15.8052 20.3851M15.8052 17.0309L17.0511 17.7497M20.3698 19.6663L21.6156 20.3851"
-                        stroke="#D2D3E0"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                    <p>Manage Env. Key</p>
-                  </div>
-                </div>
               </div>
-            )}
+              {triggerDropDownMenu && (
-          </div>
+                <div className={styles.dropDown}>
-        )}
+                  <div>
+                    <div>
+                      <CloneIcon />
+                      <p>Clone Project</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <RobotIcon />
+                      <p>Robots</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <KeyIcon />
+                      <p>Init Key</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <ManageEnvIcon />
+                      <p>Manage Env. Key</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {props?.requiredButtons.includes("download") && !editState && (
+            <div
+              className={styles.menu}
+              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
+            >
+              <div className={styles.dotMenu}>
+                <MenuIcon />
+              </div>
+              {triggerDropDownMenu && (
+                <div className={styles.dropDown}>
+                  <div onClick={() => props?.setTriggerLogsModal?.(true)}>
+                    <div>
+                      <ViewLogsIcon />
+                      <p>View Logs</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <PublishIcon />
+                      <p>Publish Service</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Compose</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Config</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <RestartIcon />
+                      <p>Restart</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

frontend/src/app/components/topHeader/styles.module.css

@@ -3,8 +3,11 @@
   padding: 24px;
   justify-content: space-between;
   align-items: center;
+
   align-self: stretch;
   background: #21232f;
+  transition: all 0.15s;
+  position: relative;
 }
 .title {
   display: flex;
@@ -33,9 +36,9 @@
 .title > div:hover path {
   stroke: white;
 }
-.title > p {
+.title p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: var(--title-font-size);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -44,7 +47,8 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 10px;
+
+  gap: 5px;
 }
 .searchBarContainer {
   display: flex;
@@ -53,20 +57,7 @@
   align-items: center;
   gap: 10px;
 }
-.button {
+
-  display: flex;
-  padding: 8px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 6px;
-  border: 0.5px solid #8187ff;
-  background: rgba(83, 89, 242, 0.25);
-  cursor: pointer;
-}
-.button:hover {
-  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
-}
 .mngEnvKeyButton {
   display: inline-flex;
   padding: 8px 12px;
@@ -97,22 +88,7 @@
 .mngEnvKeyButton:hover path {
   stroke: white;
 }
-.cancelButton {
+
-  display: flex;
-  height: 36px;
-  padding: 9px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 6px;
-  border: 0.5px solid #4e537e;
-  cursor: pointer;
-}
-.cancelButton:hover {
-  border-radius: 6px;
-  border: 1px solid #8e98e7;
-  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
-}
 .menu {
   display: flex;
   width: 36px;
@@ -125,7 +101,7 @@
 }
 .dotMenu {
   display: flex;
-  padding: 8px;
+  padding: 7px;
   align-items: center;
   gap: 12px;
   border-radius: 6px;
@@ -146,7 +122,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 6px;
-  z-index: 2;
+  z-index: 11;
   border-radius: 6px;
   background: #2d3144;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
@@ -166,7 +142,6 @@
 .dropDown > div:hover {
   border-radius: 4px;
   background: #3c4159;
-  background: color(display-p3 0.2392 0.2549 0.3412);
   color: white;
 }
 .dropDown > div:hover p {
@@ -194,4 +169,23 @@
   font-style: normal;
   font-weight: 500;
   line-height: normal;
+  z-index: 13;
+}
+@media (max-width: 768px) {
+  .container {
+    background: linear-gradient(180deg, #1c1d2b 0%, #191a24 100%);
+
+    padding: 16px;
+  }
+  .column {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .fullWidth {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .fullWidth > button {
+    width: 100%;
+  }
 }

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

@@ -1,12 +1,59 @@
-import React from "react";
+"use client";
+import React, { useRef, useState } from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 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";
+import useRoleForm from "@/app/hooks/useRolesForm";
+import Alert from "@/app/components/alerts/Alert";
+import useIsMobile from "@/app/hooks/useIsMobile";
+
+const AddCredentialPage = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useRoleForm();
+
+  const [selectedFile, setSelectedFile] = useState(null);
+  const isMobile = useIsMobile();
+
+  // Click
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+      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();
+  };
 
-const page = () => {
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create Credential"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -14,11 +61,16 @@ const page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Create Credential"
             state="add"
+            requiredButtons={["title", "save"]}
           />
           {/* Create Crediantial Container */}
           <div className={createCredStyle.createCredContainer}>
-            <TopToolTip />
+            {isMobile ? "" : <TopToolTip />}
-            <div className={createCredStyle.inputFieldContainer}>
+            <form
+              className={createCredStyle.inputFieldContainer}
+              id="form"
+              onSubmit={handleSubmit(onSubmit)}
+            >
               {/* Project Name Input Container */}
               <div className={createCredStyle.projectName}>
                 <div className={createCredStyle.label}>
@@ -27,16 +79,49 @@ const page = () => {
                 </div>
                 {/* Content */}
                 <div className={createCredStyle.credInputField}>
-                  <input
+                  <TextField
-                    type="text"
+                    placeHolder="Enter Credential Name"
-                    name=""
+                    {...register("projectName", { required: true })}
-                    id=""
+                    hasError={!!errors.projectName}
-                    placeholder="Enter Email"
-                    className={createCredStyle.placeholderTxt}
                   />
+                  <Prompts show={false} />
                 </div>
               </div>
-            </div>
+              <div className={createCredStyle.uploadFile}>
+                <div className={createCredStyle.label}>
+                  <p className={createCredStyle.labelTxt}>Upload File</p>
+                  {/* Optional or Required */}
+                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "} */}
+                </div>
+                {/* Upload File */}
+                <label
+                  className={createCredStyle.upload}
+                  onDragOver={handleDragOver}
+                  onDrop={handleDrop}
+                >
+                  <input
+                    type="file"
+                    onChange={handleFileChange}
+                    style={{ display: "none" }}
+                  />
+                  {selectedFile ? (
+                    <p className={createCredStyle.chooseTxt}>
+                      {/* Display file name only */}
+                      {selectedFile.name}
+                    </p>
+                  ) : (
+                    <>
+                      <p className={createCredStyle.chooseTxt}>
+                        Click to choose a file
+                      </p>
+                      <p className={createCredStyle.dragTxt}>
+                        Drag or drop here
+                      </p>
+                    </>
+                  )}
+                </label>
+              </div>
+            </form>
           </div>
         </div>
       </div>
@@ -44,4 +129,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default AddCredentialPage;

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

@@ -22,6 +22,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
+  align-self: stretch;
 }
 .label {
   display: flex;
@@ -31,7 +32,6 @@
 }
 .labelTxt {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -51,99 +51,84 @@
   align-self: stretch;
 }
 
-.credInputField > p {
+.uploadFile {
   display: flex;
-  height: 44px;
+  flex-direction: column;
-  padding: 12px 16px;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.label > .optionalTxt {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+.upload {
+  display: flex;
+  height: 203px;
+  padding: 12px;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
-  background: none;
   gap: 10px;
   align-self: stretch;
-  border-radius: 6px;
+  border-radius: 4px;
-  border: 1px solid #616583;
+  border: 2px dashed #5980f1;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  cursor: pointer;
+}
+.upload:hover {
+  background: rgba(129, 135, 255, 0.25);
+}
+.upload:hover .chooseTxt {
+  color: #fff;
 }
 
-.credInputField > input:hover {
+.chooseTxt {
-  border: 1px solid #616583;
+  color: #5980f1;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  text-align: center;
-  background: rgba(75, 79, 109, 0.05);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
-}
-
-.credInputField input:focus {
-  outline: none;
-  border-radius: 6px;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: rgba(75, 79, 109, 0.25);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
-  caret-color: #959aff;
-}
-.credInputField input:focus::placeholder {
-  color: #4b4f6d;
-  color: color(display-p3 0.298 0.3098 0.4196);
-}
-
-.placeholderTxt::placeholder {
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}
-/* 
-.inputField {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
   align-self: stretch;
 }
-.inputField > input {
-  display: flex;
-  height: 44px;
-  padding: 12px 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  background: none;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-}
-.inputField > input:hover {
-  border: 1px solid #616583;
-  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
-  background: rgba(75, 79, 109, 0.05);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
-}
 
-.inputField input:focus {
+.dragTxt {
-  outline: none;
-  border-radius: 6px;
-  border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
-  background: rgba(75, 79, 109, 0.25);
-  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
-  caret-color: #959aff;
-}
-.inputField input:focus::placeholder {
-  color: #4b4f6d;
-  color: color(display-p3 0.298 0.3098 0.4196);
-}
-
-.placeholderTxt::placeholder {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: center;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: normal; */
+  line-height: normal;
+  align-self: stretch;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .createCredContainer {
+    padding: 32px 16px 0 16px;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .inputFieldContainer {
+    display: flex;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 24px;
+    align-self: stretch;
+  }
+
+  .projectName {
+    width: 100%;
+  }
+
+  .upload {
+    height: 100px;
+  }
+}

frontend/src/app/credentials/card/Card.jsx

@@ -0,0 +1,25 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>{props?.data?.name}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Organization ID</p>
+          <p>{props?.data?.organizationID}</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

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

@@ -0,0 +1,42 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}

frontend/src/app/credentials/page.jsx

@@ -1,9 +1,16 @@
+"use client";
 import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
 import DeleteIcon from "../components/icons/delete";
+import SuccessToast from "../components/toast/success/successToast";
+import ActionButton from "../components/actionButton/ActionButton";
+import useIsMobile from "../hooks/useIsMobile";
+import Card from "./card/Card";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
 const CredentialsPage = () => {
+  const isMobile = useIsMobile();
   const sampleData = [
     {
       name: "mongo tls ca crt",
@@ -56,38 +63,50 @@ const CredentialsPage = () => {
   ];
   return (
     <div className={globalStyle.section}>
+      <SuccessToast message="New Credential added successfully!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
+          <TopHeader
-          <div className={styles.tableContainer}>
+            buttonText="Add Credentials"
-            <table className={styles.table}>
+            topbarTitle="Credentials"
-              <thead>
+            requiredButtons={["title", "add", "search", "env"]}
-                <tr>
+          />
-                  <th width="45%">Name</th>
+          {isMobile ? (
-                  <th width="45%">Organization ID</th>
+            <div className={styles.cardContainer}>
-                  <th width="10%"></th>
+              <MobileSearchBar />
-                </tr>
+              {sampleData.map((data, key) => (
-              </thead>
+                <Card data={data} key={key} />
+              ))}
+            </div>
+          ) : (
+            <div className={styles.tableContainer}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th width="45%">Name</th>
+                    <th width="45%">Organization ID</th>
+                    <th width="10%"></th>
+                  </tr>
+                </thead>
 
-              <tbody>
+                <tbody>
-                {sampleData.map((org, index) => {
+                  {sampleData.map((org, index) => {
-                  return (
+                    return (
-                    <tr key={index}>
+                      <tr key={index}>
-                      <td>{org.name}</td>
+                        <td>{org.name}</td>
-                      <td>{org.organizationID}</td>
+                        <td>{org.organizationID}</td>
-                      <td className={styles.actions}>
+                        <td className={styles.actions}>
-                        <div>
+                          <div>
-                          <button className={styles.iconButton}>
+                            <ActionButton icon={<DeleteIcon />} />
-                            <DeleteIcon />
+                          </div>
-                          </button>
+                        </td>
-                        </div>
+                      </tr>
-                      </td>
+                    );
-                    </tr>
+                  })}
-                  );
+                </tbody>
-                })}
+              </table>
-              </tbody>
+            </div>
-            </table>
+          )}
-          </div>
         </div>
       </div>
     </div>

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

@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -47,29 +47,19 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
-.iconButton {
+.cardContainer {
   display: flex;
-  padding: 6px;
+  padding: 0 16px;
+  padding-bottom: 50px;
+  height: calc(100vh - 170px);
   flex-direction: column;
-  justify-content: center;
+  align-items: flex-start;
-  align-items: center;
+  gap: 12px;
-  flex-shrink: 0;
+  align-self: stretch;
-  aspect-ratio: 1/1;
+  overflow: auto;
-  background-color: rgba(255, 255, 255, 0);
-  outline: none;
-  border: 1px solid #959aff00;
-  cursor: pointer;
-  border-radius: 50%;
-}
-.iconButton:hover {
-  border: 1px solid #959aff;
-  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-}
-.iconButton:hover path {
-  stroke: white;
 }

frontend/src/app/globals.css

@@ -1,6 +1,8 @@
 :root {
   --background: #d2d3e0;
   --foreground: #191a24;
+  --table-font-size: 13px;
+  --title-font-size: 24px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -42,7 +44,7 @@ a {
   }
 }
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
   height: 8px;
   background-color: transparent;
 }
@@ -51,3 +53,13 @@ a {
   border-radius: 2px;
   background: #34384c;
 }
+@media (max-width: 900px) {
+  :root {
+    --table-font-size: 10px;
+  }
+}
+@media (max-width: 500px) {
+  :root {
+    --title-font-size: 18px;
+  }
+}

frontend/src/app/home/page.jsx

@@ -1,7 +1,65 @@
-import React from "react";
+"use client";
 
+import React from "react";
+import userDashboardStyle from "./styles.module.css";
+import LinkIcon from "../components/icons/link";
+import SunIcon from "../components/icons/sun";
+import Link from "next/link";
+import useIsMobile from "../hooks/useIsMobile";
 const HomePage = () => {
-  return <div></div>;
+  const isMobile = useIsMobile();
+  return (
+    // Main
+    <div className={userDashboardStyle.mainWrapper}>
+      <div className={userDashboardStyle.mainContainer}>
+        <div className={userDashboardStyle.userDashContainer}>
+          {/* User Name */}
+          <div className={userDashboardStyle.userNameContainer}>
+            {/* Name and Welcome Msg Section */}
+            <div className={userDashboardStyle.nameSection}>
+              {/* Weather */}
+              <div className={userDashboardStyle.weather}>
+                <SunIcon />
+                <p>
+                  Friday, Feb 23
+                  <span className={userDashboardStyle.ordinal}>rd</span>
+                </p>
+              </div>
+              {/* Name */}
+              <div className={userDashboardStyle.name}>
+                <p className={userDashboardStyle.welcomeGreet}>Hi, Grills!</p>
+                <p className={userDashboardStyle.welcomeMsg}>
+                  Welcome to the ISAAC IDP!
+                </p>
+              </div>
+            </div>
+            {/* Image Section*/}
+            <div className={userDashboardStyle.logoSection}>
+              <div className={userDashboardStyle.gradientGlass}></div>
+            </div>
+          </div>
+          {/* Link */}
+          <div className={userDashboardStyle.linkMainContainer}>
+            <div className={userDashboardStyle.linkContainer}>
+              <div className={userDashboardStyle.link}>
+                <div className={userDashboardStyle.linkIcon}>
+                  {isMobile ? (
+                    <LinkIcon color="#D2D3E1" width="18" height="18" />
+                  ) : (
+                    <LinkIcon />
+                  )}
+                  <p>Connected to</p>
+                </div>
+                <Link href="#">https://isaac.dev.onecoopbank.com</Link>
+              </div>
+            </div>
+          </div>
+          {/* Extra Space */}
+          <div></div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default HomePage;

frontend/src/app/home/styles.module.css

@@ -0,0 +1,215 @@
+.mainWrapper {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.mainContainer {
+  display: flex;
+  padding: 36px;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+}
+.userDashContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+}
+.userNameContainer {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #21232f 0%, #34366f 100%);
+  overflow: hidden;
+}
+.nameSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+}
+.logoSection {
+  display: flex;
+  padding-right: 0.157px;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: stretch;
+  position: relative;
+}
+
+.gradientGlass {
+  max-width: 345.503px;
+  height: 345.503px;
+  transform: rotate(3.836deg);
+  aspect-ratio: 1/1;
+  background: url(/images/idp.png) 50% / cover no-repeat;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.weather {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
+.weather > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.18px;
+}
+
+.ordinal {
+  font-size: 0.6em;
+  vertical-align: super;
+}
+.name {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 48px;
+  align-self: stretch;
+}
+.welcomeGreet {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.24px;
+}
+.welcomeMsg {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.4px;
+}
+
+.linkMainContainer {
+  display: flex;
+  padding: 54px 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.linkContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+}
+.link {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+.linkIcon {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.link,
+.linkIcon > p {
+  color: #959aff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.18px;
+  /* width: 463px; */
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .mainContainer {
+    padding: 16px;
+  }
+  .userDashContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    flex: 1 0 0;
+  }
+  .userNameContainer {
+    border-radius: 12px;
+    flex-direction: column;
+    gap: 24px;
+  }
+  .linkMainContainer {
+    padding: 10px;
+    border-radius: 12px;
+    background: #1e202e;
+  }
+  .welcomeMsg {
+    align-self: stretch;
+    font-size: 36px;
+    line-height: normal;
+    letter-spacing: 0.36px;
+  }
+
+  .logoSection {
+    display: flex;
+    height: 144px;
+    justify-content: flex-end;
+    align-items: flex-end;
+    gap: 10px;
+    align-self: stretch;
+  }
+  .gradientGlass {
+    left: -29.114px;
+  }
+
+  .link {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+  }
+  .linkIcon > p {
+    color: #d2d3e1;
+    font-size: 14px;
+  }
+}
+
+/* Tablet */
+@media (max-width: 1199px) {
+  .userNameContainer {
+    align-items: flex-start;
+  }
+  /* Pwede butngan ani pero modako lagi ang card */
+  /* .logoSection {
+    padding-right: 369px;
+  } */
+}