@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $isTeknik = $is_teknik ?? false;
        $rowClass = 'row g-4';
        $cardCol = 'col-xl-3 col-sm-6';
        $cardBodyClass = 'card-body p-3';
    @endphp
    <div class="container-fluid px-4 py-4" style="margin-left: auto; margin-right: auto;">
        <div class="{{ $rowClass }}" style="display: flex; flex-wrap: wrap;">
            @if (!($is_teknik ?? false))
                <div class="{{ $cardCol }} mb-4">
                    <div class="card h-100" style="cursor: pointer;" onclick="showBarangBelumLengkapModal()">
                        <div class="{{ $cardBodyClass }}">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal1" class="text-sm mb-0 text-uppercase font-weight-bold">
                                            Barang Belum Lengkap
                                        </h4>

                                        <h5 class="font-weight-bolder" style="color:red;">
                                            {{ $barang_belum_lengkap }}
                                        </h5>

                                        <div class="d-flex gap-2 flex-wrap mt-2">
                                            <span class="badge bg-gradient-primary">
                                                Sparepart: {{ $barang_belum_lengkap_sparepart ?? 0 }}
                                            </span>

                                            <span class="badge bg-gradient-info">
                                                Penunjang: {{ $barang_belum_lengkap_penunjang ?? 0 }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-warning shadow-primary text-center rounded-circle">
                                        <i class="fa fa-magnifying-glass fa-beat text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="{{ $cardCol }} mb-4">
                <div class="card h-100" style="cursor: pointer;" onclick="showMinStokModal()">
                    <div class="{{ $cardBodyClass }}">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <h4 id="modal10" class="text-sm mb-0 text-uppercase font-weight-bold">
                                        Stok kurang dari minimal stok
                                    </h4>

                                    <h5 class="font-weight-bolder mb-1" style="color:red;">
                                        {{ $stok_min_stok }}
                                    </h5>

                                    <div class="d-flex gap-2 flex-wrap mt-2">
                                        <span class="badge bg-gradient-primary">
                                            Sparepart: {{ $stok_min_sparepart ?? 0 }}
                                        </span>

                                        <span class="badge bg-gradient-info">
                                            Penunjang: {{ $stok_min_penunjang ?? 0 }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-success text-center rounded-circle">
                                    <i class="fa fa-exclamation fa-beat text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (!($is_teknik ?? false))
                <div class="{{ $cardCol }} mb-4">
                    <div class="card h-100" style="cursor: pointer;" onclick="showSpInModal()">
                        <div class="{{ $cardBodyClass }}">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal2" class="text-sm mb-0 text-uppercase font-weight-bold">Transaksi
                                            Masuk
                                            bulan ini</h4>
                                        <h5 class="font-weight-bolder">
                                            {{ $tr_in_today }}
                                        </h5>
                                        <div class="d-flex gap-2 flex-wrap mt-2">
                                            <span class="badge bg-gradient-primary">
                                                Sparepart: {{ $tr_sp_in_sparepart ?? 0 }}
                                            </span>

                                            <span class="badge bg-gradient-info">
                                                Penunjang: {{ $tr_sp_in_penunjang ?? 0 }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-warning shadow-danger text-center rounded-circle align-items-center justify-content-center">
                                        <i class="fa fa-arrow-down fa-bounce text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="{{ $cardCol }} mb-4">
                    <div class="card h-100" style="cursor: pointer;" onclick="showSpOutModal()">
                        <div class="{{ $cardBodyClass }}">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal3" class="text-sm mb-0 text-uppercase font-weight-bold">Transaksi
                                            Keluar
                                            bulan ini</h4>
                                        <h5 class="font-weight-bolder" style="color:red;">
                                            {{ $tr_out_today }}
                                        </h5>
                                        <div class="d-flex gap-2 flex-wrap mt-2">
                                            <span class="badge bg-gradient-primary">
                                                Sparepart: {{ $tr_sp_out_sparepart ?? 0 }}
                                            </span>

                                            <span class="badge bg-gradient-info">
                                                Penunjang: {{ $tr_sp_out_penunjang ?? 0 }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-success text-center rounded-circle">
                                        <i class="fa fa-arrow-up fa-bounce text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="{{ $cardCol }} mb-4">
                    <div class="card h-100" style="cursor: pointer;" onclick="showBarangBelumLengkapExGambarModal()">
                        <div class="{{ $cardBodyClass }}">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal1" class="text-sm mb-0 text-uppercase font-weight-bold">
                                            Barang Belum Lengkap kecuali gambar
                                        </h4>

                                        <h5 class="font-weight-bolder" style="color:red;">
                                            {{ $barang_belum_lengkap_ex_gambar }}
                                        </h5>

                                        <div class="d-flex gap-2 flex-wrap mt-2">
                                            <span class="badge bg-gradient-primary">
                                                Sparepart: {{ $barang_belum_lengkap_ex_sparepart ?? 0 }}
                                            </span>

                                            <span class="badge bg-gradient-info">
                                                Penunjang: {{ $barang_belum_lengkap_ex_penunjang ?? 0 }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-warning shadow-primary text-center rounded-circle">
                                        <i class="fa fa-clipboard-list fa-flip text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="{{ $cardCol }} mb-4">
                <div class="card h-100" style="cursor: pointer;" onclick="showStokNolModal()">
                    <div class="{{ $cardBodyClass }}">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <h4 id="modal-stok-nol" class="text-sm mb-0 text-uppercase font-weight-bold">Stok
                                        Kosong
                                    </h4>
                                    <h5 class="font-weight-bolder" style="color:red;">
                                        {{ $stok_nol }}
                                    </h5>
                                    <div class="d-flex gap-2 flex-wrap mt-2">
                                        <span class="badge bg-gradient-primary">
                                            Sparepart: {{ $stok_nol_sparepart ?? 0 }}
                                        </span>

                                        <span class="badge bg-gradient-info">
                                            Penunjang: {{ $stok_nol_penunjang ?? 0 }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-secondary shadow-primary text-center rounded-circle">
                                    <i class="fa fa-box-open fa-beat text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (!($is_teknik ?? false))
                <div class="{{ $cardCol }} mb-4">
                    <div class="card h-100" style="cursor: pointer;" onclick="showDuplicateLabelModal()">
                        <div class="{{ $cardBodyClass }}">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal-dup-label" class="text-sm mb-0 text-uppercase font-weight-bold">
                                            Label Barang Duplikat
                                        </h4>
                                        <h5 class="font-weight-bolder" style="color:red;">
                                            {{ $label_duplicate }}
                                        </h5>
                                        <div class="d-flex gap-2 flex-wrap mt-2">
                                            <span class="badge bg-gradient-primary">
                                                Sparepart: {{ $label_duplicate_sparepart ?? 0 }}
                                            </span>

                                            <span class="badge bg-gradient-info">
                                                Penunjang: {{ $label_duplicate_penunjang ?? 0 }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-info shadow-primary text-center rounded-circle">
                                        <i class="fa fa-tags fa-beat text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="{{ $cardCol }} mb-4">
                    <div class="card h-100" style="cursor: pointer;" onclick="showLabelKategoriMismatchModal()">
                        <div class="{{ $cardBodyClass }}">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal-label-kategori"
                                            class="text-sm mb-0 text-uppercase font-weight-bold">Label Tidak Sesuai
                                            Kategori
                                        </h4>
                                        <h5 class="font-weight-bolder" style="color:red;">
                                            {{ $label_kategori_mismatch }}
                                        </h5>
                                        <div class="d-flex gap-2 flex-wrap mt-2">
                                            <span class="badge bg-gradient-primary">
                                                Sparepart: {{ $label_kategori_mismatch_sparepart ?? 0 }}
                                            </span>

                                            <span class="badge bg-gradient-info">
                                                Penunjang: {{ $label_kategori_mismatch_penunjang ?? 0 }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-warning shadow-primary text-center rounded-circle">
                                        <i class="fa fa-triangle-exclamation fa-beat text-lg opacity-10"
                                            aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        @php
            $totalOut = $tr_sp_out_manual + $tr_sp_out_zebra;
            $pctManual = $totalOut > 0 ? round(($tr_sp_out_manual / $totalOut) * 100) : 0;
            $pctZebra = $totalOut > 0 ? round(($tr_sp_out_zebra / $totalOut) * 100) : 0;

            $insightTarget = 'Sangat Baik';
            $insightColor = 'success';
            $insightText = "Tingkat penggunaan alat Scanner Zebra ($pctZebra%) tercatat lebih didominasi dibandingkan input Manual ($pctManual%).";

            if ($totalOut == 0) {
                $insightTarget = 'Data Kosong';
                $insightColor = 'secondary';
                $insightText = 'Belum ada riwayat transaksi pencatatan barang keluar untuk bulan ini.';
            } elseif ($pctManual > $pctZebra) {
                $insightTarget = 'Perlu Perhatian';
                $insightColor = 'warning';
                $insightText = "Tingkat input secara Manual ($pctManual%) tercatat lebih dominan dibandingkan pemakaian alat Scanner ($pctZebra%).";
            } elseif ($pctManual == $pctZebra) {
                $insightTarget = 'Terpantau Seimbang';
                $insightColor = 'info';
                $insightText =
                    'Penggunaan Scanner Zebra dan input secara Manual memiliki persentase yang seimbang (50% : 50%).';
            } elseif ($pctManual >= 15) {
                $insightTarget = 'Cukup Baik';
                $insightColor = 'primary';
                $insightText = "Penggunaan Scanner Zebra mencapai $pctZebra%, sedangkan input pelengkap secara Manual tercatat sebesar $pctManual%.";
            }

            $totalOutpn = $tr_pn_out_manual + $tr_pn_out_zebra;
            $pctManualpn = $totalOutpn > 0 ? round(($tr_pn_out_manual / $totalOutpn) * 100) : 0;
            $pctZebrapn = $totalOutpn > 0 ? round(($tr_pn_out_zebra / $totalOutpn) * 100) : 0;

            $insightTargetpn = 'Sangat Baik';
            $insightColorpn = 'success';
            $insightTextpn = "Tingkat penggunaan alat Scanner Zebra ($pctZebrapn%) tercatat lebih didominasi dibandingkan input Manual ($pctManual%).";

            if ($totalOutpn == 0) {
                $insightTargetpn = 'Data Kosong';
                $insightColorpn = 'secondary';
                $insightTextpn = 'Belum ada riwayat transaksi pencatatan barang keluar untuk bulan ini.';
            } elseif ($pctManualpn > $pctZebrapn) {
                $insightTargetpn = 'Perlu Perhatian';
                $insightColorpn = 'warning';
                $insightTextpn = "Tingkat input secara Manual ($pctManualpn%) tercatat lebih dominan dibandingkan pemakaian alat Scanner ($pctZebrapn%).";
            } elseif ($pctManualpn == $pctZebra) {
                $insightTargetpn = 'Terpantau Seimbang';
                $insightColorpn = 'info';
                $insightTextpn =
                    'Penggunaan Scanner Zebra dan input secara Manual memiliki persentase yang seimbang (50% : 50%).';
            } elseif ($pctManualpn >= 15) {
                $insightTargetpn = 'Cukup Baik';
                $insightColorpn = 'primary';
                $insightTextpn = "Penggunaan Scanner Zebra mencapai $pctZebrapn%, sedangkan input pelengkap secara Manual tercatat sebesar $pctManualpn%.";
            }
        @endphp

        <!-- Executive Overview Banner -->
        <div class="row w-100 my-4" style="margin: 0;">
            <div class="col-12 px-0">
                <div class="card overflow-hidden"
                    style="border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);">
                    <div class="row g-0">
                        <!-- Left Section: Executive Insight -->
                        <div class="col-lg-4 col-md-12 p-4"
                            style="background-color: #f8f9fa; border-right: 1px solid rgba(0,0,0,0.05);">
                            <h4 class="text-dark font-weight-bolder mb-1">Analisis Metode Input</h4>
                            <p class="text-sm text-secondary mb-3">Pemantauan pencatatan sparepart keluar bulan ini.</p>

                            <div class="p-3 bg-white rounded shadow-sm" style="border: 1px solid rgba(0,0,0,0.03);">
                                <div class="d-flex align-items-center">
                                    <span
                                        class="badge bg-{{ $insightColor }} border border-{{ $insightColor }} me-2 rounded-pill px-2 py-1"
                                        style="font-size: 0.65rem; opacity: 0.9;">{{ $insightTarget }}</span>
                                    <span class="text-xs font-weight-bold text-dark">Status Operasional</span>
                                </div>
                                <p class="text-xs text-secondary mt-2 mb-0" style="line-height: 1.5;">{{ $insightText }}
                                </p>
                            </div>
                        </div>

                        <!-- Right Section: Data Visualization -->
                        <div class="col-lg-8 col-md-12 p-4 d-flex flex-column justify-content-center bg-white">
                            <div class="row align-items-end mb-4">
                                <div class="col-md-5 mb-3 mb-md-0">
                                    <span class="badge bg-gradient-primary">
                                        Total Transaksi
                                        Sparepart
                                        Keluar
                                    </span>
                                    <h2 class="text-dark font-weight-bolder mb-0">{{ number_format($totalOut) }} <span
                                            class="text-sm text-secondary font-weight-normal">item</span></h2>
                                </div>

                                <!-- Legend -->
                                <div class="col-md-7 d-flex justify-content-md-end">
                                    <div class="d-flex gx-4">
                                        <div class="d-flex align-items-center me-4" style="cursor: pointer;"
                                            onclick="showSpOutZebraModal()" title="Klik untuk lihat detail Scanner Zebra">
                                            <div
                                                style="width: 12px; height: 12px; border-radius: 3px; background-color: #3b82f6; margin-right: 8px;">
                                            </div>
                                            <div>
                                                <div class="text-xs font-weight-bold text-dark">Scanner (Zebra)</div>
                                                <div class="text-xs text-secondary">{{ $pctZebra }}%
                                                    ({{ $tr_sp_out_zebra }})</div>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center" style="cursor: pointer;"
                                            onclick="showSpOutManualModal()" title="Klik untuk lihat detail Manual">
                                            <div
                                                style="width: 12px; height: 12px; border-radius: 3px; background-color: #f59e0b; margin-right: 8px;">
                                            </div>
                                            <div>
                                                <div class="text-xs font-weight-bold text-dark">Manual Entry</div>
                                                <div class="text-xs text-secondary">{{ $pctManual }}%
                                                    ({{ $tr_sp_out_manual }})</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Precision Progress Bar -->
                            <div class="mt-2">
                                <div class="progress"
                                    style="height: 24px; border-radius: 4px; background-color: #f1f5f9; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); overflow: hidden;">
                                    @if ($totalOut > 0)
                                        <div class="progress-bar" role="progressbar"
                                            style="width: {{ $pctZebra }}%; background-color: #3b82f6; cursor: pointer; transition: width 1s ease;"
                                            onclick="showSpOutZebraModal()"></div>
                                        <div class="progress-bar" role="progressbar"
                                            style="width: {{ $pctManual }}%; background-color: #f59e0b; border-left: 2px solid #ffffff; cursor: pointer; transition: width 1s ease;"
                                            onclick="showSpOutManualModal()"></div>
                                    @else
                                        <div
                                            class="progress-bar w-100 bg-transparent text-muted text-xs d-flex align-items-center justify-content-center">
                                            Belum ada transaksi bulan ini</div>
                                    @endif
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span class="text-xs text-muted">0%</span>
                                    <span class="text-xs text-muted font-weight-bold">Akurasi Distribusi Metrik</span>
                                    <span class="text-xs text-muted">100%</span>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="row g-0">
                        <!-- Left Section: Executive Insight -->
                        <div class="col-lg-4 col-md-12 p-4"
                            style="background-color: #f8f9fa; border-right: 1px solid rgba(0,0,0,0.05);">
                            <h4 class="text-dark font-weight-bolder mb-1">Analisis Metode Input</h4>
                            <p class="text-sm text-secondary mb-3">Pemantauan pencatatan penunjang keluar bulan ini.</p>

                            <div class="p-3 bg-white rounded shadow-sm" style="border: 1px solid rgba(0,0,0,0.03);">
                                <div class="d-flex align-items-center">
                                    <span
                                        class="badge bg-{{ $insightColorpn }} border border-{{ $insightColorpn }} me-2 rounded-pill px-2 py-1"
                                        style="font-size: 0.65rem; opacity: 0.9;">{{ $insightTargetpn }}</span>
                                    <span class="text-xs font-weight-bold text-dark">Status Operasional</span>
                                </div>
                                <p class="text-xs text-secondary mt-2 mb-0" style="line-height: 1.5;">
                                    {{ $insightTextpn }}
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-12 p-4 d-flex flex-column justify-content-center bg-white">
                            <div class="row align-items-end mb-4">
                                <div class="col-md-5 mb-3 mb-md-0">
                                    <span class="badge bg-gradient-info">
                                        Total Transaksi
                                        Penunjang
                                        Keluar
                                    </span>
                                    <h2 class="text-dark font-weight-bolder mb-0">{{ number_format($totalOutpn) }} <span
                                            class="text-sm text-secondary font-weight-normal">item</span></h2>
                                </div>

                                <!-- Legend -->
                                <div class="col-md-7 d-flex justify-content-md-end">
                                    <div class="d-flex gx-4">
                                        <div class="d-flex align-items-center me-4" style="cursor: pointer;"
                                            onclick="showOutZebraModalpn()" title="Klik untuk lihat detail Scanner Zebra">
                                            <div
                                                style="width: 12px; height: 12px; border-radius: 3px; background-color: #3b82f6; margin-right: 8px;">
                                            </div>
                                            <div>
                                                <div class="text-xs font-weight-bold text-dark">Scanner (Zebra)</div>
                                                <div class="text-xs text-secondary">{{ $pctZebrapn }}%
                                                    ({{ $tr_pn_out_zebra }})</div>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center" style="cursor: pointer;"
                                            onclick="showOutManualModalpn()" title="Klik untuk lihat detail Manual">
                                            <div
                                                style="width: 12px; height: 12px; border-radius: 3px; background-color: #f59e0b; margin-right: 8px;">
                                            </div>
                                            <div>
                                                <div class="text-xs font-weight-bold text-dark">Manual Entry</div>
                                                <div class="text-xs text-secondary">{{ $pctManualpn }}%
                                                    ({{ $tr_pn_out_manual }})</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Precision Progress Bar -->
                            <div class="mt-2">
                                <div class="progress"
                                    style="height: 24px; border-radius: 4px; background-color: #f1f5f9; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); overflow: hidden;">
                                    @if ($totalOutpn > 0)
                                        <div class="progress-bar" role="progressbar"
                                            style="width: {{ $pctZebrapn }}%; background-color: #3b82f6; cursor: pointer; transition: width 1s ease;"
                                            onclick="showOutZebraModalpn()"></div>
                                        <div class="progress-bar" role="progressbar"
                                            style="width: {{ $pctManualpn }}%; background-color: #f59e0b; border-left: 2px solid #ffffff; cursor: pointer; transition: width 1s ease;"
                                            onclick="showOutManualModalpn()"></div>
                                    @else
                                        <div
                                            class="progress-bar w-100 bg-transparent text-muted text-xs d-flex align-items-center justify-content-center">
                                            Belum ada transaksi bulan ini</div>
                                    @endif
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span class="text-xs text-muted">0%</span>
                                    <span class="text-xs text-muted font-weight-bold">Akurasi Distribusi Metrik</span>
                                    <span class="text-xs text-muted">100%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="barangBelumLengkapModal" tabindex="-1"
                aria-labelledby="barangBelumLengkapModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title" id="barangBelumLengkapModalLabel">
                                Daftar Barang Belum Lengkap
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#barang-belum-lengkap-sparepart-pane" type="button">
                                        Sparepart
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#barang-belum-lengkap-penunjang-pane" type="button">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="barang-belum-lengkap-sparepart-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-barang-belum-lengkap-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Field Kosong</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="barang-belum-lengkap-penunjang-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-barang-belum-lengkap-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Field Kosong</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Tutup
                            </button>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Modal Label Duplicate -->
            <div class="modal fade bd-example-modal-lg" id="duplicateLabelModal" tabindex="-1"
                aria-labelledby="duplicateLabelModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="duplicateLabelModalLabel">Daftar Barang Dengan Label Duplicate
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#dup-label-sparepart-pane" type="button">
                                        Sparepart
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#dup-label-penunjang-pane" type="button">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="dup-label-sparepart-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-dup-label-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Nama Label</th>
                                                    <th>Kategori</th>
                                                    <th>Stok</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="dup-label-penunjang-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-dup-label-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Nama Label</th>
                                                    <th>Kategori</th>
                                                    <th>Stok</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal barang yang belum lengkap kecuali gambar -->
            <div class="modal fade" id="barangBelumLengkapExGambarModal" tabindex="-1"
                aria-labelledby="barangBelumLengkapExGambarModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title" id="barangBelumLengkapExGambarModalLabel">
                                Daftar Barang Belum Lengkap Kecuali Gambar
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#barang-belum-lengkap-ex-gambar-sparepart-pane" type="button"
                                        role="tab">
                                        Sparepart
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#barang-belum-lengkap-ex-gambar-penunjang-pane" type="button"
                                        role="tab">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="barang-belum-lengkap-ex-gambar-sparepart-pane"
                                    role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-barang-belum-lengkap-ex-gambar-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Field Kosong</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="barang-belum-lengkap-ex-gambar-penunjang-pane"
                                    role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-barang-belum-lengkap-ex-gambar-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Field Kosong</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Tutup
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Label Kategori Mismatch -->
            <div class="modal fade bd-example-modal-lg" id="labelKategoriMismatchModal" tabindex="-1"
                aria-labelledby="labelKategoriMismatchModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="labelKategoriMismatchModalLabel">Daftar Barang Dengan Label Tidak
                                Sesuai Kategori</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#label-kategori-mismatch-sparepart-pane" type="button">
                                        Sparepart
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#label-kategori-mismatch-penunjang-pane" type="button">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="label-kategori-mismatch-sparepart-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-label-kategori-mismatch-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Nama Label</th>
                                                    <th>Kategori</th>
                                                    <th>Kode Kategori</th>
                                                    <th>Stok</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="label-kategori-mismatch-penunjang-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-label-kategori-mismatch-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Nama Label</th>
                                                    <th>Kategori</th>
                                                    <th>Kode Kategori</th>
                                                    <th>Stok</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Sparepart Masuk -->
            <div class="modal fade bd-example-modal-lg" id="spInModal" tabindex="-1" aria-labelledby="spInModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="spInModalLabel">Transaksi Masuk - Bulan Ini</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" id="spInTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="sp-in-sparepart-tab" data-bs-toggle="tab"
                                        data-bs-target="#sp-in-sparepart-pane" type="button" role="tab">
                                        Sparepart
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="sp-in-penunjang-tab" data-bs-toggle="tab"
                                        data-bs-target="#sp-in-penunjang-pane" type="button" role="tab">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="sp-in-sparepart-pane" role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-sp-in-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>ID Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>No LPB</th>
                                                    <th>Supplier</th>
                                                    <th>Nama Barang</th>
                                                    <th>Qty</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="sp-in-penunjang-pane" role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-sp-in-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>ID Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>No LPB</th>
                                                    <th>Supplier</th>
                                                    <th>Nama Barang</th>
                                                    <th>Qty</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Sparepart Keluar -->
            <div class="modal fade bd-example-modal-lg" id="spOutModal" tabindex="-1" aria-labelledby="spOutModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="spOutModalLabel">Transaksi Sparepart Keluar - Bulan Ini</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" id="spOutTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="sp-out-sparepart-tab" data-bs-toggle="tab"
                                        data-bs-target="#sp-out-sparepart-pane" type="button" role="tab">
                                        Sparepart
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="sp-out-penunjang-tab" data-bs-toggle="tab"
                                        data-bs-target="#sp-out-penunjang-pane" type="button" role="tab">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="sp-out-sparepart-pane" role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-sp-out-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>ID Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Qty</th>
                                                    <th>Satuan</th>
                                                    <th>Keperluan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="sp-out-penunjang-pane" role="tabpanel">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-sp-out-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th>ID Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Qty</th>
                                                    <th>Satuan</th>
                                                    <th>Keperluan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Sparepart Keluar Manual -->
            <div class="modal fade bd-example-modal-lg" id="spOutManualModal" tabindex="-1"
                aria-labelledby="spOutManualModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="spOutManualModalLabel">Item Sparepart Keluar Manual - Bulan Ini
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped w-100" id="table-sp-out-manual">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th style="border-color: #daecff;">No. Transaksi</th>
                                            <th style="border-color: #daecff;">Tanggal</th>
                                            <th style="border-color: #daecff;">Kode Lama</th>
                                            <th style="border-color: #daecff;">Kode Baru</th>
                                            <th style="border-color: #daecff;">Nama Barang</th>
                                            <th style="border-color: #daecff;">Qty</th>
                                            <th style="border-color: #daecff;">Satuan</th>
                                            <th style="border-color: #daecff;">Keperluan</th>
                                            <th style="border-color: #daecff;">Input Method</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Sparepart Keluar Zebra -->
            <div class="modal fade bd-example-modal-lg" id="spOutZebraModal" tabindex="-1"
                aria-labelledby="spOutZebraModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="spOutZebraModalLabel">Item Sparepart Keluar Zebra (Barcode) -
                                Bulan
                                Ini</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped w-100" id="table-sp-out-zebra">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th style="border-color: #daecff;">No. Transaksi</th>
                                            <th style="border-color: #daecff;">Tanggal</th>
                                            <th style="border-color: #daecff;">Kode Lama</th>
                                            <th style="border-color: #daecff;">Kode Baru</th>
                                            <th style="border-color: #daecff;">Nama Barang</th>
                                            <th style="border-color: #daecff;">Qty</th>
                                            <th style="border-color: #daecff;">Satuan</th>
                                            <th style="border-color: #daecff;">Keperluan</th>
                                            <th style="border-color: #daecff;">Input Method</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Sparepart Keluar Manual -->
            <div class="modal fade bd-example-modal-lg" id="OutManualModalpn" tabindex="-1"
                aria-labelledby="OutManualModalpnLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="OutManualModalpnLabel">Item Penunjang Keluar Manual - Bulan Ini
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped w-100" id="table-pn-out-manual">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th style="border-color: #daecff;">No. Transaksi</th>
                                            <th style="border-color: #daecff;">Tanggal</th>
                                            <th style="border-color: #daecff;">Kode Lama</th>
                                            <th style="border-color: #daecff;">Kode Baru</th>
                                            <th style="border-color: #daecff;">Nama Barang</th>
                                            <th style="border-color: #daecff;">Qty</th>
                                            <th style="border-color: #daecff;">Satuan</th>
                                            <th style="border-color: #daecff;">Keperluan</th>
                                            <th style="border-color: #daecff;">Input Method</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Sparepart Keluar Zebra -->
            <div class="modal fade bd-example-modal-lg" id="OutZebraModalpn" tabindex="-1"
                aria-labelledby="OutZebraModalpnLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="OutZebraModalpnLabel">Item Penunjang Keluar Zebra (Barcode) -
                                Bulan
                                Ini</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped w-100" id="table-pn-out-zebra">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th style="border-color: #daecff;">No. Transaksi</th>
                                            <th style="border-color: #daecff;">Tanggal</th>
                                            <th style="border-color: #daecff;">Kode Lama</th>
                                            <th style="border-color: #daecff;">Kode Baru</th>
                                            <th style="border-color: #daecff;">Nama Barang</th>
                                            <th style="border-color: #daecff;">Qty</th>
                                            <th style="border-color: #daecff;">Satuan</th>
                                            <th style="border-color: #daecff;">Keperluan</th>
                                            <th style="border-color: #daecff;">Input Method</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Stok Kosong / Nol -->
            <div class="modal fade bd-example-modal-lg" id="stokNolModal" tabindex="-1"
                aria-labelledby="stokNolModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="stokNolModalLabel">Daftar Barang Stok Kosong</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#stok-nol-sparepart-pane" type="button">
                                        Sparepart
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#stok-nol-penunjang-pane" type="button">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="stok-nol-sparepart-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-stok-nol-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th class="text-center">
                                                        <input type="checkbox" id="check-all-stok-nol-sparepart">
                                                    </th>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Stok</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="stok-nol-penunjang-pane">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-stok-nol-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th class="text-center">
                                                        <input type="checkbox" id="check-all-stok-nol-penunjang">
                                                    </th>
                                                    <th>Kode Lama</th>
                                                    <th>Kode Baru</th>
                                                    <th>Nama Barang</th>
                                                    <th>Stok</th>
                                                    <th>Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            <button type="button" class="btn btn-danger" onclick="nonaktifkanSelected()">
                                <i class="fas fa-ban me-1"></i> Nonaktifkan
                            </button>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Modal Stok Kurang Dari Minimal -->
            <div class="modal fade bd-example-modal-lg" id="minStokModal" tabindex="-1"
                aria-labelledby="minStokModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title" id="minStokModalLabel">
                                Daftar Barang Kurang Dari Minimal Stok
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">

                            {{-- Tabs --}}
                            <ul class="nav nav-tabs mb-3" id="minStokTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="sparepart-tab" data-bs-toggle="tab"
                                        data-bs-target="#sparepart-pane" type="button" role="tab"
                                        aria-controls="sparepart-pane" aria-selected="true">
                                        Sparepart
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="penunjang-tab" data-bs-toggle="tab"
                                        data-bs-target="#penunjang-pane" type="button" role="tab"
                                        aria-controls="penunjang-pane" aria-selected="false">
                                        Penunjang
                                    </button>
                                </li>
                            </ul>

                            {{-- Tab Content --}}
                            <div class="tab-content" id="minStokTabContent">

                                {{-- Sparepart --}}
                                <div class="tab-pane fade show active" id="sparepart-pane" role="tabpanel"
                                    aria-labelledby="sparepart-tab">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-min-stok-sparepart">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th style="border-color: #daecff;">Kode Lama</th>
                                                    <th style="border-color: #daecff;">Kode Baru</th>
                                                    <th style="border-color: #daecff;">Nama Barang</th>
                                                    <th style="border-color: #daecff;">Stok Aktual</th>
                                                    <th style="border-color: #daecff;">Min Stok</th>
                                                    <th style="border-color: #daecff;">Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                                {{-- Penunjang --}}
                                <div class="tab-pane fade" id="penunjang-pane" role="tabpanel"
                                    aria-labelledby="penunjang-tab">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100"
                                            id="table-min-stok-penunjang">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th style="border-color: #daecff;">Kode Lama</th>
                                                    <th style="border-color: #daecff;">Kode Baru</th>
                                                    <th style="border-color: #daecff;">Nama Barang</th>
                                                    <th style="border-color: #daecff;">Stok Aktual</th>
                                                    <th style="border-color: #daecff;">Min Stok</th>
                                                    <th style="border-color: #daecff;">Satuan</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Tutup
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Rata-rata Transaksi Sparepart Dan Penunjang</h5>
            </div>

            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-3">
                        <label class="form-control-label">Periode</label>

                        <select id="periode" class="form-control" onchange="togglePeriodFilter()">
                            <option value="bulan">Bulan & Tahun</option>
                            <option value="all">Semua Data</option>
                        </select>
                    </div>

                    <div class="col-md-3" id="bulan-wrapper">
                        <label class="form-control-label">Bulan</label>

                        <select id="bulan" class="form-control">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}" {{ now()->month === $i ? 'selected' : '' }}>
                                    {{ \Carbon\Carbon::create(null, $i, 1)->translatedFormat('F') }}
                                </option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-2" id="tahun-wrapper">
                        <label class="form-control-label">Tahun</label>

                        <select id="tahun" class="form-control">
                            @for ($year = now()->year; $year >= now()->year - 10; $year--)
                                <option value="{{ $year }}">
                                    {{ $year }}
                                </option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" id="btn-sparepart-filter" class="btn btn-primary w-100 mb-0"
                            onclick="loadSparepartAverage()">
                            <i class="fas fa-filter me-1"></i>
                            Terapkan
                        </button>
                    </div>
                </div>

                <div id="sparepart-result">
                    <div class="alert alert-info mb-0">
                        Silakan pilih periode lalu klik Terapkan untuk menampilkan data.
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-4 shadow-sm border">
            <div class="card-header pb-0 bg-transparent border-bottom">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                    <div>
                        <h5 class="mb-1 text-dark font-weight-bolder">
                            <i class="fas fa-boxes text-primary me-2"></i>Log Perubahan Data Master Barang
                        </h5>
                        <p class="text-xs text-muted mb-0">Riwayat perubahan data barang per bulan </p>
                    </div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <button type="button" class="btn btn-sm bg-gradient-primary mb-0 shadow-sm" onclick="reloadBarangActivitySection()">
                            <i class="fas fa-sync-alt me-1"></i> Refresh
                        </button>
                    </div>
                </div>

                <!-- Bagian Analisis Tren Grafik Bulanan (Compact & Responsive) -->
                <div class="mt-2 py-3 px-3 bg-gray-100 rounded-3 border">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-sm font-weight-bold text-dark text-uppercase">
                                <i class="fas fa-chart-bar text-info me-1"></i>Grafik Perubahan per Bulan:
                            </span>
                            <select id="barang-chart-year" class="form-select form-select-sm py-1 px-2" style="width: 100px; height: 32px; font-size: 13px;" onchange="loadBarangMonthlyChart()">
                                @for ($y = now()->year; $y >= now()->year - 5; $y--)
                                    <option value="{{ $y }}">{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="badge bg-gradient-success text-xs px-3 py-2 shadow-xs" id="barang-peak-badge">
                                <i class="fas fa-trophy me-1"></i>Paling Banyak: Memuat...
                            </span>
                            <span class="badge bg-white text-dark border text-xs px-3 py-2 shadow-xs" id="barang-annual-total">
                                Total Tahun Ini: 0 Barang
                            </span>
                        </div>
                    </div>
                    <div style="height: 380px; position: relative;">
                        <canvas id="chart-barang-monthly"></canvas>
                    </div>
                </div>

                <!-- Filter & Search Toolbar untuk Tabel -->
                <div class="row g-2 mt-2 mb-3 align-items-center">
                    <div class="col-12 col-md-4">
                        <div class="position-relative">
                            <span class="position-absolute top-50 translate-middle-y text-muted d-flex align-items-center justify-content-center" style="left: 12px; z-index: 4; pointer-events: none; width: 18px; height: 18px;">
                                <i class="fas fa-search text-xs text-muted" id="vendor-search-icon"></i>
                            </span>
                            <input type="text" id="vendor-search-input" class="form-control form-control-sm bg-white" 
                                style="padding-left: 36px !important; padding-right: 36px !important; border-radius: 0.5rem;"
                                placeholder="Cari nama barang, kode, user..." oninput="handleVendorSearchInput(this.value)" onkeydown="handleVendorSearchKey(event)">
                            <button id="btn-clear-vendor-search" class="btn btn-link text-secondary position-absolute top-50 translate-middle-y p-0 d-none" 
                                type="button" style="right: 12px; z-index: 5; text-decoration: none;" onclick="clearVendorSearch()" title="Hapus pencarian">
                                <i class="fas fa-times-circle text-sm text-muted"></i>
                            </button>
                        </div>
                    </div>

                    <div class="col-6 col-md-3">
                        <select id="vendor-tipe-filter" class="form-select form-select-sm" onchange="onBarangTipeFilterChange()">
                            <option value="">Semua Tipe (Sparepart, Penunjang & Repair)</option>
                            <option value="sparepart">Khusus Sparepart</option>
                            <option value="penunjang">Khusus Penunjang</option>
                            <option value="repair">Khusus Repair</option>
                        </select>
                    </div>

                    <div class="col-6 col-md-2">
                        <select id="vendor-limit-filter" class="form-select form-select-sm" onchange="loadVendorActivityLog(1)">
                            <option value="5">Tampilkan 5</option>
                            <option value="10" selected>Tampilkan 10</option>
                            <option value="25">Tampilkan 25</option>
                            <option value="50">Tampilkan 50</option>
                            <option value="0">Semua Data</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-3 text-md-end">
                        <span class="badge bg-light text-dark border text-xs px-2 py-1" id="vendor-total-info">
                            Memuat data...
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-body px-0 pt-0 pb-2">
                <div id="vendor-activity-result" class="p-3">
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-spinner fa-spin me-1"></i> Memuat log edit barang...
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @push('js')
        <script>
            function togglePeriodFilter() {
                const periode = document.getElementById('periode').value;
                const showMonthYear = periode === 'bulan';

                document.getElementById('bulan-wrapper').style.display =
                    showMonthYear ? '' : 'none';

                document.getElementById('tahun-wrapper').style.display =
                    showMonthYear ? '' : 'none';
            }

            function loadSparepartAverage() {
                const periode = document.getElementById('periode').value;
                const bulan = document.getElementById('bulan').value;
                const tahun = document.getElementById('tahun').value;

                const resultContainer = document.getElementById('sparepart-result');
                const button = document.getElementById('btn-sparepart-filter');

                const params = new URLSearchParams({
                    periode: periode
                });

                if (periode === 'bulan') {
                    params.append('bulan', bulan);
                    params.append('tahun', tahun);
                }

                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Memuat...';

                resultContainer.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin me-1"></i>
                    Mengambil data...
                </div>
                `;

                fetch(`{{ route('dashboard.sparepart-filter') }}?${params.toString()}`, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(async response => {
                        const result = await response.json();

                        if (!response.ok || !result.success) {
                            throw new Error(result.message || 'Gagal mengambil data.');
                        }

                        return result.data;
                    })
                    .then(data => {
                        renderAverageTransactionTable(data);
                    })
                    .catch(error => {
                        resultContainer.innerHTML = `
                        <div class="alert alert-danger mb-0">
                            ${escapeHtml(error.message)}
                        </div>
                    `;
                                })
                    .finally(() => {
                        button.disabled = false;
                        button.innerHTML = '<i class="fas fa-filter me-1"></i>Terapkan';
                    });
            }

            function renderAverageTransactionTable(data) {
                const resultContainer = document.getElementById('sparepart-result');

                const defaultRows = [{
                        tipe_barang: 'sparepart',
                        transaction_type: 'IN',
                        average_transaction_per_day: 0,
                        total_transaction: 0,
                        total_posted_transaction: 0,
                        total_sesuai_aturan: 0,
                        total_tidak_sesuai_aturan: 0,
                        total_same_day_posting: 0,
                        same_day_posting_percentage: 0,
                        average_posting_day_difference: 0
                    },
                    {
                        tipe_barang: 'sparepart',
                        transaction_type: 'OUT',
                        average_transaction_per_day: 0,
                        total_transaction: 0,
                        total_posted_transaction: 0,
                        total_sesuai_aturan: 0,
                        total_tidak_sesuai_aturan: 0,
                        total_same_day_posting: 0,
                        same_day_posting_percentage: 0,
                        average_posting_day_difference: 0
                    },
                    {
                        tipe_barang: 'penunjang',
                        transaction_type: 'IN',
                        average_transaction_per_day: 0,
                        total_transaction: 0,
                        total_posted_transaction: 0,
                        total_sesuai_aturan: 0,
                        total_tidak_sesuai_aturan: 0,
                        total_same_day_posting: 0,
                        same_day_posting_percentage: 0,
                        average_posting_day_difference: 0
                    },
                    {
                        tipe_barang: 'penunjang',
                        transaction_type: 'OUT',
                        average_transaction_per_day: 0,
                        total_transaction: 0,
                        total_posted_transaction: 0,
                        total_sesuai_aturan: 0,
                        total_tidak_sesuai_aturan: 0,
                        total_same_day_posting: 0,
                        same_day_posting_percentage: 0,
                        average_posting_day_difference: 0
                    }
                ];

                const dataMap = {};

                if (Array.isArray(data)) {
                    data.forEach(function(item) {
                        const key = item.tipe_barang + '_' + item.transaction_type;
                        dataMap[key] = item;
                    });
                }

                const finalData = defaultRows.map(function(defaultItem) {
                    const key = defaultItem.tipe_barang + '_' + defaultItem.transaction_type;
                    return dataMap[key] || defaultItem;
                });

                const rows = finalData.map(item => {
                    const tipeBarang = item.tipe_barang === 'penunjang' ?
                        'Penunjang':
                        'Sparepart';

                    const jenisTransaksi = item.transaction_type === 'IN' ?
                        'Masuk' :
                        'Keluar';

                    const badgeClass = item.tipe_barang === 'penunjang' ?
                        'bg-gradient-info' :
                        'bg-gradient-primary';

                    return `
                    <tr>
                        <td>
                            <span class="badge ${badgeClass} me-1">
                                ${tipeBarang}
                            </span>
                            Transaksi ${jenisTransaksi}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.average_transaction_per_day, 0)}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.total_transaction, 0)}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.total_posted_transaction, 0)}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.total_sesuai_aturan, 0)}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.total_tidak_sesuai_aturan, 0)}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.total_same_day_posting, 0)}
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.same_day_posting_percentage, 2)}%
                        </td>

                        <td class="text-end">
                            ${formatNumber(item.average_posting_day_difference, 0)} hari
                        </td>
                    </tr>
                `;
                }).join('');

                resultContainer.innerHTML = `
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped mb-0">
                            <thead style="background-color: #ffffff;">
                                <tr style="background-color: #ffffff;">
                                    <th rowspan="2" class="align-middle text-center text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Jenis Transaksi</th>
                                    <th colspan="3" class="text-center text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Volume Transaksi</th>
                                    <th colspan="2" class="text-center text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">
                                        Ketepatan Waktu Posting
                                        <i class="fas fa-info-circle text-info ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Aturan Posting: Transaksi sebelum jam 10:00 diposting maksimal jam 10:00 di hari yang sama. Transaksi jam 10:00 ke atas diposting maksimal jam 10:00 di hari berikutnya (H+1)." style="cursor: pointer; font-size: 11px;"></i>
                                    </th>
                                    <th rowspan="2" class="align-middle text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Posting Hari Sama</th>
                                    <th rowspan="2" class="align-middle text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Persentase Hari Sama</th>
                                    <th rowspan="2" class="align-middle text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Rata-rata Lama Posting</th>
                                </tr>
                                <tr style="background-color: #ffffff;">
                                    <th class="text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Rata-rata Transaksi/Hari</th>
                                    <th class="text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Total Transaksi</th>
                                    <th class="text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Total Posting</th>
                                    <th class="text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Sesuai aturan</th>
                                    <th class="text-end text-dark font-weight-bold" style="background-color: #ffffff; border: 1px solid #dee2e6 !important;">Tidak Sesuai aturan</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${rows}
                            </tbody>
                        </table>
                    </div>
                `;

                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                    resultContainer.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
                }
            }

            function formatNumber(value, decimal = 0) {
                return Number(value || 0).toLocaleString('id-ID', {
                    minimumFractionDigits: decimal,
                    maximumFractionDigits: decimal
                });
            }

            function escapeHtml(value) {
                return String(value || '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            let currentVendorPage = 1;
            let vendorSearchTimeout = null;
            let vendorSearchAbortController = null;

            function handleVendorSearchInput(val) {
                const clearBtn = document.getElementById('btn-clear-vendor-search');
                if (clearBtn) {
                    if (val && val.trim().length > 0) {
                        clearBtn.classList.remove('d-none');
                    } else {
                        clearBtn.classList.add('d-none');
                    }
                }

                clearTimeout(vendorSearchTimeout);
                vendorSearchTimeout = setTimeout(() => {
                    loadVendorActivityLog(1);
                }, 200);
            }

            function clearVendorSearch() {
                const input = document.getElementById('vendor-search-input');
                const clearBtn = document.getElementById('btn-clear-vendor-search');
                if (input) {
                    input.value = '';
                    input.focus();
                }
                if (clearBtn) {
                    clearBtn.classList.add('d-none');
                }
                clearTimeout(vendorSearchTimeout);
                loadVendorActivityLog(1);
            }

            function handleVendorSearchKey(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    clearTimeout(vendorSearchTimeout);
                    loadVendorActivityLog(1);
                }
            }

            function loadVendorActivityLog(page = 1) {
                const container = document.getElementById('vendor-activity-result');
                const totalInfo = document.getElementById('vendor-total-info');
                const searchIcon = document.getElementById('vendor-search-icon');
                if (!container) return;

                currentVendorPage = parseInt(page) || 1;

                const search = document.getElementById('vendor-search-input')?.value || '';
                const tipe = document.getElementById('vendor-tipe-filter')?.value || '';
                const limit = document.getElementById('vendor-limit-filter')?.value || 10;

                const params = new URLSearchParams({
                    search: search,
                    tipe: tipe,
                    limit: limit,
                    page: currentVendorPage
                });

                // Tampilkan indikator loading halus tanpa menghancurkan tabel
                const existingTable = document.getElementById('table-vendor-activity-log');
                if (existingTable) {
                    existingTable.style.transition = 'opacity 0.15s ease-in-out';
                    existingTable.style.opacity = '0.45';
                    if (searchIcon) {
                        searchIcon.className = 'fas fa-spinner fa-spin text-xs text-primary';
                    }
                } else {
                    container.innerHTML = `
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-spinner fa-spin me-1 text-primary"></i> Memuat log edit master barang...
                        </div>
                    `;
                }

                if (vendorSearchAbortController) {
                    vendorSearchAbortController.abort();
                }
                vendorSearchAbortController = new AbortController();

                fetch(`{{ route('dashboard.get-barang-activity-log') }}?${params.toString()}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    signal: vendorSearchAbortController.signal
                })
                .then(response => response.json())
                .then(res => {
                    if (searchIcon) {
                        searchIcon.className = 'fas fa-search text-xs text-muted';
                    }
                    if (!res.success) {
                        throw new Error(res.message || 'Gagal memuat log edit master barang.');
                    }
                    if (totalInfo) {
                        const total = res.total || 0;
                        const pageNum = res.page || 1;
                        const lastPage = res.last_page || 1;
                        const from = res.from || 0;
                        const to = res.to || 0;

                        if (total === 0) {
                            totalInfo.textContent = 'Tidak ada data ditemukan';
                        } else if (res.limit == 0 || lastPage <= 1) {
                            totalInfo.textContent = `Menampilkan ${total} Log Edit Data Barang`;
                        } else {
                            totalInfo.textContent = `Halaman ${pageNum} dari ${lastPage} (${from}-${to} dari ${total} Log Perubahan Barang)`;
                        }
                    }
                    renderVendorActivityTable(res, search);
                })
                .catch(err => {
                    if (err.name === 'AbortError') return;
                    if (searchIcon) {
                        searchIcon.className = 'fas fa-search text-xs text-muted';
                    }
                    const tableEl = document.getElementById('table-vendor-activity-log');
                    if (tableEl) tableEl.style.opacity = '1';

                    container.innerHTML = `
                        <div class="alert alert-danger mb-0">
                            ${escapeHtml(err.message)}
                        </div>
                    `;
                });
            }

            function buildVendorPagination(page, lastPage, from, to, total) {
                if (!total || total === 0) return '';
                if (lastPage <= 1) {
                    return `
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center px-3 py-3 border-top bg-light">
                            <span class="text-xs text-muted mb-2 mb-md-0">
                                Menampilkan <b>${from || 0}</b> sampai <b>${to || 0}</b> dari <b>${total || 0}</b> log aktivitas
                            </span>
                        </div>
                    `;
                }

                let paginationItems = '';

                // Tombol Prev
                const prevDisabled = page <= 1 ? 'disabled' : '';
                paginationItems += `
                    <li class="page-item ${prevDisabled}">
                        <a class="page-link shadow-none" href="javascript:void(0)" ${page > 1 ? `onclick="loadVendorActivityLog(${page - 1})"` : ''} aria-label="Previous">
                            <i class="fas fa-chevron-left text-xxs"></i>
                        </a>
                    </li>
                `;

                // Hitung rentang nomor halaman yang ditampilkan
                let startPage = Math.max(1, page - 2);
                let endPage = Math.min(lastPage, page + 2);

                if (page <= 3) {
                    endPage = Math.min(lastPage, 5);
                }
                if (page >= lastPage - 2) {
                    startPage = Math.max(1, lastPage - 4);
                }

                if (startPage > 1) {
                    paginationItems += `
                        <li class="page-item">
                            <a class="page-link shadow-none" href="javascript:void(0)" onclick="loadVendorActivityLog(1)">1</a>
                        </li>
                    `;
                    if (startPage > 2) {
                        paginationItems += `<li class="page-item disabled"><span class="page-link shadow-none">...</span></li>`;
                    }
                }

                for (let p = startPage; p <= endPage; p++) {
                    if (p === page) {
                        paginationItems += `
                            <li class="page-item active">
                                <span class="page-link bg-gradient-primary text-white border-0 shadow-xs">${p}</span>
                            </li>
                        `;
                    } else {
                        paginationItems += `
                            <li class="page-item">
                                <a class="page-link shadow-none" href="javascript:void(0)" onclick="loadVendorActivityLog(${p})">${p}</a>
                            </li>
                        `;
                    }
                }

                if (endPage < lastPage) {
                    if (endPage < lastPage - 1) {
                        paginationItems += `<li class="page-item disabled"><span class="page-link shadow-none">...</span></li>`;
                    }
                    paginationItems += `
                        <li class="page-item">
                            <a class="page-link shadow-none" href="javascript:void(0)" onclick="loadVendorActivityLog(${lastPage})">${lastPage}</a>
                        </li>
                    `;
                }

                // Tombol Next
                const nextDisabled = page >= lastPage ? 'disabled' : '';
                paginationItems += `
                    <li class="page-item ${nextDisabled}">
                        <a class="page-link shadow-none" href="javascript:void(0)" ${page < lastPage ? `onclick="loadVendorActivityLog(${page + 1})"` : ''} aria-label="Next">
                            <i class="fas fa-chevron-right text-xxs"></i>
                        </a>
                    </li>
                `;

                return `
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center px-3 py-3 border-top bg-light">
                        <span class="text-xs text-muted mb-2 mb-md-0">
                            Menampilkan <b>${from || 0}</b> sampai <b>${to || 0}</b> dari <b>${total || 0}</b> log aktivitas
                        </span>
                        <nav aria-label="Navigasi Halaman Log">
                            <ul class="pagination pagination-sm m-0 justify-content-center justify-content-md-end">
                                ${paginationItems}
                            </ul>
                        </nav>
                    </div>
                `;
            }

            function renderVendorActivityTable(res, search = '') {
                const container = document.getElementById('vendor-activity-result');
                if (!container) return;

                const data = res.data || [];
                const page = res.page || 1;
                const lastPage = res.last_page || 1;
                const from = res.from || 0;
                const to = res.to || 0;
                const total = res.total || 0;

                const fromIdx = from > 0 ? from : 1;
                let rowsHtml = '';

                if (!data || data.length === 0) {
                    rowsHtml = `
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="fas fa-search me-1 text-primary"></i> ${search ? `Tidak ada data barang yang sesuai dengan pencarian "<b>${escapeHtml(search)}</b>".` : 'Belum ada riwayat edit data barang di Master Barang.'}
                            </td>
                        </tr>
                    `;
                } else {
                    rowsHtml = data.map((item, index) => {
                        const isSparepart = item.tipe_barang.toLowerCase() === 'sparepart';
                        const isPenunjang = item.tipe_barang.toLowerCase() === 'penunjang';
                        const badgeBg = isSparepart ? 'bg-gradient-primary' : (isPenunjang ? 'bg-gradient-info' : 'bg-gradient-success');
                        const rowNumber = fromIdx + index;

                        return `
                            <tr>
                                <td class="text-center text-xs font-weight-bold text-secondary" style="width: 5%;">
                                    ${rowNumber}
                                </td>
                                <td style="width: 22%;">
                                    <div class="d-flex align-items-center flex-wrap gap-2">
                                        <span class="badge badge-sm ${escapeHtml(item.action_badge)}">
                                            <i class="${escapeHtml(item.action_icon)} me-1"></i>${escapeHtml(item.action_label)}
                                        </span>
                                        <span class="text-xs font-weight-bold text-dark">
                                            ${escapeHtml(item.action_note)}
                                        </span>
                                    </div>
                                </td>
                                <td style="width: 25%;">
                                    <div class="d-flex px-2 py-1 align-items-center">
                                        <div class="avatar avatar-sm me-2 bg-gradient-light text-dark rounded-circle shadow-xs d-flex align-items-center justify-content-center">
                                            <i class="fas fa-box text-xs text-primary"></i>
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="mb-0 text-sm font-weight-bold text-dark">${escapeHtml(item.nama_barang)}</h6>
                                            <span class="text-xs text-muted">Kode Lama: ${escapeHtml(item.kode_lama)} | Satuan: ${escapeHtml(item.nama_satuan)}</span>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 15%;">
                                    <div class="d-flex align-items-center">
                                        <span class="badge badge-sm ${badgeBg} me-2">${escapeHtml(item.tipe_barang)}</span>
                                        <span class="text-xs font-weight-bold font-monospace text-dark bg-gray-100 px-2 py-1 rounded border">
                                            ${escapeHtml(item.kode_baru)}
                                        </span>
                                    </div>
                                </td>
                                <td style="width: 21%;">
                                    <span class="text-xs font-weight-bold text-dark">
                                        <i class="far fa-calendar-alt me-1 text-secondary"></i> ${escapeHtml(item.last_activity)}
                                        <span class="text-xxs text-muted font-weight-normal ms-1">(${escapeHtml(item.human_time)})</span>
                                    </span>
                                </td>
                                <td class="text-center" style="width: 12%;">
                                    <span class="badge badge-sm bg-gray-100 text-dark border font-weight-bold px-2 py-1">
                                        <i class="fas fa-user-circle me-1 text-primary"></i> ${escapeHtml(item.updated_by)}
                                    </span>
                                </td>
                            </tr>
                        `;
                    }).join('');
                }

                const paginationHtml = buildVendorPagination(page, lastPage, from, to, total);

                const existingTable = document.getElementById('table-vendor-activity-log');
                const tbody = document.getElementById('tbody-vendor-activity-log');
                const pagContainer = document.getElementById('vendor-pagination-container');

                if (existingTable && tbody && pagContainer) {
                    tbody.innerHTML = rowsHtml;
                    pagContainer.innerHTML = paginationHtml;
                    existingTable.style.opacity = '1';
                } else {
                    container.innerHTML = `
                        <div class="table-responsive p-0">
                            <table class="table align-items-center justify-content-center mb-0 table-hover" id="table-vendor-activity-log" style="transition: opacity 0.15s ease-in-out;">
                                <thead class="thead-light" style="background-color: #f8f9fa;">
                                    <tr>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 5%;">No</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 22%;">Aksi & Keterangan</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 25%;">Nama Barang</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Tipe & Kode Baru</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 21%;">Waktu Aktivitas</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Dilakukan Oleh</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-vendor-activity-log">
                                    ${rowsHtml}
                                </tbody>
                            </table>
                        </div>
                        <div id="vendor-pagination-container">
                            ${paginationHtml}
                        </div>
                    `;
                }
            }

            let barangMonthlyChartInstance = null;

            function onBarangTipeFilterChange() {
                loadBarangMonthlyChart();
                loadVendorActivityLog(1);
            }

            function reloadBarangActivitySection() {
                loadBarangMonthlyChart();
                loadVendorActivityLog(1);
            }

            function loadBarangMonthlyChart() {
                const yearSelect = document.getElementById('barang-chart-year');
                const tipeSelect = document.getElementById('vendor-tipe-filter');
                const peakBadge = document.getElementById('barang-peak-badge');
                const totalBadge = document.getElementById('barang-annual-total');

                const tahun = yearSelect ? yearSelect.value : (new Date().getFullYear());
                const tipe = tipeSelect ? tipeSelect.value : '';

                const params = new URLSearchParams({
                    tahun: tahun,
                    tipe: tipe
                });

                fetch(`{{ route('dashboard.get-barang-monthly-chart') }}?${params.toString()}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => res.json())
                .then(res => {
                    if (!res.success) return;

                    if (peakBadge) {
                        if (res.peak_month_count > 0) {
                            peakBadge.innerHTML = `<i class="fas fa-trophy me-1"></i>Paling Banyak: <b>${escapeHtml(res.peak_month_name)} (${res.peak_month_count} Barang)</b>`;
                        } else {
                            peakBadge.innerHTML = `<i class="fas fa-info-circle me-1"></i>Belum Ada Aktivitas di Tahun ${res.tahun}`;
                        }
                    }

                    if (totalBadge) {
                        totalBadge.textContent = `Total Perubahan ${res.tahun}: ${res.total_annual} Barang`;
                    }

                    renderBarangMonthlyChart(res);
                })
                .catch(err => {
                    console.error('Error load barang monthly chart:', err);
                });
            }

            function renderBarangMonthlyChart(data) {
                const canvas = document.getElementById('chart-barang-monthly');
                if (!canvas) return;

                if (typeof Chart === 'undefined') {
                    console.warn('Chart.js belum siap');
                    return;
                }

                const ctx = canvas.getContext('2d');

                if (barangMonthlyChartInstance) {
                    barangMonthlyChartInstance.destroy();
                }

                const tipeFilter = document.getElementById('vendor-tipe-filter')?.value || '';

                let datasets = [];

                if (tipeFilter === 'sparepart') {
                    datasets = [{
                        label: 'Sparepart',
                        data: data.sparepart,
                        backgroundColor: '#5e72e4',
                        borderColor: '#5e72e4',
                        borderRadius: 6,
                        maxBarThickness: 40
                    }];
                } else if (tipeFilter === 'penunjang') {
                    datasets = [{
                        label: 'Penunjang',
                        data: data.penunjang,
                        backgroundColor: '#11cdef',
                        borderColor: '#11cdef',
                        borderRadius: 6,
                        maxBarThickness: 40
                    }];
                } else if (tipeFilter === 'repair') {
                    datasets = [{
                        label: 'Repair',
                        data: data.repair,
                        backgroundColor: '#2dce89',
                        borderColor: '#2dce89',
                        borderRadius: 6,
                        maxBarThickness: 40
                    }];
                } else {
                    datasets = [
                        {
                            label: 'Sparepart',
                            data: data.sparepart,
                            backgroundColor: '#5e72e4',
                            borderRadius: 5,
                            maxBarThickness: 28
                        },
                        {
                            label: 'Penunjang',
                            data: data.penunjang,
                            backgroundColor: '#11cdef',
                            borderRadius: 5,
                            maxBarThickness: 28
                        },
                        {
                            label: 'Repair',
                            data: data.repair,
                            backgroundColor: '#2dce89',
                            borderRadius: 5,
                            maxBarThickness: 28
                        }
                    ];
                }

                barangMonthlyChartInstance = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: tipeFilter === '',
                                position: 'top',
                                labels: {
                                    boxWidth: 16,
                                    padding: 16,
                                    font: { size: 13, weight: '600' }
                                }
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                padding: 12,
                                titleFont: { size: 14, weight: 'bold' },
                                bodyFont: { size: 13 },
                                cornerRadius: 8
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    precision: 0,
                                    font: { size: 13, weight: '600' },
                                    color: '#495057',
                                    padding: 8
                                },
                                grid: {
                                    borderDash: [3, 3],
                                    drawBorder: false,
                                    color: '#e9ecef'
                                }
                            },
                            x: {
                                ticks: {
                                    font: { size: 13, weight: '600' },
                                    color: '#344767',
                                    padding: 8
                                },
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            }

            document.addEventListener('DOMContentLoaded', function() {
                togglePeriodFilter();
                loadBarangMonthlyChart();
                loadVendorActivityLog();
            });

            let tableBarangBelumLengkapExGambarSparepartDt = null;
            let tableBarangBelumLengkapExGambarPenunjangDt = null;

            function showBarangBelumLengkapExGambarModal() {
                var modal = new bootstrap.Modal(document.getElementById('barangBelumLengkapExGambarModal'));
                modal.show();

                let columns = [{
                        data: "kode_lama",
                        defaultContent: "-"
                    },
                    {
                        data: "kode_baru",
                        defaultContent: "-"
                    },
                    {
                        data: "nama",
                        defaultContent: "-"
                    },
                    {
                        data: "field_kosong",
                        defaultContent: "-",
                        render: function(data) {
                            if (!data) return '-';

                            return data.split(',').map(function(item) {
                                return '<span class="badge bg-gradient-info me-1 mb-1">' + item.trim() +
                                    '</span>';
                            }).join(' ');
                        }
                    }
                ];

                if (!tableBarangBelumLengkapExGambarSparepartDt) {
                    tableBarangBelumLengkapExGambarSparepartDt =
                        $('#table-barang-belum-lengkap-ex-gambar-sparepart').DataTable({
                            ajax: {
                                url: "{{ route('dashboard.get-barang-belum-lengkap-ex-gambar') }}",
                                data: {
                                    tipe: 'sparepart'
                                },
                                dataSrc: ""
                            },
                            columns: columns,
                            order: [
                                [2, 'asc']
                            ],
                            language: dataTableIndoLanguage()
                        });
                } else {
                    tableBarangBelumLengkapExGambarSparepartDt.ajax.reload(null, false);
                }

                if (!tableBarangBelumLengkapExGambarPenunjangDt) {
                    tableBarangBelumLengkapExGambarPenunjangDt =
                        $('#table-barang-belum-lengkap-ex-gambar-penunjang').DataTable({
                            ajax: {
                                url: "{{ route('dashboard.get-barang-belum-lengkap-ex-gambar') }}",
                                data: {
                                    tipe: 'penunjang'
                                },
                                dataSrc: ""
                            },
                            columns: columns,
                            order: [
                                [2, 'asc']
                            ],
                            language: dataTableIndoLanguage()
                        });
                } else {
                    tableBarangBelumLengkapExGambarPenunjangDt.ajax.reload(null, false);
                }

                $('#barangBelumLengkapExGambarModal')
                    .off('shown.bs.modal')
                    .on('shown.bs.modal', function() {
                        if (tableBarangBelumLengkapExGambarSparepartDt) {
                            tableBarangBelumLengkapExGambarSparepartDt.columns.adjust().draw();
                        }

                        if (tableBarangBelumLengkapExGambarPenunjangDt) {
                            tableBarangBelumLengkapExGambarPenunjangDt.columns.adjust().draw();
                        }
                    });

                $('#barangBelumLengkapExGambarModal button[data-bs-toggle="tab"]')
                    .off('shown.bs.tab')
                    .on('shown.bs.tab', function() {
                        if (tableBarangBelumLengkapExGambarSparepartDt) {
                            tableBarangBelumLengkapExGambarSparepartDt.columns.adjust().draw();
                        }

                        if (tableBarangBelumLengkapExGambarPenunjangDt) {
                            tableBarangBelumLengkapExGambarPenunjangDt.columns.adjust().draw();
                        }
                    });
            }

            let tableSpInSparepartDt = null;
            let tableSpInPenunjangDt = null;

            function showSpInModal() {
                var spInModal = new bootstrap.Modal(document.getElementById('spInModal'));
                spInModal.show();

                if (!tableSpInSparepartDt) {
                    tableSpInSparepartDt = $('#table-sp-in-sparepart').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-sparepart-in') }}",
                            data: {
                                tipe: 'sparepart'
                            },
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "no_lpb",
                                defaultContent: "-"
                            },
                            {
                                data: "supplier_name",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: dataTableIndoLanguage()
                    });

                    $('#spInModal').on('shown.bs.modal', function() {
                        tableSpInSparepartDt.columns.adjust().draw();
                    });
                } else {
                    tableSpInSparepartDt.ajax.reload(null, false);
                }

                if (!tableSpInPenunjangDt) {
                    tableSpInPenunjangDt = $('#table-sp-in-penunjang').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-sparepart-in') }}",
                            data: {
                                tipe: 'penunjang'
                            },
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "no_lpb",
                                defaultContent: "-"
                            },
                            {
                                data: "supplier_name",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: dataTableIndoLanguage()
                    });

                    $('#spInModal').on('shown.bs.modal', function() {
                        tableSpInPenunjangDt.columns.adjust().draw();
                    });
                } else {
                    tableSpInPenunjangDt.ajax.reload(null, false);
                }

                $('#spInModal button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
                    if (tableSpInSparepartDt) {
                        tableSpInSparepartDt.columns.adjust().draw();
                    }

                    if (tableSpInPenunjangDt) {
                        tableSpInPenunjangDt.columns.adjust().draw();
                    }
                });
            }

            function dataTableIndoLanguage() {
                return {
                    sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                    sProcessing: "Sedang memproses...",
                    sLengthMenu: "Tampilkan _MENU_ Data",
                    sZeroRecords: "Tidak ditemukan data yang sesuai",
                    sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    sInfoFiltered: "(disaring dari _MAX_ total data)",
                    sSearch: "Cari:",
                    oPaginate: {
                        sFirst: "Pertama",
                        sPrevious: "Sebelumnya",
                        sNext: "Selanjutnya",
                        sLast: "Terakhir"
                    }
                };
            }

            let tableSpOutSparepartDt = null;
            let tableSpOutPenunjangDt = null;

            function showSpOutModal() {
                var spOutModal = new bootstrap.Modal(document.getElementById('spOutModal'));
                spOutModal.show();

                if (!tableSpOutSparepartDt) {
                    tableSpOutSparepartDt = $('#table-sp-out-sparepart').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-sparepart-out') }}",
                            data: {
                                tipe: 'sparepart'
                            },
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            },
                            {
                                data: "keperluan_name",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableSpOutSparepartDt.ajax.reload(null, false);
                }

                if (!tableSpOutPenunjangDt) {
                    tableSpOutPenunjangDt = $('#table-sp-out-penunjang').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-sparepart-out') }}",
                            data: {
                                tipe: 'penunjang'
                            },
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            },
                            {
                                data: "keperluan_name",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableSpOutPenunjangDt.ajax.reload(null, false);
                }

                $('#spOutModal').off('shown.bs.modal').on('shown.bs.modal', function() {
                    if (tableSpOutSparepartDt) {
                        tableSpOutSparepartDt.columns.adjust().draw();
                    }

                    if (tableSpOutPenunjangDt) {
                        tableSpOutPenunjangDt.columns.adjust().draw();
                    }
                });

                $('#spOutModal button[data-bs-toggle="tab"]').off('shown.bs.tab').on('shown.bs.tab', function() {
                    if (tableSpOutSparepartDt) {
                        tableSpOutSparepartDt.columns.adjust().draw();
                    }

                    if (tableSpOutPenunjangDt) {
                        tableSpOutPenunjangDt.columns.adjust().draw();
                    }
                });
            }

            let tableMinStokSparepart = null;
            let tableMinStokPenunjang = null;

            function showMinStokModal() {
                $('#minStokModal').modal('show');

                if (!tableMinStokSparepart) {
                    tableMinStokSparepart = $('#table-min-stok-sparepart').DataTable({
                        processing: true,
                        serverSide: false,
                        ajax: {
                            url: "{{ route('dashboard.get-min-stok') }}",
                            data: {
                                tipe: 'sparepart'
                            }
                        },
                        columns: [{
                                data: 'kode_lama'
                            },
                            {
                                data: 'kode_baru'
                            },
                            {
                                data: 'nama'
                            },
                            {
                                data: 'stok'
                            },
                            {
                                data: 'min_stok'
                            },
                            {
                                data: 'satuan_name'
                            },
                        ]
                    });
                } else {
                    tableMinStokSparepart.ajax.reload();
                }

                if (!tableMinStokPenunjang) {
                    tableMinStokPenunjang = $('#table-min-stok-penunjang').DataTable({
                        processing: true,
                        serverSide: false,
                        ajax: {
                            url: "{{ route('dashboard.get-min-stok') }}",
                            data: {
                                tipe: 'penunjang'
                            }
                        },
                        columns: [{
                                data: 'kode_lama'
                            },
                            {
                                data: 'kode_baru'
                            },
                            {
                                data: 'nama'
                            },
                            {
                                data: 'stok'
                            },
                            {
                                data: 'min_stok'
                            },
                            {
                                data: 'satuan_name'
                            },
                        ]
                    });
                } else {
                    tableMinStokPenunjang.ajax.reload();
                }
            }

            let tableDupLabelSparepartDt = null;
            let tableDupLabelPenunjangDt = null;

            function showDuplicateLabelModal() {
                var dupLabelModal = new bootstrap.Modal(document.getElementById('duplicateLabelModal'));
                dupLabelModal.show();

                const columnsDupLabel = [{
                        data: "kode_lama",
                        defaultContent: "-"
                    },
                    {
                        data: "kode_baru",
                        defaultContent: "-"
                    },
                    {
                        data: "nama",
                        defaultContent: "-"
                    },
                    {
                        data: "nama_label",
                        defaultContent: "-",
                        render: function(data) {
                            return '<span class="text-danger font-weight-bold">' + (data || '-') + '</span>';
                        }
                    },
                    {
                        data: "kategori",
                        defaultContent: "-"
                    },
                    {
                        data: "stok",
                        defaultContent: "0",
                        render: function(data) {
                            return parseFloat(data) || 0;
                        }
                    },
                    {
                        data: "satuan",
                        defaultContent: "-"
                    }
                ];

                if (!tableDupLabelSparepartDt) {
                    tableDupLabelSparepartDt = $('#table-dup-label-sparepart').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-duplicate-label') }}",
                            data: {
                                tipe: 'sparepart'
                            },
                            dataSrc: ""
                        },
                        columns: columnsDupLabel,
                        order: [
                            [3, 'asc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableDupLabelSparepartDt.ajax.reload(null, false);
                }

                if (!tableDupLabelPenunjangDt) {
                    tableDupLabelPenunjangDt = $('#table-dup-label-penunjang').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-duplicate-label') }}",
                            data: {
                                tipe: 'penunjang'
                            },
                            dataSrc: ""
                        },
                        columns: columnsDupLabel,
                        order: [
                            [3, 'asc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableDupLabelPenunjangDt.ajax.reload(null, false);
                }

                $('#duplicateLabelModal').off('shown.bs.modal').on('shown.bs.modal', function() {
                    if (tableDupLabelSparepartDt) tableDupLabelSparepartDt.columns.adjust().draw();
                    if (tableDupLabelPenunjangDt) tableDupLabelPenunjangDt.columns.adjust().draw();
                });

                $('#duplicateLabelModal button[data-bs-toggle="tab"]').off('shown.bs.tab').on('shown.bs.tab', function() {
                    if (tableDupLabelSparepartDt) tableDupLabelSparepartDt.columns.adjust().draw();
                    if (tableDupLabelPenunjangDt) tableDupLabelPenunjangDt.columns.adjust().draw();
                });
            }

            let tableLabelKategoriMismatchSparepartDt = null;
            let tableLabelKategoriMismatchPenunjangDt = null;

            function showLabelKategoriMismatchModal() {
                var labelKategoriMismatchModal = new bootstrap.Modal(document.getElementById('labelKategoriMismatchModal'));
                labelKategoriMismatchModal.show();

                const columnsMismatch = [{
                        data: "kode_lama",
                        defaultContent: "-"
                    },
                    {
                        data: "kode_baru",
                        defaultContent: "-"
                    },
                    {
                        data: "nama",
                        defaultContent: "-"
                    },
                    {
                        data: "nama_label",
                        defaultContent: "-",
                        render: function(data) {
                            return '<span class="text-danger font-weight-bold">' + (data || '-') + '</span>';
                        }
                    },
                    {
                        data: "kategori",
                        defaultContent: "-"
                    },
                    {
                        data: "kode_kategori_expected",
                        defaultContent: "-",
                        render: function(data) {
                            return '<span class="text-success font-weight-bold">' + (data || '-') + '</span>';
                        }
                    },
                    {
                        data: "stok",
                        defaultContent: "0",
                        render: function(data) {
                            return parseFloat(data) || 0;
                        }
                    },
                    {
                        data: "satuan",
                        defaultContent: "-"
                    }
                ];

                if (!tableLabelKategoriMismatchSparepartDt) {
                    tableLabelKategoriMismatchSparepartDt = $('#table-label-kategori-mismatch-sparepart').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-label-kategori-mismatch') }}",
                            data: {
                                tipe: 'sparepart'
                            },
                            dataSrc: ""
                        },
                        columns: columnsMismatch,
                        order: [
                            [4, 'asc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableLabelKategoriMismatchSparepartDt.ajax.reload(null, false);
                }

                if (!tableLabelKategoriMismatchPenunjangDt) {
                    tableLabelKategoriMismatchPenunjangDt = $('#table-label-kategori-mismatch-penunjang').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-label-kategori-mismatch') }}",
                            data: {
                                tipe: 'penunjang'
                            },
                            dataSrc: ""
                        },
                        columns: columnsMismatch,
                        order: [
                            [4, 'asc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableLabelKategoriMismatchPenunjangDt.ajax.reload(null, false);
                }

                $('#labelKategoriMismatchModal').off('shown.bs.modal').on('shown.bs.modal', function() {
                    if (tableLabelKategoriMismatchSparepartDt) {
                        tableLabelKategoriMismatchSparepartDt.columns.adjust().draw();
                    }

                    if (tableLabelKategoriMismatchPenunjangDt) {
                        tableLabelKategoriMismatchPenunjangDt.columns.adjust().draw();
                    }
                });

                $('#labelKategoriMismatchModal button[data-bs-toggle="tab"]')
                    .off('shown.bs.tab')
                    .on('shown.bs.tab', function(e) {

                        let target = $(e.target).attr('data-bs-target');

                        if (target === '#label-kategori-mismatch-sparepart-pane') {
                            if (tableLabelKategoriMismatchSparepartDt) {
                                tableLabelKategoriMismatchSparepartDt.ajax.reload(null, false);
                                setTimeout(function() {
                                    tableLabelKategoriMismatchSparepartDt.columns.adjust().draw();
                                }, 200);
                            }
                        }

                        if (target === '#label-kategori-mismatch-penunjang-pane') {
                            if (tableLabelKategoriMismatchPenunjangDt) {
                                tableLabelKategoriMismatchPenunjangDt.ajax.reload(null, false);
                                setTimeout(function() {
                                    tableLabelKategoriMismatchPenunjangDt.columns.adjust().draw();
                                }, 200);
                            }
                        }
                    });
            }

            let tableStokNolSparepartDt = null;
            let tableStokNolPenunjangDt = null;

            function showStokNolModal() {
                var stokNolModal = new bootstrap.Modal(document.getElementById('stokNolModal'));
                stokNolModal.show();

                let columns = [{
                        data: null,
                        orderable: false,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return '<input type="checkbox" class="check-stok-nol" value="' + row.kode_baru +
                                '" style="cursor:pointer;">';
                        }
                    },
                    {
                        data: "kode_lama",
                        defaultContent: "-"
                    },
                    {
                        data: "kode_baru",
                        defaultContent: "-"
                    },
                    {
                        data: "nama",
                        defaultContent: "-"
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            return '<span class="text-danger font-weight-bold">' + (parseFloat(row.stok) || '0') +
                                '</span>';
                        }
                    },
                    {
                        data: "satuan",
                        defaultContent: "-"
                    }
                ];

                if (!tableStokNolSparepartDt) {
                    tableStokNolSparepartDt = $('#table-stok-nol-sparepart').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-stok-nol') }}",
                            data: {
                                tipe: 'sparepart'
                            },
                            dataSrc: ""
                        },
                        columns: columns,
                        responsive: true,
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableStokNolSparepartDt.ajax.reload(null, false);
                }

                if (!tableStokNolPenunjangDt) {
                    tableStokNolPenunjangDt = $('#table-stok-nol-penunjang').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-stok-nol') }}",
                            data: {
                                tipe: 'penunjang'
                            },
                            dataSrc: ""
                        },
                        columns: columns,
                        responsive: true,
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableStokNolPenunjangDt.ajax.reload(null, false);
                }

                adjustModalTables('stokNolModal', [
                    tableStokNolSparepartDt,
                    tableStokNolPenunjangDt
                ]);

                $('#check-all-stok-nol-sparepart').off('click').on('click', function() {
                    tableStokNolSparepartDt.$('.check-stok-nol').prop('checked', this.checked);
                });

                $('#check-all-stok-nol-penunjang').off('click').on('click', function() {
                    tableStokNolPenunjangDt.$('.check-stok-nol').prop('checked', this.checked);
                });

                $('#table-stok-nol-sparepart tbody').off('change', '.check-stok-nol').on('change', '.check-stok-nol',
                    function() {
                        syncCheckAll(tableStokNolSparepartDt, '#check-all-stok-nol-sparepart');
                    });

                $('#table-stok-nol-penunjang tbody').off('change', '.check-stok-nol').on('change', '.check-stok-nol',
                    function() {
                        syncCheckAll(tableStokNolPenunjangDt, '#check-all-stok-nol-penunjang');
                    });

                $('#check-all-stok-nol-sparepart').prop('checked', false);
                $('#check-all-stok-nol-penunjang').prop('checked', false);

                if (tableStokNolSparepartDt) {
                    tableStokNolSparepartDt.$('.check-stok-nol').prop('checked', false);
                }

                if (tableStokNolPenunjangDt) {
                    tableStokNolPenunjangDt.$('.check-stok-nol').prop('checked', false);
                }
            }

            function syncCheckAll(table, checkAllSelector) {
                let total = table.$('.check-stok-nol').length;
                let checked = table.$('.check-stok-nol:checked').length;

                $(checkAllSelector).prop('checked', total > 0 && total === checked);
            }

            function nonaktifkanSelected() {
                let selectedIds = [];

                if (tableStokNolSparepartDt) {
                    tableStokNolSparepartDt.$('.check-stok-nol:checked').each(function() {
                        selectedIds.push($(this).val());
                    });
                }

                if (tableStokNolPenunjangDt) {
                    tableStokNolPenunjangDt.$('.check-stok-nol:checked').each(function() {
                        selectedIds.push($(this).val());
                    });
                }

                selectedIds = [...new Set(selectedIds)];

                if (selectedIds.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Pilih minimal satu barang untuk dinonaktifkan!',
                    });
                    return;
                }

                Swal.fire({
                    title: 'Konfirmasi',
                    text: "Anda yakin ingin menonaktifkan " + selectedIds.length + " barang ini?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Nonaktifkan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch("{{ route('dashboard.nonaktifkan-barang') }}", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json",
                                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                                    "Accept": "application/json"
                                },
                                body: JSON.stringify({
                                    ids: selectedIds
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire(
                                        'Berhasil!',
                                        data.message || 'Barang berhasil dinonaktifkan.',
                                        'success'
                                    ).then(() => {
                                        if (tableStokNolSparepartDt) {
                                            tableStokNolSparepartDt.ajax.reload(null, false);
                                        }

                                        if (tableStokNolPenunjangDt) {
                                            tableStokNolPenunjangDt.ajax.reload(null, false);
                                        }

                                        $('#check-all-stok-nol-sparepart').prop('checked', false);
                                        $('#check-all-stok-nol-penunjang').prop('checked', false);
                                    });
                                } else {
                                    Swal.fire('Gagal!', data.message || 'Terjadi kesalahan.', 'error');
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire('Gagal!', 'Terjadi kesalahan sistem.', 'error');
                            });
                    }
                });
            }

            let tableBarangBelumLengkapSparepartDt = null;
            let tableBarangBelumLengkapPenunjangDt = null;

            function showBarangBelumLengkapModal() {
                var modal = new bootstrap.Modal(document.getElementById('barangBelumLengkapModal'));
                modal.show();

                $('#barangBelumLengkapModal button[data-bs-target="#barang-belum-lengkap-sparepart-pane"]').tab('show');

                const columnsBarangBelumLengkap = [{
                        data: "kode_lama",
                        defaultContent: "-"
                    },
                    {
                        data: "kode_baru",
                        defaultContent: "-"
                    },
                    {
                        data: "nama",
                        defaultContent: "-"
                    },
                    {
                        data: "field_kosong",
                        defaultContent: "-",
                        render: function(data) {
                            if (!data) return '-';

                            return data.split(',').map(function(item) {
                                return '<span class="badge bg-gradient-info me-1 mb-1">' + item.trim() +
                                    '</span>';
                            }).join(' ');
                        }
                    }
                ];

                if (!tableBarangBelumLengkapSparepartDt) {
                    tableBarangBelumLengkapSparepartDt = $('#table-barang-belum-lengkap-sparepart').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-barang-belum-lengkap') }}",
                            data: {
                                tipe: 'sparepart'
                            },
                            dataSrc: ""
                        },
                        columns: columnsBarangBelumLengkap,
                        order: [
                            [2, 'asc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableBarangBelumLengkapSparepartDt.ajax.reload(null, false);
                }

                if (!tableBarangBelumLengkapPenunjangDt) {
                    tableBarangBelumLengkapPenunjangDt = $('#table-barang-belum-lengkap-penunjang').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-barang-belum-lengkap') }}",
                            data: {
                                tipe: 'penunjang'
                            },
                            dataSrc: ""
                        },
                        columns: columnsBarangBelumLengkap,
                        order: [
                            [2, 'asc']
                        ],
                        language: dataTableIndoLanguage()
                    });
                } else {
                    tableBarangBelumLengkapPenunjangDt.ajax.reload(null, false);
                }

                $('#barangBelumLengkapModal').off('shown.bs.modal').on('shown.bs.modal', function() {
                    if (tableBarangBelumLengkapSparepartDt) {
                        tableBarangBelumLengkapSparepartDt.columns.adjust().draw();
                    }

                    if (tableBarangBelumLengkapPenunjangDt) {
                        tableBarangBelumLengkapPenunjangDt.columns.adjust().draw();
                    }
                });

                $('#barangBelumLengkapModal button[data-bs-toggle="tab"]')
                    .off('shown.bs.tab')
                    .on('shown.bs.tab', function(e) {
                        let target = $(e.target).attr('data-bs-target');

                        if (target === '#barang-belum-lengkap-sparepart-pane') {
                            if (tableBarangBelumLengkapSparepartDt) {
                                tableBarangBelumLengkapSparepartDt.ajax.reload(null, false);

                                setTimeout(function() {
                                    tableBarangBelumLengkapSparepartDt.columns.adjust().draw();
                                }, 200);
                            }
                        }

                        if (target === '#barang-belum-lengkap-penunjang-pane') {
                            if (tableBarangBelumLengkapPenunjangDt) {
                                tableBarangBelumLengkapPenunjangDt.ajax.reload(null, false);

                                setTimeout(function() {
                                    tableBarangBelumLengkapPenunjangDt.columns.adjust().draw();
                                }, 200);
                            }
                        }
                    });
            }

            let tableSpOutManualDt = null;
            let tableSpOutZebraDt = null;

            function showSpOutManualModal() {
                var modal = new bootstrap.Modal(document.getElementById('spOutManualModal'));
                modal.show();

                if (!tableSpOutManualDt) {
                    tableSpOutManualDt = $('#table-sp-out-manual').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-sparepart-out-manual') }}",
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            },
                            {
                                data: "keperluan",
                                defaultContent: "-"
                            },
                            {
                                data: "input_method",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: {
                            sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                            sProcessing: "Sedang memproses...",
                            sLengthMenu: "Tampilkan _MENU_ Data",
                            sZeroRecords: "Tidak ditemukan data yang sesuai",
                            sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                            sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                            sInfoFiltered: "(disaring dari _MAX_ total data)",
                            sSearch: "Cari:",
                            oPaginate: {
                                sFirst: "Pertama",
                                sPrevious: "Sebelumnya",
                                sNext: "Selanjutnya",
                                sLast: "Terakhir"
                            }
                        }
                    });
                    $('#spOutManualModal').on('shown.bs.modal', function() {
                        tableSpOutManualDt.columns.adjust().draw();
                    });
                } else {
                    tableSpOutManualDt.ajax.reload(null, false);
                }
            }

            function showSpOutZebraModal() {
                var modal = new bootstrap.Modal(document.getElementById('spOutZebraModal'));
                modal.show();

                if (!tableSpOutZebraDt) {
                    tableSpOutZebraDt = $('#table-sp-out-zebra').DataTable({
                        ajax: {
                            url: "{{ route('dashboard.get-sparepart-out-zebra') }}",
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            },
                            {
                                data: "keperluan",
                                defaultContent: "-"
                            },
                            {
                                data: "input_method",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: {
                            sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                            sProcessing: "Sedang memproses...",
                            sLengthMenu: "Tampilkan _MENU_ Data",
                            sZeroRecords: "Tidak ditemukan data yang sesuai",
                            sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                            sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                            sInfoFiltered: "(disaring dari _MAX_ total data)",
                            sSearch: "Cari:",
                            oPaginate: {
                                sFirst: "Pertama",
                                sPrevious: "Sebelumnya",
                                sNext: "Selanjutnya",
                                sLast: "Terakhir"
                            }
                        }
                    });
                    $('#spOutZebraModal').on('shown.bs.modal', function() {
                        tableSpOutZebraDt.columns.adjust().draw();
                    });
                } else {
                    tableSpOutZebraDt.ajax.reload(null, false);
                }
            }

            let tablePnOutManualDt = null;
            let tablePnOutZebraDt = null;

            function showOutManualModalpn() {
                var modal = new bootstrap.Modal(document.getElementById('OutManualModalpn'));
                modal.show();

                if (!tablePnOutManualDt) {
                    tablePnOutManualDt = $('#table-pn-out-manual').DataTable({
                        ajax: {
                            url: "{{ route('get-penunjang-out-manual') }}",
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            },
                            {
                                data: "keperluan",
                                defaultContent: "-"
                            },
                            {
                                data: "input_method",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: dataTableIndoLanguage()
                    });

                    $('#OutManualModalpn').off('shown.bs.modal').on('shown.bs.modal', function() {
                        tablePnOutManualDt.columns.adjust().draw();
                    });
                } else {
                    tablePnOutManualDt.ajax.reload(null, false);
                }
            }

            function showOutZebraModalpn() {
                var modal = new bootstrap.Modal(document.getElementById('OutZebraModalpn'));
                modal.show();

                if (!tablePnOutZebraDt) {
                    tablePnOutZebraDt = $('#table-pn-out-zebra').DataTable({
                        ajax: {
                            url: "{{ route('get-penunjang-out-zebra') }}",
                            dataSrc: ""
                        },
                        columns: [{
                                data: "id_transaksi",
                                defaultContent: "-"
                            },
                            {
                                data: "tanggal",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_lama",
                                defaultContent: "-"
                            },
                            {
                                data: "kode_baru",
                                defaultContent: "-"
                            },
                            {
                                data: "nama_barang",
                                defaultContent: "-"
                            },
                            {
                                data: "qty",
                                defaultContent: "0",
                                render: function(data) {
                                    return parseFloat(data) || 0;
                                }
                            },
                            {
                                data: "satuan",
                                defaultContent: "-"
                            },
                            {
                                data: "keperluan",
                                defaultContent: "-"
                            },
                            {
                                data: "input_method",
                                defaultContent: "-"
                            }
                        ],
                        order: [
                            [1, 'desc']
                        ],
                        language: dataTableIndoLanguage()
                    });

                    $('#OutZebraModalpn').off('shown.bs.modal').on('shown.bs.modal', function() {
                        tablePnOutZebraDt.columns.adjust().draw();
                    });
                } else {
                    tablePnOutZebraDt.ajax.reload(null, false);
                }
            }
        </script>
    @endpush