print-calculator/frontend/src/app/features/admin/pages/admin-sessions.component.html

<section class="section-card">
  <header class="section-header">
    <div>
      <h2>Sessioni quote</h2>
      <p>Sessioni create dal configuratore con stato e conversione ordine.</p>
    </div>
    <button
      type="button"
      class="btn-primary"
      (click)="loadSessions()"
      [disabled]="loading"
    >
      Aggiorna
    </button>
  </header>

  <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>
  <p class="success" *ngIf="successMessage">{{ successMessage }}</p>

  <div class="table-wrap" *ngIf="!loading; else loadingTpl">
    <table>
      <thead>
        <tr>
          <th>Sessione</th>
          <th>Data creazione</th>
          <th>Scadenza</th>
          <th>Materiale</th>
          <th>Stato</th>
          <th>Ordine convertito</th>
          <th>Azioni</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let session of sessions">
          <tr>
            <td [title]="session.id" [appCopyOnClick]="session.id">
              {{ session.id | slice: 0 : 8 }}
            </td>
            <td>{{ session.createdAt | date: "short" }}</td>
            <td>{{ session.expiresAt | date: "short" }}</td>
            <td>{{ session.materialCode }}</td>
            <td>{{ session.status }}</td>
            <td
              [title]="session.convertedOrderId || ''"
              [appCopyOnClick]="session.convertedOrderId"
            >
              {{
                session.convertedOrderId
                  ? (session.convertedOrderId | slice: 0 : 8)
                  : "-"
              }}
            </td>
            <td class="actions">
              <button
                type="button"
                class="btn-secondary"
                (click)="toggleSessionDetail(session)"
              >
                {{ isDetailOpen(session.id) ? "Nascondi" : "Vedi" }}
              </button>
              <button
                type="button"
                class="btn-danger"
                (click)="deleteSession(session)"
                [disabled]="
                  isDeletingSession(session.id) || !!session.convertedOrderId
                "
                [title]="
                  session.convertedOrderId
                    ? 'Sessione collegata a un ordine, non eliminabile.'
                    : ''
                "
              >
                {{
                  isDeletingSession(session.id) ? "Eliminazione..." : "Elimina"
                }}
              </button>
            </td>
          </tr>
          <tr *ngIf="isDetailOpen(session.id)">
            <td colspan="7" class="detail-cell">
              <div *ngIf="isLoadingDetail(session.id)">
                Caricamento dettaglio...
              </div>
              <div
                *ngIf="
                  !isLoadingDetail(session.id) &&
                  getSessionDetail(session.id) as detail
                "
                class="detail-box"
              >
                <div class="detail-session-id">
                  <strong>UUID sessione:</strong>
                  <code
                    [title]="detail.session.id"
                    [appCopyOnClick]="detail.session.id"
                    >{{ detail.session.id }}</code
                  >
                </div>

                <div class="detail-summary">
                  <div>
                    <strong>Elementi:</strong> {{ detail.items.length }}
                  </div>
                  <div>
                    <strong>Totale articoli:</strong>
                    {{ detail.itemsTotalChf | currency: "CHF" }}
                  </div>
                  <div>
                    <strong>Spedizione:</strong>
                    {{ detail.shippingCostChf | currency: "CHF" }}
                  </div>
                  <div>
                    <strong>Totale sessione:</strong>
                    {{ detail.grandTotalChf | currency: "CHF" }}
                  </div>
                </div>

                <table
                  class="detail-table"
                  *ngIf="detail.items.length > 0; else noItemsTpl"
                >
                  <thead>
                    <tr>
                      <th>File</th>
                      <th>Qta</th>
                      <th>Tempo</th>
                      <th>Materiale</th>
                      <th>Scelte utente</th>
                      <th>Stato</th>
                      <th>Prezzo unit.</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let item of detail.items">
                      <td>{{ item.originalFilename }}</td>
                      <td>{{ item.quantity }}</td>
                      <td>{{ formatPrintTime(item.printTimeSeconds) }}</td>
                      <td>
                        {{
                          item.materialGrams
                            ? (item.materialGrams | number: "1.0-2") + " g"
                            : "-"
                        }}
                      </td>
                      <td>
                        {{ item.materialCode || "-" }} |
                        {{ item.nozzleDiameterMm ?? "-" }} mm |
                        {{ item.layerHeightMm ?? "-" }} mm |
                        {{ item.infillPercent ?? "-" }}% |
                        {{ item.infillPattern || "-" }} |
                        {{ item.supportsEnabled ? "Supporti ON" : "Supporti OFF" }}
                      </td>
                      <td>{{ item.status }}</td>
                      <td>{{ item.unitPriceChf | currency: "CHF" }}</td>
                    </tr>
                  </tbody>
                </table>
                <ng-template #noItemsTpl>
                  <p class="muted">Nessun elemento in questa sessione.</p>
                </ng-template>
              </div>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</section>

<ng-template #loadingTpl>
  <p>Caricamento sessioni...</p>
</ng-template>