Update der Ansicht

frontend/package.json

@@ -7,15 +7,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "axios": "^1.7.5"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "vite": "^4.4.9",
     "@vitejs/plugin-react": "^4.0.0",
-    "tailwindcss": "^3.3.3",
-    "postcss": "^8.4.26",
-    "autoprefixer": "^10.4.14"
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "vite": "^4.4.9"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -1,21 +1,11 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
+import React from "react";
+import Stacks from "./Stacks";
 
 function App() {
-  const [stacks, setStacks] = useState([]);
-
-  useEffect(() => {
-    axios.get("/api/stacks").then(res => setStacks(res.data));
-  }, []);
-
   return (
-    <div className="p-6">
+    <div className="min-h-screen bg-gray-100 p-6">
       <h1 className="text-2xl font-bold mb-4">StackPulse</h1>
-      <ul className="list-disc pl-5">
-        {stacks.map((stack, i) => (
-          <li key={i}>{stack.name}</li>
-        ))}
-      </ul>
+      <Stacks />
     </div>
   );
 }

frontend/src/Stacks.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+export default function Stacks() {
+  const [stacks, setStacks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchStacks = async () => {
+      try {
+        const res = await axios.get("/api/stacks"); // Vite-Proxy auf Backend
+        setStacks(res.data);
+      } catch (err) {
+        console.error("❌ Fehler beim Abrufen der Stacks:", err);
+        setError("Fehler beim Laden der Stacks");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStacks();
+  }, []);
+
+  if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
+  if (error) return <p className="text-red-500">{error}</p>;
+
+  return (
+    <ul className="space-y-4">
+      {stacks.map((stack) => (
+        <li
+          key={stack.Id}
+          className="p-4 bg-white rounded-xl shadow hover:shadow-md transition flex justify-between items-center"
+        >
+          <div>
+            <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
+            <p className="text-sm text-gray-500">ID: {stack.Id}</p>
+          </div>
+          <div className="text-xl">{stack.updateStatus}</div>
+        </li>
+      ))}
+      {stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
+    </ul>
+  );
+}

frontend/src/Stacks.jsx.bak

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+export default function Stacks() {
+  const [stacks, setStacks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchStacks = async () => {
+      try {
+        const res = await axios.get("/api/stacks"); // Vite-Proxy auf Backend
+        const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+        setStacks(sortedStacks);
+      } catch (err) {
+        console.error("❌ Fehler beim Abrufen der Stacks:", err);
+        setError("Fehler beim Laden der Stacks");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStacks();
+  }, []);
+
+  if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
+  if (error) return <p className="text-red-500">{error}</p>;
+
+  return (
+    <ul className="space-y-4">
+      {stacks.map((stack) => (
+        <li
+          key={stack.Id}
+          className="p-4 bg-white rounded-xl shadow hover:shadow-md transition flex justify-between items-center"
+        >
+          <div>
+            <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
+            <p className="text-sm text-gray-500">ID: {stack.Id}</p>
+          </div>
+          <div className="text-2xl">
+            {stack.Updated ? "✅" : "⚠️"}
+          </div>
+        </li>
+      ))}
+      {stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
+    </ul>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import './index.css'   // <-- Tailwind CSS hier einbinden
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -4,9 +4,14 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   plugins: [react()],
   server: {
+    host: true,
     port: 5173,
     proxy: {
-      "/api": "http://localhost:3000"
-    }
-  }
+      "/api": {
+        target: "http://localhost:4000", // dein Backend
+        changeOrigin: true,
+      },
+    },
+  },
 });
+