feat: Ajout de la page Institutions

components/header.js

@@ -7,6 +7,7 @@ const menu = [
   { url: "/behaviours", label: "Comportements utilisateur" },
   { url: "/pages", label: "Statistiques de visite" },
   { url: "/funnel", label: "Tunnel de conversion" },
+  { url: "/institutions", label: "Institutions" },
 ]
 
 function closeMenu() {

hooks/fetch-institutions-data.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react"
+
+import TableService from "../services/tableService.js"
+
+const useFetchInstitutionsData = () => {
+  const [dataService, setDataService] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    fetch(process.env.aidesJeunesStatisticsURL)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok")
+        }
+        return response.json()
+      })
+      .then((data) => {
+        setDataService(new TableService(data.institutions))
+        setLoading(false)
+      })
+      .catch((error) => {
+        setError(error)
+        setLoading(false)
+      })
+  }, [])
+
+  return { dataService, loading, error }
+}
+
+export default useFetchInstitutionsData

pages/institutions.js

@@ -0,0 +1,180 @@
+import { useState, useEffect } from "react"
+
+import useFetchInstitutionsData from "../hooks/fetch-institutions-data"
+
+const defaultSortOrder = "desc"
+const allType = "Tous"
+
+const filterData = (
+  dataService,
+  queryName,
+  queryCode,
+  selectedType,
+  sortKey,
+  sortOrder,
+) => {
+  let filters = {}
+
+  if (queryName) {
+    filters.name = queryName
+  }
+
+  if (queryCode) {
+    filters.code = queryCode
+  }
+
+  if (selectedType && selectedType !== allType) {
+    filters.type = selectedType
+  }
+
+  let results = dataService.filterByKeys(filters).getResult()
+
+  if (sortKey) {
+    results = dataService.sortByKey(sortKey, sortOrder).getResult()
+  }
+
+  return results
+}
+
+const InstitutionsStats = () => {
+  const { dataService, loading, error } = useFetchInstitutionsData()
+  const [results, setResults] = useState([])
+
+  const [queryName, setQueryName] = useState("")
+  const [queryCode, setQueryCode] = useState("")
+  const [selectedType, setSelectedType] = useState(allType)
+  const [sortKey, setSortKey] = useState(null)
+  const [sortOrder, setSortOrder] = useState(defaultSortOrder)
+
+  useEffect(() => {
+    if (!dataService) {
+      return
+    }
+
+    setResults(
+      filterData(
+        dataService,
+        queryName,
+        queryCode,
+        selectedType,
+        sortKey,
+        sortOrder,
+      ),
+    )
+  }, [queryName, queryCode, selectedType, sortKey, sortOrder, dataService])
+
+  const handleHeaderClick = (newSortKey) => {
+    if (newSortKey === sortKey) {
+      setSortOrder((prevSortOrder) =>
+        prevSortOrder === "asc" ? "desc" : "asc",
+      )
+    } else {
+      setSortKey(newSortKey)
+      setSortOrder(defaultSortOrder)
+    }
+  }
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
+
+  if (error) {
+    return <p>Error: {error.message}</p>
+  }
+
+  return (
+    <>
+      <h2 data-testid="title">Statistiques sur les institutions (EPCI)</h2>
+      <div className="flex-bottom flex-gap">
+        <div>
+          <p>Filtrer par nom</p>
+          <input
+            type="text"
+            value={queryName}
+            onChange={(e) => setQueryName(e.target.value)}
+          />
+        </div>
+        <div>
+          <p>Filtrer par code</p>
+          <input
+            type="text"
+            value={queryCode}
+            onChange={(e) => setQueryCode(e.target.value)}
+          />
+        </div>
+        <div>
+          <p>Filtrer par type</p>
+          <select
+            onChange={(e) => setSelectedType(e.target.value)}
+            value={selectedType}
+          >
+            <option value={allType}>{allType}</option>
+            {dataService.getUniqueValuesForKey("type").map((k) => {
+              return (
+                <option key={k} value={k}>
+                  {k}
+                </option>
+              )
+            })}
+          </select>
+        </div>
+      </div>
+
+      <div className="flex-bottom flex-gap flex-justify">
+        <table data-testid="institutions-table">
+          <thead>
+            <tr>
+              <th>
+                <div>Nom</div>
+              </th>
+              <th>
+                <div>Code</div>
+              </th>
+              <th>
+                <div>Type</div>
+              </th>
+              <th>
+                <div
+                  className={"sortable"}
+                  onClick={() => handleHeaderClick("population")}
+                >
+                  Population
+                </div>
+              </th>
+              <th>
+                <div
+                  className={"sortable"}
+                  onClick={() => handleHeaderClick("simulationCount")}
+                >
+                  Nombre de simulation
+                </div>
+              </th>
+              <th>
+                <div
+                  className={"sortable"}
+                  onClick={() => handleHeaderClick("benefitCount")}
+                >
+                  Nombre d'aides
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {results.map((row, index) => (
+              <tr key={index}>
+                <td className="text-truncate-ellipsis">{row.name}</td>
+                <td>{row.code}</td>
+                <td>{row.type}</td>
+                <td>{row.population}</td>
+                <td>{row.simulationCount}</td>
+                <td>{row.benefitCount}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  )
+}
+
+export default InstitutionsStats