485 lines
17 KiB
HTML
485 lines
17 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
|
|
|
{% block title %}EwoooC 缺貨清單{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.stockout-list-stack {
|
|
display: grid;
|
|
gap: 22px;
|
|
}
|
|
|
|
.stockout-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
padding: 22px;
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.stockout-eyebrow,
|
|
.stockout-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.stockout-eyebrow {
|
|
width: fit-content;
|
|
margin-bottom: 10px;
|
|
padding: 4px 10px;
|
|
color: var(--momo-accent-strong);
|
|
background: var(--momo-accent-soft);
|
|
border-radius: var(--momo-radius-pill);
|
|
}
|
|
|
|
.stockout-title {
|
|
margin: 0;
|
|
color: var(--momo-text-primary);
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.stockout-subtitle {
|
|
margin: 8px 0 0;
|
|
color: var(--momo-text-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.stockout-actions,
|
|
.stockout-status-tabs,
|
|
.stockout-pagination {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stockout-action,
|
|
.stockout-tab,
|
|
.stockout-page-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
min-height: 34px;
|
|
padding: 8px 13px;
|
|
color: var(--momo-text-primary);
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
transition: var(--momo-transition-base);
|
|
}
|
|
|
|
.stockout-action:hover,
|
|
.stockout-tab:hover,
|
|
.stockout-page-link:hover {
|
|
color: var(--momo-text-primary);
|
|
border-color: var(--momo-border-strong);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.stockout-action.is-primary,
|
|
.stockout-tab.is-active {
|
|
color: var(--momo-text-inverse);
|
|
background: var(--momo-ink);
|
|
border-color: var(--momo-ink);
|
|
}
|
|
|
|
.stockout-kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.stockout-kpi,
|
|
.stockout-filter-card,
|
|
.stockout-table-card {
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.stockout-kpi {
|
|
padding: 16px;
|
|
}
|
|
|
|
.stockout-kpi-label {
|
|
color: var(--momo-text-secondary);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.stockout-kpi-value {
|
|
margin-top: 8px;
|
|
color: var(--momo-text-primary);
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stockout-kpi-value.is-danger {
|
|
color: var(--momo-danger);
|
|
}
|
|
|
|
.stockout-kpi-value.is-success {
|
|
color: var(--momo-success);
|
|
}
|
|
|
|
.stockout-kpi-sub {
|
|
margin-top: 8px;
|
|
color: var(--momo-text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.stockout-filter-card {
|
|
padding: 16px;
|
|
}
|
|
|
|
.stockout-filter-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.9fr) minmax(160px, 0.8fr) auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.stockout-input,
|
|
.stockout-select {
|
|
width: 100%;
|
|
min-height: 38px;
|
|
padding: 8px 11px;
|
|
color: var(--momo-text-primary);
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
outline: none;
|
|
}
|
|
|
|
.stockout-input:focus,
|
|
.stockout-select:focus {
|
|
border-color: var(--momo-accent);
|
|
box-shadow: 0 0 0 3px rgba(198, 111, 58, 0.12);
|
|
}
|
|
|
|
.stockout-table-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stockout-table-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
}
|
|
|
|
.stockout-table-title {
|
|
color: var(--momo-text-primary);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.stockout-table-meta {
|
|
color: var(--momo-text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.stockout-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.stockout-table {
|
|
width: 100%;
|
|
min-width: 1120px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.stockout-table th {
|
|
padding: 11px 14px;
|
|
color: var(--momo-text-secondary);
|
|
background: var(--momo-bg-paper);
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stockout-table td {
|
|
padding: 13px 14px;
|
|
color: var(--momo-text-primary);
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
font-size: 13px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.stockout-table tbody tr:hover {
|
|
background: var(--momo-bg-paper);
|
|
}
|
|
|
|
.stockout-product-name,
|
|
.stockout-vendor-name {
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
font-weight: 800;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stockout-product-code,
|
|
.stockout-vendor-code {
|
|
margin-top: 3px;
|
|
color: var(--momo-text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.stockout-chip {
|
|
min-width: 74px;
|
|
justify-content: center;
|
|
padding: 4px 8px;
|
|
color: var(--momo-text-secondary);
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-pill);
|
|
}
|
|
|
|
.stockout-chip.is-pending {
|
|
color: var(--momo-danger);
|
|
background: rgba(214, 83, 68, 0.1);
|
|
border-color: rgba(214, 83, 68, 0.2);
|
|
}
|
|
|
|
.stockout-chip.is-sent {
|
|
color: var(--momo-success);
|
|
background: rgba(67, 132, 89, 0.1);
|
|
border-color: rgba(67, 132, 89, 0.2);
|
|
}
|
|
|
|
.stockout-chip.is-failed {
|
|
color: var(--momo-danger);
|
|
background: rgba(214, 83, 68, 0.1);
|
|
border-color: rgba(214, 83, 68, 0.2);
|
|
}
|
|
|
|
.stockout-empty {
|
|
padding: 34px;
|
|
color: var(--momo-text-secondary);
|
|
background: var(--momo-bg-paper);
|
|
border-top: 1px solid var(--momo-border-light);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stockout-pagination {
|
|
justify-content: flex-end;
|
|
padding: 14px 18px;
|
|
background: var(--momo-bg-paper);
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.stockout-kpi-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.stockout-filter-form {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.stockout-header,
|
|
.stockout-table-head {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.stockout-kpi-grid,
|
|
.stockout-filter-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stockout-title {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block ewooo_content %}
|
|
{% set status_labels = {'pending': '待發送', 'sent': '已發送', 'failed': '失敗'} %}
|
|
<div class="stockout-list-stack">
|
|
<section class="stockout-header">
|
|
<div>
|
|
<div class="stockout-eyebrow momo-mono">
|
|
<i class="fas fa-table-list"></i>
|
|
STOCKOUT LIST
|
|
</div>
|
|
<h1 class="stockout-title">缺貨清單</h1>
|
|
<p class="stockout-subtitle">
|
|
依現有缺貨匯入資料呈現，可用批次、廠商、商品與發送狀態篩選；所有數字皆來自 vendor_stockout。
|
|
</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>
|
|
|
|
<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">
|
|
<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>
|
|
<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) }}">全部</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) }}">待發送</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) }}">已發送</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) }}">失敗</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) }}">重複</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' %}
|
|
<tr>
|
|
<td>
|
|
<span class="stockout-chip is-{{ record_status }} 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>
|
|
<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>
|
|
<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">{{ record.batch_id }}</td>
|
|
<td class="momo-mono">{{ record.current_stock if record.current_stock is not none else '--' }}</td>
|
|
<td class="momo-mono">{{ record.stockout_date.strftime('%Y-%m-%d') if record.stockout_date else '--' }}</td>
|
|
<td class="momo-mono">{{ record.stockout_days if record.stockout_days is not none else '--' }}</td>
|
|
<td class="momo-mono">
|
|
{% if record.monthly_sales_amount is not none %}
|
|
${{ record.monthly_sales_amount | int | number_format }}
|
|
{% else %}
|
|
--
|
|
{% endif %}
|
|
</td>
|
|
<td class="momo-mono">{{ 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 %}
|