diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx index 2e63a55..6a4bb1e 100644 --- a/frontend/src/app/organization/page.jsx +++ b/frontend/src/app/organization/page.jsx @@ -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 (
+
+ + + + + + + + + + + {sampleData.map((org, index) => { + return ( + + + + + + ); + })} + +
Organization NameDate CreatedActions
{org.organizationName}{org.dateCreated} +
+ +
+
+
diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css index e69de29..304fecd 100644 --- a/frontend/src/app/organization/styles.module.css +++ b/frontend/src/app/organization/styles.module.css @@ -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; +}