126 lines
5.3 KiB
HTML
126 lines
5.3 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-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">{{ today_in }}</h2>
|
|
</div>
|
|
<div class="fs-1">
|
|
<i class="bi bi-box-arrow-in-down"></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">{{ today_out }}</h2>
|
|
</div>
|
|
<div class="fs-1">
|
|
<i class="bi bi-box-arrow-up"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<div class="card stat-card bg-info 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">{{ transactions|length }}</h2>
|
|
</div>
|
|
<div class="fs-1">
|
|
<i class="bi bi-arrow-left-right"></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>
|
|
<div class="btn-group">
|
|
<a href="{{ url_for('transaction.create_transaction', type='in') }}" class="btn btn-success">
|
|
<i class="bi bi-box-arrow-in-down"></i><span class="d-none d-sm-inline ms-1">入庫</span>
|
|
</a>
|
|
<a href="{{ url_for('transaction.create_transaction', type='out') }}" class="btn btn-warning">
|
|
<i class="bi bi-box-arrow-up"></i><span class="d-none d-sm-inline ms-1">出庫</span>
|
|
</a>
|
|
</div>
|
|
</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>商品資訊</th>
|
|
<th class="text-end">數量</th>
|
|
<th class="text-end d-none d-md-table-cell">單價</th>
|
|
<th class="text-end pe-3">總金額</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for transaction in transactions %}
|
|
<tr>
|
|
<td class="ps-3">
|
|
<div class="d-flex flex-column">
|
|
<span>{{ transaction.created_at.strftime('%Y-%m-%d') }}</span>
|
|
<small class="text-muted">{{ transaction.created_at.strftime('%H:%M') }}</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="d-flex flex-column">
|
|
<div class="d-flex align-items-center gap-2">
|
|
{% if transaction.type == 'in' %}
|
|
<span class="badge bg-success">入庫</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">出庫</span>
|
|
{% endif %}
|
|
<span>{{ transaction.product.name }}</span>
|
|
</div>
|
|
<small class="text-muted">{{ transaction.product.code }}</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-end">{{ transaction.quantity }}</td>
|
|
<td class="text-end d-none d-md-table-cell">
|
|
${{ "%.2f"|format(transaction.product.price) }}
|
|
</td>
|
|
<td class="text-end pe-3">
|
|
${{ "%.2f"|format(transaction.transaction_value) }}
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="5" class="text-center py-4">
|
|
<div class="text-muted">
|
|
<i class="bi bi-clock-history fs-2"></i>
|
|
<p class="mt-2">尚無交易紀錄</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|