[FIN-8] Create RFP Table Skeleton

src/App.tsx

@@ -1,12 +1,28 @@
 
 import "bootstrap/dist/css/bootstrap.min.css";
+import RFP from "pages/RFP";
+import RFPAllRfp from "pages/RFPAllRfp";
+import RFPFinSec from "pages/RFPFinSec";
 import RFPHistoryPage from 'pages/RFPHistory';
+import RFPPending from "pages/RFPPending";
+import RFPRejected from "pages/RFPRejected";
+import RejectedRFP from "pages/RejectedRFP";
+import ResourceManagement from "pages/ResourceManagement";
+import ResourcePage from "pages/Resources";
 
 function App() {
 
   return (
     <div className="App">
       <RFPHistoryPage />
+      <ResourcePage />
+      <RFP />
+      <RFPPending />
+      <RFPFinSec />
+      <ResourceManagement />
+      <RejectedRFP />
+      <RFPRejected />
+      <RFPAllRfp />
     </div>
   );
 }

src/dummy/dummyRFPs.json

@@ -1,17 +1,16 @@
 [
     {
-      "rfp_number": 0,
+      "rfp_number": "RFPCMIT133",
       "date_submitted": "2022-01-23T09:04:45.904Z",
-      "status": "APPROVED"
+      "status": "PENDING",
+      "submitter": "Daniel Tan",
+      "executive": "Ricky"
     },
     {
-      "rfp_number": 1,
+      "rfp_number": "RFPCMIT132",
       "date_submitted": "2022-03-23T09:04:45.904Z",
-      "status": "APPROVED"
-    },
-    {
-      "rfp_number": 2,
-      "date_submitted": "2022-05-23T09:04:45.904Z",
-      "status": "REJECTED"
+      "status": "PENDING",
+      "submitter": "Daniel Tan",
+      "executive": "Ricky"
     }
 ]

src/dummy/dummyResources.json

@@ -0,0 +1,10 @@
+[
+    {
+        "name": "RFPs Guideline",
+        "link": "https://google.docs/adsfmfsjfokeo"
+    },
+    {
+        "name": "RFP Form",
+        "link": "https://google.sheet/123knfkn244vdv"
+    }
+]

src/pages/RFP/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import dummyRFPs from "../../dummy/dummyRFPs.json";
+import RFPTable from "pages/table/rfp/RFPTable";
+
+const RFP = () => {
+  // set up states here
+  const [rfps, setRFPs] = useState<RFP[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    const data = dummyRFPs.map((rfp) => ({
+      ...rfp,
+      date_submitted: new Date(rfp.date_submitted),
+      status: rfp.status as RFPStatus,
+    }));
+    setRFPs(data);
+  }, []);
+
+  // return component
+  return (
+    <div className="page" >
+      { /* can delete the title of the page */ }
+      <h1>RFP</h1>
+      <RFPTable rfp_list={rfps}/>
+    </div>
+  );
+};
+
+export default RFP;

src/pages/RFPAllRfp/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import dummyRFPs from "../../dummy/dummyRFPs.json";
+import RFPAllRfpTable from "pages/table/rfp/RFPAllRfpTable";
+
+const RFPAllRfp = () => {
+  // set up states here
+  const [rfps, setRFPs] = useState<RFP[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    const data = dummyRFPs.map((rfp) => ({
+      ...rfp,
+      date_submitted: new Date(rfp.date_submitted),
+      status: rfp.status as RFPStatus,
+    }));
+    setRFPs(data);
+  }, []);
+
+  // return component
+  return (
+    <div className="page" >
+      { /* can delete the title of the page */ }
+      <h1>RFP (All Rfps)</h1>
+      <RFPAllRfpTable rfp_list={rfps}/>
+    </div>
+  );
+};
+
+export default RFPAllRfp;

src/pages/RFPFinSec/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import dummyRFPs from "../../dummy/dummyRFPs.json";
+import RFPFinSecTable from "pages/table/rfp/RFPFinSecTable";
+
+const RFPFinSec = () => {
+  // set up states here
+  const [rfps, setRFPs] = useState<RFP[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    const data = dummyRFPs.map((rfp) => ({
+      ...rfp,
+      date_submitted: new Date(rfp.date_submitted),
+      status: rfp.status as RFPStatus,
+    }));
+    setRFPs(data);
+  }, []);
+
+  // return component
+  return (
+    <div className="page" >
+      { /* can delete the title of the page */ }
+      <h1>RFP Incoming (Finance Secretary)</h1>
+      <RFPFinSecTable rfp_list={rfps}/>
+    </div>
+  );
+};
+
+export default RFPFinSec;

src/pages/RFPHistory/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import dummyRFPs from "../../dummy/dummyRFPs.json";
-import RFPTable from './components/RFPTable';
-import './style.scss';
+import RFPHistoryTable from "pages/table/rfp/RFPHistoryTable";
 
 const RFPHistoryPage = () => {
   // set up states here
@@ -19,10 +18,10 @@ const RFPHistoryPage = () => {
 
   // return component
   return (
-    <div className="rfp-history-page" >
+    <div className="page" >
       { /* can delete the title of the page */ }
       <h1>RFP History Page</h1>
-      <RFPTable rfp_list={rfps}/>
+      <RFPHistoryTable rfp_list={rfps}/>
     </div>
   );
 };

src/pages/RFPPending/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import dummyRFPs from "../../dummy/dummyRFPs.json";
+import RFPPendingTable from "pages/table/rfp/RFPPendingTable";
+
+const RFPPending = () => {
+  // set up states here
+  const [rfps, setRFPs] = useState<RFP[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    const data = dummyRFPs.map((rfp) => ({
+      ...rfp,
+      date_submitted: new Date(rfp.date_submitted),
+      status: rfp.status as RFPStatus,
+    }));
+    setRFPs(data);
+  }, []);
+
+  // return component
+  return (
+    <div className="page" >
+      { /* can delete the title of the page */ }
+      <h1>RFP (Pending)</h1>
+      <RFPPendingTable rfp_list={rfps}/>
+    </div>
+  );
+};
+
+export default RFPPending;

