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

71
frontend/src/app/components/permissions/Permissions.jsx
View File

@@ -1,3 +1,6 @@
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";
@@ -51,75 +54,11 @@ const Permissions = ({ sampleData = [] }) => {
return (
<div className={editUserStyle.permissions} key={index}>
<div className={editUserStyle.permissionsItem}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<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>
<FileIcon />
<p>{perm.permission}</p>
</div>
<div className={editUserStyle.deleteBtn}>
<div className={editUserStyle.deleteSvg}>
<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="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.40234 9.20117V13.9928"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.5977 9.20117V13.9928"
stroke="currentColor"
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="currentColor"
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="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
);

70
frontend/src/app/roles/[rolesId]/page.jsx
View File

@@ -3,9 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import editRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
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 = [
@@ -16,13 +14,13 @@ const page = () => {
{ permission: "robot.create" },
{ permission: "user.delete" },
{ permission: "robot.list" },
// { permission: "robot.delete" },
// { permission: "project.delete" },
// { permission: "project.update" },
// { permission: "service.create" },
// { permission: "service.list" },
// { permission: "service.delete" },
// { permission: "service.update" },
{ permission: "robot.delete" },
{ permission: "project.delete" },
{ permission: "project.update" },
{ permission: "service.create" },
{ permission: "service.list" },
{ permission: "service.delete" },
{ permission: "service.update" },
];
return (
<div className={globalStyle.section}>
@@ -79,57 +77,7 @@ const page = () => {
</div>
{/* Permissions */}
<div className={editRoleStyle.userPermissions}>
{/* Add permissions */}
<div className={editRoleStyle.permissionsContainer}>
{/* Header */}
<div className={editRoleStyle.permissionsHeader}>
<p>Permissions</p>
<div className={editRoleStyle.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={editRoleStyle.permissions} key={index}>
<div className={editRoleStyle.permissionsItem}>
<FileIcon />
<p>{perm.permission}</p>
</div>
<div className={editRoleStyle.deleteBtn}>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
);
})}
</div>
</div>
<Permissions sampleData={sampleData} />
</div>
</div>
</div>

128
frontend/src/app/roles/[rolesId]/styles.module.css
View File

@@ -1,6 +1,6 @@
.addRoleContainer {
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;
@@ -93,125 +94,6 @@
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;
}
.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;
.imanginaryDiv {
padding: 18px;
}

44
frontend/src/app/roles/add/page.jsx
View File

@@ -3,6 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import addRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import Permissions from "@/app/components/permissions/Permissions";
const page = () => {
return (
@@ -16,7 +17,7 @@ const page = () => {
state="add"
requiredButtons={["title", "save"]}
/>
<div className={addRoleStyle.addUserContainer}>
<div className={addRoleStyle.addRoleContainer}>
{/* Input fields Container */}
<div className={addRoleStyle.inputFieldContainer}>
{/* User Details */}
@@ -59,46 +60,7 @@ const page = () => {
</div>
{/* Permissions */}
<div className={addRoleStyle.rolePermissions}>
{/* Add permissions */}
<div className={addRoleStyle.permissionsContainer}>
{/* Header */}
<div className={addRoleStyle.permissionsHeader}>
<p>Permissions</p>
<div className={addRoleStyle.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={addRoleStyle.permissionDefaultState}>
<p>No permission added yet</p>
</div>
</div>
</div>
<Permissions />
</div>
</div>
</div>

123
frontend/src/app/roles/add/styles.module.css
View File

@@ -1,6 +1,6 @@
.addUserContainer {
.addRoleContainer {
display: flex;
padding: 36px 144px 72px 144px;
padding: 0px 144px 0 144px;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
@@ -16,7 +16,8 @@
.roleDetails {
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,118 +93,6 @@
gap: 8px;
align-self: stretch;
}
/* Select Role Dropdown */
.selectField {
display: flex;
height: 44px;
padding: 12px 16px;
align-self: stretch;
background: none;
border-radius: 6px;
border: 1px solid #616583;
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
color: #d2d3e1;
font-family: Inter;
font-size: 16px;
font-weight: 400;
appearance: none;
}
.selectField:focus {
outline: none;
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);
}
.rolePermissions {
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;
}

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;
}