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

Table added in origanization

Browse Source
This commit is contained in:
Laux Dev
2026-02-24 16:26:51 +08:00
parent 8580c0c6ac
commit e9c266fe8f
2 changed files with 194 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/app/organization/page.jsx
View File

@@ -1,14 +1,138 @@
"use-client";
import React from "react"; import React from "react";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader"; import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css"; import globalStyle from "../globalStyle.module.css";
const OrganizationPage = () => { const OrganizationPage = () => {
const sampleData = [
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
{
organizationName: "Project Moonshot Inc.",
dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
},
];
const handleRowClick = (org) => {
console.log("Row clicked:", org);
};
return ( return (
<div className={globalStyle.section}> <div className={globalStyle.section}>
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
<div className={globalStyle.container}> <div className={globalStyle.container}>
<TopHeader buttonText="Add Organization" topbarTitle="Organization" /> <TopHeader buttonText="Add Organization" topbarTitle="Organization" />
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Organization Name</th>
<th>Date Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.organizationName}</td>
<td>{org.dateCreated}</td>
<td className={styles.actions}>
<div>
<button className={styles.iconButton}>
<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>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

70
frontend/src/app/organization/styles.module.css
View File

@@ -0,0 +1,70 @@
.tableContainer {
width: 100%;
}
.tableContainer > table,
.tableContainer > table > thead {
border-collapse: collapse;
border: none;
width: 100%;
}
.tableContainer {
height: calc(100vh - 170px);
overflow-y: auto;
}
.tableContainer > table > thead > tr > th,
.tableContainer > table > tbody > tr > td {
padding: 12px 24px;
gap: 17px;
text-align: start;
align-self: stretch;
}
.tableContainer > table > thead > tr {
border-bottom: 1px solid #212235;
background: #1c1d2b;
}
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tableContainer > table > tbody > tr {
border-bottom: 1px solid rgba(129, 135, 255, 0);
cursor: pointer;
}
.tableContainer > table > tbody > tr:hover {
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
background: rgba(129, 135, 255, 0.05);
}
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
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;
}