src/pages/RFPRejected/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import dummyRFPs from "../../dummy/dummyRFPs.json";
+import RFPRejectedTable from "pages/table/rfp/RFPRejectedTable";
+
+const RFPRejected = () => {
+  // set up states here
+  const [rfps, setRFPs] = useState<RFP[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    const data = dummyRFPs.map((rfp) => ({
+      ...rfp,
+      date_submitted: new Date(rfp.date_submitted),
+      status: rfp.status as RFPStatus,
+    }));
+    setRFPs(data);
+  }, []);
+
+  // return component
+  return (
+    <div className="page" >
+      { /* can delete the title of the page */ }
+      <h1>RFP (Rejected)</h1>
+      <RFPRejectedTable rfp_list={rfps}/>
+    </div>
+  );
+};
+
+export default RFPRejected;

src/pages/RejectedRFP/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import dummyRFPs from "../../dummy/dummyRFPs.json";
+import RejectedRFPTable from "pages/table/rfp/RejectedRFPTable";
+
+const RejectedRFP = () => {
+  // set up states here
+  const [rfps, setRFPs] = useState<RFP[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    const data = dummyRFPs.map((rfp) => ({
+      ...rfp,
+      date_submitted: new Date(rfp.date_submitted),
+      status: rfp.status as RFPStatus,
+    }));
+    setRFPs(data);
+  }, []);
+
+  // return component
+  return (
+    <div className="page" >
+      { /* can delete the title of the page */ }
+      <h1>Rejected RFP</h1>
+      <RejectedRFPTable rfp_list={rfps}/>
+    </div>
+  );
+};
+
+export default RejectedRFP;

src/pages/ResourceManagement/index.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import dummyResources from "../../dummy/dummyResources.json";
+import ResourceManagementTable from "pages/table/resource/ResourceManagementTable";
+
+const ResourceManagement = () => {
+  // set up states here
+  const [resources, setResources] = useState<Resource[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    setResources(dummyResources);
+  }, []);
+
+  // return component
+  return (
+    <div className="page">
+      { /* can delete the title of the page */ }
+      <h1>Resource Management Page</h1>
+      <ResourceManagementTable resource_list={resources}/>
+    </div>
+  );
+};
+
+export default ResourceManagement;

src/pages/Resources/index.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import dummyResources from "../../dummy/dummyResources.json";
+import ResourceTable from "pages/table/resource/ResourceTable";
+
+const ResourcePage = () => {
+  // set up states here
+  const [resources, setResources] = useState<Resource[]>([]);
+
+  // set up effects here
+  useEffect(() => {
+    setResources(dummyResources);
+  }, []);
+
+  // return component
+  return (
+    <div className="page">
+      { /* can delete the title of the page */ }
+      <h1>Resource Page</h1>
+      <ResourceTable resource_list={resources}/>
+    </div>
+  );
+};
+
+export default ResourcePage;

src/pages/table/resource/ResourceManagementTable.tsx

@@ -0,0 +1,60 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=113-11&t=ccxtLLnHPMViuz6A-0
+
+import { Table, Button, Group } from "@mantine/core";
+import '../style.scss';
+
+type ResourceProps = {
+  resource_list: Resource[];
+};
+
+const TableHeaders = {
+    name: "Name",
+    link: "Link",
+    action: "Action"
+};
+
+const ButtonNames = {
+    edit: "Edit",
+    delete: "Delete"
+}
+
+// TODO
+const onEditResource = (resource: Resource) => {};
+
+// TODO
+const onDeleteResource = (resource: Resource) => {};
+
+const ResourceManagementTable = ({ resource_list }: ResourceProps) => {
+  const resourceRows = resource_list.map((resource) => (
+    <tr key={crypto.randomUUID()}>
+        <td>{resource.name}</td>
+        <td><a href={resource.link}>{resource.link}</a></td>
+        <td>
+            <Group className="btn-group">
+                <Button variant="light" color="green" onClick={() => onEditResource(resource)} >{ButtonNames.edit}</Button>
+                <Button variant="light" color="red" onClick={() => onDeleteResource(resource)} >{ButtonNames.delete}</Button>
+            </Group>
+        </td>
+    </tr>
+  ));
+
+  return (
+    <Table
+      verticalSpacing="md"
+      horizontalSpacing="md"
+      highlightOnHover
+      className="table"
+    >
+      <thead>
+        <tr className="table-header">
+          <th>{TableHeaders.name}</th>
+          <th>{TableHeaders.link}</th>
+          <th>{TableHeaders.action}</th>
+        </tr>
+      </thead>
+      <tbody className="table-body">{resourceRows}</tbody>
+    </Table>
+  );
+};
+
+export default ResourceManagementTable;