Frontend-Internal-Developer-Platform/frontend/src/app/projects/page.jsx

"use client";
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
const ProjectsPage = () => {
  const router = useRouter();
  const sampleData = [
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
  ];

  return (
    <div className={globalStyle.section}>
      <SuccessToast message="Project successfully added!" />
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader buttonText="Create Project" topbarTitle="Project" />
          <div className={styles.tableContainer}>
            <table className={styles.table}>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Version</th>
                  <th>CPU Used/Limit</th>
                  <th>Memory Used/Limit</th>
                  <th>Storage Used/Limit</th>
                  <th>Date Created</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {sampleData.map((project, index) => {
                  return (
                    <tr
                      key={index}
                      onClick={() => router.push("/projects/view")}
                    >
                      <td>{project.name}</td>
                      <td style={{ textAlign: "center" }}>{project.version}</td>
                      <td>
                        <span className={styles.used}>{project.cpuUsed}</span> /{" "}
                        <span className={styles.limit}>{project.cpuLimit}</span>
                      </td>
                      <td>
                        <span className={styles.used}>
                          {project.memoryUsed}
                        </span>{" "}
                        /{" "}
                        <span className={styles.limit}>
                          {project.memoryLimit}
                        </span>
                      </td>
                      <td>
                        <span className={styles.used}>
                          {project.storageUsed}
                        </span>{" "}
                        /{" "}
                        <span className={styles.limit}>
                          {project.storageLimit}
                        </span>
                      </td>
                      <td>{project.dateCreated}</td>
                      <td>
                        <div className={styles.actions}>
                          <div>
                            <button className={styles.iconButton}>
                              <ViewIcon />
                            </button>
                          </div>
                          <div>
                            <button className={styles.iconButton}>
                              <DeleteIcon />
                            </button>
                          </div>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProjectsPage;