From 54e23bfc760da61c5afbadb96dbfc2bb83a88f02 Mon Sep 17 00:00:00 2001
From: Alex <alexpolo2850@gmail.com>
Date: Sun, 14 Sep 2025 22:16:52 +0200
Subject: [PATCH] =?UTF-8?q?Stabilis=C3=A9r=20t=C3=B8mrer=20og=20materiale?=
 =?UTF-8?q?=20tabs=20med=20proper=20state=20management?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tilføj explicit data loading når tabs aktiveres
- Implementer loading og error states for bedre UX
- Clear state ved view skift for at undgå stale data
- Disable form inputs under loading
- Tilføj fallback beskeder for tomme kategorier
- Ensartet struktur med andre stabile tabs som OpenAI budget
---
 frontend/src/App.js | 48 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 58b2396..e0efa04 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -546,10 +546,16 @@ function App() {
   React.useEffect(() => {
     if (selectedCategory) {
       if (currentView === 'labor-prices') {
+        setLaborPrices([]); // Clear existing data
         loadLaborPrices(selectedCategory);
       } else if (currentView === 'material-prices') {
+        setMaterialPrices([]); // Clear existing data
         loadMaterialPrices(selectedCategory);
       }
+    } else {
+      // Clear data when no category selected
+      setLaborPrices([]);
+      setMaterialPrices([]);
     }
   }, [selectedCategory, currentView]);
 
@@ -698,13 +704,25 @@ function App() {
             </button>
             <button 
               className={`nav-btn ${currentView === 'labor-prices' ? 'active' : ''}`}
-              onClick={() => setCurrentView('labor-prices')}
+              onClick={() => {
+                setCurrentView('labor-prices');
+                setError('');
+                loadCategories();
+                setSelectedCategory('');
+                setLaborPrices([]);
+              }}
             >
               👷 Tømrer Priser
             </button>
             <button 
               className={`nav-btn ${currentView === 'material-prices' ? 'active' : ''}`}
-              onClick={() => setCurrentView('material-prices')}
+              onClick={() => {
+                setCurrentView('material-prices');
+                setError('');
+                loadCategories();
+                setSelectedCategory('');
+                setMaterialPrices([]);
+              }}
             >
               🧱 Materiale Priser
             </button>
@@ -965,12 +983,25 @@ function App() {
               <h2>👷 Tømrer Priser</h2>
               <p>Se tidligere arbejdspriser og tilføj nye timelønssatser for forskellige projekttyper.</p>
               
+              {error && (
+                <div className="error">
+                  {error}
+                </div>
+              )}
+              
+              {loading && (
+                <div className="loading">
+                  Indlæser data...
+                </div>
+              )}
+              
               <div className="category-selector">
                 <label htmlFor="category-select">Vælg projekttype:</label>
                 <select
                   id="category-select"
                   value={selectedCategory}
                   onChange={(e) => setSelectedCategory(e.target.value)}
+                  disabled={loading}
                 >
                   <option value="">Vælg kategori...</option>
                   {categories.projectTypes && categories.projectTypes.map(type => (
@@ -1249,12 +1280,25 @@ function App() {
               <h2>🧱 Materiale Priser</h2>
               <p>Se tidligere materialepriser og tilføj nye priser fra leverandører.</p>
               
+              {error && (
+                <div className="error">
+                  {error}
+                </div>
+              )}
+              
+              {loading && (
+                <div className="loading">
+                  Indlæser data...
+                </div>
+              )}
+              
               <div className="category-selector">
                 <label htmlFor="material-category-select">Vælg materialekategori:</label>
                 <select
                   id="material-category-select"
                   value={selectedCategory}
                   onChange={(e) => setSelectedCategory(e.target.value)}
+                  disabled={loading}
                 >
                   <option value="">Vælg kategori...</option>
                   {categories.materialCategories && categories.materialCategories.map(cat => (