Table added in origanization

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

View File

@@ -1,14 +1,138 @@
"use-client";
import React from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
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 (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<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>