146 lines
6.4 KiB
HTML
146 lines
6.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block page_title %}商品管理{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- 統計卡片 -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12 col-md-4">
|
|
<div class="card stat-card bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-subtitle mb-1">總商品數</h6>
|
|
<h2 class="mb-0">{{ products|length }}</h2>
|
|
</div>
|
|
<div class="fs-1">
|
|
<i class="bi bi-box"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<div class="card stat-card bg-warning text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-subtitle mb-1">低庫存商品</h6>
|
|
<h2 class="mb-0">{{ get_low_stock_count() }}</h2>
|
|
</div>
|
|
<div class="fs-1">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<div class="card stat-card bg-success text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-subtitle mb-1">庫存總值</h6>
|
|
<h2 class="mb-0">${{ "%.2f"|format(total_value) }}</h2>
|
|
</div>
|
|
<div class="fs-1">
|
|
<i class="bi bi-currency-dollar"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 商品列表 -->
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
|
|
<h5 class="card-title mb-0">商品列表</h5>
|
|
<a href="{{ url_for('product.create_product') }}" class="btn btn-primary">
|
|
<i class="bi bi-plus-lg"></i><span class="d-none d-sm-inline ms-1">新增商品</span>
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-3">商品資訊</th>
|
|
<th class="text-end">庫存</th>
|
|
<th class="text-end d-none d-md-table-cell">價格</th>
|
|
<th class="text-center d-none d-lg-table-cell">狀態</th>
|
|
<th class="text-end pe-3">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for product in products %}
|
|
<tr>
|
|
<td class="ps-3">
|
|
<div class="d-flex flex-column">
|
|
<span class="text-primary fw-medium">{{ product.name }}</span>
|
|
<small class="text-muted">{{ product.code }}</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-end">
|
|
<div class="d-flex flex-column">
|
|
<span>{{ product.quantity }}</span>
|
|
<small class="text-muted">最低: {{ product.min_quantity }}</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-end d-none d-md-table-cell">
|
|
${{ "%.2f"|format(product.price) }}
|
|
</td>
|
|
<td class="text-center d-none d-lg-table-cell">
|
|
{% if product.quantity <= product.min_quantity %}
|
|
<span class="badge bg-danger">庫存不足</span>
|
|
{% else %}
|
|
<span class="badge bg-success">正常</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end pe-3">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
|
操作
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="{{ url_for('transaction.create_transaction', product_id=product.id, type='in') }}">
|
|
<i class="bi bi-box-arrow-in-down text-success me-2"></i>入庫
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{{ url_for('transaction.create_transaction', product_id=product.id, type='out') }}">
|
|
<i class="bi bi-box-arrow-up text-warning me-2"></i>出庫
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="5" class="text-center py-4">
|
|
<div class="text-muted">
|
|
<i class="bi bi-inbox fs-2"></i>
|
|
<p class="mt-2">尚無商品資料</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 移動端庫存狀態標籤 (在商品列表下方) -->
|
|
{% for product in products %}
|
|
{% if product.quantity <= product.min_quantity %}
|
|
<div class="d-lg-none alert alert-danger alert-dismissible fade show mt-2" role="alert">
|
|
<strong>{{ product.name }}</strong> 庫存不足
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endblock %}
|