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

imported components

Browse Source
This commit is contained in:
benzbarquilla
2026-03-03 20:42:12 +08:00
parent cafd273f90
commit 0a2bae59ff
9 changed files with 37 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/app/users/[usersId]/page.jsx
View File

@@ -6,9 +6,7 @@ import Prompts from "@/app/components/prompts/Prompts";
import { useState } from "react";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import ActionButton from "@/app/components/actionButton/ActionButton";
import DeleteIcon from "@/app/components/icons/delete";
import FileIcon from "@/app/components/icons/file";
import Permissions from "@/app/components/permissions/Permissions";
const Page = () => {
const sampleData = [
@@ -96,61 +94,8 @@ const Page = () => {
</div>
</form>
</div>
{/* Permissions */}
<div className={editUserStyle.userPermissions}>
{/* Add permissions */}
<div className={editUserStyle.imanginaryDiv}></div>
<div className={editUserStyle.permissionsContainer}>
{/* Header */}
<div className={editUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={editUserStyle.svgContainer}>
<div>
<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>
</div>
</div>
</div>
{/* State text (static) */}
{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>
<Permissions sampleData={sampleData} />
</div>
</div>
</div>

127
frontend/src/app/users/[usersId]/styles.module.css
View File

@@ -110,130 +110,3 @@
.imanginaryDiv {
padding: 18px;
}
.userPermissions {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 6px;
height: calc(100vh - 175px);
position: relative;
overflow: auto;
scrollbar-width: none;
}
.permissionsContainer {
display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 6px;
background: #1d1e2a;
background: color(display-p3 0.1138 0.1191 0.1616);
}
.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;
color: color(display-p3 0.8235 0.8275 0.8784);
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;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.svgContainer > div {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.permissionDefaultState {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
}
.permissionDefaultState p {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
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;
}
.permissions {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
}
.permissions:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
background: rgba(129, 135, 255, 0.05);
background: color(display-p3 0.5098 0.5294 1 / 0.05);
}
.permissionsItem {
display: flex;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
}
.permissionsItem > 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;
}

42
frontend/src/app/users/add/page.jsx
View File

@@ -4,6 +4,7 @@ import globalStyle from "../../globalStyle.module.css";
import addUserStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import Permissions from "@/app/components/permissions/Permissions";
const page = () => {
return (
<div className={globalStyle.section}>
@@ -68,46 +69,7 @@ const page = () => {
</div>
{/* Permissions */}
<div className={addUserStyle.userPermissions}>
{/* Add permissions */}
<div className={addUserStyle.permissionsContainer}>
{/* Header */}
<div className={addUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={addUserStyle.svgContainer}>
<div>
<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>
</div>
</div>
</div>
{/* State text (static) */}
<div className={addUserStyle.permissionDefaultState}>
<p>No permission added yet</p>
</div>
</div>
</div>
<Permissions />
</div>
</div>
</div>

96
frontend/src/app/users/add/styles.module.css
View File

@@ -1,6 +1,6 @@
.addUserContainer {
display: flex;
padding: 36px 144px 72px 144px;
padding: 0px 144px 0px 144px;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
@@ -16,7 +16,8 @@
.userDetails {
display: flex;
width: 400px;
padding: 24px 24px 48px 24px;
padding: 20px 24px 48px 24px;
margin-top: 36px;
flex-direction: column;
align-items: flex-start;
border-radius: 6px;
@@ -92,93 +93,6 @@
gap: 8px;
align-self: stretch;
}
.userPermissions {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 6px;
}
.permissionsContainer {
display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 6px;
background: #1d1e2a;
background: color(display-p3 0.1138 0.1191 0.1616);
}
.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;
color: color(display-p3 0.8235 0.8275 0.8784);
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;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.svgContainer > div {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 6px;
background: #27293b;
background: color(display-p3 0.1529 0.1608 0.2275);
}
.permissionDefaultState {
display: flex;
height: 43.813px;
padding: 8px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
}
.permissionDefaultState p {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
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;
.imanginaryDiv {
padding: 18px;
}