feat: enhance CSV import functionality, integrate react-query for data fetching, and refactor admin components

frontend/src/components/ImportGUI.tsx

@@ -1,12 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import CircleUpload from "./CircleUpload";
 import { CircleX } from "lucide-react";
+import { postCSV } from "../utils/fileHandler";
 
 type ImportGUIProps = {
   onClose: () => void;
+  setFiles: (files: File[]) => void;
+  files?: File[];
 };
 
-const ImportGUI: React.FC<ImportGUIProps> = ({ onClose }) => {
+const ImportGUI: React.FC<ImportGUIProps> = ({ onClose, setFiles, files }) => {
   return (
     <div className="fixed inset-0 z-50 flex items-start justify-center pt-24">
       {/* Backdrop */}
@@ -50,7 +53,7 @@ const ImportGUI: React.FC<ImportGUIProps> = ({ onClose }) => {
         </div>
 
         <div className="mt-6">
-          <CircleUpload accept=".csv" />
+          <CircleUpload accept=".csv" setFiles={setFiles} files={files} />
         </div>
 
         {/* Placeholder for optional file summary / mapping UI */}
@@ -70,7 +73,12 @@ const ImportGUI: React.FC<ImportGUIProps> = ({ onClose }) => {
           <button
             type="button"
             className="inline-flex justify-center rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white shadow transition hover:bg-blue-700 active:bg-blue-800 disabled:opacity-60 disabled:cursor-not-allowed"
-            disabled
+            disabled={!files || files.length === 0}
+            onClick={() => {
+              if (files && files.length) {
+                postCSV(files[0]);
+              }
+            }}
           >
             Importieren
           </button>