Enhance Module 19: Perencana Hasil Panen (AI) with comprehensive yield planning

- Add commodity-specific yield benchmarks database (padi, jagung, kedelai, cabai, tomat)
- Enhance generate_yield_plan() with detailed recommendations
- Add NPK to fertilizer product conversion
- Implement cost calculation and ROI estimation
- Generate cultivation timeline with phases
- Create modern UI with tabbed results display
- Add feasibility indicators and variety recommendations

add_pesticide_card.py

@@ -0,0 +1,38 @@
+import re
+
+# Read the file
+with open('templates/home.html', 'r', encoding='utf-8') as f:
+    lines = f.readlines()
+
+# Find line with "pustaka-dokumen" and add pesticide card after its closing </a>
+pesticide_card_lines = [
+    '\n',
+    '            <a href="/modules/pesticide-knowledge" class="module-card">\n',
+    '                <div class="module-icon">🧪</div>\n',
+    '                <h3 class="module-title">Info Pestisida</h3>\n',
+    '                <p class="module-desc">Direktori bahan aktif, cara kerja, dan keamanan.</p>\n',
+    '                <span class="module-link">Cari Bahan Aktif</span>\n',
+    '            </a>\n'
+]
+
+# Find the index where we need to insert (after Pustaka Dokumen)
+insert_index = None
+for i, line in enumerate(lines):
+    if 'pustaka-dokumen' in line:
+        # Find the closing </a> tag for this card
+        for j in range(i, min(i+10, len(lines))):
+            if '</a>' in lines[j] and 'href' not in lines[j]:
+                insert_index = j + 1
+                break
+        break
+
+if insert_index:
+    # Insert the pesticide card
+    lines[insert_index:insert_index] = pesticide_card_lines
+    
+    # Write back
+    with open('templates/home.html', 'w', encoding='utf-8') as f:
+        f.writelines(lines)
+    print(f'✅ Pesticide card added successfully after line {insert_index}!')
+else:
+    print('❌ Could not find insertion point')

add_secondary_nutrients.py

@@ -0,0 +1,69 @@
+import re
+
+# Read the file
+with open('templates/modules/kalkulator_pupuk_holistik.html', 'r', encoding='utf-8') as f:
+    content = f.read()
+
+# Find the location to insert (after "html += '</div>';")
+# We'll insert after the summary grid closing div
+secondary_nutrients_section = '''
+            // Secondary Macro Nutrients Section
+            html += `
+                <h3 style="margin-top: 30px; margin-bottom: 15px; color: var(--primary-dark);">🧪 Kebutuhan Hara Makro Sekunder</h3>
+                <div class="info-box" style="background: #f0f9ff; border-left-color: var(--secondary);">
+                    <div class="info-box-title" style="color: var(--secondary);">📊 Kalsium (Ca), Magnesium (Mg), Sulfur (S)</div>
+                    <div class="info-box-content" style="color: #1e40af;">
+                        <div style="margin-top: 12px;">
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 10px;">
+                                <div style="background: white; padding: 15px; border-radius: 8px; border: 1px solid #dbeafe;">
+                                    <div style="font-weight: 700; color: var(--secondary); margin-bottom: 8px;">🔹 Kalsium (Ca)</div>
+                                    <div style="font-size: 0.9rem;">
+                                        <strong>Fungsi:</strong> Pembentukan dinding sel, pertumbuhan akar<br>
+                                        <strong>Sumber:</strong> Dolomit, Kapur Pertanian, Gypsum<br>
+                                        <strong>Dosis:</strong> 200-500 kg/ha
+                                    </div>
+                                </div>
+                                <div style="background: white; padding: 15px; border-radius: 8px; border: 1px solid #dbeafe;">
+                                    <div style="font-weight: 700; color: var(--secondary); margin-bottom: 8px;">🔹 Magnesium (Mg)</div>
+                                    <div style="font-size: 0.9rem;">
+                                        <strong>Fungsi:</strong> Komponen klorofil, aktivasi enzim<br>
+                                        <strong>Sumber:</strong> Dolomit, Kieserit, MgSO₄<br>
+                                        <strong>Dosis:</strong> 50-150 kg/ha
+                                    </div>
+                                </div>
+                                <div style="background: white; padding: 15px; border-radius: 8px; border: 1px solid #dbeafe;">
+                                    <div style="font-weight: 700; color: var(--secondary); margin-bottom: 8px;">🔹 Sulfur (S)</div>
+                                    <div style="font-size: 0.9rem;">
+                                        <strong>Fungsi:</strong> Sintesis protein, pembentukan klorofil<br>
+                                        <strong>Sumber:</strong> ZA, Gypsum, Elemental S<br>
+                                        <strong>Dosis:</strong> 20-40 kg/ha
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="margin-top: 15px; padding: 12px; background: #fef3c7; border-radius: 6px; border-left: 3px solid var(--accent);">
+                                <strong style="color: #92400e;">💡 Catatan:</strong>
+                                <span style="color: #78350f; font-size: 0.9rem;">
+                                    Hara sekunder sering diabaikan namun sangat penting untuk hasil optimal. 
+                                    Aplikasikan bersamaan dengan pengapuran atau sebagai pupuk dasar.
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+'''
+
+# Find the pattern to insert after
+pattern = r"(html \+= '</div>';[\r\n]+[\r\n]+            // Notes)"
+
+# Replace with the pattern + our new section
+replacement = r"html += '</div>';\n\n" + secondary_nutrients_section + "\n            // Notes"
+
+new_content = re.sub(pattern, replacement, content)
+
+# Write back
+with open('templates/modules/kalkulator_pupuk_holistik.html', 'w', encoding='utf-8') as f:
+    f.write(new_content)
+
+print("✅ Secondary nutrients section added successfully!")

app/data/yield_benchmarks.py

@@ -0,0 +1,261 @@
+"""Yield benchmarks and cultivation data for major commodities."""
+
+
+class YieldBenchmarks:
+    """Database of yield benchmarks and cultivation requirements for major crops."""
+    
+    @staticmethod
+    def get_commodity_data():
+        """Get comprehensive yield and cultivation data for all commodities."""
+        return {
+            "padi": {
+                "name": "Padi",
+                "icon": "🌾",
+                "unit": "ton/ha",
+                "benchmarks": {
+                    "low": {"min": 3.0, "max": 4.0, "label": "Rendah"},
+                    "average": {"min": 4.5, "max": 6.0, "label": "Rata-rata"},
+                    "high": {"min": 7.0, "max": 8.5, "label": "Tinggi"},
+                    "record": {"min": 9.0, "max": 12.0, "label": "Rekor"}
+                },
+                "optimal_conditions": {
+                    "temperature": {"min": 22, "max": 32, "unit": "°C"},
+                    "rainfall": {"min": 1500, "max": 2000, "unit": "mm/tahun"},
+                    "ph": {"min": 5.5, "max": 7.0},
+                    "altitude": {"min": 0, "max": 1500, "unit": "mdpl"}
+                },
+                "npk_ratios": {
+                    "low": {"N": 90, "P": 60, "K": 60},
+                    "average": {"N": 120, "P": 75, "K": 75},
+                    "high": {"N": 150, "P": 90, "K": 90},
+                    "record": {"N": 180, "P": 110, "K": 110}
+                },
+                "varieties": {
+                    "low": ["IR64", "Ciherang"],
+                    "average": ["Inpari 32", "Mekongga"],
+                    "high": ["Inpari 42", "Inpari 43"],
+                    "record": ["Inpari 48", "Hybrid (Hipa 18)"]
+                },
+                "growth_duration": 110,  # days
+                "critical_factors": [
+                    "Pengairan teratur sangat penting",
+                    "Pengendalian hama penggerek batang",
+                    "Pemupukan berimbang sesuai fase",
+                    "Varietas unggul bersertifikat"
+                ]
+            },
+            "jagung": {
+                "name": "Jagung",
+                "icon": "🌽",
+                "unit": "ton/ha",
+                "benchmarks": {
+                    "low": {"min": 3.0, "max": 4.5, "label": "Rendah"},
+                    "average": {"min": 5.0, "max": 7.0, "label": "Rata-rata"},
+                    "high": {"min": 8.0, "max": 10.0, "label": "Tinggi"},
+                    "record": {"min": 11.0, "max": 14.0, "label": "Rekor"}
+                },
+                "optimal_conditions": {
+                    "temperature": {"min": 21, "max": 34, "unit": "°C"},
+                    "rainfall": {"min": 400, "max": 800, "unit": "mm/musim"},
+                    "ph": {"min": 5.5, "max": 7.5},
+                    "altitude": {"min": 0, "max": 1800, "unit": "mdpl"}
+                },
+                "npk_ratios": {
+                    "low": {"N": 100, "P": 75, "K": 50},
+                    "average": {"N": 150, "P": 100, "K": 75},
+                    "high": {"N": 200, "P": 125, "K": 100},
+                    "record": {"N": 250, "P": 150, "K": 125}
+                },
+                "varieties": {
+                    "low": ["Lokal", "Bisma"],
+                    "average": ["Bisi 18", "Pioneer 21"],
+                    "high": ["NK 212", "Bisi 222"],
+                    "record": ["Hybrid Premium", "DK 979"]
+                },
+                "growth_duration": 100,  # days
+                "critical_factors": [
+                    "Drainase baik untuk mencegah genangan",
+                    "Pemupukan N tinggi saat vegetatif",
+                    "Pengendalian ulat grayak",
+                    "Benih hybrid bersertifikat"
+                ]
+            },
+            "kedelai": {
+                "name": "Kedelai",
+                "icon": "🫘",
+                "unit": "ton/ha",
+                "benchmarks": {
+                    "low": {"min": 1.0, "max": 1.3, "label": "Rendah"},
+                    "average": {"min": 1.5, "max": 2.0, "label": "Rata-rata"},
+                    "high": {"min": 2.3, "max": 2.8, "label": "Tinggi"},
+                    "record": {"min": 3.0, "max": 3.8, "label": "Rekor"}
+                },
+                "optimal_conditions": {
+                    "temperature": {"min": 23, "max": 30, "unit": "°C"},
+                    "rainfall": {"min": 300, "max": 400, "unit": "mm/musim"},
+                    "ph": {"min": 6.0, "max": 7.0},
+                    "altitude": {"min": 0, "max": 900, "unit": "mdpl"}
+                },
+                "npk_ratios": {
+                    "low": {"N": 25, "P": 75, "K": 50},
+                    "average": {"N": 30, "P": 100, "K": 75},
+                    "high": {"N": 40, "P": 125, "K": 90},
+                    "record": {"N": 50, "P": 150, "K": 110}
+                },
+                "varieties": {
+                    "low": ["Lokal", "Wilis"],
+                    "average": ["Grobogan", "Anjasmoro"],
+                    "high": ["Dena 1", "Dega 1"],
+                    "record": ["Demas 1", "Hybrid"]
+                },
+                "growth_duration": 80,  # days
+                "critical_factors": [
+                    "Inokulasi rhizobium untuk fiksasi N",
+                    "Drainase sempurna",
+                    "Pengendalian lalat kacang",
+                    "Pemupukan P dan K lebih tinggi dari N"
+                ]
+            },
+            "cabai": {
+                "name": "Cabai",
+                "icon": "🌶️",
+                "unit": "ton/ha",
+                "benchmarks": {
+                    "low": {"min": 10, "max": 15, "label": "Rendah"},
+                    "average": {"min": 18, "max": 22, "label": "Rata-rata"},
+                    "high": {"min": 25, "max": 30, "label": "Tinggi"},
+                    "record": {"min": 32, "max": 40, "label": "Rekor"}
+                },
+                "optimal_conditions": {
+                    "temperature": {"min": 24, "max": 28, "unit": "°C"},
+                    "rainfall": {"min": 600, "max": 1200, "unit": "mm/tahun"},
+                    "ph": {"min": 6.0, "max": 7.0},
+                    "altitude": {"min": 200, "max": 1200, "unit": "mdpl"}
+                },
+                "npk_ratios": {
+                    "low": {"N": 120, "P": 150, "K": 150},
+                    "average": {"N": 180, "P": 200, "K": 200},
+                    "high": {"N": 250, "P": 250, "K": 250},
+                    "record": {"N": 300, "P": 300, "K": 300}
+                },
+                "varieties": {
+                    "low": ["Lokal", "Keriting"],
+                    "average": ["Lado", "PM 999"],
+                    "high": {"Laris", "Gada"},
+                    "record": ["Tanjung 2", "Hot Beauty"]
+                },
+                "growth_duration": 90,  # days to first harvest, continues for months
+                "critical_factors": [
+                    "Mulsa plastik untuk kontrol gulma dan kelembaban",
+                    "Pemupukan intensif setiap minggu",
+                    "Pengendalian thrips dan antraknosa",
+                    "Sistem drip irrigation ideal"
+                ]
+            },
+            "tomat": {
+                "name": "Tomat",
+                "icon": "🍅",
+                "unit": "ton/ha",
+                "benchmarks": {
+                    "low": {"min": 15, "max": 20, "label": "Rendah"},
+                    "average": {"min": 25, "max": 35, "label": "Rata-rata"},
+                    "high": {"min": 40, "max": 50, "label": "Tinggi"},
+                    "record": {"min": 55, "max": 70, "label": "Rekor"}
+                },
+                "optimal_conditions": {
+                    "temperature": {"min": 20, "max": 27, "unit": "°C"},
+                    "rainfall": {"min": 750, "max": 1250, "unit": "mm/tahun"},
+                    "ph": {"min": 6.0, "max": 6.8},
+                    "altitude": {"min": 300, "max": 1500, "unit": "mdpl"}
+                },
+                "npk_ratios": {
+                    "low": {"N": 100, "P": 150, "K": 150},
+                    "average": {"N": 150, "P": 200, "K": 200},
+                    "high": {"N": 200, "P": 250, "K": 250},
+                    "record": {"N": 250, "P": 300, "K": 300}
+                },
+                "varieties": {
+                    "low": ["Lokal", "Permata"],
+                    "average": ["Servo", "Tymoti"],
+                    "high": ["Fortuna", "Intan"],
+                    "record": ["Hybrid F1", "Betavila"]
+                },
+                "growth_duration": 70,  # days to first harvest
+                "critical_factors": [
+                    "Bedengan tinggi dengan mulsa",
+                    "Pemangkasan dan pewiwilan rutin",
+                    "Pengendalian layu fusarium",
+                    "Kalsium cukup untuk mencegah blossom end rot"
+                ]
+            }
+        }
+    
+    @staticmethod
+    def get_yield_category(commodity, target_yield):
+        """Determine yield category for given target."""
+        data = YieldBenchmarks.get_commodity_data().get(commodity)
+        if not data:
+            return "unknown"
+        
+        benchmarks = data["benchmarks"]
+        
+        if target_yield < benchmarks["low"]["min"]:
+            return "very_low"
+        elif benchmarks["low"]["min"] <= target_yield <= benchmarks["low"]["max"]:
+            return "low"
+        elif benchmarks["average"]["min"] <= target_yield <= benchmarks["average"]["max"]:
+            return "average"
+        elif benchmarks["high"]["min"] <= target_yield <= benchmarks["high"]["max"]:
+            return "high"
+        elif target_yield >= benchmarks["record"]["min"]:
+            return "record"
+        else:
+            # Between categories
+            if target_yield < benchmarks["average"]["min"]:
+                return "low"
+            elif target_yield < benchmarks["high"]["min"]:
+                return "average"
+            else:
+                return "high"
+    
+    @staticmethod
+    def get_npk_for_yield(commodity, target_yield):
+        """Get recommended NPK based on target yield category."""
+        data = YieldBenchmarks.get_commodity_data().get(commodity)
+        if not data:
+            return None
+        
+        category = YieldBenchmarks.get_yield_category(commodity, target_yield)
+        
+        # Map category to NPK ratio key
+        if category in ["very_low", "low"]:
+            npk_key = "low"
+        elif category == "average":
+            npk_key = "average"
+        elif category == "high":
+            npk_key = "high"
+        else:  # record
+            npk_key = "record"
+        
+        return data["npk_ratios"].get(npk_key, data["npk_ratios"]["average"])
+    
+    @staticmethod
+    def get_variety_recommendations(commodity, target_yield):
+        """Get recommended varieties for target yield."""
+        data = YieldBenchmarks.get_commodity_data().get(commodity)
+        if not data:
+            return []
+        
+        category = YieldBenchmarks.get_yield_category(commodity, target_yield)
+        
+        # Map category to variety key
+        if category in ["very_low", "low"]:
+            variety_key = "low"
+        elif category == "average":
+            variety_key = "average"
+        elif category == "high":
+            variety_key = "high"
+        else:  # record
+            variety_key = "record"
+        
+        return data["varieties"].get(variety_key, data["varieties"]["average"])

