wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 新增廠商缺貨清單 V2

Browse Source
This commit is contained in:
OoO
2026-05-01 00:12:06 +08:00
parent c9247f7a79
commit 99d5bc8e81
7 changed files with 615 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CONSTITUTION.md
View File

@@ -2,7 +2,7 @@
> 本文件定義專案開發的核心準則與不可違反的規範
> **建立日期**: 2026-01-12
> **當前版本**: V10.37 (Vendor stockout v2 feature flag)
> **當前版本**: V10.38 (Vendor stockout list v2 feature flag)
> **最後更新**: 2026-05-01
---

4
app.py
View File

@@ -95,8 +95,8 @@ except Exception as e:
sys_log.error(f"無法檢測磁碟空間: {e}")
# 🚩 系統版本定義 (備份與顯示用)
# 🚩 2026-05-01 V10.37: Vendor stockout v2 feature flag
SYSTEM_VERSION = "V10.37"
# 🚩 2026-05-01 V10.38: Vendor stockout list v2 feature flag
SYSTEM_VERSION = "V10.38"
# ==========================================
# 🔒 SQL Injection 防護函數

102
routes/vendor_routes.py
View File

@@ -98,6 +98,102 @@ def _get_vendor_dashboard_stats():
session.close()
def _apply_stockout_filters(query, batch_id=None, vendor_keyword=None):
if batch_id:
query = query.filter(VendorStockout.batch_id == batch_id)
if vendor_keyword:
query = query.filter(or_(
VendorStockout.vendor_code.like(f'%{vendor_keyword}%'),
VendorStockout.vendor_name.like(f'%{vendor_keyword}%'),
VendorStockout.product_code.like(f'%{vendor_keyword}%'),
VendorStockout.product_name.like(f'%{vendor_keyword}%')
))
return query
def _get_vendor_stockout_list_context():
"""缺貨清單 V2：以資料庫真實資料組裝篩選、分頁與列表。"""
session = vendor_db.get_session()
try:
page = max(request.args.get('page', 1, type=int), 1)
page_size = min(max(request.args.get('page_size', 30, type=int), 10), 100)
status_filter = (request.args.get('status') or 'all').strip()
batch_filter = (request.args.get('batch') or '').strip()
vendor_keyword = (request.args.get('q') or '').strip()
sort_by = (request.args.get('sort') or 'created_desc').strip()
filtered_base = _apply_stockout_filters(
session.query(VendorStockout),
batch_filter,
vendor_keyword
)
query = filtered_base
if status_filter == 'pending':
query = query.filter(or_(
VendorStockout.status == 'pending',
VendorStockout.status.is_(None)
))
elif status_filter in ['sent', 'failed']:
query = query.filter(VendorStockout.status == status_filter)
elif status_filter == 'duplicate':
query = query.filter(VendorStockout.is_duplicate.is_(True))
else:
status_filter = 'all'
if sort_by == 'created_asc':
query = query.order_by(VendorStockout.created_at.asc())
elif sort_by == 'vendor_asc':
query = query.order_by(VendorStockout.vendor_code.asc(), VendorStockout.created_at.desc())
elif sort_by == 'stockout_days_desc':
query = query.order_by(VendorStockout.stockout_days.desc().nullslast(), VendorStockout.created_at.desc())
else:
sort_by = 'created_desc'
query = query.order_by(VendorStockout.created_at.desc())
total_items = query.count()
total_pages = max((total_items + page_size - 1) // page_size, 1)
if page > total_pages:
page = total_pages
records = query.offset((page - 1) * page_size).limit(page_size).all()
latest_batch_time = func.max(VendorStockout.created_at).label('latest_date')
batches = session.query(
VendorStockout.batch_id,
func.count(VendorStockout.id).label('record_count'),
latest_batch_time
).group_by(VendorStockout.batch_id).order_by(desc(latest_batch_time)).limit(30).all()
return {
'records': records,
'batches': batches,
'total_items': total_items,
'total_pages': total_pages,
'current_page': page,
'page_size': page_size,
'current_status': status_filter,
'current_batch': batch_filter,
'search_query': vendor_keyword,
'current_sort': sort_by,
'stats': {
'total': filtered_base.count(),
'pending': filtered_base.filter(or_(
VendorStockout.status == 'pending',
VendorStockout.status.is_(None)
)).count(),
'sent': filtered_base.filter(VendorStockout.status == 'sent').count(),
'failed': filtered_base.filter(VendorStockout.status == 'failed').count(),
'duplicate': filtered_base.filter(VendorStockout.is_duplicate.is_(True)).count(),
'vendor_count': filtered_base.with_entities(VendorStockout.vendor_code).distinct().count(),
}
}
finally:
session.close()
@vendor_bp.route('/')
def index():
"""廠商缺貨系統主頁"""
@@ -122,6 +218,12 @@ def import_page():
def list_page():
"""缺貨清單頁面"""
sys_log.info("[VendorStockout] 進入缺貨清單頁面")
if request.args.get('ui') == 'v2':
return render_template(
'vendor_stockout_list_v2.html',
active_page='vendor_stockout',
**_get_vendor_stockout_list_context()
)
return render_template('vendor_stockout/list.html')

4
templates/vendor_stockout_index_v2.html
View File

@@ -345,7 +345,7 @@
<i class="fas fa-file-import"></i>
匯入 Excel
</a>
<a class="vendor-action" href="{{ url_for('vendor.list_page') }}">
<a class="vendor-action" href="{{ url_for('vendor.list_page', ui='v2') }}">
<i class="fas fa-list-check"></i>
查看清單
</a>
@@ -415,7 +415,7 @@
<span class="vendor-flow-meta momo-mono">建立缺貨批次</span>
</span>
</a>
<a class="vendor-flow-card" href="{{ url_for('vendor.list_page') }}">
<a class="vendor-flow-card" href="{{ url_for('vendor.list_page', ui='v2') }}">
<span class="vendor-flow-icon"><i class="fas fa-table-list"></i></span>
<span>
<span class="vendor-flow-title">缺貨清單</span>

484
templates/vendor_stockout_list_v2.html Normal file
View File

@@ -0,0 +1,484 @@
{% 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', ui='v2') }}">
<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', ui='v2', 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', ui='v2', 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', ui='v2', 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', ui='v2', 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', ui='v2', 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', ui='v2', 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', ui='v2', 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 %}

27
tests/test_frontend_v2_assets.py
View File

@@ -67,14 +67,35 @@ def test_edm_dashboard_v2_is_feature_flagged_and_uses_real_campaign_data():
def test_vendor_stockout_v2_is_feature_flagged_and_uses_real_vendor_data():
route_source = (ROOT / "routes/vendor_routes.py").read_text(encoding="utf-8")
template = (ROOT / "web/templates/vendor_stockout_index_v2.html").read_text(encoding="utf-8")
template = (ROOT / "templates/vendor_stockout_index_v2.html").read_text(encoding="utf-8")
assert "request.args.get('ui') == 'v2'" in route_source
assert not (ROOT / "web/templates/vendor_stockout_index_v2.html").exists()
assert "vendor_stockout_index_v2.html" in route_source
assert "_get_vendor_dashboard_stats()" in route_source
assert "session.query(VendorStockout).count()" in route_source
assert "EmailSendLog" in route_source
assert "stats.get('pending_stockouts'" in template
assert "stats.get('email_success_rate'" in template
assert "stats.pending_stockouts" in template
assert "stats.email_success_rate" in template
assert "mock" not in template.lower()
assert "假" not in template
def test_vendor_stockout_list_v2_is_feature_flagged_and_uses_real_stockout_rows():
route_source = (ROOT / "routes/vendor_routes.py").read_text(encoding="utf-8")
template = (ROOT / "templates/vendor_stockout_list_v2.html").read_text(encoding="utf-8")
assert "vendor_stockout_list_v2.html" in route_source
assert "_get_vendor_stockout_list_context()" in route_source
assert "_apply_stockout_filters(" in route_source
assert "session.query(VendorStockout)" in route_source
assert "VendorStockout.status == 'pending'" in route_source
assert "VendorStockout.batch_id == batch_id" in route_source
assert "{% for record in records %}" in template
assert "{% for batch in batches %}" in template
assert "stats.pending" in template
assert "record.product_code" in template
assert "record.product_name" in template
assert "record.vendor_name" in template
assert "mock" not in template.lower()
assert "假" not in template

246
web/templates/vendor_stockout_index_v2.html
View File

@@ -1,246 +0,0 @@
{% extends 'ewoooc_base.html' %}
{% block title %}EwoooC 廠商缺貨{% endblock %}
{% block extra_css %}
<style>
.vendor-v2-stack { display: grid; gap: 24px; }
.vendor-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); gap: 12px; }
.vendor-hero-main, .vendor-panel, .vendor-action-card {
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border-light);
border-radius: 8px;
}
.vendor-hero-main {
position: relative;
min-height: 260px;
overflow: hidden;
padding: 28px;
color: var(--momo-text-inverse);
background: var(--momo-ink-strong);
}
.vendor-hero-main::before {
position: absolute;
inset: 0;
content: "";
background-image: radial-gradient(circle, rgba(201, 100, 66, 0.14) 1px, transparent 1px);
background-size: 9px 9px;
}
.vendor-hero-main > * { position: relative; }
.vendor-eyebrow, .vendor-section-label { display: flex; align-items: baseline; gap: 10px; }
.vendor-eyebrow { margin-bottom: 20px; }
.vendor-eyebrow span:first-child {
padding: 3px 10px;
border: 1px solid rgba(250, 247, 240, 0.24);
border-radius: var(--momo-radius-pill);
color: rgba(250, 247, 240, 0.76);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
}
.vendor-title {
max-width: 720px;
margin: 0 0 18px;
color: var(--momo-text-inverse);
font-size: clamp(34px, 5vw, 58px);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.95;
}
.vendor-subtitle {
max-width: 680px;
margin: 0;
color: rgba(250, 247, 240, 0.68);
font-size: 14px;
line-height: 1.7;
}
.vendor-hero-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.vendor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
padding: 8px 14px;
color: var(--momo-text-primary);
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border);
border-radius: 4px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: var(--momo-transition-base);
}
.vendor-button:hover { color: var(--momo-text-primary); background: var(--momo-bg-paper); }
.vendor-button.is-inverse { color: var(--momo-ink); background: var(--momo-text-inverse); border-color: var(--momo-text-inverse); }
.vendor-button.is-ghost { color: var(--momo-text-inverse); background: rgba(250, 247, 240, 0.10); border-color: rgba(250, 247, 240, 0.24); }
.vendor-kpi-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.vendor-kpi { min-height: 130px; padding: 20px; border-right: 1px solid var(--momo-border-light); border-bottom: 1px solid var(--momo-border-light); }
.vendor-kpi:nth-child(2n) { border-right: 0; }
.vendor-kpi:nth-last-child(-n + 2) { border-bottom: 0; }
.vendor-kpi-label {
margin-bottom: 8px;
color: var(--momo-text-tertiary);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.vendor-kpi-value { margin-bottom: 8px; color: var(--momo-text-primary); font-size: 36px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.vendor-kpi-sub, .vendor-action-desc, .vendor-panel-meta { color: var(--momo-text-secondary); font-size: 12px; line-height: 1.6; }
.vendor-section-label { margin-bottom: 12px; }
.vendor-section-label .num { color: var(--momo-text-tertiary); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.vendor-section-label .title, .vendor-action-title, .vendor-panel-title { color: var(--momo-text-primary); font-size: 15px; font-weight: 800; }
.vendor-section-label .title { font-size: 13px; }
.vendor-action-grid, .vendor-signal-grid { display: grid; gap: 12px; }
.vendor-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vendor-signal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vendor-action-card, .vendor-panel { padding: 18px; }
.vendor-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 16px;
color: var(--momo-text-inverse);
background: var(--momo-ink);
border-radius: 6px;
}
.vendor-action-title, .vendor-panel-title { margin-bottom: 8px; }
.vendor-action-card .vendor-button { width: 100%; margin-top: 16px; }
.vendor-status-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--momo-border-light); }
.vendor-status-row:last-child { border-bottom: 0; }
.vendor-status-label { color: var(--momo-text-secondary); font-size: 12px; }
.vendor-status-value { color: var(--momo-text-primary); font-size: 12px; font-weight: 800; text-align: right; }
@media (max-width: 1100px) {
.vendor-hero, .vendor-signal-grid { grid-template-columns: 1fr; }
.vendor-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.vendor-action-grid, .vendor-kpi-panel { grid-template-columns: 1fr; }
.vendor-kpi, .vendor-kpi:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--momo-border-light); }
.vendor-kpi:last-child { border-bottom: 0; }
}
</style>
{% endblock %}
{% block ewooo_content %}
{% set stats = stats or {} %}
<div class="vendor-v2-stack">
<section class="vendor-hero">
<div class="vendor-hero-main">
<div class="vendor-eyebrow momo-mono">
<span>OPERATIONS</span>
<span>Vendor Stockout Control</span>
</div>
<h1 class="vendor-title">廠商缺貨通知自動化系統</h1>
<p class="vendor-subtitle">
串接正式缺貨匯入、廠商郵件與發送紀錄資料，集中追蹤待處理缺貨、通知成功率、廠商聯絡覆蓋與最近批次狀態。
</p>
<div class="vendor-hero-actions">
<a class="vendor-button is-inverse" href="/vendor-stockout/list"><i class="fas fa-list-ul"></i> 查看缺貨清單</a>
<a class="vendor-button is-ghost" href="/vendor-stockout/vendor-management"><i class="fas fa-building"></i> 管理廠商</a>
</div>
</div>
<aside class="vendor-kpi-panel vendor-panel">
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">待處理缺貨</div>
<div class="vendor-kpi-value momo-mono">{{ stats.get('pending_stockouts', 0) | number_format }}</div>
<div class="vendor-kpi-sub momo-mono">總缺貨 {{ stats.get('total_stockouts', 0) | number_format }}</div>
</div>
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">已發送</div>
<div class="vendor-kpi-value momo-mono" style="color:var(--momo-success);">{{ stats.get('sent_stockouts', 0) | number_format }}</div>
<div class="vendor-kpi-sub momo-mono">失敗 {{ stats.get('failed_stockouts', 0) | number_format }}</div>
</div>
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">活躍廠商</div>
<div class="vendor-kpi-value momo-mono">{{ stats.get('active_vendors', 0) | number_format }}</div>
<div class="vendor-kpi-sub momo-mono">停用 {{ stats.get('inactive_vendors', 0) | number_format }}</div>
</div>
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">郵件成功率</div>
<div class="vendor-kpi-value momo-mono" style="color:var(--momo-accent);">{{ stats.get('email_success_rate', 0) }}%</div>
<div class="vendor-kpi-sub momo-mono">寄送紀錄 {{ stats.get('email_total', 0) | number_format }}</div>
</div>
</aside>
</section>
<section>
<div class="vendor-section-label">
<span class="num momo-mono">02</span>
<span class="title">功能入口</span>
</div>
<div class="vendor-action-grid">
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-file-import"></i></div>
<div class="vendor-action-title">匯入缺貨資料</div>
<div class="vendor-action-desc">使用正式 Excel 匯入流程，建立批次缺貨紀錄並標記重複資料。</div>
<a class="vendor-button" href="/vendor-stockout/import">前往匯入</a>
</article>
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-table-list"></i></div>
<div class="vendor-action-title">缺貨清單</div>
<div class="vendor-action-desc">篩選、編輯、批次發信與追蹤缺貨商品處理狀態。</div>
<a class="vendor-button" href="/vendor-stockout/list">查看清單</a>
</article>
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-address-book"></i></div>
<div class="vendor-action-title">廠商管理</div>
<div class="vendor-action-desc">維護廠商主檔與多組收件、CC、BCC 郵件地址。</div>
<a class="vendor-button" href="/vendor-stockout/vendor-management">管理廠商</a>
</article>
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-clock-rotate-left"></i></div>
<div class="vendor-action-title">發送歷史</div>
<div class="vendor-action-desc">檢查成功、失敗、待發送郵件紀錄與錯誤訊息。</div>
<a class="vendor-button" href="/vendor-stockout/history">查看歷史</a>
</article>
</div>
</section>
<section>
<div class="vendor-section-label">
<span class="num momo-mono">03</span>
<span class="title">真實資料訊號</span>
</div>
<div class="vendor-signal-grid">
<article class="vendor-panel">
<div class="vendor-panel-title">最近匯入</div>
<div class="vendor-panel-meta">
{% if stats.get('latest_import_time') %}
<div class="vendor-status-row"><span class="vendor-status-label">時間</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_import_time').strftime('%Y-%m-%d %H:%M') }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">廠商</span><span class="vendor-status-value">{{ stats.get('latest_import_vendor') or '未提供' }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">商品</span><span class="vendor-status-value">{{ stats.get('latest_import_product') or '未提供' }}</span></div>
{% else %}
尚未讀到缺貨匯入紀錄。
{% endif %}
</div>
</article>
<article class="vendor-panel">
<div class="vendor-panel-title">最近批次</div>
<div class="vendor-panel-meta">
{% if stats.get('latest_batch_id') %}
<div class="vendor-status-row"><span class="vendor-status-label">批次</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_batch_id') }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">筆數</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_batch_count', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">時間</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_batch_time').strftime('%Y-%m-%d %H:%M') if stats.get('latest_batch_time') else '--' }}</span></div>
{% else %}
尚未讀到批次資訊。
{% endif %}
</div>
</article>
<article class="vendor-panel">
<div class="vendor-panel-title">郵件狀態</div>
<div class="vendor-panel-meta">
<div class="vendor-status-row"><span class="vendor-status-label">成功</span><span class="vendor-status-value momo-mono">{{ stats.get('email_success', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">失敗</span><span class="vendor-status-value momo-mono">{{ stats.get('email_failed', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">待發送</span><span class="vendor-status-value momo-mono">{{ stats.get('email_pending', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">活躍 Email</span><span class="vendor-status-value momo-mono">{{ stats.get('active_emails', 0) | number_format }}</span></div>
</div>
</article>
</div>
</section>
</div>
{% endblock %}