TieMeasureFlow/client/templates/statistics/dashboard.html

{% extends "base.html" %}

{% block title %}{{ _("Statistiche SPC") }} — TieMeasureFlow{% endblock %}

{% block extra_head %}
<!-- Plotly.js CDN -->
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-6"
     x-data="spcDashboard()"
     x-init="init()">

  <!-- Header -->
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-[var(--text-primary)]">{{ _("Statistiche SPC") }}</h1>
    <p class="text-sm text-steel mt-1">{{ _("Analisi statistica di processo per le misurazioni") }}</p>
  </div>

  <!-- Filtri -->
  <div class="bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-color)] p-4 mb-6 shadow-sm">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

      <!-- Ricetta -->
      <div>
        <label class="block text-xs font-medium text-steel mb-1">{{ _("Ricetta") }}</label>
        <select x-model="selectedRecipeId"
                @change="onRecipeChange()"
                class="w-full rounded-lg border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
          <option value="">{{ _("Seleziona ricetta...") }}</option>
          {% for r in recipes %}
          <option value="{{ r.id }}">{{ r.code }} — {{ r.name }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- Subtask -->
      <div>
        <label class="block text-xs font-medium text-steel mb-1">{{ _("Punto di misura") }}</label>
        <select x-model="selectedSubtaskId"
                :disabled="subtasks.length === 0"
                class="w-full rounded-lg border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:border-primary disabled:opacity-50">
          <option value="">{{ _("Tutti i punti") }}</option>
          <template x-for="st in subtasks" :key="st.id">
            <option :value="st.id" x-text="'#' + st.marker_number + ' — ' + st.description"></option>
          </template>
        </select>
      </div>

      <!-- Date range -->
      <div>
        <label class="block text-xs font-medium text-steel mb-1">{{ _("Dal") }}</label>
        <input type="date" x-model="dateFrom"
               class="w-full rounded-lg border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
      </div>
      <div>
        <label class="block text-xs font-medium text-steel mb-1">{{ _("Al") }}</label>
        <input type="date" x-model="dateTo"
               class="w-full rounded-lg border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
      </div>
    </div>

    <!-- Apply button + Download -->
    <div class="mt-4 flex justify-between items-center">
      <!-- Download buttons (visible only when data is loaded) -->
      <div class="flex gap-2" x-show="hasData" x-cloak>
        <button @click="downloadReport('spc')"
                :disabled="!selectedSubtaskId || downloadingReport"
                class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
          <template x-if="downloadingReport === 'spc'">
            <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
          </template>
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-show="downloadingReport !== 'spc'">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
          </svg>
          {{ _("Report SPC") }}
        </button>
        <button @click="downloadReport('measurements')"
                :disabled="downloadingReport"
                class="px-4 py-2 bg-[var(--bg-primary)] hover:bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border-color)] rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
          <template x-if="downloadingReport === 'measurements'">
            <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
          </template>
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-show="downloadingReport !== 'measurements'">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
          </svg>
          {{ _("Report Misurazioni") }}
        </button>
      </div>
      <div x-show="!hasData"></div>

      <button @click="loadData()"
              :disabled="!selectedRecipeId || loading"
              class="px-5 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
        <template x-if="loading">
          <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
          </svg>
        </template>
        {{ _("Applica filtri") }}
      </button>
    </div>
    <!-- Inline report error (shown below buttons row) -->
    <div x-show="reportError" x-cloak
         class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center gap-1"
         x-text="reportError"
         x-transition>
    </div>
  </div>

  <!-- Nessuna ricetta selezionata -->
  <template x-if="!selectedRecipeId && !loading">
    <div class="text-center py-16 text-steel">
      <svg class="mx-auto h-16 w-16 text-steel-light mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
      </svg>
      <p class="text-lg font-medium">{{ _("Seleziona una ricetta per iniziare") }}</p>
      <p class="text-sm mt-1">{{ _("Scegli una ricetta dal filtro e premi Applica filtri") }}</p>
    </div>
  </template>

  <!-- Contenuto dashboard -->
  <template x-if="hasData">
    <div>
      <!-- Row 1: Riepilogo + Capability -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">

        <!-- Riepilogo Pass/Fail -->
        <div class="bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-color)] p-5 shadow-sm">
          <h2 class="text-sm font-semibold text-steel uppercase tracking-wider mb-4">{{ _("Riepilogo") }}</h2>
          <template x-if="summary">
            <div>
              <div class="text-3xl font-bold font-mono text-[var(--text-primary)] mb-3" x-text="summary.total + ' misure'"></div>
              <div class="grid grid-cols-3 gap-3">
                <!-- Pass -->
                <div class="text-center p-3 rounded-lg bg-emerald-50 dark:bg-emerald-900/20">
                  <div class="text-2xl font-bold font-mono text-emerald-600" x-text="summary.pass_rate + '%'"></div>
                  <div class="text-xs text-emerald-700 dark:text-emerald-400 mt-1">{{ _("Pass") }}</div>
                  <div class="text-xs text-steel font-mono" x-text="summary.pass_count"></div>
                </div>
                <!-- Warning -->
                <div class="text-center p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20">
                  <div class="text-2xl font-bold font-mono text-amber-600" x-text="summary.warning_rate + '%'"></div>
                  <div class="text-xs text-amber-700 dark:text-amber-400 mt-1">{{ _("Warning") }}</div>
                  <div class="text-xs text-steel font-mono" x-text="summary.warning_count"></div>
                </div>
                <!-- Fail -->
                <div class="text-center p-3 rounded-lg bg-red-50 dark:bg-red-900/20">
                  <div class="text-2xl font-bold font-mono text-red-600" x-text="summary.fail_rate + '%'"></div>
                  <div class="text-xs text-red-700 dark:text-red-400 mt-1">{{ _("Fail") }}</div>
                  <div class="text-xs text-steel font-mono" x-text="summary.fail_count"></div>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- Capability -->
        <div class="bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-color)] p-5 shadow-sm">
          <h2 class="text-sm font-semibold text-steel uppercase tracking-wider mb-4">{{ _("Indici di Capability") }}</h2>
          <template x-if="capability && capability.cp != null">
            <div>
              <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="text-center">
                  <div class="text-xs text-steel">Cp</div>
                  <div class="text-xl font-bold font-mono" :class="capabilityColor(capability.cp)" x-text="capability.cp"></div>
                </div>
                <div class="text-center">
                  <div class="text-xs text-steel">Cpk</div>
                  <div class="text-xl font-bold font-mono" :class="capabilityColor(capability.cpk)" x-text="capability.cpk"></div>
                </div>
                <div class="text-center">
                  <div class="text-xs text-steel">Pp</div>
                  <div class="text-xl font-bold font-mono" :class="capabilityColor(capability.pp)" x-text="capability.pp"></div>
                </div>
                <div class="text-center">
                  <div class="text-xs text-steel">Ppk</div>
                  <div class="text-xl font-bold font-mono" :class="capabilityColor(capability.ppk)" x-text="capability.ppk"></div>
                </div>
              </div>
              <!-- Gauge -->
              <div id="cpk-gauge"></div>
              <!-- Stats -->
              <div class="mt-3 grid grid-cols-3 gap-2 text-center text-xs text-steel">
                <div>
                  <span class="font-medium">n:</span>
                  <span class="font-mono" x-text="capability.n"></span>
                </div>
                <div>
                  <span class="font-medium">x&#772;:</span>
                  <span class="font-mono" x-text="capability.mean"></span>
                </div>
                <div>
                  <span class="font-medium">&sigma;:</span>
                  <span class="font-mono" x-text="capability.std_dev"></span>
                </div>
              </div>
            </div>
          </template>
          <template x-if="!capability || capability.cp == null">
            <p class="text-center text-steel py-8">{{ _("Seleziona un punto di misura per calcolare gli indici") }}</p>
          </template>
        </div>
      </div>

      <!-- Row 2: Carta di Controllo -->
      <div class="bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-color)] p-5 shadow-sm mb-6">
        <h2 class="text-sm font-semibold text-steel uppercase tracking-wider mb-4">{{ _("Carta di Controllo") }}</h2>
        <div id="control-chart" style="min-height: 350px;"></div>
      </div>

      <!-- Row 3: Istogramma -->
      <div class="bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-color)] p-5 shadow-sm mb-6">
        <h2 class="text-sm font-semibold text-steel uppercase tracking-wider mb-4">{{ _("Istogramma") }}</h2>
        <div id="histogram-chart" style="min-height: 350px;"></div>
      </div>
    </div>
  </template>

  <!-- Error message -->
  <template x-if="errorMessage">
    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300 text-sm">
      <span x-text="errorMessage"></span>
    </div>
  </template>
</div>
{% endblock %}

{% block extra_js %}
<script>
// i18n bridge for spc-charts.js
window.SPC_I18N = {
  noData: "{{ _('Nessun dato disponibile') }}",
  inControl: "{{ _('In controllo') }}",
  outOfControl: "{{ _('Fuori controllo') }}",
  controlChart: "{{ _('Carta di Controllo') }}",
  measureNum: "{{ _('Misura #') }}",
  value: "{{ _('Valore') }}",
  frequency: "{{ _('Frequenza') }}",
  normalCurve: "{{ _('Curva normale') }}",
  histogram: "{{ _('Istogramma') }}",
  indicesNotAvailable: "{{ _('Indici non disponibili') }}",
};
</script>
<script src="{{ url_for('static', filename='js/spc-charts.js') }}"></script>
<script>
function spcDashboard() {
  return {
    // Filter state
    selectedRecipeId: '',
    selectedSubtaskId: '',
    dateFrom: '',
    dateTo: '',
    subtasks: [],

    // Data state
    summary: null,
    capability: null,
    controlChart: null,
    histogram: null,

    // UI state
    loading: false,
    hasData: false,
    errorMessage: '',
    reportError: '',
    downloadingReport: false,

    init() {
      // Nothing to pre-load
    },

    async onRecipeChange() {
      this.selectedSubtaskId = '';
      this.subtasks = [];
      this.hasData = false;
      this.summary = null;
      this.capability = null;
      this.controlChart = null;
      this.histogram = null;

      if (!this.selectedRecipeId) return;

      // Load subtasks for dropdown
      try {
        const resp = await fetch('/statistics/api/subtasks?recipe_id=' + this.selectedRecipeId);
        const data = await resp.json();
        if (Array.isArray(data)) {
          this.subtasks = data;
        }
      } catch (e) {
        console.error('Error loading subtasks:', e);
      }
    },

    async loadData() {
      if (!this.selectedRecipeId) return;

      this.loading = true;
      this.errorMessage = '';
      this.hasData = false;

      const params = new URLSearchParams();
      params.set('recipe_id', this.selectedRecipeId);
      if (this.selectedSubtaskId) params.set('subtask_id', this.selectedSubtaskId);
      if (this.dateFrom) params.set('date_from', this.dateFrom + 'T00:00:00');
      if (this.dateTo) params.set('date_to', this.dateTo + 'T23:59:59');

      try {
        // Parallel fetch of all endpoints
        const [summaryResp, capabilityResp, controlResp, histogramResp] = await Promise.allSettled([
          fetch('/statistics/api/summary?' + params.toString()).then(r => r.json()),
          this.selectedSubtaskId
            ? fetch('/statistics/api/capability?' + params.toString()).then(r => r.json())
            : Promise.resolve(null),
          this.selectedSubtaskId
            ? fetch('/statistics/api/control-chart?' + params.toString()).then(r => r.json())
            : Promise.resolve(null),
          this.selectedSubtaskId
            ? fetch('/statistics/api/histogram?' + params.toString()).then(r => r.json())
            : Promise.resolve(null),
        ]);

        // Summary (always available)
        if (summaryResp.status === 'fulfilled' && !summaryResp.value?.error) {
          this.summary = summaryResp.value;
        } else {
          this.errorMessage = (summaryResp.value?.detail) || '{{ _("Errore nel caricamento dei dati") }}';
          this.loading = false;
          return;
        }

        // Capability
        if (capabilityResp.status === 'fulfilled' && capabilityResp.value && !capabilityResp.value?.error) {
          this.capability = capabilityResp.value;
        } else {
          this.capability = null;
        }

        // Control chart
        if (controlResp.status === 'fulfilled' && controlResp.value && !controlResp.value?.error) {
          this.controlChart = controlResp.value;
        } else {
          this.controlChart = null;
        }

        // Histogram
        if (histogramResp.status === 'fulfilled' && histogramResp.value && !histogramResp.value?.error) {
          this.histogram = histogramResp.value;
        } else {
          this.histogram = null;
        }

        this.hasData = true;

        // Render charts after DOM update
        this.$nextTick(() => {
          this.renderCharts();
        });

      } catch (e) {
        console.error('Error loading SPC data:', e);
        this.errorMessage = '{{ _("Errore di connessione al server") }}';
      } finally {
        this.loading = false;
      }
    },

    renderCharts() {
      // Control chart
      if (this.controlChart && this.selectedSubtaskId) {
        renderControlChart('control-chart', this.controlChart);
      } else {
        const el = document.getElementById('control-chart');
        if (el) el.innerHTML = '<p class="text-center text-steel py-12">{{ _("Seleziona un punto di misura per la carta di controllo") }}</p>';
      }

      // Histogram
      if (this.histogram && this.selectedSubtaskId) {
        const tol = this.capability ? {
          utl: this.capability.utl,
          ltl: this.capability.ltl,
          nominal: this.capability.nominal,
        } : null;
        renderHistogram('histogram-chart', this.histogram, tol);
      } else {
        const el = document.getElementById('histogram-chart');
        if (el) el.innerHTML = '<p class="text-center text-steel py-12">' + {{ _("Seleziona un punto di misura per l'istogramma")|tojson }} + '</p>';
      }

      // Capability gauge
      if (this.capability && this.capability.cpk != null) {
        renderCapabilityGauge('cpk-gauge', this.capability);
      }
    },

    capabilityColor(value) {
      if (value == null) return 'text-steel';
      if (value >= 1.33) return 'text-emerald-600';
      if (value >= 1.0) return 'text-amber-600';
      return 'text-red-600';
    },

    async downloadReport(type) {
      this.reportError = '';
      this.downloadingReport = type;
      try {
        const params = new URLSearchParams();
        params.set('recipe_id', this.selectedRecipeId);
        if (this.selectedSubtaskId) params.set('subtask_id', this.selectedSubtaskId);
        if (this.dateFrom) params.set('date_from', this.dateFrom + 'T00:00:00');
        if (this.dateTo) params.set('date_to', this.dateTo + 'T23:59:59');

        const url = '/statistics/api/report-' + type + '?' + params.toString();
        const resp = await fetch(url);

        if (!resp.ok) {
          const errData = await resp.json().catch(() => ({}));
          const msg = errData.detail || '{{ _("Errore nella generazione del report") }}';
          console.error('Report download failed (' + resp.status + '):', msg, errData);
          this.reportError = msg;
          return;
        }

        // Check Content-Type: server may return JSON error with 200 status
        const contentType = resp.headers.get('Content-Type') || '';
        if (!contentType.includes('application/pdf')) {
          const errData = await resp.json().catch(() => ({}));
          const msg = errData.detail || '{{ _("Errore nella generazione del report") }}';
          console.error('Report returned non-PDF content-type "' + contentType + '":', msg, errData);
          this.reportError = msg;
          return;
        }

        // Download the PDF
        const blob = await resp.blob();
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = type === 'spc'
          ? 'spc_report_' + this.selectedRecipeId + '.pdf'
          : 'measurements_report_' + this.selectedRecipeId + '.pdf';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(a.href);
      } catch (e) {
        console.error('Error downloading report:', e);
        this.reportError = '{{ _("Errore di connessione al server") }}';
      } finally {
        this.downloadingReport = false;
      }
    },
  };
}
</script>
{% endblock %}