app/services/ml_service.py

@@ -258,18 +258,28 @@ class MLService:
             'nutrient_amount_kg': nutrient_amount_kg
         }
 
+
     @staticmethod
     def generate_yield_plan(commodity=None, target_yield_ton_ha=None):
-        """Generate plan to achieve target yield. Accepts both old and new signatures."""
+        """Generate comprehensive plan to achieve target yield with commodity-specific recommendations."""
+        from app.data.yield_benchmarks import YieldBenchmarks
+        
         # Handle both old (single param) and new (two params) signatures
         if target_yield_ton_ha is None and commodity is not None:
             # Old signature: only target_yield_ton_ha provided as first param
             target_yield_ton_ha = float(commodity) if isinstance(commodity, (int, float, str)) else None
-            commodity = None
+            commodity = "umum"  # Default to general
         
         if target_yield_ton_ha is None:
             raise ValueError("target_yield_ton_ha is required")
         
+        # If commodity is specified and supported, use benchmark data
+        if commodity and commodity != "umum":
+            commodity_data = YieldBenchmarks.get_commodity_data().get(commodity)
+            if commodity_data:
+                return MLService._generate_commodity_specific_plan(commodity, target_yield_ton_ha, commodity_data)
+        
+        # Fallback to EDA dataset for general/unsupported commodities
         dataset_path = get_dataset_path('EDA_500.csv')
         if not os.path.exists(dataset_path):
             raise RuntimeError("Dataset EDA_500.csv tidak ditemukan.")
@@ -286,15 +296,271 @@ class MLService:
 
         result = best_match_row.iloc[0]
         plan = {
-            "Nitrogen (kg/ha)": round(float(result['Nitrogen']), 2),
-            "Phosphorus (kg/ha)": round(float(result['Phosphorus']), 2),
-            "Potassium (kg/ha)": round(float(result['Potassium']), 2),
-            "Temperature (°C)": round(float(result['Temperature']), 2),
-            "Rainfall (mm)": round(float(result['Rainfall']), 2),
-            "pH Tanah": round(float(result['pH']), 2),
-            "Hasil Panen Aktual dari Data": f"{round(float(result['Yield'])/1000, 2)} ton/ha"
+            "commodity_name": "Umum",
+            "target_yield": target_yield_ton_ha,
+            "feasibility": "unknown",
+            "npk_requirements": {
+                "Nitrogen (kg/ha)": round(float(result['Nitrogen']), 2),
+                "Phosphorus (kg/ha)": round(float(result['Phosphorus']), 2),
+                "Potassium (kg/ha)": round(float(result['Potassium']), 2)
+            },
+            "environmental_conditions": {
+                "Temperature (°C)": round(float(result['Temperature']), 2),
+                "Rainfall (mm)": round(float(result['Rainfall']), 2),
+                "pH Tanah": round(float(result['pH']), 2)
+            },
+            "actual_yield_from_data": f"{round(float(result['Yield'])/1000, 2)} ton/ha"
+        }
+        return plan
+    
+    @staticmethod
+    def _generate_commodity_specific_plan(commodity, target_yield, commodity_data):
+        """Generate detailed commodity-specific yield plan."""
+        from app.data.yield_benchmarks import YieldBenchmarks
+        
+        # Assess feasibility
+        yield_category = YieldBenchmarks.get_yield_category(commodity, target_yield)
+        benchmarks = commodity_data["benchmarks"]
+        
+        # Determine feasibility status
+        if yield_category == "very_low":
+            feasibility = "Sangat Rendah - Target di bawah standar"
+            feasibility_color = "red"
+        elif yield_category == "low":
+            feasibility = "Rendah - Dapat dicapai dengan input minimal"
+            feasibility_color = "orange"
+        elif yield_category == "average":
+            feasibility = "Realistis - Target standar petani"
+            feasibility_color = "green"
+        elif yield_category == "high":
+            feasibility = "Tinggi - Memerlukan manajemen intensif"
+            feasibility_color = "blue"
+        else:  # record
+            feasibility = "Sangat Tinggi - Target ambisius, perlu teknologi canggih"
+            feasibility_color = "purple"
+        
+        # Get NPK recommendations
+        npk = YieldBenchmarks.get_npk_for_yield(commodity, target_yield)
+        
+        # Get variety recommendations
+        varieties = YieldBenchmarks.get_variety_recommendations(commodity, target_yield)
+        
+        # Convert NPK to fertilizer products
+        fertilizers = MLService._convert_npk_to_fertilizers(npk['N'], npk['P'], npk['K'])
+        
+        # Calculate costs (estimated)
+        costs = MLService._calculate_input_costs(fertilizers, commodity, target_yield)
+        
+        # Generate timeline
+        timeline = MLService._generate_cultivation_timeline(commodity, commodity_data['growth_duration'])
+        
+        # Build comprehensive plan
+        plan = {
+            "commodity_name": commodity_data["name"],
+            "commodity_icon": commodity_data["icon"],
+            "target_yield": target_yield,
+            "yield_unit": commodity_data["unit"],
+            "feasibility": {
+                "status": feasibility,
+                "color": feasibility_color,
+                "category": yield_category,
+                "benchmark_range": {
+                    "low": f"{benchmarks['low']['min']}-{benchmarks['low']['max']} {commodity_data['unit']}",
+                    "average": f"{benchmarks['average']['min']}-{benchmarks['average']['max']} {commodity_data['unit']}",
+                    "high": f"{benchmarks['high']['min']}-{benchmarks['high']['max']} {commodity_data['unit']}",
+                    "record": f"{benchmarks['record']['min']}-{benchmarks['record']['max']} {commodity_data['unit']}"
+                }
+            },
+            "npk_requirements": {
+                "Nitrogen (N)": f"{npk['N']} kg/ha",
+                "Phosphorus (P)": f"{npk['P']} kg/ha",
+                "Potassium (K)": f"{npk['K']} kg/ha"
+            },
+            "fertilizer_products": fertilizers,
+            "environmental_conditions": {
+                "Suhu Optimal": f"{commodity_data['optimal_conditions']['temperature']['min']}-{commodity_data['optimal_conditions']['temperature']['max']} °C",
+                "Curah Hujan": f"{commodity_data['optimal_conditions']['rainfall']['min']}-{commodity_data['optimal_conditions']['rainfall']['max']} {commodity_data['optimal_conditions']['rainfall']['unit']}",
+                "pH Tanah": f"{commodity_data['optimal_conditions']['ph']['min']}-{commodity_data['optimal_conditions']['ph']['max']}",
+                "Ketinggian": f"{commodity_data['optimal_conditions']['altitude']['min']}-{commodity_data['optimal_conditions']['altitude']['max']} {commodity_data['optimal_conditions']['altitude']['unit']}"
+            },
+            "recommended_varieties": varieties,
+            "critical_factors": commodity_data["critical_factors"],
+            "cost_estimate": costs,
+            "cultivation_timeline": timeline,
+            "growth_duration": f"{commodity_data['growth_duration']} hari"
         }
+        
         return plan
