Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

done users page

Browse Source
This commit is contained in:
sigmaBoei
2026-02-26 20:44:19 +08:00
parent ccd0caf14d
commit af243d17cb
7 changed files with 905 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/app/components/header/components/HeaderDetails.jsx
View File

@@ -1,8 +1,8 @@
"use client";
import React from "react";
import orgStyles from "./Organization.module.css";
import profileStyles from "./Profile.module.css";
import orgStyle from "./organization.module.css";
import profileStyle from "./profile.module.css";
import { useState } from "react";
@@ -24,22 +24,22 @@ const HeaderDetails = () => {
return (
<>
{/* Organization and Dropdown Section*/}
<div className={orgStyles.organizationContainer}>
<div className={orgStyles.orgContainer}>
<div className={orgStyle.organizationContainer}>
<div className={orgStyle.orgContainer}>
{/* Logo */}
<div className={orgStyles.orgLogo}></div>
<div className={orgStyles.orgName}>
<div className={orgStyle.orgLogo}></div>
<div className={orgStyle.orgName}>
<p>Organization</p>
<div className={orgStyles.dropdownContainer}>
<div className={orgStyle.dropdownContainer}>
{/* Dropdown Menu*/}
{openOrgDropdown && (
<div className={orgStyles.dropdown}>
<div className={orgStyle.dropdown}>
{/* Organization Header and Search */}
<div className={orgStyles.orgSearchContainer}>
<div className={orgStyle.orgSearchContainer}>
{/* Header */}
<div className={orgStyles.createBtnContainer}>
<div className={orgStyle.createBtnContainer}>
<p>Organization</p>
<div className={orgStyles.createBtn}>
<div className={orgStyle.createBtn}>
<p>Create</p>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -80,8 +80,8 @@ const HeaderDetails = () => {
</div>
</div>
{/* Search */}
<div className={orgStyles.srchInputContainer}>
<div className={orgStyles.srchInputGroup}>
<div className={orgStyle.srchInputContainer}>
<div className={orgStyle.srchInputGroup}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
@@ -112,7 +112,7 @@ const HeaderDetails = () => {
</defs>
</svg>
<input
className={orgStyles.placeholderTxt}
className={orgStyle.placeholderTxt}
type="text"
name="search"
id=""
@@ -123,16 +123,16 @@ const HeaderDetails = () => {
</div>
{/* Select Options */}
<div className={orgStyles.optionsContainer}>
<div className={orgStyle.optionsContainer}>
{orgList.map((org, index) => {
return (
<div
className={orgStyles.orgList}
className={orgStyle.orgList}
key={index}
onClick={() => handleOrgSelect(index)}
>
<div
className={`${orgStyles.iconTxt} ${index === selectedOrg ? orgStyles.active : ""}`}
className={`${orgStyle.iconTxt} ${index === selectedOrg ? orgStyle.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -160,7 +160,7 @@ const HeaderDetails = () => {
)}
{/* Button */}
<div
className={orgStyles.dropdownBtn}
className={orgStyle.dropdownBtn}
onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
>
<p>Project Moonshot Inc.</p>
@@ -188,20 +188,20 @@ const HeaderDetails = () => {
{/* Profile Section */}
<div
className={profileStyles.profileContainer}
className={profileStyle.profileContainer}
onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
>
{/* Profile */}
<div className={profileStyles.profileBadge}>
<div className={profileStyle.profileBadge}>
{/* Username and Role*/}
<div className={profileStyles.nameRole}>
<p className={profileStyles.userName}>JM Grills</p>
<p className={profileStyles.userRole}>Super Admin</p>
<div className={profileStyle.nameRole}>
<p className={profileStyle.userName}>JM Grills</p>
<p className={profileStyle.userRole}>Super Admin</p>
</div>
{/* User profile*/}
<div className={profileStyles.userImgContainer}>
<div className={profileStyles.userPic}></div>
<div className={profileStyle.userImgContainer}>
<div className={profileStyle.userPic}></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -219,11 +219,11 @@ const HeaderDetails = () => {
{/* Dropdown */}
{openProfileDropdown && (
<div className={profileStyles.dropdownContainer}>
<div className={profileStyle.dropdownContainer}>
{/* Settings */}
<div className={profileStyles.settingsBtn}>
<div className={profileStyle.settingsBtn}>
{/* Icon */}
<div className={profileStyles.btn}>
<div className={profileStyle.btn}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
@@ -250,9 +250,9 @@ const HeaderDetails = () => {
<p>Settings</p>
</div>
{/* Logout */}
<div className={profileStyles.logoutBtn}>
<div className={profileStyle.logoutBtn}>
{/* Icon */}
<div className={profileStyles.btn}>
<div className={profileStyle.btn}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}

14
frontend/src/app/components/header/components/Organization.module.css
View File

@@ -45,6 +45,7 @@
cursor: pointer;
position: relative;
}
.dropdownBtn {
display: inline-flex;
align-items: center;
@@ -92,6 +93,18 @@
top: 100%;
margin-top: 8px;
left: 0;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.orgSearchContainer {
@@ -196,6 +209,7 @@
flex-direction: column;
align-items: flex-start;
}
.orgList:hover {
border-radius: 4px;
background: #3c4159;

12
frontend/src/app/components/header/components/Profile.module.css
View File

@@ -89,6 +89,18 @@
z-index: 10;
top: 100%;
margin-top: 3px;
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.settingsBtn,