accounting_dev_v2/application/views/customers/layout.php

<link rel="stylesheet" href="<?=base_url('assets/css/invoices-professional.css').'?v='.filemtime(FCPATH.'assets/css/invoices-professional.css')?>">
<section class="invoice-workspace">
    <header class="invoice-hero">
        <div><span>SIKLUS PENJUALAN</span><h2>Customer</h2><p>Kelola identitas, termin pembayaran, dan kebijakan kredit customer.</p></div>
    </header>
    <?php $this->load->view('sales/_section_nav',array('sales_section'=>'customer','sales_summary'=>$summary)); ?>
<div class="container-fluid px-0">
    <div class="card modern-card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">

            <div class="d-flex justify-content-between mb-3">
                <h5>Data Customers</h5>
                <button class="btn btn-warning btn-add">Tambah Customer</button>
            </div>

            <div class="table-responsive">
                <table id="tableCustomers" class="table modern-table align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Alamat</th>
                            <th>Telp</th>
                            <th>Email</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>

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

<!-- MODAL -->
<div class="modal fade" id="modalCustomer">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">

<div class="modal-header bg-warning text-white">
    <h5 class="modal-title">Customer</h5>
    <button class="btn-close" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">

    <input type="hidden" id="id">

    <label>Nama</label>
    <input type="text" id="nama" class="form-control">

    <label class="mt-2">Alamat</label>
    <textarea id="alamat" class="form-control"></textarea>

    <label class="mt-2">Telp</label>
    <input type="text" id="telp" class="form-control">

    <label class="mt-2">Email</label>
    <input type="email" id="email" class="form-control">
    <div class="row g-2 mt-1"><div class="col-md-6"><label class="form-label">Credit Limit</label><input type="number" id="credit_limit" class="form-control" min="0" step="0.01"></div><div class="col-md-6"><label class="form-label">Termin (hari)</label><input type="number" id="payment_term_days" class="form-control" min="0" value="30"></div></div><label class="form-label mt-2">NPWP/Tax Number</label><input type="text" id="tax_number" class="form-control"><div class="form-check mt-2"><input type="checkbox" id="is_credit_blocked" class="form-check-input"><label class="form-check-label" for="is_credit_blocked">Blokir transaksi kredit</label></div>

</div>

<div class="modal-footer">
    <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
    <button class="btn btn-warning" id="btnSimpan">Simpan</button>
</div>

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

<!-- CARA MANGGIL TABLE PERTAMA -->
<script>
$(function(){

    let action = 'add';

    let table = $('#tableCustomers').DataTable({
        processing:true,
        serverSide:true,
        order:[[1,'asc']],
        ajax:{
            url:"<?= base_url('customers/get_data'); ?>",
            type:"POST"
        }
    });

    function resetForm(){
        $('#id').val('');
        $('#nama').val('');
        $('#alamat').val('');
        $('#telp').val('');
        $('#email').val('');
        $('#credit_limit').val(0); $('#payment_term_days').val(30); $('#tax_number').val(''); $('#is_credit_blocked').prop('checked',false);
    }

    // ADD
    $('.btn-add').click(function(){
        resetForm();
        action = 'add';
        $('#modalCustomer').modal('show');
    });

    // EDIT
    $(document).on('click','.btn-edit',function(){
        let id = $(this).data('id');

        $.get("<?= base_url('customers/detail/'); ?>"+id,function(res){
            $('#id').val(res.id);
            $('#nama').val(res.nama);
            $('#alamat').val(res.alamat);
            $('#telp').val(res.telp);
            $('#email').val(res.email);
            $('#credit_limit').val(res.credit_limit); $('#payment_term_days').val(res.payment_term_days); $('#tax_number').val(res.tax_number); $('#is_credit_blocked').prop('checked',res.is_credit_blocked==1);

            action = 'edit';
            $('#modalCustomer').modal('show');
        },'json');
    });

    // SAVE
    $('#btnSimpan').click(function(){

        let data = {
            id: $('#id').val(),
            nama: $('#nama').val(),
            alamat: $('#alamat').val(),
            telp: $('#telp').val(),
            email: $('#email').val(), credit_limit: $('#credit_limit').val(), payment_term_days: $('#payment_term_days').val(), tax_number: $('#tax_number').val(), is_credit_blocked: $('#is_credit_blocked').is(':checked') ? 1 : 0
        };

        if(!data.nama){
            Swal.fire('Warning','Nama wajib diisi','warning');
            return;
        }

        let url = action === 'add'
            ? "<?= base_url('customers/save'); ?>"
            : "<?= base_url('customers/update'); ?>";

        $.post(url,data,function(res){

            if(res.status){
                $('#modalCustomer').modal('hide');
                table.ajax.reload(null,false);
                Swal.fire('Sukses',res.message,'success');
            } else {
                Swal.fire('Error',res.message,'error');
            }

        },'json');
    });

    // DELETE
    $(document).on('click','.btn-delete',function(){
        let id = $(this).data('id');

        Swal.fire({
            title:'Hapus data?',
            icon:'warning',
            showCancelButton:true
        }).then(r=>{
            if(r.isConfirmed){
                $.get("<?= base_url('customers/delete/'); ?>"+id,function(res){
                    table.ajax.reload(null,false);
                    Swal.fire('Sukses',res.message,'success');
                },'json');
            }
        });
    });

});
</script>