+    
+    @staticmethod
+    def _convert_npk_to_fertilizers(n_kg, p_kg, k_kg):
+        """Convert NPK kg/ha to actual fertilizer products."""
+        fertilizers = {}
+        
+        # Urea for Nitrogen (46% N)
+        if n_kg > 0:
+            urea_kg = round(n_kg / 0.46, 2)
+            fertilizers["Urea (46% N)"] = f"{urea_kg} kg/ha"
+        
+        # SP-36 for Phosphorus (36% P2O5 = ~15.8% P)
+        if p_kg > 0:
+            sp36_kg = round(p_kg / 0.158, 2)
+            fertilizers["SP-36 (36% P2O5)"] = f"{sp36_kg} kg/ha"
+        
+        # KCl for Potassium (60% K2O = ~50% K)
+        if k_kg > 0:
+            kcl_kg = round(k_kg / 0.50, 2)
+            fertilizers["KCl (60% K2O)"] = f"{kcl_kg} kg/ha"
+        
+        # Add organic fertilizer recommendation
+        fertilizers["Pupuk Kandang/Kompos"] = "2-5 ton/ha (aplikasi dasar)"
+        
+        return fertilizers
+    
+    @staticmethod
+    def _calculate_input_costs(fertilizers, commodity, target_yield):
+        """Calculate estimated input costs."""
+        # Estimated prices (Rp/kg) - can be updated with real market data
+        prices = {
+            "Urea": 2500,
+            "SP-36": 3000,
+            "KCl": 4500,
+            "Pupuk Kandang": 500,
+            "Benih": 50000  # per kg or unit
+        }
+        
+        total_fertilizer_cost = 0
+        breakdown = {}
+        
+        for fert_name, amount_str in fertilizers.items():
+            if "Pupuk Kandang" in fert_name or "Kompos" in fert_name:
+                # Extract ton amount
+                avg_ton = 3.5  # average of 2-5 ton
+                cost = avg_ton * 1000 * prices["Pupuk Kandang"]
+                breakdown[fert_name] = f"Rp {cost:,.0f}"
+                total_fertilizer_cost += cost
+            else:
+                # Extract kg amount
+                try:
+                    kg = float(amount_str.split()[0])
+                    fert_type = fert_name.split()[0]
+                    if fert_type in prices:
+                        cost = kg * prices[fert_type]
+                        breakdown[fert_name] = f"Rp {cost:,.0f}"
+                        total_fertilizer_cost += cost
+                except:
+                    pass
+        
+        # Estimate seed cost (varies by commodity)
+        seed_costs = {
+            "padi": 100000,
+            "jagung": 500000,
+            "kedelai": 200000,
+            "cabai": 2000000,
+            "tomat": 1500000
+        }
+        seed_cost = seed_costs.get(commodity, 300000)
+        
+        # Estimate labor and other costs
+        labor_cost = 3000000  # Rp 3 juta for land prep, planting, maintenance
+        pesticide_cost = 1500000  # Rp 1.5 juta
+        
+        total_cost = total_fertilizer_cost + seed_cost + labor_cost + pesticide_cost
+        
+        # Estimate revenue (very rough, needs market price data)
+        price_per_ton = {
+            "padi": 5000000,
+            "jagung": 4000000,
+            "kedelai": 8000000,
+            "cabai": 15000000,
+            "tomat": 8000000
+        }
+        commodity_price = price_per_ton.get(commodity, 5000000)
+        estimated_revenue = target_yield * commodity_price
+        estimated_profit = estimated_revenue - total_cost
+        
+        return {
+            "fertilizer_breakdown": breakdown,
+            "total_fertilizer": f"Rp {total_fertilizer_cost:,.0f}",
+            "seed_cost": f"Rp {seed_cost:,.0f}",
+            "labor_cost": f"Rp {labor_cost:,.0f}",
+            "pesticide_cost": f"Rp {pesticide_cost:,.0f}",
+            "total_input_cost": f"Rp {total_cost:,.0f}",
+            "estimated_revenue": f"Rp {estimated_revenue:,.0f}",
+            "estimated_profit": f"Rp {estimated_profit:,.0f}",
+            "note": "Estimasi kasar, sesuaikan dengan harga lokal"
+        }
+    
+    @staticmethod
+    def _generate_cultivation_timeline(commodity, growth_duration):
+        """Generate week-by-week cultivation timeline."""
+        timeline = []
+        
+        # Generic timeline structure
+        phases = [
+            {
+                "phase": "Persiapan Lahan",
+                "weeks": "2 minggu sebelum tanam",
+                "activities": [
+                    "Pembajakan dan penggemburan tanah",
+                    "Aplikasi pupuk kandang/kompos",
+                    "Pengapuran jika pH rendah",
+                    "Pembuatan bedengan (jika perlu)"
+                ]
+            },
+            {
+                "phase": "Penanaman",
+                "weeks": "Minggu 0",
+                "activities": [
+                    "Penanaman benih/bibit berkualitas",
+                    "Aplikasi pupuk dasar (P dan K)",
+                    "Penyiraman awal"
+                ]
+            },
+            {
+                "phase": "Vegetatif Awal",
+                "weeks": "Minggu 1-3",
+                "activities": [
+                    "Penyulaman tanaman mati",
+                    "Penyiangan gulma",
+                    "Aplikasi pupuk N pertama",
+                    "Monitoring hama/penyakit"
+                ]
+            },
+            {
+                "phase": "Vegetatif Lanjut",
+                "weeks": f"Minggu 4-{growth_duration//14}",
+                "activities": [
+                    "Aplikasi pupuk N susulan",
+                    "Pengendalian hama/penyakit",
+                    "Pengairan teratur",
+                    "Pewiwilan (untuk tanaman tertentu)"
+                ]
+            },
+            {
+                "phase": "Generatif",
+                "weeks": f"Minggu {growth_duration//14 + 1}-{growth_duration//7}",
+                "activities": [
+                    "Aplikasi pupuk K tinggi",
+                    "Pengurangan N",
+                    "Monitoring pembungaan/pembuahan",
+                    "Pengendalian hama buah/bulir"
+                ]
+            },
+            {
+                "phase": "Pematangan & Panen",
+                "weeks": f"Minggu {growth_duration//7 + 1}-{growth_duration//7 + 2}",
+                "activities": [
+                    "Pengurangan pengairan",
+                    "Monitoring kematangan",
+                    "Persiapan alat panen",
+                    "Panen tepat waktu"
+                ]
+            }
+        ]
+        
+        return phases
+
 
     @staticmethod
     def predict_success(data):

templates/modules/perencana_hasil_panen_ai.html

@@ -1,238 +1,271 @@
-
 <!DOCTYPE html>
-
 <html lang="id">
+
 <head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>🎯 Modul 19: Perencana Hasil Panen (AI) - Agrisensa</title>
-<link href="https://fonts.googleapis.com" rel="preconnect"/>
-<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<style>
- :root {
-            --primary-color: #2e7d32;
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🎯 Modul 19: Perencana Hasil Panen (AI) - AgriSensa</title>
+    <link href="https://fonts.googleapis.com" rel="preconnect">
+    <link href="https://fonts.gstatic.com" crossorigin rel="preconnect">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #2e7d32;
             --primary-light: #4caf50;
-            --background-color: #f8f9fa;
-            --card-background: #ffffff;
-            --text-color: #212529;
+            --primary-dark: #1b5e20;
+            --secondary: #1976d2;
+            --accent: #ff6f00;
+            --background: #f5f7fa;
+            --card-bg: #ffffff;
+            --text: #212529;
             --text-muted: #6c757d;
-            --border-color: #dee2e6;
-            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            --border: #dee2e6;
+            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         body {
             font-family: 'Inter', sans-serif;
-            max-width: 900px;
-            margin: 20px auto;
-            padding: 15px;
-            background-color: var(--background-color);
-            color: var(--text-color);
+            background: var(--background);
+            color: var(--text);
+            line-height: 1.6;
+            padding: 20px;
         }
 
-        .header {
-            text-align: center;
-            margin-bottom: 40px;
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
         }
 
-        h1 {
-            color: var(--primary-color);
-            font-weight: 700;
-            font-size: 2.5em;
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--primary);
+            text-decoration: none;
+            font-weight: 500;
+            margin-bottom: 24px;
+            transition: all 0.2s;
         }
 
