Refactor remaining pages & improvements

compendium-frontend/src/pages/Organization/ChargingStructure.tsx

 import React, { useContext } from "react";
-import { Table } from "react-bootstrap";
-
 import { ChargingStructure } from "../../Schema";
 import { createNrenTableLookup } from "../../helpers/dataconversion";
-import ColorPill from "../../components/ColorPill";
 import DataPage from "../../components/DataPage";
 import Filter from "../../components/graphing/Filter";
 import { Sections } from "../../helpers/constants";
 import { FilterSelectionContext } from "../../providers/FilterSelectionProvider";
 import ChartContainer from "../../components/graphing/ChartContainer";
 import { useData } from "../../helpers/useData";
+import PillTable from "../../components/PillTable";
 
 function ChargingStructurePage(): React.ReactElement {
     const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
-    const { data: chargingStructureData, years, nrens } = useData<ChargingStructure>('/api/charging/', setFilterSelection);
+    const { data, years, nrens } = useData<ChargingStructure>('/api/charging/', setFilterSelection);
 
-    const selectedData = (chargingStructureData).filter(data =>
+    const selectedData = data.filter(data =>
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
     );
 
@@ -28,7 +26,21 @@ function ChargingStructurePage(): React.ReactElement {
         coloredYears
     />
 
-    const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
+    const columns = [
+        "Flat fee based on bandwidth",
+        "Usage based fee",
+        "Combination flat fee & usage basedfee",
+        "No Direct Charge",
+        "Other",
+    ]
+
+    const columnValueMap = new Map<string, string>([
+        [columns[0], "flat_fee"],
+        [columns[1], "usage_based_fee"],
+        [columns[2], "combination"],
+        [columns[3], "no_charge"],
+        [columns[4], "other"],
+    ]);
 
     return (
         <DataPage title="Charging Mechanism of NRENs"
@@ -37,47 +49,9 @@ function ChargingStructurePage(): React.ReactElement {
          By selecting multiple years and NRENs, the table can be used to compare the charging structure of NRENs."
             category={Sections.Organisation} filter={filterNode}
             data={selectedData} filename="charging_mechanism_of_nrens_per_year">
-            <>
-                <ChartContainer>
-                    <Table className="charging-struct-table" striped bordered responsive>
-                        <colgroup>
-                            <col span={1} style={{ width: "10%" }} />
-                            <col span={1} style={{ width: "18%" }} />
-                            <col span={1} style={{ width: "18%" }} />
-                            <col span={1} style={{ width: "18%" }} />
-                            <col span={1} style={{ width: "18%" }} />
-                            <col span={1} style={{ width: "18%" }} />
-                        </colgroup>
-                        <thead>
-                            <tr>
-                                <th></th>
-                                <th>Flat fee based on bandwidth</th>
-                                <th>Usage based fee</th>
-                                <th>Combination flat fee & usage basedfee</th>
-                                <th>No Direct Charge</th>
-                                <th>Other</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
-                                <tr key={nren}>
-                                    <td>{nren}</td>
-                                    {["flat_fee", "usage_based_fee", "combination", "no_charge", "other"].map(column_key => (
-                                        <td key={column_key}>
-                                            {nrenMap.has(column_key) &&
-                                                showYears.map(year => {
-                                                    const chargingYears = nrenMap.get(column_key)!;
-                                                    return <ColorPill key={year} year={year} active={chargingYears.has(year)} tooltip={""} />;
-                                                })
-                                            }
-                                        </td>
-                                    ))}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </Table>
-                </ChartContainer>
-            </>
+            <ChartContainer>
+                <PillTable columns={columns} dataLookup={dataLookup} columnLookup={columnValueMap} />
+            </ChartContainer>
         </DataPage>
     );
 }