fix: silva 400 replace jsx and js

docker-compose.yml

@@ -3,6 +3,7 @@ x-frontend: &frontend
     VITE_ZONE: DEV
     VITE_USER_POOLS_ID: ca-central-1_t2HSZBHur
     VITE_USER_POOLS_WEB_CLIENT_ID: 3g6n2ha1loi4kp1jhaq359vrvb
+    VITE_BACKEND_URL: http://localhost:8080
   healthcheck:
     test: curl http://localhost:3000"
     interval: 15s

frontend/src/components/ActionsTable/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from "@carbon/react";
+import StatusTag from "../StatusTag";
+import ActivityTag from "../ActivityTag";
+
+interface IActionsTable {
+  rows: any[];
+  headers: any[];
+}
+
+const ActionsTable: React.FC<IActionsTable> = ({rows, headers}) => (
+  <Table size="lg" useZebraStyles={false} aria-label="actions table">
+    <TableHead>
+      <TableRow>
+        {headers.map(header => <TableHeader id={header.key} key={header.key}>
+            {header.header}
+          </TableHeader>)}
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {rows.map((row, idx) => <TableRow key={idx}>
+      {Object.keys(row).filter(key => key !== 'id').map(key => {
+        return (
+        <TableCell key={key}>
+          {key === "status" ? (
+            <StatusTag type={row[key]} />
+          ):
+          key === "activityType" && !row["fileFormat"] ? (
+            <ActivityTag type={row[key]} fileFormat={"Unknown"} />
+          ):
+          key === "activityType" && row["fileFormat"] ? (
+            <ActivityTag type={row[key]} fileFormat={row["fileFormat"]} />
+          ):
+          row[key]}
+        </TableCell>
+        );
+      })}
+        </TableRow>)}
+    </TableBody>
+  </Table>
+);
+
+export default ActionsTable;

frontend/src/components/BarChartGrouped/index.jsx → frontend/src/components/BarChartGrouped/index.tsx

@@ -1,57 +1,66 @@
 import React, { useState, useEffect } from "react";
-import { GroupedBarChart } from "@carbon/charts-react";
+import { GroupedBarChart, ScaleTypes } from "@carbon/charts-react";
 import { Dropdown, DatePicker, DatePickerInput } from "@carbon/react";
 import "@carbon/charts/styles.css";
 import "./BarChartGrouped.scss";
 import { fetchOpeningsPerYear } from "../../services/OpeningService";
 
+interface IDropdownItem {
+  value: string,
+  text: string
+}
+
 const BarChartGrouped = () => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const [chartData, setChartData] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [orgUnitCode, setOrgUnitCode] = useState(null);
