{% extends "layouts/kasir_base.html" %}


{% block title %}
Dashboard Kasir - Inventori ANN
{% endblock %}


{% block page_title %}
Dashboard Kasir
{% endblock %}


{% block content %}


<!-- ====================================================== -->
<!-- HEADER -->
<!-- ====================================================== -->

<div class="mb-4">

    <h3 class="fw-bold text-success mb-1">
        Dashboard Kasir
    </h3>

    <p class="text-muted mb-0">
        Ringkasan aktivitas penjualan dan stok barang.
    </p>

</div>



<!-- ====================================================== -->
<!-- CARDS -->
<!-- ====================================================== -->

<div class="row g-4 mb-4">


    <!-- TOTAL BARANG -->

    <div class="col-md-6 col-xl-3">

        <div class="card dashboard-card h-100">

            <div class="card-body">

                <div class="text-muted mb-2">
                    Total Jenis Barang
                </div>

                <div class="dashboard-number">

                    {{ total_barang }}

                </div>

                <small class="text-muted">
                    Barang pada Master Barang
                </small>

            </div>

        </div>

    </div>



    <!-- TRANSAKSI HARI INI -->

    <div class="col-md-6 col-xl-3">

        <div class="card dashboard-card h-100">

            <div class="card-body">

                <div class="text-muted mb-2">
                    Transaksi Hari Ini
                </div>

                <div class="dashboard-number">

                    {{ transaksi_hari_ini }}

                </div>

                <small class="text-muted">
                    Jumlah transaksi penjualan
                </small>

            </div>

        </div>

    </div>



    <!-- BARANG KELUAR -->

    <div class="col-md-6 col-xl-3">

        <div class="card dashboard-card h-100">

            <div class="card-body">

                <div class="text-muted mb-2">
                    Barang Keluar Hari Ini
                </div>

                <div class="dashboard-number">

                    {{ barang_keluar_hari_ini }}

                </div>

                <small class="text-muted">
                    Dalam total unit terkecil
                </small>

            </div>

        </div>

    </div>



    <!-- PENJUALAN -->

    <div class="col-md-6 col-xl-3">

        <div class="card dashboard-card h-100">

            <div class="card-body">

                <div class="text-muted mb-2">
                    Penjualan Hari Ini
                </div>

                <div class="dashboard-number fs-4">

                    Rp {{ "{:,.0f}".format(total_penjualan_hari_ini).replace(",", ".") }}

                </div>

                <small class="text-muted">
                    Total nilai transaksi
                </small>

            </div>

        </div>

    </div>


</div>



<!-- ====================================================== -->
<!-- MENU UTAMA -->
<!-- ====================================================== -->

<div class="row g-4">


    <div class="col-lg-7">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-body p-4">

                <h5 class="fw-bold mb-3">
                    Transaksi Penjualan
                </h5>

                <p class="text-muted">

                    Gunakan menu Barang Keluar untuk mencatat
                    transaksi penjualan pelanggan.

                    Setiap transaksi dapat berisi beberapa jenis
                    barang dan dapat menggunakan satuan besar
                    maupun satuan kecil.

                </p>


                <a
                    href="/kasir/barang-keluar"
                    class="btn btn-success"
                >
                    + Buat Transaksi Penjualan
                </a>

            </div>

        </div>

    </div>



    <div class="col-lg-5">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-body p-4">

                <h5 class="fw-bold mb-3">
                    Aturan Stok
                </h5>


                <div class="mb-2">

                    <strong class="text-success">
                        Satuan Besar
                    </strong>

                    <div class="text-muted">
                        Otomatis dikonversi menjadi satuan kecil.
                    </div>

                </div>


                <div class="mb-2">

                    <strong class="text-success">
                        Satuan Kecil
                    </strong>

                    <div class="text-muted">
                        Langsung mengurangi stok satuan terkecil.
                    </div>

                </div>


                <div>

                    <strong class="text-success">
                        Validasi Stok
                    </strong>

                    <div class="text-muted">
                        Transaksi tidak dapat disimpan apabila
                        jumlah penjualan melebihi stok.
                    </div>

                </div>

            </div>

        </div>

    </div>


</div>



<!-- ====================================================== -->
<!-- INFO ANN -->
<!-- ====================================================== -->

<div class="alert alert-success mt-4">

    <strong>
        Data transaksi Kasir menjadi sumber data ANN.
    </strong>

    Jumlah penjualan setiap barang akan disimpan dalam satuan
    terkecil sehingga transaksi satuan besar dan satuan kecil
    tetap dapat dianalisis secara konsisten.

</div>


{% endblock %}