From e9c266fe8f68877732a5979b0983e47723676156 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Tue, 24 Feb 2026 16:26:51 +0800
Subject: [PATCH] Table added in origanization

---
 frontend/src/app/organization/page.jsx        | 124 ++++++++++++++++++
 .../src/app/organization/styles.module.css    |  70 ++++++++++
 2 files changed, 194 insertions(+)

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