-        .price-ticker-container {
-            background-color: var(--text-color);
-            color: white;
-            padding: 10px 0;
-            margin-bottom: 30px;
-            border-radius: 8px;
-            overflow: hidden;
-            white-space: nowrap;
+        .back-link:hover {
+            gap: 12px;
+            color: var(--primary-dark);
         }
 
-        .price-ticker-content {
-            display: inline-block;
-            padding-left: 100%;
-            animation: scroll-left 40s linear infinite;
+        .header {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            color: white;
+            padding: 32px;
+            border-radius: 16px;
+            margin-bottom: 32px;
+            box-shadow: var(--shadow-lg);
         }
 
-        .ticker-item {
-            display: inline-block;
-            margin: 0 25px;
+        .header h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
 
-        .ticker-item .name {
-            font-weight: 500;
+        .header p {
+            font-size: 1.1rem;
+            opacity: 0.95;
         }
 
-        .ticker-item .price {
-            font-weight: 700;
-            color: var(--primary-light);
-            margin-left: 8px;
+        .card {
+            background: var(--card-bg);
+            border-radius: 12px;
+            padding: 28px;
+            margin-bottom: 24px;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--border);
         }
 
-        @keyframes scroll-left {
-            0% {
-                transform: translateX(0%);
-            }
+        .card-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: var(--primary-dark);
+            margin-bottom: 20px;
+            padding-bottom: 12px;
+            border-bottom: 2px solid var(--primary-light);
+        }
 
-            100% {
-                transform: translateX(-100%);
-            }
+        .form-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-bottom: 24px;
         }
 
-        .module {
-            background-color: var(--card-background);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 30px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow);
+        .form-group {
+            display: flex;
+            flex-direction: column;
         }
 
-        h2 {
+        label {
+            font-weight: 500;
+            margin-bottom: 8px;
+            color: var(--text);
             display: flex;
             align-items: center;
-            gap: 12px;
-            color: var(--primary-color);
-            border-bottom: 1px solid var(--border-color);
-            padding-bottom: 15px;
-            margin-top: 0;
-            font-size: 1.5em;
-            font-weight: 600;
+            gap: 6px;
         }
 
-        h3 {
-            color: var(--primary-color);
-            border-bottom: 1px solid #eee;
-            padding-bottom: 5px;
-            margin-top: 25px;
-            font-weight: 600;
+        select,
+        input {
+            padding: 12px 16px;
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            font-size: 1rem;
+            font-family: inherit;
+            transition: all 0.2s;
+            background: white;
         }
 
-        h4 {
-            color: #333;
-            margin-top: 15px;
-            margin-bottom: 5px;
+        select:focus,
+        input:focus {
+            outline: none;
+            border-color: var(--primary-light);
+            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
         }
 
-        button,
-        .option-button {
-            background-color: var(--primary-light);
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
             color: white;
-            padding: 12px 20px;
+            padding: 14px 32px;
             border: none;
             border-radius: 8px;
+            font-size: 1.05rem;
+            font-weight: 600;
             cursor: pointer;
-            font-size: 1em;
-            font-weight: 500;
+            transition: all 0.3s;
+            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
             width: 100%;
-            transition: all 0.2s;
-            margin-bottom: 10px;
         }
 
-        button:hover,
-        .option-button:hover {
-            background-color: var(--primary-color);
+        .btn-primary:hover {
             transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4);
         }
 
-        .result-box {
-            margin-top: 20px;
-            padding: 20px;
-            border-radius: 8px;
-            background-color: #f8f9fa;
-            line-height: 1.6;
-            border: 1px solid var(--border-color);
+        .btn-primary:active {
+            transform: translateY(0);
         }
 
-        input,
-        select {
-            width: 100%;
-            padding: 12px;
-            margin-bottom: 15px;
-            border-radius: 8px;
-            border: 1px solid var(--border-color);
-            font-size: 1em;
-            box-sizing: border-box;
+        .btn-primary:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
         }
 
-        label {
-            font-weight: 500;
-            margin-bottom: 8px;
-            display: block;
+        .spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 0.8s linear infinite;
         }
 
-        ul {
-            padding-left: 20px;
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
 
-        li {
-            margin-bottom: 10px;
+        .result-section {
+            display: none;
+            animation: fadeIn 0.5s;
         }
 
-        .item-list {
-            list-style-type: none;
-            padding-left: 0;
+        .result-section.active {
+            display: block;
         }
 
-        .price-item,
-        .fertilizer-item,
-        .pdf-item,
-        .shap-item,
-        .plan-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #eee;
-            padding: 12px 0;
-        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
 
-        .item-name,
-        .plan-item-label {
-            font-weight: 500;
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
-        .item-value,
-        .plan-item-value {
-            font-size: 1.1em;
-            color: var(--primary-color);
+        .feasibility-badge {
+            display: inline-block;
+            padding: 8px 16px;
+            border-radius: 20px;
             font-weight: 600;
+            font-size: 0.95rem;
+            margin: 12px 0;
         }
 
-        .pdf-item a {
-            text-decoration: none;
-            color: var(--primary-color);
-            font-weight: 500;
+        .feasibility-badge.green {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .feasibility-badge.blue {
+            background: #d1ecf1;
+            color: #0c5460;
+        }
+
+        .feasibility-badge.orange {
+            background: #fff3cd;
+            color: #856404;
+        }
+
+        .feasibility-badge.red {
+            background: #f8d7da;
+            color: #721c24;
         }
 
-        .pdf-item a:hover {
-            text-decoration: underline;
+        .feasibility-badge.purple {
+            background: #e7d6f8;
+            color: #5a1a7a;
         }
 
         .tabs {
             display: flex;
-            border-bottom: 1px solid #ccc;
-            margin-bottom: 20px;
+            gap: 8px;
+            margin-bottom: 24px;
+            border-bottom: 2px solid var(--border);
             flex-wrap: wrap;
         }
 
-        .tab-button {
+        .tab-btn {
+            padding: 12px 20px;
             background: none;
             border: none;
-            padding: 12px 18px;
+            border-bottom: 3px solid transparent;
             cursor: pointer;
-            font-size: 1em;
             font-weight: 500;
-            border-bottom: 3px solid transparent;
             color: var(--text-muted);
+            transition: all 0.2s;
+            font-size: 0.95rem;
         }
 
-        .tab-button.active {
-            border-bottom: 3px solid var(--primary-light);
-            color: var(--primary-color);
+        .tab-btn:hover {
+            color: var(--primary);
+        }
+
+        .tab-btn.active {
+            color: var(--primary);
+            border-bottom-color: var(--primary);
             font-weight: 600;
         }
 
@@ -242,1187 +275,498 @@
 
         .tab-content.active {
             display: block;
-            animation: fadeIn 0.5s;
+            animation: fadeIn 0.3s;
         }
 
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin: 20px 0;
+        }
 
-            to {
-                opacity: 1;
-            }
+        .info-item {
+            background: var(--background);
+            padding: 16px;
+            border-radius: 8px;
+            border-left: 4px solid var(--primary);
         }
 
-        .strategy-cycle {
-            border-left: 3px solid var(--primary-light);
-            padding-left: 20px;
-            margin-bottom: 25px;
+        .info-label {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-bottom: 4px;
+        }
+
+        .info-value {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--primary-dark);
+        }
+
+        .timeline-item {
+            background: white;
+            border-left: 4px solid var(--primary-light);
+            padding: 20px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .timeline-phase {
+            font-weight: 600;
+            color: var(--primary-dark);
+            font-size: 1.1rem;
+            margin-bottom: 8px;
         }
 
-        table {
+        .timeline-weeks {
+            color: var(--secondary);
+            font-size: 0.9rem;
+            margin-bottom: 12px;
+        }
+
+        .timeline-activities {
+            list-style: none;
+            padding-left: 0;
+        }
+
+        .timeline-activities li {
+            padding: 6px 0 6px 24px;
+            position: relative;
+        }
+
+        .timeline-activities li:before {
+            content: "✓";
+            position: absolute;
+            left: 0;
+            color: var(--primary);
+            font-weight: bold;
+        }
+
+        .cost-table {
             width: 100%;
             border-collapse: collapse;
-            margin-top: 15px;
+            margin: 16px 0;
         }
 
-        th,
-        td {
-            text-align: left;
+        .cost-table th,
+        .cost-table td {
             padding: 12px;
-            border-bottom: 1px solid var(--border-color);
+            text-align: left;
+            border-bottom: 1px solid var(--border);
         }
 
-        th {
-            background-color: #f8f9fa;
+        .cost-table th {
+            background: var(--background);
             font-weight: 600;
+            color: var(--primary-dark);
         }
 
-        td.cost {
-            text-align: right;
-            font-weight: 500;
+        .cost-table .total-row {
+            font-weight: 700;
+            background: #f8f9fa;
         }
 
-        .total-cost {
-            font-weight: bold;
-            text-align: right;
+        .cost-table .profit-row {
+            font-weight: 700;
+            font-size: 1.1rem;
         }
 
-        .input-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
+        .cost-table .profit-positive {
+            color: #28a745;
         }
 
-        .shap-positive {
-            color: #2e7d32;
-            font-weight: bold;
+        .cost-table .profit-negative {
+            color: #dc3545;
         }
 
-        .shap-negative {
-            color: #d32f2f;
-            font-weight: bold;
+        .alert {
+            padding: 16px;
+            border-radius: 8px;
+            margin: 16px 0;
         }
-</style>
-</head>
-<body>
-<div class="container mx-auto p-4 md:p-8">
-<a href="/dashboard" style="display: inline-block; margin-bottom: 20px; color: var(--primary-color); text-decoration: none; font-weight: 500;">← Kembali ke Dasbor</a>
-<div class="module">
-<h2>🎯 Modul 19: Perencana Hasil Panen (AI)</h2>
-<p>Tentukan target hasil panen Anda, dan biarkan AI menyusun resep kondisi lahan yang dibutuhkan untuk
-                mencapainya.</p>
-<form id="yield-plan-form">
-<div class="input-grid">
-<div>
-<label for="plan-commodity-select">Pilih Komoditas:</label>
-<select id="plan-commodity-select" required="">
-<option selected="" value="umum">Umum (Semua Tanaman)</option>
-</select>
-</div>
-<div>
-<label for="plan-target-yield-input">Target Hasil Panen (ton/ha):</label>
-<input id="plan-target-yield-input" placeholder="Contoh: 7.5" required="" step="any" type="number"/>
-</div>
-</div>
-<button class="mt-4" type="submit">Buat Rencana Lahan</button>
-</form>
-<div class="result-box" id="result-yield-plan">
-<p>Rencana kondisi lahan akan muncul di sini.</p>
-</div>
-</div></div>
-<script>
- document.addEventListener('DOMContentLoaded', () => {
-            console.log('🚀 Modul loaded:', window.location.pathname);
-            const baseUrl = ''; // Kosongkan jika file HTML berada di domain yang sama
-            const apiPrefix = ''; // Menggunakan legacy endpoints yang sudah tersedia
-
-            function formatRupiah(angka) {
-                if (angka === null || angka === undefined) return "N/A";
-                return new Intl.NumberFormat('id-ID', {
-                    style: 'currency',
-                    currency: 'IDR',
-                    minimumFractionDigits: 0
-                }).format(angka);
-            }
 
-            // Fungsi openTab harus tersedia secara global atau dilampirkan ke window
-            window.openTab = function(evt, tabName, element) {
-                let i, tabcontent, tablinks;
-                const parent = element.closest('.module');
-                tabcontent = parent.getElementsByClassName("tab-content");
-                for (i = 0; i < tabcontent.length; i++) {
-                    tabcontent[i].style.display = "none";
-                }
-                tablinks = parent.getElementsByClassName("tab-button");
-                for (i = 0; i < tablinks.length; i++) {
-                    tablinks[i].className = tablinks[i].className.replace(" active", "");
-                }
-                const targetTab = document.getElementById(tabName);
-                if (targetTab) {
-                    targetTab.style.display = "block";
-                }
-                if (evt.currentTarget) {
-                    evt.currentTarget.className += " active";
-                }
-            }
+        .alert-info {
+            background: #d1ecf1;
+            color: #0c5460;
+            border-left: 4px solid #17a2b8;
+        }
 
-            const tickerContent = document.getElementById('price-ticker-content');
-            async function fetchTickerData() {
-                try {
-                    const response = await fetch(`${baseUrl}${apiPrefix}/get-ticker-prices`);
-                    const responseData = await response.json();
-                    if (responseData.success) {
-                        let tickerHtml = '';
-                        const tickerItems = [...responseData.data, ...responseData.data]; // Duplikasi untuk efek loop
-                        tickerItems.forEach(item => {
-                            tickerHtml +=
-                                `<div class="ticker-item"><span class="name">${item.name}:</span><span class="price">${formatRupiah(item.price)}/${item.unit}</span></div>`;
-                        });
-                        tickerContent.innerHTML = tickerHtml;
-                    }
-                } catch (error) {
-                    console.error("Gagal memuat data ticker:", error);
-                }
-            }
-            if (tickerContent) {
-                fetchTickerData();
-                setInterval(fetchTickerData, 60000); // Refresh setiap 60 detik
-            }
+        .alert-warning {
+            background: #fff3cd;
+            color: #856404;
+            border-left: 4px solid #ffc107;
+        }
 
-            // --- Logika untuk Modul 1 (Analisis BWD) ---
-            const formBwd = document.getElementById('upload-form'),
-                resultBwdDiv = document.getElementById('result-bwd'),
-                bwdInput = document.getElementById('bwd-input');
-            if (formBwd) {
-                formBwd.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    console.log('📝 Modul 1: BWD Analysis: Form submitted!');
-                    resultBwdDiv.innerHTML = '<p>Menganalisis gambar...</p>';
-                    const formData = new FormData(formBwd);
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/analyze`, {
-                            method: 'POST',
-                            body: formData
-                        });
-                        if (!response.ok && response.status !== 201) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    const data = await response.json();
-                        if (data.success) {
-                            resultBwdDiv.innerHTML =
-                                `<p><strong>Skor BWD:</strong> ${data.bwd_score} | <strong>Kepercayaan:</strong> ${data.confidence_percent}%</p>`;
-                            if (bwdInput) bwdInput.value = data.bwd_score;
-                        } else {
-                            resultBwdDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error:</strong> ${data.message || data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultBwdDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> Gagal terhubung.</p>`;
-                    }
-                });
-            }
+        .variety-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            margin: 16px 0;
+        }
 
-            // --- Logika untuk Modul 2 (Rekomendasi Pupuk) ---
-            const formRec = document.getElementById('recommendation-form'),
-                resultRecDiv = document.getElementById('result-recommendation');
-            if (formRec) {
-                formRec.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    console.log('📝 Modul 2: Recommendation: Form submitted!');
-                    resultRecDiv.innerHTML = '<p>Menghitung rekomendasi...</p>';
-                    const requestData = {
-                        ph_tanah: formRec.querySelector('#ph-input').value,
-                        skor_bwd: bwdInput.value,
-                        kelembaban_tanah: formRec.querySelector('#moisture-input').value,
-                        umur_tanaman_hari: formRec.querySelector('#age-input').value,
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/recommendation`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            let html = `<h3>${data.recommendation.rekomendasi_utama}</h3><ul class="item-list">`;
-                            for (const [key, value] of Object.entries(data.recommendation.rekomendasi_pupuk_ml)) {
-                                html +=
-                                    `<li class="fertilizer-item"><span class="item-name">${key}</span><span class="item-value">${value}</li>`;
-                            }
-                            html += '</ul>';
-                            if (data.recommendation.peringatan_penting.length > 0) {
-                                html += '<h4 style="color: orange;">Peringatan:</h4><ul>';
-                                data.recommendation.peringatan_penting.forEach(w => {
-                                    html += `<li>${w}</li>`;
-                                });
-                                html += '</ul>';
-                            }
-                            resultRecDiv.innerHTML = html;
-                        } else {
-                            resultRecDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultRecDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> Gagal terhubung.</p>`;
-                    }
-                });
-            }
+        .variety-tag {
+            background: var(--primary-light);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
 
-            // --- Logika untuk Modul 3 (Analisis NPK Manual) ---
-            const formNpk = document.getElementById('npk-form'),
-                resultNpkDiv = document.getElementById('result-npk');
-            if (formNpk) {
-                formNpk.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    console.log('📝 Modul 3: NPK Analysis: Form submitted!');
-                    resultNpkDiv.innerHTML = '<p>Menganalisis data NPK...</p>';
-                    const requestData = {
-                        n_value: formNpk.querySelector('#n-input').value,
-                        p_value: formNpk.querySelector('#p-input').value,
-                        k_value: formNpk.querySelector('#k-input').value,
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/analyze-npk`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            let html = '<h3>Hasil Analisis Tanah:</h3><ul class="item-list">';
-                            const labels = {
-                                'Rendah': 'label-rendah',
-                                'Optimal': 'label-optimal',
-                                'Berlebih': 'label-berlebih'
-                            };
-                            for (const [n, r] of Object.entries(data.analysis)) {
-                                html +=
-                                    `<li><strong>${n}:</strong> <span class="label ${labels[r.label] || ''}">${r.label}</span><br><small>${r.rekomendasi}</small></li>`;
-                            }
-                            html += '</ul><p><small>Data ini telah disimpan.</small></p>';
-                            resultNpkDiv.innerHTML = html;
-                        } else {
-                            resultNpkDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultNpkDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> Gagal terhubung.</p>`;
-                    }
-                });
-            }
+        .critical-factors {
+            list-style: none;
+            padding: 0;
+        }
 
-            // --- Logika untuk Modul 4 (Intelijen Harga Pasar) ---
-            const priceForm = document.getElementById('price-form'),
-                resultPriceDiv = document.getElementById('result-price');
-            if (priceForm) {
-                priceForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    console.log('📝 Modul 4: Price Check: Form submitted!');
-                    resultPriceDiv.innerHTML = '<p>Mengambil data harga...</p>';
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-prices`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                                commodity: priceForm.querySelector('#price-commodity-select').value
-                            })
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            let html = `<h3>Data Harga: ${data.data.name}</h3><ul class="item-list">`;
-                            for (const [m, p] of Object.entries(data.data.prices)) {
-                                html +=
-                                    `<li class="price-item"><span class="item-name">${m}</span><span class="item-value">${formatRupiah(p)} / ${data.data.unit}</span></li>`;
-                            }
-                            html += '</ul>';
-                            resultPriceDiv.innerHTML = html;
-                        } else {
-                            resultPriceDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultPriceDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> Gagal terhubung.</p>`;
-                    }
-                });
-            }
+        .critical-factors li {
+            padding: 12px;
+            margin-bottom: 8px;
+            background: #fff3cd;
+            border-left: 4px solid var(--accent);
+            border-radius: 4px;
+        }
 
-            // --- Logika untuk Modul 5 (Basis Pengetahuan Budidaya) ---
-            const knowledgeSelect = document.getElementById('knowledge-commodity-select'),
-                resultKnowledgeDiv = document.getElementById('result-knowledge');
-            if (knowledgeSelect) {
-                async function fetchKnowledge() {
-                    if (!knowledgeSelect.value) return;
-                    resultKnowledgeDiv.innerHTML = '<p>Mengambil data...</p>';
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-knowledge`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                                commodity: knowledgeSelect.value
-                            })
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            const kd = data.data;
-                            let html = `<h3>${kd.icon} ${kd.name}</h3><div class="tabs">`;
-                            Object.keys(kd.data).forEach((t, i) => {
-                                html +=
-                                    `<button class="tab-button ${i === 0 ? 'active' : ''}" onclick="openTab(event, 'k-${t.replace(/\s+/g, '-')}', this)">${t}</button>`;
-                            });
-                            html += '</div>';
-                            Object.entries(kd.data).forEach(([t, c], i) => {
-                                html +=
-                                    `<div id="k-${t.replace(/\s+/g, '-')}" class="tab-content ${i === 0 ? 'active' : ''}"><ul>`;
-                                c.forEach(item => {
-                                    html += `<li>${item}</li>`;
-                                });
-                                html += '</ul></div>';
-                            });
-                            resultKnowledgeDiv.innerHTML = html;
-                        } else {
-                            resultKnowledgeDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultKnowledgeDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Gagal terhubung.</p>`;
-                    }
-                }
-                knowledgeSelect.addEventListener('change', fetchKnowledge);
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.5rem;
             }
 
-            // --- Logika untuk Modul 7 (Kalkulator Pupuk Holistik) ---
-            const fertForm = document.getElementById('fertilizer-calculator-form'),
-                resultFertDiv = document.getElementById('result-fertilizer');
-            if (fertForm) {
-                fertForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultFertDiv.innerHTML = '<p>Menghitung kebutuhan...</p>';
-                    const requestData = {
-                        commodity: fertForm.querySelector('#fert-commodity-select').value,
-                        area_sqm: fertForm.querySelector('#area-input').value,
-                        ph_tanah: fertForm.querySelector('#fert-ph-input').value
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/calculate-fertilizer`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            const {
-                                data: d,
-                                commodity_name: cn,
-                                area_sqm: a
-                            } = data;
-                            let html =
-                                `<h3>Rekomendasi Pupuk untuk ${cn}</h3><p>Lahan <strong>${a} m²</strong> dengan pH <strong>${requestData.ph_tanah}</strong>:</p>`;
-                            const sections = {
-                                'Perbaikan Tanah': d.perbaikan_tanah,
-                                'Pupuk Organik': d.organik,
-                                'Pupuk Anorganik': d.anorganik
-                            };
-                            for (const [title, content] of Object.entries(sections)) {
-                                if (content && Object.keys(content).length > 0) {
-                                    html += `<h4>${title}:</h4><ul class="item-list">`;
-                                    for (const [fert, amount] of Object.entries(content)) {
-                                        html +=
-                                            `<li class="fertilizer-item"><span class="item-name">${fert}</span><span class="item-value">${amount} kg</span></li>`;
-                                    }
-                                    html += '</ul>';
-                                }
-                            }
-                            html +=
-                                '<br><small>Catatan: Rekomendasi pupuk dasar. Sesuaikan dengan kondisi tanah dan fase pertumbuhan.</small>';
-                            resultFertDiv.innerHTML = html;
-                        } else {
-                            resultFertDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultFertDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> Gagal terhubung.</p>`;
-                    }
-                });
+            .form-grid {
+                grid-template-columns: 1fr;
             }
 
-            // --- Logika untuk Modul 8 (Pustaka Dokumen) ---
-            const pdfForm = document.getElementById('pdf-upload-form'),
-                pdfStatus = document.getElementById('pdf-upload-status'),
-                pdfList = document.getElementById('pdf-list');
-            if (pdfForm) {
-                async function fetchPdfs() {
-                    pdfList.innerHTML = '<p>Memuat daftar...</p>';
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-pdfs`);
-                        if (!response.ok && response.status !== 201) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    const data = await response.json();
-                        if (data.success && data.files) {
-                            if (data.files.length > 0) {
-                                let html = '<ul class="item-list">';
-                                data.files.forEach(f => {
-                                    html +=
-                                        `<li class="pdf-item"><a href="${baseUrl}${apiPrefix}/view-pdf/${f}" target="_blank">${f}</a></li>`;
-                                });
-                                html += '</ul>';
-                                pdfList.innerHTML = html;
-                            } else {
-                                pdfList.innerHTML = '<p>Belum ada dokumen.</p>';
-                            }
-                        } else {
-                            pdfList.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        pdfList.innerHTML = `<p style="color: red;">Gagal terhubung.</p>`;
-                    }
-                }
-                fetchPdfs();
-                pdfForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    pdfStatus.style.display = 'block';
-                    pdfStatus.innerHTML = '<p>Mengunggah...</p>';
-                    const formData = new FormData(pdfForm);
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/upload-pdf`, {
-                            method: 'POST',
-                            body: formData
-                        });
-                        if (!response.ok && response.status !== 201) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    const data = await response.json();
-                        if (data.success) {
-                            pdfStatus.innerHTML = `<p style="color: green;">Sukses: ${data.message}</p>`;
-                            pdfForm.reset();
-                            fetchPdfs();
-                        } else {
-                            pdfStatus.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        pdfStatus.innerHTML = `<p style="color: red;">Gagal terhubung.</p>`;
-                    }
-                });
+            .tabs {
+                overflow-x: auto;
             }
+        }
+    </style>
+</head>
 
-            // --- Logika untuk Modul 9 (Rekomendasi Terpadu) ---
-            const intForm = document.getElementById('integrated-recommendation-form'),
-                resultInt = document.getElementById('result-integrated');
-            if (intForm) {
-                intForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultInt.innerHTML = '<p>Menyusun rekomendasi...</p>';
-                    const requestData = {
-                        ketinggian: intForm.querySelector('#ketinggian-select').value,
-                        iklim: intForm.querySelector('#iklim-select').value,
-                        fase: intForm.querySelector('#fase-select').value,
-                        masalah: intForm.querySelector('#masalah-select').value
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-integrated-recommendation`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            let html = '<h3>Rekomendasi Strategis:</h3>';
-                            html += `<h4>🌱 Pemilihan Bibit</h4><p>${data.data.bibit}</p>`;
-                            html += `<h4>🌿 Pemupukan</h4><p>${data.data.pemupukan}</p>`;
-                            html += `<h4>🛡️ Penyemprotan</h4><p>${data.data.penyemprotan}</p>`;
-                            resultInt.innerHTML = html;
-                        } else {
-                            resultInt.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultInt.innerHTML = `<p style="color: red;">Gagal terhubung.</p>`;
-                    }
-                });
-            }
+<body>
+    <div class="container">
+        <a href="/dashboard" class="back-link">← Kembali ke Dashboard</a>
 
-            // --- Logika untuk Modul 10 (Strategi Penyemprotan) ---
-            const sprayForm = document.getElementById('spraying-strategy-form'),
-                resultSpray = document.getElementById('result-spraying');
-            if (sprayForm) {
-                sprayForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultSpray.innerHTML = '<p>Menyusun rencana...</p>';
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-spraying-recommendation`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                                pest: sprayForm.querySelector('#pest-select').value
-                            })
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            const d = data.data;
-                            let html = `<h3>${d.strategy.name}</h3><p>${d.strategy.description}</p>`;
-                            d.strategy.cycles.forEach(c => {
-                                html +=
-                                    `<div class="strategy-cycle"><h4>${c.weeks}: ${c.level}</h4><p><strong>Bahan Aktif:</strong> ${c.active_ingredient}<br><strong>Grup IRAC:</strong> ${c.irac_code}<br><strong>SOP:</strong> ${c.sop}</p></div>`;
-                            });
-                            html += `<h3>${d.protocol.title}</h3><ul>`;
-                            d.protocol.steps.forEach(s => {
-                                html += `<li>${s}</li>`;
-                            });
-                            html += '</ul>';
-                            resultSpray.innerHTML = html;
-                        } else {
-                            resultSpray.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultSpray.innerHTML = `<p style="color: red;">Gagal terhubung.</p>`;
-                    }
+        <div class="header">
+            <h1>🎯 Perencana Hasil Panen (AI)</h1>
+            <p>Tentukan target hasil panen Anda, dan biarkan AI menyusun resep kondisi lahan yang dibutuhkan untuk
+                mencapainya.</p>
+        </div>
+
+        <div class="card">
+            <div class="card-title">📋 Input Target Panen</div>
+            <form id="yield-plan-form">
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label for="commodity-select">
+                            🌾 Pilih Komoditas
+                        </label>
+                        <select id="commodity-select" required>
+                            <option value="">-- Pilih Komoditas --</option>
+                            <option value="padi">🌾 Padi</option>
+                            <option value="jagung">🌽 Jagung</option>
+                            <option value="kedelai">🫘 Kedelai</option>
+                            <option value="cabai">🌶️ Cabai</option>
+                            <option value="tomat">🍅 Tomat</option>
+                            <option value="umum">📊 Umum (Semua Tanaman)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="target-yield">
+                            🎯 Target Hasil Panen (ton/ha)
+                        </label>
+                        <input type="number" id="target-yield" step="0.1" min="0.1" placeholder="Contoh: 7.5" required>
+                    </div>
+                </div>
+                <button type="submit" class="btn-primary" id="submit-btn">
+                    Buat Rencana Lahan
+                </button>
+            </form>
+        </div>
+
+        <div class="result-section" id="result-section">
+            <div id="result-content"></div>
+        </div>
+    </div>
+
+    <script>
+        const form = document.getElementById('yield-plan-form');
+        const submitBtn = document.getElementById('submit-btn');
+        const resultSection = document.getElementById('result-section');
+        const resultContent = document.getElementById('result-content');
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const commodity = document.getElementById('commodity-select').value;
+            const targetYield = parseFloat(document.getElementById('target-yield').value);
+
+            // Show loading
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<span class="spinner"></span> Menyusun Rencana...';
+            resultSection.classList.remove('active');
+
+            try {
+                const response = await fetch('/generate-yield-plan', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        commodity: commodity,
+                        target_yield: targetYield
+                    })
                 });
-            }
 
-            // --- Logika untuk Modul 11 (Grafik Harga) ---
-            const histPriceForm = document.getElementById('historical-price-form'),
-                resultHistPrice = document.getElementById('result-historical-price');
-            let priceChart;
-            if (histPriceForm) {
-                const chartCanvas = document.getElementById('price-chart').getContext('2d');
-                histPriceForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultHistPrice.querySelector('p').textContent = 'Memvisualisasikan data...';
-                    const requestData = {
-                        commodity: histPriceForm.querySelector('#historical-commodity-select').value,
-                        range: histPriceForm.querySelector('#time-range-select').value
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-historical-prices`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            resultHistPrice.querySelector('p').textContent = `Grafik tren harga:`;
-                            if (priceChart) priceChart.destroy();
-                            priceChart = new Chart(chartCanvas, {
-                                type: 'line',
-                                data: {
-                                    labels: data.labels,
-                                    datasets: [{
-                                        label: 'Harga (Rp)',
-                                        data: data.prices,
-                                        borderColor: 'rgba(46, 125, 50, 1)',
-                                        backgroundColor: 'rgba(76, 175, 80, 0.2)',
-                                        borderWidth: 2,
-                                        fill: true,
-                                        tension: 0.3
-                                    }]
-                                },
-                                options: {
-                                    responsive: true,
-                                    scales: {
-                                        y: {
-                                            ticks: {
-                                                callback: (v) => formatRupiah(v)
-                                            }
-                                        }
-                                    }
-                                }
-                            });
-                        } else {
-                            resultHistPrice.querySelector('p').textContent = `Error: ${data.error}`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultHistPrice.querySelector('p').textContent = 'Error: Gagal terhubung.';
-                    }
-                });
+                const data = await response.json();
+
+                if (data.success) {
+                    displayResults(data.plan);
+                    resultSection.classList.add('active');
+                    resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                } else {
+                    resultContent.innerHTML = `
+                        <div class="card">
+                            <div class="alert alert-warning">
+                                ⚠️ <strong>Error:</strong> ${data.error}
+                            </div>
+                        </div>
+                    `;
+                    resultSection.classList.add('active');
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                resultContent.innerHTML = `
+                    <div class="card">
+                        <div class="alert alert-warning">
+                            ⚠️ <strong>Error:</strong> Gagal terhubung ke server. Silakan coba lagi.
+                        </div>
+                    </div>
+                `;
+                resultSection.classList.add('active');
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = 'Buat Rencana Lahan';
             }
-
-            // --- Logika untuk Modul 12 (Ensiklopedia Komoditas) ---
-            const guideForm = document.getElementById('guide-form'),
-                resultGuideDiv = document.getElementById('result-guide');
-            if (guideForm) {
-                guideForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultGuideDiv.style.display = 'block';
-                    resultGuideDiv.innerHTML = '<p>Memuat panduan...</p>';
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-commodity-guide`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                                commodity: guideForm.querySelector('#guide-commodity-select').value
-                            })
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            const gd = data.data;
-                            let html = `<h2>${gd.icon} Panduan Lengkap: ${gd.name}</h2><p>${gd.description}</p>`;
-                            html += '<div class="tabs">';
-                            html +=
-                                `<button class="tab-button active" onclick="openTab(event, 'sop-budidaya', this)">SOP Budidaya</button>`;
-                            html +=
-                                `<button class="tab-button" onclick="openTab(event, 'analisis-bisnis', this)">Analisis Bisnis</button>`;
-                            html += '</div>';
-                            html += `<div id="sop-budidaya" class="tab-content active">`;
-                            for (const [phase, steps] of Object.entries(gd.sop)) {
-                                html += `<h3>${phase}</h3><ul>`;
-                                steps.forEach(step => {
-                                    html += `<li>${step}</li>`;
-                                });
-                                html += `</ul>`;
-                            }
-                            html += `</div>`;
-                            const analysis = gd.business_analysis;
-                            html +=
-                                `<div id="analisis-bisnis" class="tab-content"><h3>${analysis.title}</h3><p><strong>Asumsi:</strong> Lahan ${analysis.assumptions.Luas_Lahan}, populasi ${analysis.assumptions.Populasi_Tanaman}.</p>`;
-                            html +=
-                                `<h4>Estimasi Biaya Produksi</h4><table><tr><th>Komponen</th><th>Kebutuhan</th><th style="text-align:right;">Biaya</th></tr>`;
-                            let totalCost = 0;
-                            analysis.costs.forEach(i => {
-                                html +=
-                                    `<tr><td>${i.item}</td><td>${i.amount}</td><td class="cost">${formatRupiah(i.cost)}</td></tr>`;
-                                totalCost += i.cost;
-                            });
-                            html +=
-                                `<tr><td colspan="2" class="total-cost"><strong>Total Biaya</strong></td><td class="total-cost"><strong>${formatRupiah(totalCost)}</strong></td></tr></table>`;
-                            html +=
-                                `<h4>Simulasi Pendapatan</h4><table><tr><th>Skenario Harga</th><th>Panen Konservatif</th><th>Panen Optimal</th></tr>`;
-                            analysis.revenue_scenarios.forEach(s => {
-                                const revCons = analysis.yield_potential[0].total_yield_kg * s.price_per_kg;
-                                const revOpt = analysis.yield_potential[1].total_yield_kg * s.price_per_kg;
-                                html +=
-                                    `<tr><td>${s.price_level} (${formatRupiah(s.price_per_kg)}/kg)</td><td>${formatRupiah(revCons)}</td><td>${formatRupiah(revOpt)}</td></tr>`;
-                            });
-                            html += `</table><br><small><strong>Disclaimer:</strong> Angka ini adalah estimasi.</small></div>`;
-                            resultGuideDiv.innerHTML = html;
-                        } else {
-                            resultGuideDiv.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultGuideDiv.innerHTML = `<p style="color: red;">Gagal terhubung.</p>`;
-                    }
-                });
+        });
+
+        function displayResults(plan) {
+            let html = '';
+
+            // Header with feasibility
+            html += `
+                <div class="card">
+                    <h2 style="color: var(--primary-dark); margin-bottom: 16px;">
+                        ${plan.commodity_icon || '🌱'} ${plan.commodity_name}
+                    </h2>
+                    <p style="font-size: 1.2rem; margin-bottom: 12px;">
+                        Target: <strong>${plan.target_yield} ${plan.yield_unit || 'ton/ha'}</strong>
+                    </p>
+            `;
+
+            if (plan.feasibility && typeof plan.feasibility === 'object') {
+                html += `
+                    <div class="feasibility-badge ${plan.feasibility.color}">
+                        ${plan.feasibility.status}
+                    </div>
+                `;
             }
 
-            // --- Logika untuk Modul 13 (Pusat Pengetahuan pH) ---
-            const showPhBtn = document.getElementById('show-ph-info-btn'),
-                resultPhDiv = document.getElementById('result-ph-info');
-            if (showPhBtn) {
-                showPhBtn.addEventListener('click', async (event) => {
-                    event.preventDefault();
-                    if (resultPhDiv.style.display === 'block') {
-                        resultPhDiv.style.display = 'none';
-                        showPhBtn.textContent = 'Tampilkan Informasi Lengkap';
-                        return;
-                    }
-                    resultPhDiv.style.display = 'block';
-                    showPhBtn.textContent = 'Sembunyikan Informasi';
-                    resultPhDiv.innerHTML = '<p>Memuat informasi...</p>';
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/get-ph-info`);
-                        if (!response.ok && response.status !== 201) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    const data = await response.json();
-                        if (data.success) {
-                            const pd = data.data;
-                            let html = `<h2>${pd.icon} ${pd.title}</h2><div class="tabs">`;
-                            Object.keys(pd.sections).forEach((k, i) => {
-                                html +=
-                                    `<button class="tab-button ${i === 0 ? 'active' : ''}" onclick="openTab(event, 'ph-${k.replace(/[^a-zA-Z0-9]/g, '-')}', this)">${pd.sections[k].title}</button>`;
-                            });
-                            html += '</div>';
-                            Object.entries(pd.sections).forEach(([k, s], i) => {
-                                html +=
-                                    `<div id="ph-${k.replace(/[^a-zA-Z0-9]/g, '-')}" class="tab-content ${i === 0 ? 'active' : ''}"><ul>`;
-                                s.content.forEach(item => {
-                                    html += `<li>${item}</li>`;
-                                });
-                                html += `</ul></div>`;
-                            });
-                            resultPhDiv.innerHTML = html;
-                        } else {
-                            resultPhDiv.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultPhDiv.innerHTML = `<p style="color: red;">Gagal terhubung.</p>`;
-                    }
-                });
-            }
+            html += '</div>';
 
-            // --- Logika untuk Modul 14 (Rekomendasi Tanaman) ---
-            const cropForm = document.getElementById('crop-recommendation-form'),
-                resultCropDiv = document.getElementById('result-crop');
-            if (cropForm) {
-                cropForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultCropDiv.innerHTML = '<p>Menganalisis data dan mencari rekomendasi terbaik...</p>';
-                    const requestData = {
-                        n_value: document.getElementById('crop-n-input').value,
-                        p_value: document.getElementById('crop-p-input').value,
-                        k_value: document.getElementById('crop-k-input').value,
-                        temperature: document.getElementById('crop-temp-input').value,
-                        humidity: document.getElementById('crop-humidity-input').value,
-                        ph: document.getElementById('crop-ph-input').value,
-                        rainfall: document.getElementById('crop-rainfall-input').value
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/recommend-crop`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const responseData = await response.json();
-                        if (responseData.success) {
-                            resultCropDiv.innerHTML =
-                                `<h3>Rekomendasi Tanaman Optimal</h3><p style="font-size: 1.5em; text-align: center; font-weight: bold; color: var(--primary-color);">${responseData.recommended_crop}</p><p><small>Rekomendasi ini dihasilkan oleh model Machine Learning berdasarkan data yang Anda masukkan.</small></p>`;
-                        } else {
-                            resultCropDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error:</strong> ${responseData.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultCropDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Tidak dapat terhubung ke server.</p>`;
-                    }
-                });
-            }
+            // Tabs for detailed information
+            if (plan.npk_requirements || plan.environmental_conditions) {
+                html += `
+                    <div class="card">
+                        <div class="tabs">
+                            <button class="tab-btn active" onclick="openTab(event, 'tab-conditions')">📊 Kondisi Lahan</button>
+                `;
 
-            // --- Logika untuk Modul 15 (Prediksi Panen) ---
-            const yieldForm = document.getElementById('yield-prediction-form'),
-                resultYieldDiv = document.getElementById('result-yield');
-            if (yieldForm) {
-                yieldForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultYieldDiv.innerHTML = '<p>Menganalisis data dan membuat prediksi...</p>';
-                    const requestData = {
-                        nitrogen: document.getElementById('yield-n-input').value,
-                        phosphorus: document.getElementById('yield-p-input').value,
-                        potassium: document.getElementById('yield-k-input').value,
-                        temperature: document.getElementById('yield-temp-input').value,
-                        rainfall: document.getElementById('yield-rainfall-input').value,
-                        ph: document.getElementById('yield-ph-input').value,
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/predict-yield`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const responseData = await response.json();
-                        if (responseData.success) {
-                            resultYieldDiv.innerHTML =
-                                `<h3>Estimasi Potensi Hasil Panen</h3><p style="font-size: 1.8em; text-align: center; font-weight: bold; color: var(--primary-color);">${responseData.predicted_yield_ton_ha} ton/ha</p><p><small>Estimasi ini dihasilkan oleh model Machine Learning berdasarkan data yang Anda masukkan.</small></p>`;
-                        } else {
-                            resultYieldDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error:</strong> ${responseData.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultYieldDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Tidak dapat terhubung ke server.</p>`;
-                    }
-                });
-            }
+                if (plan.fertilizer_products) {
+                    html += `<button class="tab-btn" onclick="openTab(event, 'tab-fertilizers')">🧪 Pemupukan</button>`;
+                }
 
-            // --- Logika untuk Modul 16 (Prediksi Panen XAI) ---
-            const xaiYieldForm = document.getElementById('xai-yield-prediction-form'),
-                resultXaiYieldDiv = document.getElementById('result-xai-yield');
-            let importanceChart;
-            if (xaiYieldForm) {
-                xaiYieldForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultXaiYieldDiv.style.display = 'block';
-                    resultXaiYieldDiv.innerHTML = '<p>Menganalisis data dengan XAI...</p>';
-
-                    const requestData = {
-                        nitrogen: document.getElementById('xai-nitrogen').value,
-                        phosphorus: document.getElementById('xai-phosphorus').value,
-                        potassium: document.getElementById('xai-potassium').value,
-                        temperature: document.getElementById('xai-temperature').value,
-                        rainfall: document.getElementById('xai-rainfall').value,
-                        ph: document.getElementById('xai-ph').value,
-                    };
-
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/predict-yield-advanced`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-
-                        if (data.success) {
-                            if (importanceChart) {
-                                importanceChart.destroy();
-                            }
-
-                            let htmlResult = `
-                                <h3>Hasil Prediksi & Analisis</h3>
-                                <p style="font-size: 1.8em; text-align: center; font-weight: bold; color: var(--primary-color);">
-                                    Estimasi Panen: ${data.predicted_yield_ton_ha} ton/ha
-                                </p>
-
-                                <h4>Faktor Pendorong & Penghambat (Analisis SHAP)</h4>
-                                <p>Analisis ini menjelaskan mengapa prediksi Anda berbeda dari rata-rata (${data.base_value} ton/ha).</p>
-                                <ul class="item-list">`;
-
-                            for (const [feature, value] of Object.entries(data.shap_values)) {
-                                const change = value / 1000;
-                                const direction = change >= 0 ? 'Meningkatkan' : 'Menurunkan';
-                                const cssClass = change >= 0 ? 'shap-positive' : 'shap-negative';
-                                htmlResult += `<li class="shap-item"><span>${feature}</span> <span class="${cssClass}">${direction} estimasi sebesar ${Math.abs(change).toFixed(2)} ton/ha</span></li>`;
-                            }
-
-                            htmlResult += `</ul>
-
-                                <h4>Faktor Paling Berpengaruh (Secara Umum)</h4>
-                                <canvas id="importance-chart"></canvas>
-                                `;
-
-                            resultXaiYieldDiv.innerHTML = htmlResult;
-
-                            const chartCtx = document.getElementById('importance-chart').getContext('2d');
-                            const labels = data.feature_importances.map(item => item[0]);
-                            const values = data.feature_importances.map(item => item[1]);
-
-                            importanceChart = new Chart(chartCtx, {
-                                type: 'bar',
-                                data: {
-                                    labels: labels,
-                                    datasets: [{
-                                        label: 'Tingkat Kepentingan',
-                                        data: values,
-                                        backgroundColor: 'rgba(76, 175, 80, 0.6)',
-                                        borderColor: 'rgba(46, 125, 50, 1)',
-                                        borderWidth: 1
-                                    }]
-                                },
-                                options: {
-                                    indexAxis: 'y',
-                                    responsive: true,
-                                    plugins: {
-                                        legend: {
-                                            display: false
-                                        },
-                                        title: {
-                                            display: true,
-                                            text: 'Faktor yang Paling Memengaruhi Hasil Panen'
-                                        }
-                                    }
-                                }
-                            });
-
-                        } else {
-                            resultXaiYieldDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error('Error fetching XAI prediction:', error);
-                        resultXaiYieldDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Tidak dapat terhubung ke server.</p>`;
-                    }
-                });
-            }
+                if (plan.cultivation_timeline) {
+                    html += `<button class="tab-btn" onclick="openTab(event, 'tab-timeline')">📅 Timeline</button>`;
+                }
 
-            // --- Logika untuk Modul 17 (Kalkulator Konversi Pupuk) ---
-            const fertConversionForm = document.getElementById('fertilizer-conversion-form'),
-                resultFertConversionDiv = document.getElementById('result-fertilizer-conversion');
-            if (fertConversionForm) {
-                fertConversionForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultFertConversionDiv.innerHTML = '<p>Menghitung konversi...</p>';
-                    const requestData = {
-                        nutrient_needed: document.getElementById('nutrient-needed-select').value,
-                        nutrient_amount_kg: document.getElementById('nutrient-amount-input').value,
-                        fertilizer_type: document.getElementById('fertilizer-type-select').value
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/calculate-fertilizer-bags`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            resultFertConversionDiv.innerHTML = `<h3>Hasil Perhitungan</h3>
-                                <p>Untuk memenuhi kebutuhan <strong>${data.nutrient_amount_kg} kg</strong> unsur hara <strong>${data.nutrient_needed}</strong>, Anda memerlukan:</p>
-                                <p style="font-size: 1.8em; text-align: center; font-weight: bold; color: var(--primary-color);">${data.required_fertilizer_kg} kg pupuk ${data.fertilizer_name}</p>`;
-                        } else {
-                            resultFertConversionDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultFertConversionDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Tidak dapat terhubung ke server.</p>`;
-                    }
-                });
-            }
+                if (plan.cost_estimate) {
+                    html += `<button class="tab-btn" onclick="openTab(event, 'tab-costs')">💰 Estimasi Biaya</button>`;
+                }
 
-            // --- Logika untuk Modul 18 (Diagnostik Gejala Cerdas) ---
-            const startBtn = document.getElementById('start-diagnostic-btn'),
-                questionsDiv = document.getElementById('diagnostic-questions'),
-                resultDiv = document.getElementById('diagnostic-result');
-            let diagnosticTree = null;
-            if (startBtn) {
-                async function startDiagnostic() {
-                    startBtn.style.display = 'none';
-                    questionsDiv.style.display = 'block';
-                    resultDiv.style.display = 'none';
-                    resultDiv.innerHTML = '';
-                    questionsDiv.innerHTML = '<p>Memuat data diagnostik...</p>';
-                    try {
-                        if (!diagnosticTree) {
-                            const response = await fetch(`${baseUrl}${apiPrefix}/get-diagnostic-tree`);
-                            const responseData = await response.json();
-                            if (responseData.success) {
-                                diagnosticTree = responseData.data;
-                            } else {
-                                throw new Error(responseData.error);
-                            }
-                        }
-                        renderQuestion(diagnosticTree.start, []);
-                    } catch (error) {
-                        console.error("Error:", error);
-                        questionsDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${error.message}</p>`;
+                if (plan.recommended_varieties || plan.critical_factors) {
+                    html += `<button class="tab-btn" onclick="openTab(event, 'tab-tips')">💡 Tips & Rekomendasi</button>`;
+                }
+
+                html += '</div>';
+
+                // Tab 1: Conditions
+                html += `<div id="tab-conditions" class="tab-content active">`;
+
+                if (plan.npk_requirements) {
+                    html += '<h3 style="color: var(--primary-dark); margin-bottom: 16px;">Kebutuhan NPK</h3>';
+                    html += '<div class="info-grid">';
+                    for (const [key, value] of Object.entries(plan.npk_requirements)) {
+                        html += `
+                            <div class="info-item">
+                                <div class="info-label">${key}</div>
+                                <div class="info-value">${value}</div>
+                            </div>
+                        `;
                     }
+                    html += '</div>';
                 }
 
-                function renderQuestion(node, path) {
-                    questionsDiv.innerHTML = `<h4>${node.question}</h4>`;
-                    for (const [key, nextNode] of Object.entries(node.options)) {
-                        const button = document.createElement('button');
-                        button.textContent = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                        button.classList.add('option-button');
-                        button.onclick = () => {
-                            if (typeof nextNode === 'string') {
-                                renderResult(nextNode);
-                            } else {
-                                renderQuestion(nextNode, [...path, key]);
-                            }
-                        };
-                        questionsDiv.appendChild(button);
+                if (plan.environmental_conditions) {
+                    html += '<h3 style="color: var(--primary-dark); margin: 24px 0 16px;">Kondisi Lingkungan Optimal</h3>';
+                    html += '<div class="info-grid">';
+                    for (const [key, value] of Object.entries(plan.environmental_conditions)) {
+                        html += `
+                            <div class="info-item">
+                                <div class="info-label">${key}</div>
+                                <div class="info-value">${value}</div>
+                            </div>
+                        `;
                     }
+                    html += '</div>';
                 }
 
-                function renderResult(diagnosis) {
-                    questionsDiv.style.display = 'none';
-                    resultDiv.style.display = 'block';
-                    resultDiv.innerHTML =
-                        `<h3>Hasil Diagnosis</h3><p>${diagnosis}</p><button class="option-button" id="restart-diagnostic-btn">Mulai Lagi</button>`;
-                    document.getElementById('restart-diagnostic-btn').onclick = () => {
-                        startBtn.style.display = 'block';
-                        questionsDiv.style.display = 'none';
-                        resultDiv.style.display = 'none';
-                    };
+                if (plan.feasibility && plan.feasibility.benchmark_range) {
+                    html += `
+                        <div class="alert alert-info" style="margin-top: 24px;">
+                            <strong>📊 Benchmark Hasil Panen:</strong><br>
+                            Rendah: ${plan.feasibility.benchmark_range.low}<br>
+                            Rata-rata: ${plan.feasibility.benchmark_range.average}<br>
+                            Tinggi: ${plan.feasibility.benchmark_range.high}<br>
+                            Rekor: ${plan.feasibility.benchmark_range.record}
+                        </div>
+                    `;
                 }
-                startBtn.addEventListener('click', startDiagnostic);
-            }
 
-            // --- Logika untuk Modul 19 (Perencana Hasil Panen) ---
-            const yieldPlanForm = document.getElementById('yield-plan-form'),
-                resultYieldPlanDiv = document.getElementById('result-yield-plan');
-            if (yieldPlanForm) {
-                yieldPlanForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    resultYieldPlanDiv.innerHTML = '<p>Mencari resep lahan optimal...</p>';
-                    const requestData = {
-                        commodity: document.getElementById('plan-commodity-select').value,
-                        target_yield: document.getElementById('plan-target-yield-input').value
-                    };
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/generate-yield-plan`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-                        const data = await response.json();
-                        if (data.success) {
-                            let htmlResult = `<h3>Rekomendasi Kondisi Lahan</h3>
-                                <p>Untuk mencapai target panen sekitar <strong>${requestData.target_yield} ton/ha</strong>, berikut adalah resep kondisi lahan berdasarkan data kami yang paling mendekati:</p>
-                                <ul class="item-list mt-4">`;
-                            for (const [key, value] of Object.entries(data.plan)) {
-                                htmlResult +=
-                                    `<li class="plan-item"><span class="plan-item-label">${key}</span><span class="plan-item-value">${value}</span></li>`;
-                            }
-                            htmlResult +=
-                                `</ul><br><small><strong>Disclaimer:</strong> Ini adalah target berdasarkan data historis, bukan jaminan.</small>`;
-                            resultYieldPlanDiv.innerHTML = htmlResult;
-                        } else {
-                            resultYieldPlanDiv.innerHTML = `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        resultYieldPlanDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Gagal terhubung ke server.</p>`;
+                html += '</div>';
+
+                // Tab 2: Fertilizers
+                if (plan.fertilizer_products) {
+                    html += `<div id="tab-fertilizers" class="tab-content">`;
+                    html += '<h3 style="color: var(--primary-dark); margin-bottom: 16px;">Rekomendasi Pupuk</h3>';
+                    html += '<div class="info-grid">';
+                    for (const [fert, amount] of Object.entries(plan.fertilizer_products)) {
+                        html += `
+                            <div class="info-item">
+                                <div class="info-label">${fert}</div>
+                                <div class="info-value">${amount}</div>
+                            </div>
+                        `;
                     }
-                });
-            }
+                    html += '</div>';
+                    html += `
+                        <div class="alert alert-info" style="margin-top: 20px;">
+                            💡 <strong>Catatan:</strong> Aplikasikan pupuk sesuai fase pertumbuhan tanaman. 
+                            Pupuk organik diberikan saat persiapan lahan, sedangkan pupuk anorganik dibagi dalam beberapa tahap.
+                        </div>
+                    `;
+                    html += '</div>';
+                }
 
-            // --- Logika untuk Modul 21 (Analis Risiko Keberhasilan) ---
-            const successPredictionForm = document.getElementById('success-prediction-form'),
-                resultSuccessPredictionDiv = document.getElementById('result-success-prediction');
-            if (successPredictionForm) {
-                successPredictionForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    console.log('📝 Modul 21: Success Prediction form submitted!');
-                    resultSuccessPredictionDiv.innerHTML = '<p>Menganalisis probabilitas keberhasilan...</p>';
-
-                    const requestData = {
-                        nitrogen: document.getElementById('sp-nitrogen').value,
-                        phosphorus: document.getElementById('sp-phosphorus').value,
-                        potassium: document.getElementById('sp-potassium').value,
-                        temperature: document.getElementById('sp-temperature').value,
-                        rainfall: document.getElementById('sp-rainfall').value,
-                        ph: document.getElementById('sp-ph').value,
-                        penggunaan_benih: document.getElementById('sp-benih').value,
-                        aplikasi_organik: document.getElementById('sp-organik').value,
-                        manajemen_gulma: document.getElementById('sp-gulma').value
-                    };
-
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/predict-success`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(requestData)
-                        });
-
-                        const data = await response.json();
-
-                        if (data.success) {
-                            const statusColor = data.status === "Berhasil" ? "text-green-600" : "text-red-600";
-                            resultSuccessPredictionDiv.innerHTML = `
-                                <h3>Hasil Analisis Risiko</h3>
-                                <p>Berdasarkan parameter yang Anda masukkan, status rencana tanam Anda adalah:</p>
-                                <p style="font-size: 1.8em; text-align: center; font-weight: bold;" class="${statusColor}">
-                                    ${data.status}</p>
-                                <p class="text-center">Dengan probabilitas keberhasilan sebesar <strong>${data.probability_of_success}%</strong></p>
-                                `;
-                        } else {
-                            resultSuccessPredictionDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error:</strong> ${data.error}</p>`;
+                // Tab 3: Timeline
+                if (plan.cultivation_timeline) {
+                    html += `<div id="tab-timeline" class="tab-content">`;
+                    html += '<h3 style="color: var(--primary-dark); margin-bottom: 16px;">Jadwal Budidaya</h3>';
+                    if (plan.growth_duration) {
+                        html += `<p style="margin-bottom: 20px;"><strong>Durasi Total:</strong> ${plan.growth_duration}</p>`;
+                    }
+                    for (const phase of plan.cultivation_timeline) {
+                        html += `
+                            <div class="timeline-item">
+                                <div class="timeline-phase">${phase.phase}</div>
+                                <div class="timeline-weeks">${phase.weeks}</div>
+                                <ul class="timeline-activities">
+                        `;
+                        for (const activity of phase.activities) {
+                            html += `<li>${activity}</li>`;
                         }
-                    } catch (error) {
-                        console.error('Error fetching success probability:', error);
-                        resultSuccessPredictionDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Tidak dapat terhubung ke server.</p>`;
+                        html += '</ul></div>';
                     }
-                });
-            }
+                    html += '</div>';
+                }
 
-            // --- Logika untuk Modul 20 (Dokter Tanaman Canggih - Roboflow AI) ---
-            const advancedDiseaseForm = document.getElementById('advanced-disease-form');
-            const resultAdvancedDiseaseDiv = document.getElementById('result-advanced-disease');
-            if (advancedDiseaseForm) {
-                advancedDiseaseForm.addEventListener('submit', async (event) => {
-                    event.preventDefault();
-                    console.log('📝 Modul 20: Roboflow form submitted!');
-                    resultAdvancedDiseaseDiv.innerHTML = '<p>Menganalisis dengan Roboflow AI...</p>';
-                    const fileInput = document.getElementById('disease-image-input');
-                    const file = fileInput.files[0];
-                    if (!file) {
-                        resultAdvancedDiseaseDiv.innerHTML =
-                            '<p style="color: red;"><strong>Error:</strong> Silakan pilih file gambar terlebih dahulu.</p>';
-                        return;
-                    }
+                // Tab 4: Costs
+                if (plan.cost_estimate) {
+                    html += `<div id="tab-costs" class="tab-content">`;
+                    html += '<h3 style="color: var(--primary-dark); margin-bottom: 16px;">Estimasi Biaya & Keuntungan</h3>';
+                    html += '<table class="cost-table"><thead><tr><th>Item</th><th>Biaya</th></tr></thead><tbody>';
 
-                    const formData = new FormData();
-                    formData.append('file', file);
+                    if (plan.cost_estimate.fertilizer_breakdown) {
+                        html += '<tr><td colspan="2" style="font-weight: 600; background: #f8f9fa;">Pupuk</td></tr>';
+                        for (const [fert, cost] of Object.entries(plan.cost_estimate.fertilizer_breakdown)) {
+                            html += `<tr><td>${fert}</td><td>${cost}</td></tr>`;
+                        }
+                    }
 
-                    try {
-                        const response = await fetch(`${baseUrl}${apiPrefix}/analyze-disease-advanced`, {
-                            method: 'POST',
-                            body: formData
-                        });
+                    html += `
+                        <tr class="total-row"><td>Total Pupuk</td><td>${plan.cost_estimate.total_fertilizer}</td></tr>
+                        <tr><td>Benih</td><td>${plan.cost_estimate.seed_cost}</td></tr>
+                        <tr><td>Tenaga Kerja</td><td>${plan.cost_estimate.labor_cost}</td></tr>
+                        <tr><td>Pestisida</td><td>${plan.cost_estimate.pesticide_cost}</td></tr>
+                        <tr class="total-row"><td>TOTAL BIAYA INPUT</td><td>${plan.cost_estimate.total_input_cost}</td></tr>
+                        <tr style="background: #e8f5e9;"><td>Estimasi Pendapatan</td><td>${plan.cost_estimate.estimated_revenue}</td></tr>
+                        <tr class="profit-row ${plan.cost_estimate.estimated_profit.includes('-') ? 'profit-negative' : 'profit-positive'}">
+                            <td>ESTIMASI KEUNTUNGAN</td><td>${plan.cost_estimate.estimated_profit}</td>
+                        </tr>
+                    `;
+                    html += '</tbody></table>';
+                    html += `<div class="alert alert-warning">${plan.cost_estimate.note}</div>`;
+                    html += '</div>';
+                }
 
-                        const backendResponse = await response.json();
+                // Tab 5: Tips
+                if (plan.recommended_varieties || plan.critical_factors) {
+                    html += `<div id="tab-tips" class="tab-content">`;
 
-                        if (backendResponse.success) {
-                            displayRoboflowResults(backendResponse.data);
-                        } else {
-                            resultAdvancedDiseaseDiv.innerHTML =
-                                `<p style="color: red;"><strong>Error dari server:</strong> ${backendResponse.error || 'Gagal menganalisis.'}</p>`;
+                    if (plan.recommended_varieties) {
+                        html += '<h3 style="color: var(--primary-dark); margin-bottom: 16px;">Varietas Rekomendasi</h3>';
+                        html += '<div class="variety-list">';
+                        for (const variety of plan.recommended_varieties) {
+                            html += `<span class="variety-tag">${variety}</span>`;
                         }
-                    } catch (error) {
-                        console.error('Error calling backend for advanced analysis:', error);
-                        resultAdvancedDiseaseDiv.innerHTML =
-                            `<p style="color: red;"><strong>Error:</strong> Tidak dapat terhubung ke server backend Anda.</p>`;
+                        html += '</div>';
                     }
-                });
 
-                function displayRoboflowResults(results) {
-                    let html = '<h3>Hasil Diagnosis dari Roboflow AI</h3>';
-                    if (results && results.outputs && results.outputs.length > 0) {
-                        html += '<ul style="list-style-type: none; padding-left: 0;">';
-                        results.outputs.forEach((output, index) => {
-                            const detection = output.detection;
-                            const classification = output.classification;
-                            html += `<li class="mb-4 p-4 border rounded-lg bg-white">`;
-                            html += `<strong class="text-lg text-emerald-700">Deteksi #${index + 1}</strong><br>`;
-                            if (detection && detection.predictions && detection.predictions.length > 0) {
-                                const pred = detection.predictions[0];
-                                html += `<strong>Objek Terdeteksi:</strong> ${pred.class} (Kepercayaan: ${Math.round(pred.confidence * 100)}%)<br>`;
-                            } else {
-                                html += `<strong>Objek Terdeteksi:</strong> Tidak ada.<br>`;
-                            }
-                            if (classification && classification.predictions && classification.predictions.length > 0) {
-                                const topClass = classification.predictions[0];
-                                html +=
-                                    `<strong>Klasifikasi Penyakit:</strong> ${topClass.class} (Kepercayaan: ${Math.round(topClass.confidence * 100)}%)`;
-                            } else {
-                                html += `<strong>Klasifikasi Penyakit:</strong> Tidak ada.`;
-                            }
-                            html += `</li>`;
-                        });
+                    if (plan.critical_factors) {
+                        html += '<h3 style="color: var(--primary-dark); margin: 24px 0 16px;">Faktor Kritis Keberhasilan</h3>';
+                        html += '<ul class="critical-factors">';
+                        for (const factor of plan.critical_factors) {
+                            html += `<li>⚠️ ${factor}</li>`;
+                        }
                         html += '</ul>';
-                    } else {
-                        html += '<p>Tidak ada hasil deteksi atau klasifikasi yang ditemukan dalam gambar.</p>';
                     }
-                    resultAdvancedDiseaseDiv.innerHTML = html;
+
+                    html += '</div>';
                 }
+
+                html += '</div>';
             }
 
-        }); // --- TUTUP DOMCONTENTLOADED UTAMA ---
-</script>
+            resultContent.innerHTML = html;
+        }
+
+        function openTab(evt, tabId) {
+            // Hide all tab contents
+            const tabContents = document.getElementsByClassName('tab-content');
+            for (let content of tabContents) {
+                content.classList.remove('active');
+            }
+
+            // Remove active class from all tabs
+            const tabBtns = document.getElementsByClassName('tab-btn');
+            for (let btn of tabBtns) {
+                btn.classList.remove('active');
+            }
+
+            // Show selected tab and mark button as active
+            document.getElementById(tabId).classList.add('active');
+            evt.currentTarget.classList.add('active');
+        }
+    </script>
 </body>
-</html>
+
+</html>