templates/sales_prediction.html

{% extends 'base.html' %}
{% block content %}
<section class="py-8">
    <h1 class="text-3xl font-bold mb-4">Sales Prediction Engine</h1>
    
    <!-- File Upload Form -->
    <div class="bg-gray-50 p-6 rounded shadow mb-6">
        <h2 class="text-2xl font-semibold mb-2">Upload Sales Data (CSV)</h2>
        <form action="{{ url_for('supply_failure.upload_file_supply') }}" method="POST" enctype="multipart/form-data">
            <input type="file" name="sales_file" accept=".csv" class="mb-4 block">
            <button type="submit" class="btn-learn-more">Upload</button>
        </form>
    </div>

    {% if preview_data %}
    <!-- Data Preview -->
    <div class="bg-white p-6 rounded shadow mb-6">
        <h2 class="text-2xl font-semibold mb-4">Data Preview (First 5 Rows)</h2>
        <div class="overflow-x-auto">
            <table id="preview-table" class="min-w-full table-auto">
                <thead>
                    <tr>
                        {% for column in columns %}
                        <th class="px-4 py-2 bg-gray-100">{{ column }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in preview_data %}
                    <tr>
                        {% for column in columns %}
                        <td class="border px-4 py-2">{{ row[column] }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Summary Statistics -->
    <div class="bg-white p-6 rounded shadow">
        <h2 class="text-2xl font-semibold mb-4">Summary Statistics</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 bg-blue-50 rounded">
                <p><strong>Total Rows:</strong> <span class="summary-total-rows">{{ summary_stats.total_rows }}</span></p>
                <p><strong>Total Columns:</strong> <span class="summary-total-cols">{{ summary_stats.total_columns }}</span></p>
            </div>
            <div class="p-4 bg-green-50 rounded">
                <p><strong>Numeric Columns:</strong> <span class="summary-numeric-cols">{{ summary_stats.numeric_columns|join(', ') }}</span></p>
                <p><strong>Categorical Columns:</strong> <span class="summary-categorical-cols">{{ summary_stats.categorical_columns|join(', ') }}</span></p>
            </div>
        </div>
        
        <!-- Missing Values Summary & No-code Fix UI -->
        {% set null_columns = [] %}
        {% for column, count in summary_stats.missing_values.items() %}
            {% if count > 0 %}
                {% set _ = null_columns.append((column, count)) %}
            {% endif %}
        {% endfor %}
        <div class="mt-4 p-4 bg-yellow-50 rounded">
            <h3 class="font-semibold mb-2">Missing Values</h3>
            <ul id="null-list">
                {% for column, count in null_columns %}
                <li>
                    <span>{{ column }}: {{ count }} missing values</span>
                    <select id="method-{{ column }}" class="border rounded p-1 mx-2">
                        <option value="drop">Drop Rows</option>
                        <option value="mean">Fill Mean</option>
                        <option value="median">Fill Median</option>
                        <option value="mode">Fill Mode</option>
                    </select>
                    <button class="btn-learn-more" onclick="fixNulls('{{ column }}')">Fix</button>
                </li>
                {% endfor %}
            </ul>
            <div id="null-fix-message" class="mt-2 text-green-700 font-semibold"></div>
        </div>
    </div>

    <!-- Data Visualization -->
    <div class="bg-white p-6 rounded shadow mt-6">
        <h2 class="text-2xl font-semibold mb-4">Data Visualization</h2>
        <div class="flex gap-4 mb-4">
            <select id="plotColumn" class="border rounded p-2">
                {% for column in columns %}
                <option value="{{ column }}">{{ column }}</option>
                {% endfor %}
            </select>
            <select id="plotType" class="border rounded p-2">
                <option value="histogram">Histogram (Numeric)</option>
                <option value="box">Box Plot (Numeric)</option>
                <option value="bar">Bar Plot (Categorical)</option>
            </select>
            <button onclick="createPlot()" class="btn-learn-more">Generate Plot</button>
        </div>
        <div id="plotDiv" class="w-full h-96"></div>
    </div>

    <!-- Forecasting -->
    <div class="bg-white p-6 rounded shadow mt-6">
        <h2 class="text-2xl font-semibold mb-4">Forecasting</h2>
        <div class="flex flex-wrap gap-4 mb-4">
            <div>
                <label class="block font-semibold mb-1">Date Column</label>
                <select id="forecastDateCol" class="border rounded p-2">
                    {% for column in columns %}
                    <option value="{{ column }}">{{ column }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block font-semibold mb-1">Target Column</label>
                <select id="forecastTargetCol" class="border rounded p-2">
                    {% for column in columns %}
                    <option value="{{ column }}">{{ column }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block font-semibold mb-1">Model</label>
                <select id="forecastModel" class="border rounded p-2">
                    <option value="ARIMA">ARIMA</option>
                    <option value="Prophet">Prophet</option>
                    <option value="Random Forest">Random Forest</option>
                    <option value="XGBoost">XGBoost</option>
                    <option value="LSTM">LSTM</option>
                </select>
            </div>
            <div>
                <label class="block font-semibold mb-1">Forecast Horizon</label>
                <input id="forecastHorizon" type="number" value="30" min="1" max="365" class="border rounded p-2 w-20">
            </div>
            <div class="flex items-end">
                <button onclick="runForecast()" class="btn-learn-more">Run Forecast</button>
            </div>
        </div>
        <div id="forecast-metrics" class="mb-4"></div>
        <div id="forecast-plot" class="w-full h-96"></div>
        <div id="forecast-error" class="text-red-600 font-semibold mt-2"></div>
    </div>
    {% endif %}
</section>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %}