refactor(pages): renamed all route files to *Page.tsx for clarity and consistency

pages/system.tsx

@@ -1,180 +0,0 @@
-"use client"; // /pages/system.tsx
-import React, { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { AppDispatch, RootState } from "../redux/store";
-import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const SystemPage = () => {
-  const dispatch = useDispatch<AppDispatch>();
-  const voltages = useSelector(
-    (state: RootState) => state.systemVoltTemp.voltages
-  );
-  const history = useSelector(
-    (state: RootState) => state.systemVoltTemp.history
-  );
-
-  useEffect(() => {
-    dispatch(fetchSystemVoltTempThunk());
-    const interval = setInterval(() => {
-      dispatch(fetchSystemVoltTempThunk());
-    }, 5000);
-    return () => clearInterval(interval);
-  }, [dispatch]);
-
-  const labels = history.map((h) => new Date(h.time).toLocaleTimeString());
-
-  const formatValue = (value: number) => parseFloat(value.toFixed(2));
-
-  const voltageDatasets = [
-    {
-      label: "+5V",
-      data: history.map((h) => formatValue(h["+5V"])),
-      borderColor: "rgba(59,130,246,1)",
-      backgroundColor: "rgba(59,130,246,0.5)",
-      fill: false,
-    },
-    {
-      label: "+15V",
-      data: history.map((h) => formatValue(h["+15V"])),
-      borderColor: "rgba(34,197,94,1)",
-      backgroundColor: "rgba(34,197,94,0.5)",
-      fill: false,
-    },
-    {
-      label: "-15V",
-      data: history.map((h) => formatValue(h["-15V"])),
-      borderColor: "rgba(239,68,68,1)",
-      backgroundColor: "rgba(239,68,68,0.5)",
-      fill: false,
-    },
-    {
-      label: "-98V",
-      data: history.map((h) => formatValue(h["-98V"])),
-      borderColor: "rgba(234,179,8,1)",
-      backgroundColor: "rgba(234,179,8,0.5)",
-      fill: false,
-    },
-  ];
-
-  const temperatureDatasets = [
-    {
-      label: "ADC Temp",
-      data: history.map((h) => h["ADC Temp"]),
-      borderColor: "rgba(168,85,247,1)",
-      backgroundColor: "rgba(168,85,247,0.5)",
-      fill: false,
-    },
-    {
-      label: "CPU Temp",
-      data: history.map((h) => h["CPU Temp"]),
-      borderColor: "rgba(251,191,36,1)",
-      backgroundColor: "rgba(251,191,36,0.5)",
-      fill: false,
-    },
-  ];
-
-  const baseChartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      y: {
-        beginAtZero: false,
-        grid: {
-          color: "rgba(200,200,200,0.2)",
-        },
-        title: {
-          display: true,
-          text: "Wert",
-        },
-      },
-      x: {
-        grid: {
-          color: "rgba(200,200,200,0.2)",
-        },
-        title: {
-          display: true,
-          text: "Zeit",
-        },
-      },
-    },
-    plugins: {
-      legend: {
-        position: "bottom" as const,
-      },
-    },
-  };
-
-  return (
-    <div className="p-4">
-      <h1 className="text-xl font-bold mb-4">
-        System Spannungen & Temperaturen
-      </h1>
-
-      <div className="grid grid-cols-2 gap-4 mb-8">
-        {Object.entries(voltages).map(([key, value]) => (
-          <div key={key} className="p-4 border rounded shadow">
-            <h2 className="font-semibold">{key}</h2>
-            <p>{formatValue(value)}</p>
-          </div>
-        ))}
-      </div>
-
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
-        <div className="h-[300px]">
-          <Line
-            data={{ labels, datasets: voltageDatasets }}
-            options={{
-              ...baseChartOptions,
-              plugins: {
-                ...baseChartOptions.plugins,
-                title: {
-                  display: true,
-                  text: "Systemspannungen",
-                },
-              },
-            }}
-          />
-        </div>
-
-        <div className="h-[300px]">
-          <Line
-            data={{ labels, datasets: temperatureDatasets }}
-            options={{
-              ...baseChartOptions,
-              plugins: {
-                ...baseChartOptions.plugins,
-                title: {
-                  display: true,
-                  text: "Systemtemperaturen",
-                },
-              },
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SystemPage;