189 lines
10 KiB
HTML
189 lines
10 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
|
|
|
{% block title %}EwoooC 缺貨清單{% endblock %}
|
|
{% block page_attrs %}data-page-group="monitor" data-page-id="vendor-list"{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-vendor-list.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block ewooo_content %}
|
|
{% set status_labels = {'pending': '待發送', 'sent': '已發送', 'failed': '失敗', 'duplicate': '重複', 'unknown': '未標記'} %}
|
|
<div class="stockout-list-stack">
|
|
|
|
<section class="stockout-header">
|
|
<div>
|
|
<div class="stockout-eyebrow momo-mono">
|
|
<i class="fas fa-table-list"></i>缺貨清單 · 即時狀態
|
|
</div>
|
|
<h1 class="stockout-title">缺貨清單</h1>
|
|
<p class="stockout-subtitle">
|
|
依正式缺貨資料呈現，可用批次、廠商、商品與發送狀態篩選；桌機保留密度，手機改為逐筆資料卡。
|
|
</p>
|
|
</div>
|
|
<div class="stockout-actions">
|
|
<a class="stockout-action" href="{{ url_for('vendor.index') }}">
|
|
<i class="fas fa-arrow-left"></i>回總覽
|
|
</a>
|
|
<a class="stockout-action is-primary" href="{{ url_for('vendor.import_page') }}">
|
|
<i class="fas fa-file-import"></i>匯入 Excel
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="momo-dot-divider is-tight is-whisper is-accent" aria-hidden="true"></div>
|
|
|
|
<section class="stockout-kpi-grid" aria-label="缺貨清單統計">
|
|
<div class="stockout-kpi">
|
|
<div class="stockout-kpi-label momo-mono">符合筆數</div>
|
|
<div class="stockout-kpi-value momo-mono">{{ stats.total | number_format }}</div>
|
|
<div class="stockout-kpi-sub momo-mono">目前清單 {{ total_items | number_format }} 筆</div>
|
|
</div>
|
|
<div class="stockout-kpi">
|
|
<div class="stockout-kpi-label momo-mono">待發送</div>
|
|
<div class="stockout-kpi-value momo-mono is-danger">{{ stats.pending | number_format }}</div>
|
|
<div class="stockout-kpi-sub momo-mono">含未標記狀態</div>
|
|
</div>
|
|
<div class="stockout-kpi">
|
|
<div class="stockout-kpi-label momo-mono">已發送</div>
|
|
<div class="stockout-kpi-value momo-mono is-success">{{ stats.sent | number_format }}</div>
|
|
<div class="stockout-kpi-sub momo-mono">通知完成記錄</div>
|
|
</div>
|
|
<div class="stockout-kpi">
|
|
<div class="stockout-kpi-label momo-mono">失敗</div>
|
|
<div class="stockout-kpi-value momo-mono is-danger">{{ stats.failed | number_format }}</div>
|
|
<div class="stockout-kpi-sub momo-mono">需人工檢查</div>
|
|
</div>
|
|
<div class="stockout-kpi">
|
|
<div class="stockout-kpi-label momo-mono">來源廠商</div>
|
|
<div class="stockout-kpi-value momo-mono">{{ stats.vendor_count | number_format }}</div>
|
|
<div class="stockout-kpi-sub momo-mono">重複 {{ stats.duplicate | number_format }} 筆</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stockout-filter-card" aria-label="缺貨清單篩選">
|
|
<form class="stockout-filter-form" method="GET" action="{{ url_for('vendor.list_page') }}">
|
|
<input type="hidden" name="ui" value="v2">
|
|
{% if current_status and current_status != 'all' %}
|
|
<input type="hidden" name="status" value="{{ current_status }}">
|
|
{% endif %}
|
|
<input class="stockout-input" type="search" name="q" value="{{ search_query }}" placeholder="搜尋廠商、商品名稱或編號">
|
|
<select class="stockout-select momo-mono" name="batch">
|
|
<option value="">全部批次</option>
|
|
{% for batch in batches %}
|
|
<option value="{{ batch.batch_id }}" {% if current_batch == batch.batch_id %}selected{% endif %}>
|
|
{{ batch.batch_id }} ({{ batch.record_count }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select class="stockout-select momo-mono" name="sort">
|
|
<option value="created_desc" {% if current_sort == 'created_desc' %}selected{% endif %}>最新建立</option>
|
|
<option value="created_asc" {% if current_sort == 'created_asc' %}selected{% endif %}>最舊建立</option>
|
|
<option value="vendor_asc" {% if current_sort == 'vendor_asc' %}selected{% endif %}>廠商代碼</option>
|
|
<option value="stockout_days_desc" {% if current_sort == 'stockout_days_desc' %}selected{% endif %}>缺貨天數</option>
|
|
</select>
|
|
<select class="stockout-select momo-mono" name="page_size" aria-label="每頁筆數">
|
|
{% for size in [30, 50, 100] %}
|
|
<option value="{{ size }}" {% if page_size == size %}selected{% endif %}>每頁 {{ size }} 筆</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button class="stockout-action is-primary" type="submit">
|
|
<i class="fas fa-filter"></i>套用
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<nav class="stockout-status-tabs" aria-label="缺貨狀態篩選">
|
|
<a class="stockout-tab {% if current_status == 'all' %}is-active{% endif %}"
|
|
href="{{ url_for('vendor.list_page', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">全部</a>
|
|
<a class="stockout-tab {% if current_status == 'pending' %}is-active{% endif %}"
|
|
href="{{ url_for('vendor.list_page', status='pending', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">待發送</a>
|
|
<a class="stockout-tab {% if current_status == 'sent' %}is-active{% endif %}"
|
|
href="{{ url_for('vendor.list_page', status='sent', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">已發送</a>
|
|
<a class="stockout-tab {% if current_status == 'failed' %}is-active{% endif %}"
|
|
href="{{ url_for('vendor.list_page', status='failed', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">失敗</a>
|
|
<a class="stockout-tab {% if current_status == 'duplicate' %}is-active{% endif %}"
|
|
href="{{ url_for('vendor.list_page', status='duplicate', q=search_query, batch=current_batch, sort=current_sort, page_size=page_size) }}">重複</a>
|
|
</nav>
|
|
|
|
<section class="stockout-table-card" aria-label="缺貨資料表">
|
|
<div class="stockout-table-head">
|
|
<div>
|
|
<span class="stockout-table-title">缺貨資料</span>
|
|
<span class="stockout-table-meta momo-mono">第 {{ current_page }} / {{ total_pages }} 頁</span>
|
|
</div>
|
|
<span class="stockout-table-meta momo-mono">{{ total_items | number_format }} 筆</span>
|
|
</div>
|
|
|
|
{% if records %}
|
|
<div class="stockout-table-wrap">
|
|
<table class="stockout-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="momo-mono">狀態</th>
|
|
<th class="momo-mono">商品</th>
|
|
<th class="momo-mono">廠商</th>
|
|
<th class="momo-mono">批次</th>
|
|
<th class="momo-mono">庫存</th>
|
|
<th class="momo-mono">缺貨日期</th>
|
|
<th class="momo-mono">缺貨天數</th>
|
|
<th class="momo-mono">30 日業績</th>
|
|
<th class="momo-mono">建立時間</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for record in records %}
|
|
{% set record_status = record.status or 'pending' %}
|
|
{% set status_class = record_status if record_status in status_labels else 'unknown' %}
|
|
<tr>
|
|
<td data-label="狀態">
|
|
<span class="stockout-chip is-{{ status_class }} momo-mono">
|
|
{{ status_labels.get(record_status, record_status) }}
|
|
</span>
|
|
{% if record.is_duplicate %}
|
|
<div class="stockout-product-code momo-mono">重複 {{ record.duplicate_count or 0 }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="商品">
|
|
<div class="stockout-product-name" title="{{ record.product_name }}">{{ record.product_name }}</div>
|
|
<div class="stockout-product-code momo-mono">{{ record.product_code }}</div>
|
|
</td>
|
|
<td data-label="廠商">
|
|
<div class="stockout-vendor-name" title="{{ record.vendor_name }}">{{ record.vendor_name }}</div>
|
|
<div class="stockout-vendor-code momo-mono">{{ record.vendor_code }}</div>
|
|
</td>
|
|
<td class="momo-mono" data-label="批次">{{ record.batch_id }}</td>
|
|
<td class="momo-mono" data-label="庫存">{{ record.current_stock if record.current_stock is not none else '—' }}</td>
|
|
<td class="momo-mono" data-label="缺貨日期">{{ record.stockout_date.strftime('%Y-%m-%d') if record.stockout_date else '—' }}</td>
|
|
<td class="momo-mono" data-label="缺貨天數">{{ record.stockout_days if record.stockout_days is not none else '—' }}</td>
|
|
<td class="momo-mono" data-label="30 日業績">
|
|
{% if record.monthly_sales_amount is not none %}
|
|
${{ record.monthly_sales_amount | int | number_format }}
|
|
{% else %}—{% endif %}
|
|
</td>
|
|
<td class="momo-mono" data-label="建立時間">{{ record.created_at.strftime('%Y-%m-%d %H:%M') if record.created_at else '—' }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="stockout-empty momo-mono">
|
|
目前沒有符合條件的缺貨資料；請調整篩選條件，或先匯入真實缺貨清單。
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="stockout-pagination">
|
|
{% if current_page > 1 %}
|
|
<a class="stockout-page-link" href="{{ url_for('vendor.list_page', page=current_page - 1, page_size=page_size, status=current_status, q=search_query, batch=current_batch, sort=current_sort) }}">上一頁</a>
|
|
{% endif %}
|
|
<span class="stockout-page-link momo-mono">{{ current_page }} / {{ total_pages }}</span>
|
|
{% if current_page < total_pages %}
|
|
<a class="stockout-page-link" href="{{ url_for('vendor.list_page', page=current_page + 1, page_size=page_size, status=current_status, q=search_query, batch=current_batch, sort=current_sort) }}">下一頁</a>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
{% endblock %}
|