<p-toast />
<div class="inv-reports-page">
  <!-- Page Header -->
  <div class="page-header-bar">
    <div class="header-content">
      <div class="header-icon"><i class="pi pi-chart-line"></i></div>
      <div>
        <h1>{{ 'INVENTORY.REPORTS_TITLE' | translate }}</h1>
        <p>{{ 'INVENTORY.REPORTS_SUBTITLE' | translate }}</p>
      </div>
    </div>
  </div>

  <!-- Tabs -->
  <p-tabs [value]="activeTab()" (valueChange)="onTabChange($event)">
    <p-tablist>
      <p-tab [value]="0"><i class="pi pi-arrows-v"></i> {{ 'INVENTORY.MOVEMENT_SUMMARY' | translate }}</p-tab>
      <p-tab [value]="1"><i class="pi pi-building"></i> {{ 'INVENTORY.WAREHOUSE_SUMMARY' | translate }}</p-tab>
      <p-tab [value]="2"><i class="pi pi-clock"></i> {{ 'INVENTORY.SLOW_MOVING' | translate }}</p-tab>
      <p-tab [value]="3"><i class="pi pi-calendar-times"></i> {{ 'INVENTORY.EXPIRY_TRACKING' | translate }}</p-tab>
      <p-tab [value]="4"><i class="pi pi-dollar"></i> {{ 'INVENTORY.INVENTORY_VALUATION' | translate }}</p-tab>
    </p-tablist>

    <!-- ═══════ TAB 0: Movement Summary ═══════ -->
    <p-tabpanel [value]="0">
      <div class="filter-bar">
        <div class="filter-field">
          <label>{{ 'INVENTORY.DATE_FROM' | translate }}</label>
          <p-datepicker [(ngModel)]="msDateFrom" dateFormat="yy-mm-dd" [showIcon]="true" />
        </div>
        <div class="filter-field">
          <label>{{ 'INVENTORY.DATE_TO' | translate }}</label>
          <p-datepicker [(ngModel)]="msDateTo" dateFormat="yy-mm-dd" [showIcon]="true" />
        </div>
        <p-button icon="pi pi-search" [label]="'COMMON.LOAD' | translate" (onClick)="loadMovementSummary()" [loading]="loadingMovement()" />
      </div>

      @if (movementData(); as data) {
        <!-- Summary Cards -->
        <div class="stats-grid">
          <div class="stat-card stat-blue">
            <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_products }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_PRODUCTS' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-green">
            <div class="stat-icon-wrap"><i class="pi pi-download"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_receipts | number:'1.0-0' }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_RECEIPTS' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-rose">
            <div class="stat-icon-wrap"><i class="pi pi-upload"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_issues | number:'1.0-0' }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_ISSUES' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
        </div>

        <!-- Movement Table -->
        <div class="section-card">
          <div class="section-header">
            <h3><i class="pi pi-list"></i> {{ 'INVENTORY.MOVEMENT_SUMMARY' | translate }}</h3>
          </div>
          <p-table [value]="data.items" [paginator]="data.items.length > 25" [rows]="25"
            [rowsPerPageOptions]="[25,50,100]" styleClass="p-datatable-sm p-datatable-gridlines"
            [scrollable]="true" scrollHeight="500px">
            <ng-template #header>
              <tr>
                <th>{{ 'COMMON.CODE' | translate }}</th>
                <th>{{ 'COMMON.NAME' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.OPENING_QTY' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.RECEIPTS' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.ISSUES' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.TRANSFERS_IN' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.TRANSFERS_OUT' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.ADJUSTMENTS_IN' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.ADJUSTMENTS_OUT' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.CLOSING_QTY' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template #body let-row>
              <tr>
                <td class="mono">{{ row.product_code }}</td>
                <td>{{ row.product_name }}</td>
                <td class="text-end">{{ row.opening_qty | number:'1.0-2' }}</td>
                <td class="text-end text-success">{{ row.receipts | number:'1.0-2' }}</td>
                <td class="text-end text-danger">{{ row.issues | number:'1.0-2' }}</td>
                <td class="text-end">{{ row.transfers_in | number:'1.0-2' }}</td>
                <td class="text-end">{{ row.transfers_out | number:'1.0-2' }}</td>
                <td class="text-end">{{ row.adjustments_in | number:'1.0-2' }}</td>
                <td class="text-end">{{ row.adjustments_out | number:'1.0-2' }}</td>
                <td class="text-end mono fw-bold">{{ row.closing_qty | number:'1.0-2' }}</td>
              </tr>
            </ng-template>
            <ng-template #emptymessage>
              <tr><td colspan="10" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
            </ng-template>
          </p-table>
        </div>
      } @else if (!loadingMovement()) {
        <div class="empty-prompt">
          <i class="pi pi-arrows-v"></i>
          <p>{{ 'INVENTORY.SELECT_DATE_RANGE' | translate }}</p>
        </div>
      }
    </p-tabpanel>

    <!-- ═══════ TAB 1: Warehouse Summary ═══════ -->
    <p-tabpanel [value]="1">
      <div class="filter-bar">
        <p-button icon="pi pi-search" [label]="'COMMON.LOAD' | translate" (onClick)="loadWarehouseSummary()" [loading]="loadingWarehouse()" />
      </div>

      @if (warehouseData(); as data) {
        <!-- Summary Cards -->
        <div class="stats-grid">
          <div class="stat-card stat-blue">
            <div class="stat-icon-wrap"><i class="pi pi-building"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_warehouses }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_WAREHOUSES' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-green">
            <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.grand_total_quantity | number:'1.0-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.GRAND_TOTAL_QTY' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-amber">
            <div class="stat-icon-wrap"><i class="pi pi-dollar"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.grand_total_value | number:'1.2-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.GRAND_TOTAL_VALUE' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
        </div>

        <!-- Warehouse Cards Grid -->
        <div class="warehouse-cards-grid">
          @for (wh of data.warehouses; track wh.warehouse_id) {
            <div class="warehouse-card">
              <div class="wh-header">
                <div class="wh-icon"><i class="pi pi-building"></i></div>
                <div>
                  <h4>{{ wh.warehouse_name }}</h4>
                  <span class="wh-code">{{ wh.warehouse_code }}</span>
                </div>
              </div>
              <div class="wh-stats">
                <div class="wh-stat">
                  <span class="wh-stat-value">{{ wh.total_products }}</span>
                  <span class="wh-stat-label">{{ 'INVENTORY.TOTAL_PRODUCTS' | translate }}</span>
                </div>
                <div class="wh-stat">
                  <span class="wh-stat-value">{{ wh.total_quantity | number:'1.0-2' }}</span>
                  <span class="wh-stat-label">{{ 'INVENTORY.TOTAL_QUANTITY' | translate }}</span>
                </div>
                <div class="wh-stat">
                  <span class="wh-stat-value">{{ wh.total_value | number:'1.2-2' }}</span>
                  <span class="wh-stat-label">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</span>
                </div>
              </div>
            </div>
          }
        </div>

        <!-- Warehouse Table -->
        <div class="section-card">
          <div class="section-header">
            <h3><i class="pi pi-table"></i> {{ 'INVENTORY.WAREHOUSE_BREAKDOWN' | translate }}</h3>
          </div>
          <p-table [value]="data.warehouses" styleClass="p-datatable-sm p-datatable-gridlines">
            <ng-template #header>
              <tr>
                <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
                <th class="mono">{{ 'COMMON.CODE' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.TOTAL_PRODUCTS' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.TOTAL_QUANTITY' | translate }}</th>
                <th class="text-end">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template #body let-wh>
              <tr>
                <td>{{ wh.warehouse_name }}</td>
                <td class="mono">{{ wh.warehouse_code }}</td>
                <td class="text-end">{{ wh.total_products }}</td>
                <td class="text-end">{{ wh.total_quantity | number:'1.0-2' }}</td>
                <td class="text-end mono fw-bold">{{ wh.total_value | number:'1.2-2' }}</td>
              </tr>
            </ng-template>
            <ng-template #emptymessage>
              <tr><td colspan="5" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
            </ng-template>
          </p-table>
        </div>
      } @else if (!loadingWarehouse()) {
        <div class="empty-prompt">
          <i class="pi pi-building"></i>
          <p>{{ 'INVENTORY.CLICK_LOAD' | translate }}</p>
        </div>
      }
    </p-tabpanel>

    <!-- ═══════ TAB 2: Slow Moving ═══════ -->
    <p-tabpanel [value]="2">
      <div class="filter-bar">
        <div class="filter-field">
          <label>{{ 'INVENTORY.DAYS_THRESHOLD' | translate }}</label>
          <p-inputnumber [(ngModel)]="smDays" [min]="1" [max]="365" [showButtons]="true" />
        </div>
        <p-button icon="pi pi-search" [label]="'COMMON.LOAD' | translate" (onClick)="loadSlowMoving()" [loading]="loadingSlow()" />
      </div>

      @if (slowMovingData(); as data) {
        <!-- Summary Cards -->
        <div class="stats-grid">
          <div class="stat-card stat-amber">
            <div class="stat-icon-wrap"><i class="pi pi-clock"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.days_threshold }}</span>
              <span class="stat-label">{{ 'INVENTORY.DAYS_THRESHOLD' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-rose">
            <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_items }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_ITEMS' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-purple">
            <div class="stat-icon-wrap"><i class="pi pi-hashtag"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_quantity | number:'1.0-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_QUANTITY' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-blue">
            <div class="stat-icon-wrap"><i class="pi pi-dollar"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_value | number:'1.2-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
        </div>

        <!-- Slow Moving Table -->
        <div class="section-card">
          <div class="section-header">
            <h3><i class="pi pi-clock"></i> {{ 'INVENTORY.SLOW_MOVING' | translate }}</h3>
          </div>
          @if (data.items.length > 0) {
            <p-table [value]="data.items" [paginator]="data.items.length > 25" [rows]="25"
              styleClass="p-datatable-sm p-datatable-gridlines">
              <ng-template #header>
                <tr>
                  <th>{{ 'COMMON.CODE' | translate }}</th>
                  <th>{{ 'COMMON.NAME' | translate }}</th>
                  <th>{{ 'INVENTORY.LAST_MOVEMENT' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.DAYS_SINCE' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.QUANTITY' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-row>
                <tr>
                  <td class="mono">{{ row.product_code }}</td>
                  <td>{{ row.product_name }}</td>
                  <td>{{ row.last_movement_date || '—' }}</td>
                  <td class="text-end">{{ row.days_since_movement }}</td>
                  <td class="text-end">{{ row.quantity | number:'1.0-2' }}</td>
                  <td class="text-end mono">{{ row.total_value | number:'1.2-2' }}</td>
                </tr>
              </ng-template>
            </p-table>
          } @else {
            <div class="empty-state-inline">
              <i class="pi pi-check-circle"></i>
              <p>{{ 'INVENTORY.NO_SLOW_MOVING' | translate }}</p>
            </div>
          }
        </div>
      } @else if (!loadingSlow()) {
        <div class="empty-prompt">
          <i class="pi pi-clock"></i>
          <p>{{ 'INVENTORY.CLICK_LOAD' | translate }}</p>
        </div>
      }
    </p-tabpanel>

    <!-- ═══════ TAB 3: Expiry Tracking ═══════ -->
    <p-tabpanel [value]="3">
      <div class="filter-bar">
        <div class="filter-field">
          <label>{{ 'COMMON.DATE' | translate }}</label>
          <p-datepicker [(ngModel)]="expiryDate" dateFormat="yy-mm-dd" [showIcon]="true" />
        </div>
        <p-button icon="pi pi-search" [label]="'COMMON.LOAD' | translate" (onClick)="loadExpiryReport()" [loading]="loadingExpiry()" />
      </div>

      @if (expiryData(); as data) {
        <!-- Summary Cards -->
        <div class="stats-grid">
          <div class="stat-card stat-blue">
            <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_items }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_ITEMS' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-rose">
            <div class="stat-icon-wrap"><i class="pi pi-times-circle"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.already_expired }}</span>
              <span class="stat-label">{{ 'INVENTORY.ALREADY_EXPIRED' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-amber">
            <div class="stat-icon-wrap"><i class="pi pi-exclamation-triangle"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.expiring_soon }}</span>
              <span class="stat-label">{{ 'INVENTORY.EXPIRING_SOON' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-purple">
            <div class="stat-icon-wrap"><i class="pi pi-dollar"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_value_at_risk | number:'1.2-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.VALUE_AT_RISK' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
        </div>

        <!-- Expiry Table -->
        <div class="section-card">
          <div class="section-header">
            <h3><i class="pi pi-calendar-times"></i> {{ 'INVENTORY.EXPIRY_TRACKING' | translate }}</h3>
          </div>
          @if (data.items.length > 0) {
            <p-table [value]="data.items" [paginator]="data.items.length > 25" [rows]="25"
              styleClass="p-datatable-sm p-datatable-gridlines">
              <ng-template #header>
                <tr>
                  <th>{{ 'COMMON.CODE' | translate }}</th>
                  <th>{{ 'COMMON.NAME' | translate }}</th>
                  <th>{{ 'INVENTORY.BATCH_NUMBER' | translate }}</th>
                  <th>{{ 'INVENTORY.EXPIRY_DATE' | translate }}</th>
                  <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.QUANTITY' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</th>
                  <th>{{ 'COMMON.STATUS' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-row>
                <tr>
                  <td class="mono">{{ row.product_code }}</td>
                  <td>{{ row.product_name }}</td>
                  <td>{{ row.batch_number }}</td>
                  <td>{{ row.expiry_date }}</td>
                  <td>{{ row.warehouse_name }}</td>
                  <td class="text-end">{{ row.quantity | number:'1.0-2' }}</td>
                  <td class="text-end mono">{{ row.total_value | number:'1.2-2' }}</td>
                  <td>
                    <p-tag [value]="row.status" [severity]="row.days_until_expiry <= 0 ? 'danger' : 'warn'" />
                  </td>
                </tr>
              </ng-template>
            </p-table>
          } @else {
            <div class="empty-state-inline">
              <i class="pi pi-check-circle"></i>
              <p>{{ 'INVENTORY.NO_EXPIRY_ITEMS' | translate }}</p>
            </div>
          }
        </div>
      } @else if (!loadingExpiry()) {
        <div class="empty-prompt">
          <i class="pi pi-calendar-times"></i>
          <p>{{ 'INVENTORY.CLICK_LOAD' | translate }}</p>
        </div>
      }
    </p-tabpanel>

    <!-- ═══════ TAB 4: Inventory Valuation ═══════ -->
    <p-tabpanel [value]="4">
      <div class="filter-bar">
        <div class="filter-field">
          <label>{{ 'COMMON.DATE' | translate }}</label>
          <p-datepicker [(ngModel)]="valDate" dateFormat="yy-mm-dd" [showIcon]="true" />
        </div>
        <p-button icon="pi pi-search" [label]="'COMMON.LOAD' | translate" (onClick)="loadValuation()" [loading]="loadingValuation()" />
      </div>

      @if (valuationData(); as data) {
        <!-- Summary Cards -->
        <div class="stats-grid">
          <div class="stat-card stat-blue">
            <div class="stat-icon-wrap"><i class="pi pi-th-large"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_items }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_ITEMS' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-green">
            <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_quantity | number:'1.0-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_QUANTITY' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
          <div class="stat-card stat-amber">
            <div class="stat-icon-wrap"><i class="pi pi-dollar"></i></div>
            <div class="stat-info">
              <span class="stat-value">{{ data.summary.total_value | number:'1.2-2' }}</span>
              <span class="stat-label">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</span>
            </div>
            <div class="stat-decoration"></div>
          </div>
        </div>

        <!-- Charts Row -->
        <div class="charts-row">
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title-wrap">
                <div class="chart-icon" style="background:rgba(99,102,241,0.1)">
                  <i class="pi pi-chart-pie" style="color:#6366f1"></i>
                </div>
                <div><h3>{{ 'INVENTORY.VALUE_BY_PRODUCT' | translate }}</h3></div>
              </div>
            </div>
            <div class="chart-body doughnut-chart">
              @if (valProductChartData()) {
                <p-chart type="doughnut" [data]="valProductChartData()" [options]="pieOptions" height="300px" width="300px" />
              } @else {
                <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
              }
            </div>
          </div>
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title-wrap">
                <div class="chart-icon" style="background:rgba(16,185,129,0.1)">
                  <i class="pi pi-chart-bar" style="color:#10b981"></i>
                </div>
                <div><h3>{{ 'INVENTORY.VALUE_BY_WAREHOUSE' | translate }}</h3></div>
              </div>
            </div>
            <div class="chart-body">
              @if (valWarehouseChartData()) {
                <p-chart type="bar" [data]="valWarehouseChartData()" [options]="barOptions" height="300px" />
              } @else {
                <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
              }
            </div>
          </div>
        </div>

        <!-- Grouped Valuation Table -->
        @for (group of valuationGrouped(); track group.product_code) {
          <div class="section-card valuation-group">
            <div class="section-header product-group-header">
              <h3>
                <i class="pi pi-box"></i>
                <span class="product-code-badge">{{ group.product_code }}</span>
                {{ group.product_name }}
              </h3>
              <div class="group-totals">
                <span class="group-total-item">
                  {{ 'INVENTORY.QUANTITY' | translate }}: <strong>{{ group.total_qty | number:'1.0-2' }}</strong>
                </span>
                <span class="group-total-item">
                  {{ 'INVENTORY.TOTAL_VALUE' | translate }}: <strong>{{ group.total_value | number:'1.2-2' }}</strong>
                </span>
              </div>
            </div>
            <p-table [value]="group.items" styleClass="p-datatable-sm p-datatable-gridlines">
              <ng-template #header>
                <tr>
                  <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
                  <th>{{ 'INVENTORY.VARIANT' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.QUANTITY' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.AVG_COST' | translate }}</th>
                  <th class="text-end">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-item>
                <tr>
                  <td>{{ item.warehouse_name }}</td>
                  <td>{{ item.product_variant_id ? ('Variant #' + item.product_variant_id) : '—' }}</td>
                  <td class="text-end">{{ item.quantity | number:'1.0-2' }}</td>
                  <td class="text-end mono">{{ item.average_cost | number:'1.2-2' }}</td>
                  <td class="text-end mono fw-bold">{{ item.total_value | number:'1.2-2' }}</td>
                </tr>
              </ng-template>
            </p-table>
          </div>
        }
      } @else if (!loadingValuation()) {
        <div class="empty-prompt">
          <i class="pi pi-dollar"></i>
          <p>{{ 'INVENTORY.CLICK_LOAD' | translate }}</p>
        </div>
      }
    </p-tabpanel>
  </p-tabs>
</div>
