From 1c0532efa7c1a79bd3c2166b4d8741d39780c407 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Wed, 25 Feb 2026 11:39:22 +0800 Subject: [PATCH] Added add ogranization page and project page --- frontend/public/images/BadgeImage.png | Bin 0 -> 4443 bytes .../src/app/components/sidebar/Sidebar.jsx | 14 +- .../app/components/sidebar/styles.module.css | 2 + .../app/components/topHeader/TopHeader.jsx | 126 +++++++----- .../components/topHeader/styles.module.css | 17 ++ frontend/src/app/globals.css | 4 +- frontend/src/app/organization/add/page.jsx | 148 ++++++++++++++ .../app/organization/add/styles.module.css | 191 ++++++++++++++++++ frontend/src/app/organization/page.jsx | 6 +- .../src/app/organization/styles.module.css | 1 - 10 files changed, 450 insertions(+), 59 deletions(-) create mode 100644 frontend/public/images/BadgeImage.png create mode 100644 frontend/src/app/organization/add/page.jsx create mode 100644 frontend/src/app/organization/add/styles.module.css diff --git a/frontend/public/images/BadgeImage.png b/frontend/public/images/BadgeImage.png new file mode 100644 index 0000000000000000000000000000000000000000..94440498d89bc0a20d15e694355455adde47e97e GIT binary patch literal 4443 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 hit*p002ovPDHLkV1h { {/* Navigations */}
{

Home

{
{
{
{
{
{ const pathName = usePathname(); - console.log(pathName); + const router = useRouter(); + const handleNavigateToAdd = () => { + router.push(`${pathName}/add`); + }; return (

{props.topbarTitle}

-
- - - -
+ {!props.state && ( +
+ + + +
+ )} {pathName === "/credentials" ? (
{ ) : ( "" )} -
- - - - -

{props.buttonText}

-
+ {!props.state && ( +
+ + + + +

{props.buttonText}

+
+ )} + {props.state === "add" ? ( + <> +
+ + + +

{props.buttonText}

+
+
router.back()}> +

{props.cancelButtonText}

+
+ + ) : ( + "" + )}
); diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css index e36243d..7f6b869 100644 --- a/frontend/src/app/components/topHeader/styles.module.css +++ b/frontend/src/app/components/topHeader/styles.module.css @@ -55,6 +55,7 @@ border-radius: 6px; border-radius: 6px; border: 1px solid #5358f200; + cursor: pointer; } .mngEnvKeyButton > p { color: #8187ff; @@ -75,3 +76,19 @@ .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%); +} diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index ea52196..90815f3 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -1,11 +1,11 @@ :root { --background: #d2d3e0; - --foreground: #1c1d28; + --foreground: #191a24; } @media (prefers-color-scheme: dark) { :root { - --background: #1c1d28; + --background: #191a24; --foreground: #d2d3e0; } } diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx new file mode 100644 index 0000000..2a2a07f --- /dev/null +++ b/frontend/src/app/organization/add/page.jsx @@ -0,0 +1,148 @@ +import React from "react"; +import globalStyle from "../../globalStyle.module.css"; +import TopHeader from "@/app/components/topHeader/TopHeader"; +import styles from "./styles.module.css"; +import Image from "next/image"; +const AddCredentials = () => { + return ( +
+
+
+ +
+
+
+ + + + + +

Complete the input field before saving

+
+
+
+
+
+
+
+
+ badge image +
+
+ + + + +
+
+
+
+

+ Organization Badge(Optional) +

+
+
+
+
+
+

+ Organization Name * +

+
+
+ +
+ + + + + +

The name is already in used. You can try another.

+
+
+
+
+
+
+
+
+ ); +}; + +export default AddCredentials; diff --git a/frontend/src/app/organization/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css new file mode 100644 index 0000000..082363a --- /dev/null +++ b/frontend/src/app/organization/add/styles.module.css @@ -0,0 +1,191 @@ +.contentContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 48px; + flex: 1 0 0; + align-self: stretch; +} +.upperToolTips { + display: flex; + padding: 10px; + justify-content: center; + align-items: center; + gap: 10px; + align-self: stretch; + background: #959aff; +} +.upperToolTips > div { + display: flex; + align-items: center; + gap: 10px; +} +.upperToolTips > div > p { + color: #191a24; + text-align: center; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.createProjectForm { + display: flex; + padding: 24px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; +} +.organizationBadgeContainer { + display: flex; + align-items: center; + gap: 10px; + align-self: stretch; +} +.organizationBadge { + display: flex; + align-items: center; + gap: 10px; + flex: 1 0 0; +} +.organizationBadgeDetails { + display: flex; + padding: 4px; + justify-content: center; + align-items: center; + gap: 10px; +} +.relativeContainer { + display: flex; + padding: 4px; + justify-content: center; + align-items: center; + gap: 10px; + position: relative; +} +.imageContainer { + display: flex; + width: 70px; + height: 70px; + padding: 11px; + justify-content: center; + align-items: center; + aspect-ratio: 1/1; + border-radius: 100px; + border: 1px solid #616583; + background: #4b4f6d; +} +.addIconContainer { + display: flex; + width: 27.813px; + height: 27.813px; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + right: 4.188px; + bottom: 4.187px; + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25); + border-radius: 100px; + background: #696b95; +} +.labels { + display: flex; + align-items: flex-start; + gap: 2px; + flex: 1 0 0; +} +.labels > p { + color: #d2d3e1; + color: color(display-p3 0.8235 0.8275 0.8784); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.labels > p span { + color: #85869b; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 300; + line-height: normal; +} +.inputGroup { + display: flex; + width: 500px; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} +.inputLabel { + display: flex; + align-items: flex-start; + gap: 2px; + align-self: stretch; +} +.inputLabel > p { + color: #d2d3e1; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.inputLabel > p span { + color: #cfb000; + + font-weight: 600; +} +.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; + gap: 10px; + align-self: stretch; + border-radius: 6px; + border: 1px solid #616583; + background-color: transparent; + color: #85869b; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.inputField > input::placeholder { + color: #85869b; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.prompts { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; +} +.prompts > p { + color: #d49e3d; + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: -0.07px; +} diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx index 798935d..a3ad9e0 100644 --- a/frontend/src/app/organization/page.jsx +++ b/frontend/src/app/organization/page.jsx @@ -69,9 +69,9 @@ const OrganizationPage = () => { - - - + + + diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css index 304fecd..349bf30 100644 --- a/frontend/src/app/organization/styles.module.css +++ b/frontend/src/app/organization/styles.module.css @@ -17,7 +17,6 @@ padding: 12px 24px; gap: 17px; text-align: start; - align-self: stretch; } .tableContainer > table > thead > tr { border-bottom: 1px solid #212235;
Organization NameDate CreatedActionsOrganization NameDate CreatedActions