From 343de50ef8b7f25f8fe40407bbfc549324c47875 Mon Sep 17 00:00:00 2001
From: CanbiZ <47820557+MickLesk@users.noreply.github.com>
Date: Thu, 30 Jan 2025 13:48:36 +0100
Subject: [PATCH] fix breaking ui

---
 frontend/src/app/data/page.tsx               |  6 ----
 frontend/src/components/ApplicationChart.tsx | 30 ++++++++++++++------
 frontend/src/components/Modal.tsx            |  2 +-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/data/page.tsx b/frontend/src/app/data/page.tsx
index 04200480..774e1a65 100644
--- a/frontend/src/app/data/page.tsx
+++ b/frontend/src/app/data/page.tsx
@@ -159,12 +159,6 @@ const DataFetcher: React.FC = () => {
           />
           <label className="text-sm text-gray-600 mt-1 block">Set a end date</label>
         </div>
-        <button
-          onClick={() => setShowChart((prev) => !prev)}
-          className="p-2 bg-blue-500 text-white rounded"
-          >
-          {showChart ? "Hide Chart" : "Show Chart"}
-        </button>
       </div>
       <ApplicationChart data={filteredData} />
       <div className="mb-4 flex justify-between items-center">
diff --git a/frontend/src/components/ApplicationChart.tsx b/frontend/src/components/ApplicationChart.tsx
index 16a66703..526505cd 100644
--- a/frontend/src/components/ApplicationChart.tsx
+++ b/frontend/src/components/ApplicationChart.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import ChartDataLabels from "chartjs-plugin-datalabels";
-import Modal from "@/components/Modal";
+import Modal from "@/components/Modal"; 
 
 ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
 
@@ -16,6 +16,7 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
   const [isChartOpen, setIsChartOpen] = useState(false);
   const [isTableOpen, setIsTableOpen] = useState(false);
   const [chartStartIndex, setChartStartIndex] = useState(0);
+  const [tableLimit, setTableLimit] = useState(20);
 
   const appCounts: Record<string, number> = {};
   data.forEach((item) => {
@@ -59,7 +60,7 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
       </button>
 
       <Modal isOpen={isChartOpen} onClose={() => setIsChartOpen(false)}>
-        <h2 className="text-xl font-bold mb-4">Top Applications (Chart)</h2>
+        <h2 className="text-xl font-bold text-black dark:text-white mb-4">Top Applications (Chart)</h2>
         <div className="w-3/4 mx-auto">
           <Pie
             data={chartData}
@@ -82,21 +83,21 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
             disabled={chartStartIndex === 0}
             className="p-2 border rounded bg-blue-500 text-white"
           >
-            ◀ Vorherige 20
+            ◀ Last 20
           </button>
           <button
             onClick={() => setChartStartIndex(chartStartIndex + 20)}
             disabled={chartStartIndex + 20 >= sortedApps.length}
             className="p-2 border rounded bg-blue-500 text-white"
           >
-            Nächste 20 ▶
+            Next 20 ▶
           </button>
         </div>
       </Modal>
 
       <Modal isOpen={isTableOpen} onClose={() => setIsTableOpen(false)}>
-        <h2 className="text-xl font-bold mb-4">Application Count Table</h2>
-        <table className="w-full border-collapse border border-gray-600">
+        <h2 className="text-xl font-bold text-black dark:text-white mb-4">Application Count Table</h2>
+        <table className="w-full border-collapse border border-gray-600 dark:border-gray-500">
           <thead>
             <tr className="bg-gray-800 text-white">
               <th className="p-2 border">Application</th>
@@ -104,17 +105,28 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
             </tr>
           </thead>
           <tbody>
-            {sortedApps.map(([name, count]) => (
-              <tr key={name} className="hover:bg-gray-200">
+            {sortedApps.slice(0, tableLimit).map(([name, count]) => (
+              <tr key={name} className="hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white">
                 <td className="p-2 border">{name}</td>
                 <td className="p-2 border">{count}</td>
               </tr>
             ))}
           </tbody>
         </table>
+
+        {tableLimit < sortedApps.length && (
+          <div className="text-center mt-4">
+            <button
+              onClick={() => setTableLimit(tableLimit + 20)}
+              className="p-2 bg-green-500 text-white rounded"
+            >
+              Load More
+            </button>
+          </div>
+        )}
       </Modal>
     </div>
   );
 };
 
-export default ApplicationChart;
+export default ApplicationChart;
\ No newline at end of file
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 0ee87bbd..eedc1dcb 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -13,7 +13,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white p-6 rounded-lg shadow-lg w-3/4 max-w-4xl relative">
+      <div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg w-11/12 max-w-4xl relative max-h-[90vh] overflow-y-auto">
         <button
           onClick={onClose}
           className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded"