+
{ /* can delete the title of the page */ }
RFP History Page
-
+
);
};
diff --git a/src/pages/RFPHistory/style.css.map b/src/pages/RFPHistory/style.css.map
deleted file mode 100644
index c213e81..0000000
--- a/src/pages/RFPHistory/style.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,aAAA;ACAJ;;ADIA;EACI,sBAAA;EACA,iBAAA;EACA,aAAA;EACA,YAAA;EACA,kBAAA;ACDJ;ADEI;EACI,0CAAA;ACAR;ADCQ;EACI,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;ACCZ;ADKY;EACI,iBAAA;ACHhB;ADOQ;EACI,kBAAA;EACA,cAAA;ACLZ;ADMY;EACI,iBAAA;ACJhB","file":"style.css"}
\ No newline at end of file
diff --git a/src/pages/RFPPending/index.tsx b/src/pages/RFPPending/index.tsx
new file mode 100644
index 0000000..33ca402
--- /dev/null
+++ b/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
([]);
+
+ // 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 (
+
+ { /* can delete the title of the page */ }
+
RFP (Pending)
+
+
+ );
+};
+
+export default RFPPending;
diff --git a/src/pages/RFPRejected/index.tsx b/src/pages/RFPRejected/index.tsx
new file mode 100644
index 0000000..90c251c
--- /dev/null
+++ b/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([]);
+
+ // 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 (
+
+ { /* can delete the title of the page */ }
+
RFP (Rejected)
+
+
+ );
+};
+
+export default RFPRejected;
diff --git a/src/pages/RejectedRFP/index.tsx b/src/pages/RejectedRFP/index.tsx
new file mode 100644
index 0000000..071117e
--- /dev/null
+++ b/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([]);
+
+ // 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 (
+
+ { /* can delete the title of the page */ }
+
Rejected RFP
+
+
+ );
+};
+
+export default RejectedRFP;
diff --git a/src/pages/ResourceManagement/index.tsx b/src/pages/ResourceManagement/index.tsx
new file mode 100644
index 0000000..1c153b6
--- /dev/null
+++ b/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([]);
+
+ // set up effects here
+ useEffect(() => {
+ setResources(dummyResources);
+ }, []);
+
+ // return component
+ return (
+
+ { /* can delete the title of the page */ }
+
Resource Management Page
+
+
+ );
+};
+
+export default ResourceManagement;
diff --git a/src/pages/Resources/index.tsx b/src/pages/Resources/index.tsx
new file mode 100644
index 0000000..f6cb98e
--- /dev/null
+++ b/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([]);
+
+ // set up effects here
+ useEffect(() => {
+ setResources(dummyResources);
+ }, []);
+
+ // return component
+ return (
+
+ { /* can delete the title of the page */ }
+
Resource Page
+
+
+ );
+};
+
+export default ResourcePage;
diff --git a/src/pages/table/resource/ResourceManagementTable.tsx b/src/pages/table/resource/ResourceManagementTable.tsx
new file mode 100644
index 0000000..146cbdc
--- /dev/null
+++ b/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) => (
+
+ {resource.name} |
+ {resource.link} |
+
+
+
+
+
+ |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.name} |
+ {TableHeaders.link} |
+ {TableHeaders.action} |
+
+
+ {resourceRows}
+
+ );
+};
+
+export default ResourceManagementTable;
diff --git a/src/pages/table/resource/ResourceTable.tsx b/src/pages/table/resource/ResourceTable.tsx
new file mode 100644
index 0000000..2961e54
--- /dev/null
+++ b/src/pages/table/resource/ResourceTable.tsx
@@ -0,0 +1,41 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=113-146&t=ccxtLLnHPMViuz6A-0
+
+import { Table } from "@mantine/core";
+import '../style.scss';
+
+type ResourceProps = {
+ resource_list: Resource[];
+};
+
+const TableHeaders = {
+ name: "Name",
+ link: "Link"
+};
+
+const ResourceTable = ({ resource_list }: ResourceProps) => {
+ const resourceRows = resource_list.map((resource) => (
+
+ {resource.name} |
+ {resource.link} |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.name} |
+ {TableHeaders.link} |
+
+
+ {resourceRows}
+
+ );
+};
+
+export default ResourceTable;
diff --git a/src/pages/table/rfp/RFPAllRfpTable.tsx b/src/pages/table/rfp/RFPAllRfpTable.tsx
new file mode 100644
index 0000000..638d9b0
--- /dev/null
+++ b/src/pages/table/rfp/RFPAllRfpTable.tsx
@@ -0,0 +1,50 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=112-439&t=ccxtLLnHPMViuz6A-0
+
+import { Table } from "@mantine/core";
+import '../style.scss';
+
+type RFPTableProps = {
+ rfp_list: RFP[];
+};
+
+const TableHeaders = {
+ rfp_number: "RFP NUMBERS",
+ date_submitted: "Date Submitted",
+ status: "Status",
+ submitted_by: "Submitted By",
+ executives: "Executives",
+};
+
+const RFPAllRfpTable = ({ rfp_list }: RFPTableProps) => {
+ const rfpRows = rfp_list.map((rfp) => (
+
+ {rfp.rfp_number} |
+ {rfp.date_submitted.toLocaleDateString()} |
+ {rfp.status} |
+ {rfp.submitter} |
+ {rfp.executive} |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.rfp_number} |
+ {TableHeaders.date_submitted} |
+ {TableHeaders.status} |
+ {TableHeaders.submitted_by} |
+ {TableHeaders.executives} |
+
+
+ {rfpRows}
+
+ );
+};
+
+export default RFPAllRfpTable;
diff --git a/src/pages/table/rfp/RFPFinSecTable.tsx b/src/pages/table/rfp/RFPFinSecTable.tsx
new file mode 100644
index 0000000..eef74c5
--- /dev/null
+++ b/src/pages/table/rfp/RFPFinSecTable.tsx
@@ -0,0 +1,69 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=110-924&t=ccxtLLnHPMViuz6A-0
+
+import { Table, Button, Group } from "@mantine/core";
+import '../style.scss';
+
+type RFPTableProps = {
+ rfp_list: RFP[];
+};
+
+const TableHeaders = {
+ rfp_number: "RFP NUMBERS",
+ date_submitted: "Date Submitted",
+ status: "Status",
+ submitted_by: "Submitted By",
+ executives: "Executives",
+ action: "Action"
+};
+
+const ButtonNames = {
+ approve: "Approve",
+ delete: "Delete"
+}
+
+// TODO
+const onApproveRFP = (rfp: RFP) => {};
+
+// TODO
+const onDeleteRFP = (rfp: RFP) => {};
+
+const RFPFinSecTable = ({ rfp_list }: RFPTableProps) => {
+ const rfpRows = rfp_list.map((rfp) => (
+
+ {rfp.rfp_number} |
+ {rfp.date_submitted.toLocaleDateString()} |
+ {rfp.status} |
+ {rfp.submitter} |
+ {rfp.executive} |
+
+
+
+
+
+ |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.rfp_number} |
+ {TableHeaders.date_submitted} |
+ {TableHeaders.status} |
+ {TableHeaders.submitted_by} |
+ {TableHeaders.executives} |
+ {TableHeaders.action} |
+
+
+ {rfpRows}
+
+ );
+};
+
+export default RFPFinSecTable;
diff --git a/src/pages/RFPHistory/components/RFPTable.tsx b/src/pages/table/rfp/RFPHistoryTable.tsx
similarity index 77%
rename from src/pages/RFPHistory/components/RFPTable.tsx
rename to src/pages/table/rfp/RFPHistoryTable.tsx
index 01d562a..d6a7092 100644
--- a/src/pages/RFPHistory/components/RFPTable.tsx
+++ b/src/pages/table/rfp/RFPHistoryTable.tsx
@@ -1,4 +1,7 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=19-19&t=ccxtLLnHPMViuz6A-0
+
import { Table, Button, Group } from "@mantine/core";
+import '../style.scss';
type RFPTableProps = {
rfp_list: RFP[];
@@ -22,7 +25,7 @@ const onViewRFP = (rfp: RFP) => {};
// TODO
const onDelete = (rfp: RFP) => {};
-const RFPTable = ({ rfp_list }: RFPTableProps) => {
+const RFPHistoryTable = ({ rfp_list }: RFPTableProps) => {
const rfpRows = rfp_list.map((rfp) => (
{rfp.rfp_number} |
@@ -42,19 +45,19 @@ const RFPTable = ({ rfp_list }: RFPTableProps) => {
verticalSpacing="md"
horizontalSpacing="md"
highlightOnHover
- className="rfp-table"
+ className="table"
>
-
+
{TableHeaders.rfp_number} |
{TableHeaders.date_submitted} |
{TableHeaders.status} |
{TableHeaders.details} |
-
{rfpRows}
+ {rfpRows}
);
};
-export default RFPTable;
+export default RFPHistoryTable;
diff --git a/src/pages/table/rfp/RFPPendingTable.tsx b/src/pages/table/rfp/RFPPendingTable.tsx
new file mode 100644
index 0000000..23e9950
--- /dev/null
+++ b/src/pages/table/rfp/RFPPendingTable.tsx
@@ -0,0 +1,47 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=108-228&t=ccxtLLnHPMViuz6A-0
+
+import { Table } from "@mantine/core";
+import '../style.scss';
+
+type RFPTableProps = {
+ rfp_list: RFP[];
+};
+
+const TableHeaders = {
+ rfp_number: "RFP NUMBERS",
+ date_submitted: "Date Submitted",
+ status: "Status",
+ submitted_by: "Submitted By",
+};
+
+const RFPPendingTable = ({ rfp_list }: RFPTableProps) => {
+ const rfpRows = rfp_list.map((rfp) => (
+
+ {rfp.rfp_number} |
+ {rfp.date_submitted.toLocaleDateString()} |
+ {rfp.status} |
+ {rfp.submitter} |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.rfp_number} |
+ {TableHeaders.date_submitted} |
+ {TableHeaders.status} |
+ {TableHeaders.submitted_by} |
+
+
+ {rfpRows}
+
+ );
+};
+
+export default RFPPendingTable;
diff --git a/src/pages/table/rfp/RFPRejectedTable.tsx b/src/pages/table/rfp/RFPRejectedTable.tsx
new file mode 100644
index 0000000..504bbe0
--- /dev/null
+++ b/src/pages/table/rfp/RFPRejectedTable.tsx
@@ -0,0 +1,52 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=112-531&t=ccxtLLnHPMViuz6A-0
+
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=110-924&t=ccxtLLnHPMViuz6A-0
+
+import { Table } from "@mantine/core";
+import '../style.scss';
+
+type RFPTableProps = {
+ rfp_list: RFP[];
+};
+
+const TableHeaders = {
+ rfp_number: "RFP NUMBERS",
+ date_submitted: "Date Submitted",
+ status: "Status",
+ submitted_by: "Submitted By",
+ executives: "Executives",
+};
+
+const RFPRejectedTable = ({ rfp_list }: RFPTableProps) => {
+ const rfpRows = rfp_list.map((rfp) => (
+
+ {rfp.rfp_number} |
+ {rfp.date_submitted.toLocaleDateString()} |
+ {rfp.status} |
+ {rfp.submitter} |
+ {rfp.executive} |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.rfp_number} |
+ {TableHeaders.date_submitted} |
+ {TableHeaders.status} |
+ {TableHeaders.submitted_by} |
+ {TableHeaders.executives} |
+
+
+ {rfpRows}
+
+ );
+};
+
+export default RFPRejectedTable;
diff --git a/src/pages/table/rfp/RFPTable.tsx b/src/pages/table/rfp/RFPTable.tsx
new file mode 100644
index 0000000..8d36ee6
--- /dev/null
+++ b/src/pages/table/rfp/RFPTable.tsx
@@ -0,0 +1,66 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=202-224&t=ccxtLLnHPMViuz6A-0
+
+import { Table, Button, Group } from "@mantine/core";
+import '../style.scss';
+
+type RFPTableProps = {
+ rfp_list: RFP[];
+};
+
+const TableHeaders = {
+ rfp_number: "RFP NUMBERS",
+ date_submitted: "Date Submitted",
+ status: "Status",
+ submitted_by: "Submitted By",
+ action: "Action",
+};
+
+const ButtonNames = {
+ approve: "Approve",
+ delete: "Delete"
+}
+
+// TODO
+const onApproveRFP = (rfp: RFP) => {};
+
+// TODO
+const onDeleteRFP = (rfp: RFP) => {};
+
+const RFPTable = ({ rfp_list }: RFPTableProps) => {
+ const rfpRows = rfp_list.map((rfp) => (
+
+ {rfp.rfp_number} |
+ {rfp.date_submitted.toLocaleDateString()} |
+ {rfp.status} |
+ {rfp.submitter} |
+
+
+
+
+
+ |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.rfp_number} |
+ {TableHeaders.date_submitted} |
+ {TableHeaders.status} |
+ {TableHeaders.submitted_by} |
+ {TableHeaders.action} |
+
+
+ {rfpRows}
+
+ );
+};
+
+export default RFPTable;
diff --git a/src/pages/table/rfp/RejectedRFPTable.tsx b/src/pages/table/rfp/RejectedRFPTable.tsx
new file mode 100644
index 0000000..b82d1b0
--- /dev/null
+++ b/src/pages/table/rfp/RejectedRFPTable.tsx
@@ -0,0 +1,55 @@
+//https://www.figma.com/file/oLAkh2SB1j30ih53E6HFyq/Financial-Secretary-Claiming-Website?node-id=16-62&t=ccxtLLnHPMViuz6A-0
+
+import { Table, Button, Group } from "@mantine/core";
+import '../style.scss';
+
+type RFPTableProps = {
+ rfp_list: RFP[];
+};
+
+const TableHeaders = {
+ rfp_number: "RFP NUMBERS",
+ date_submitted: "Date Submitted",
+ details: "Details",
+};
+
+const ButtonNames = {
+ view_details: "View Details"
+}
+
+// TODO
+const onViewDetailsRFP = (rfp: RFP) => {};
+
+const RejectedRFPTable = ({ rfp_list }: RFPTableProps) => {
+ const rfpRows = rfp_list.map((rfp) => (
+
+ {rfp.rfp_number} |
+ {rfp.date_submitted.toLocaleDateString()} |
+
+
+
+
+ |
+
+ ));
+
+ return (
+
+
+
+ {TableHeaders.rfp_number} |
+ {TableHeaders.date_submitted} |
+ {TableHeaders.details} |
+
+
+ {rfpRows}
+
+ );
+};
+
+export default RejectedRFPTable;
diff --git a/src/pages/RFPHistory/style.css b/src/pages/table/style.css
similarity index 63%
rename from src/pages/RFPHistory/style.css
rename to src/pages/table/style.css
index 19cbc65..091fac2 100644
--- a/src/pages/RFPHistory/style.css
+++ b/src/pages/table/style.css
@@ -1,30 +1,30 @@
-.rfp-history-page {
+.page {
padding: 2rem;
}
-.rfp-table {
+.table {
font-family: "Poppins";
line-height: 27px;
padding: 2rem;
margin: 2rem;
text-align: center;
}
-.rfp-table .rfp-table-header {
+.table .table-header {
background-color: rgba(239, 239, 239, 0.6);
}
-.rfp-table .rfp-table-header th {
+.table .table-header th {
text-align: center;
font-style: normal;
font-weight: 600;
font-size: 1.5rem;
}
-.rfp-table .rfp-table-body tr td {
+.table .table-body tr td {
font-size: 1.2rem;
}
-.rfp-table .rfp-table-body .btn-group {
+.table .table-body .btn-group {
text-align: center;
margin: 0 auto;
}
-.rfp-table .rfp-table-body .btn-group Button {
+.table .table-body .btn-group Button {
font-size: 1.2rem;
}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/src/pages/table/style.css.map b/src/pages/table/style.css.map
new file mode 100644
index 0000000..51b7b1e
--- /dev/null
+++ b/src/pages/table/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;ACCJ;;ADEA;EACI,sBAAA;EACA,iBAAA;EACA,aAAA;EACA,YAAA;EACA,kBAAA;ACCJ;ADCI;EACI,0CAAA;ACCR;ADCQ;EACI,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;ACCZ;ADKY;EACI,iBAAA;ACHhB;ADOQ;EACI,kBAAA;EACA,cAAA;ACLZ;ADOY;EACI,iBAAA;ACLhB","file":"style.css"}
\ No newline at end of file
diff --git a/src/pages/RFPHistory/style.scss b/src/pages/table/style.scss
similarity index 87%
rename from src/pages/RFPHistory/style.scss
rename to src/pages/table/style.scss
index 1934b62..3b1dc82 100644
--- a/src/pages/RFPHistory/style.scss
+++ b/src/pages/table/style.scss
@@ -1,17 +1,17 @@
-
-.rfp-history-page {
+.page {
padding: 2rem;
-
}
-.rfp-table {
+.table {
font-family: 'Poppins';
line-height: 27px;
padding: 2rem;
margin: 2rem;
text-align: center;
- .rfp-table-header {
+
+ .table-header {
background-color: rgba(239, 239, 239, 0.6);
+
th {
text-align: center;
font-style: normal;
@@ -19,8 +19,8 @@
font-size: 1.5rem;
}
}
-
- .rfp-table-body {
+
+ .table-body {
tr {
td {
font-size: 1.2rem;
@@ -30,6 +30,7 @@
.btn-group {
text-align: center;
margin: 0 auto;
+
Button {
font-size: 1.2rem;
}
diff --git a/src/types.d.ts b/src/types.d.ts
index f4f18f8..ec8ab32 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,10 +1,18 @@
enum RFPStatus {
APRROVED = "APPROVED",
REJECTED = "REJECTED",
+ PENDING = "PENDING"
}
interface RFP {
- rfp_number: number;
+ rfp_number: string;
date_submitted: Date;
status: RFPStatus;
+ submitter?: string;
+ executive?: string;
}
+
+interface Resource {
+ name: string;
+ link: string;
+}
\ No newline at end of file