38240-vm/core/templates/core/faktur_detail.html

{% extends 'base.html' %}
{% block content %}
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'input_faktur' %}" class="text-decoration-none">Riwayat Faktur</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detail Faktur {{ faktur.faktur_number }}</li>
        </ol>
    </nav>
    <div class="card glass-card border-0 shadow-sm p-4 mb-2">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 1px;">NOMOR FAKTUR</h6>
                <h2 class="fw-bold mb-0 text-primary">#{{ faktur.faktur_number }}</h2>
            </div>
            <div class="text-end">
                <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 1px;">SUPPLIER</h6>
                <div class="badge bg-primary-subtle text-primary rounded-pill px-4 py-2 fs-6 fw-bold">
                    <i data-lucide="truck" class="me-2 icon-sm"></i> {{ faktur.supplier.name|default:"Internal" }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card glass-card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-4 d-flex align-items-center">
                    <div class="bg-success-subtle text-success p-2 rounded-3 me-3">
                        <i data-lucide="package-plus"></i>
                    </div>
                    Input Barang
                </h5>
                <form method="post">
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">{{ field.label }}</label>
                            {{ field }}
                            {% if field.errors %}
                                <div class="text-danger small">{{ field.errors }}</div>
                            {% endif %}
                        </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary w-100 py-3 mt-3 shadow-sm d-flex align-items-center justify-content-center">
                        <i data-lucide="plus" class="me-2 icon-sm"></i> Tambah Barang
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card glass-card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="fw-bold mb-0 d-flex align-items-center">
                        <div class="bg-primary-subtle text-primary p-2 rounded-3 me-3">
                            <i data-lucide="list"></i>
                        </div>
                        Rincian Barang
                    </h5>
                    <span class="badge bg-light text-dark border px-3 py-2 rounded-pill">{{ items|length }} Item</span>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>Barang</th>
                                <th>No. Batch</th>
                                <th>Kadaluarsa</th>
                                <th class="text-end">Jumlah</th>
                                <th class="text-end">Harga Beli</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                            <tr>
                                <td>
                                    <div class="fw-bold text-dark">{{ item.medicine.name }}</div>
                                    <div class="small text-muted">{{ item.medicine.sku }}</div>
                                </td>
                                <td><code class="text-primary">{{ item.batch_number }}</code></td>
                                <td><span class="small text-muted">{{ item.expiry_date|date:"d M Y" }}</span></td>
                                <td class="text-end fw-bold text-dark">{{ item.quantity }} <span class="text-muted small">{{ item.medicine.unit }}</span></td>
                                <td class="text-end text-success fw-semibold">Rp {{ item.buying_price|floatformat:2 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i data-lucide="package-search" class="mb-2 d-block mx-auto opacity-20" style="width: 48px; height: 48px;"></i>
                                    <p class="mb-0">Belum ada barang diinput untuk faktur ini.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_head %}
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-selection--single {
        border: 1px solid #e2e8f0;
        height: 48px;
        border-radius: 0.75rem;
        padding-top: 10px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px;
    }
</style>
{% endblock %}
{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Pilih Barang",
            allowClear: true
        });
    });
</script>
{% endblock %}