-  const [statusCode, setStatusCode] = useState(null);
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
+  const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [orgUnitCode, setOrgUnitCode] = useState<string>('');
+  const [statusCode, setStatusCode] = useState<string>('');
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
 
   const handleResize = () => {
     setWindowWidth(window.innerWidth);
   };
 
   useEffect(() => {
+    const fetchChartData = async () => {
+      try {
+        setIsLoading(true);
+        let formattedStartDate: string | null = null;
+        let formattedEndDate: string | null = null;
+
+        if (startDate) {
+          formattedStartDate = formatDateToString(startDate);
+        }
+        if (endDate) {
+          formattedEndDate = formatDateToString(endDate);
+        }
+
+        const data = await fetchOpeningsPerYear({
+          orgUnitCode,
+          statusCode,
+          entryDateStart: formattedStartDate,
+          entryDateEnd: formattedEndDate
+        });
+        setChartData(data);
+        setIsLoading(false);
+      } catch (error) {
+        console.error("Error fetching chart data:", error);
+        setIsLoading(false);
+      }
+    };
+
     fetchChartData();
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [orgUnitCode, statusCode, startDate, endDate]);
 
-  const fetchChartData = async () => {
-    try {
-      setIsLoading(true);
-      let formattedStartDate = startDate;
-      let formattedEndDate = endDate;
-
-      if (startDate) {
-        formattedStartDate = formatDateToString(startDate);
-      }
-      if (endDate) {
-        formattedEndDate = formatDateToString(endDate);
-      }
-
-      const data = await fetchOpeningsPerYear(orgUnitCode, statusCode, formattedStartDate, formattedEndDate);
-      setChartData(data);
-      setIsLoading(false);
-    } catch (error) {
-      console.error("Error fetching chart data:", error);
-      setIsLoading(false);
-    }
-  };
-
-
-  const formatDateToString = (dates) => {
-    const date = dates[0]
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
+  const formatDateToString = (dateToFormat: Date | null) => {
+    if (!dateToFormat) return null;
+    const year = dateToFormat.getFullYear();
+    const month = String(dateToFormat.getMonth() + 1).padStart(2, "0");
+    const day = String(dateToFormat.getDate()).padStart(2, "0");
     return `${year}-${month}-${day}`;
   };
 
@@ -65,7 +74,7 @@ const BarChartGrouped = () => {
         mapsTo: "value",
       },
       bottom: {
-        scaleType: "labels",
+        scaleType: ScaleTypes.LABELS,
         mapsTo: "key",
       },
     },
@@ -111,31 +120,41 @@ const BarChartGrouped = () => {
     // Add more options as needed
   ];
 
+  const setOrgUnitCodeSelected = ({selectedItem}:{selectedItem: IDropdownItem}) => {
+    setOrgUnitCode(selectedItem.value);
+  };
+
+  const setStatusCodeSelected = ({selectedItem}:{selectedItem: IDropdownItem}) => {
+    setStatusCode(selectedItem.value);
+  };
+
   return (
     <div className="px-3">
       <div className="row gy-2 pb-3">
         <div className="col-md-4 p-0">
           <Dropdown
             id="district-dropdown"
             label={windowWidth <= 1584 ? "District" : "Filter by district"}
+            titleText={windowWidth <= 1584 ? "District" : "Filter by district"}
             items={orgUnitItems}
-            itemToString={item => item ? item.text : ''}
-            onChange={({ selectedItem }) => setOrgUnitCode(selectedItem.value)}
+            itemToString={(item: IDropdownItem) => item ? item.text : ''}
+            onChange={setOrgUnitCodeSelected}
           />
         </div>
         <div className="col-md-4 p-0 px-md-1">
           <Dropdown
             id="status-dropdown"
             label={windowWidth <= 1584 ? "Status" : "Filter by status"}
+            titleText={windowWidth <= 1584 ? "Status" : "Filter by status"}
             items={statusItems}
-            itemToString={item => item ? item.text : ''}
-            onChange={({ selectedItem }) => setStatusCode(selectedItem.value)}
+            itemToString={(item: IDropdownItem) => item ? item.text : ''}
+            onChange={setStatusCodeSelected}
           />
         </div>
         <div className="col-2 px-md-1 d-none d-md-block">
           <DatePicker
             datePickerType="single"
-            onChange={date => setStartDate(date)}
+            onChange={(date: Date) => setStartDate(date)}
           >
             <DatePickerInput
               id="start-date-picker-input-id"
@@ -148,7 +167,7 @@ const BarChartGrouped = () => {
         <div className="col-2 px-md-1 d-none d-md-block">
           <DatePicker
             datePickerType="single"
-            onChange={date => setEndDate(date)}
+            onChange={(date: Date) => setEndDate(date)}
           >
             <DatePickerInput
               id="end-date-picker-input-id"

frontend/src/components/DonutChartView/index.jsx → frontend/src/components/DonutChartView/index.tsx

@@ -1,17 +1,27 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, ChangeEvent, useCallback } from "react";
 import { DonutChart } from "@carbon/charts-react";
 import { Dropdown, DatePicker, DatePickerInput, TextInput } from "@carbon/react";
 import "./DonutChartView.scss";
 import { fetchFreeGrowingMilestones } from "../../services/OpeningService";
 
-const DonutChartView = () => {
+interface IDonutChart {
+  group: any;
+  value: any;
+}
+
+interface IDropdownItem {
+  value: string,
+  text: string
+}
+
+const DonutChartView: React.FC = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const [chartData, setChartData] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [orgUnitCode, setOrgUnitCode] = useState("");
-  const [clientNumber, setClientNumber] = useState("");
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
+  const [chartData, setChartData] = useState<IDonutChart[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [orgUnitCode, setOrgUnitCode] = useState<string>("");
+  const [clientNumber, setClientNumber] = useState<string>("");
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
 
   const handleResize = () => {
     setWindowWidth(window.innerWidth);
@@ -28,7 +38,12 @@ const DonutChartView = () => {
       setIsLoading(true);
       const formattedStartDate = formatDateToString(startDate);
       const formattedEndDate = formatDateToString(endDate);
-      const data = await fetchFreeGrowingMilestones(orgUnitCode, clientNumber, formattedStartDate, formattedEndDate);
+      const data = await fetchFreeGrowingMilestones({
+        orgUnitCode,
+        clientNumber,
+        entryDateStart: formattedStartDate,
+        entryDateEnd: formattedEndDate
+      });
       setChartData(data);
       setIsLoading(false);
     } catch (error) {
@@ -37,12 +52,11 @@ const DonutChartView = () => {
     }
   };
 
-  const formatDateToString = (dates) => {
-    if (!dates) return null;
-    const date = dates[0];
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
+  const formatDateToString = (dateToFormat: Date | null) => {
+    if (!dateToFormat) return null;
+    const year = dateToFormat.getFullYear();
+    const month = String(dateToFormat.getMonth() + 1).padStart(2, "0");
+    const day = String(dateToFormat.getDate()).padStart(2, "0");
     return `${year}-${month}-${day}`;
   };
 
@@ -61,27 +75,42 @@ const DonutChartView = () => {
   };
 
   // Sample data for dropdowns
-  const items = [
+  const items: IDropdownItem[] = [
     { value: 'DCR', text: 'DCR' },
-    { value: 2, text: 'Option 2' },
-    { value: 3, text: 'Option 3' },
-    { value: 4, text: 'Option 4' },
+    { value: '2', text: 'Option 2' },
+    { value: '3', text: 'Option 3' },
+    { value: '4', text: 'Option 4' },
     // Add more options as needed
   ];
 
+  const setOrgUnitCodeSelected = ({selectedItem}:{selectedItem: IDropdownItem}) => {
+    setOrgUnitCode(selectedItem.value);
+  };
+
   return (
     <div className="px-3">
       <div className="row gy-2 pb-3">
         <div className="col-md-4 p-0">
-          <Dropdown id="orgUnitCode" label={windowWidth <= 1584 ? "District" : "Filter by district"} items={items} itemToString={item => item ? item.text : ''} onChange={option => setOrgUnitCode(option.selectedItem.value)} />
+          <Dropdown
+            id="orgUnitCode"
+            label={windowWidth <= 1584 ? "District" : "Filter by district"}
+            titleText={windowWidth <= 1584 ? "District" : "Filter by district"}
+            items={items}
+            itemToString={(item: IDropdownItem) => item ? item.text : ''}
+            onChange={setOrgUnitCodeSelected}
+          />
         </div>
         <div className="col-md-4 p-0 px-md-1">
-          <TextInput labelText="Client Number" id="clientNumber" onChange={event => setClientNumber(event.target.value)} />
+          <TextInput
+            labelText="Client Number"
+            id="clientNumber"
+            onChange={(event: ChangeEvent<HTMLInputElement>) => setClientNumber(event.target.value)}
+          />
         </div>
         <div className="col-2 px-md-1 d-none d-md-block">
           <DatePicker
             datePickerType="single"
-            onChange={date => setStartDate(date)}
+            onChange={(date: Date) => setStartDate(date)}
           >
             <DatePickerInput
               id="start-date-picker-input-id"
@@ -94,7 +123,7 @@ const DonutChartView = () => {
         <div className="col-2 px-md-1 d-none d-md-block">
           <DatePicker
             datePickerType="single"
-            onChange={date => setEndDate(date)}
+            onChange={(date: Date) => setEndDate(date)}
           >
             <DatePickerInput
               id="end-date-picker-input-id"