FileMgr

✏️ /home/mien4214/public_html/eorder/application/views/admin/v_pelanggan.php

✕ Tutup

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Data Pelanggan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="<?php echo base_url().'assets/img/logo_nyi.png'?>">

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
        }

/* HEADER & LAYOUT */
        .page-header-white {
            background: #ffffff;
            padding: 15px 25px;
            border-radius: 12px;
            box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 25px; margin-top: 20px;
        }
        .header-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--text-dark); }
        .dash-meta-white {
            font-size: 13px; font-weight: 600; color: #ffffff;
            background: var(--primary); padding: 8px 15px; border-radius: 6px;
            display: flex; align-items: center;
        }
        
        /* FILTER & SEARCH (Revisi: Flexbox Space Between) */
        .filter-section {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 20px; gap: 15px; flex-wrap: wrap;
        }
        
        .search-input-wrapper { position: relative; width: 300px; }
        .search-input-wrapper i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-gray); }
        .search-input-wrapper input {
            width: 100%; padding: 10px 10px 10px 35px;
            border: 1px solid #e2e5ec; border-radius: 8px; outline: none; font-size: 14px;
        }
        .search-input-wrapper input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1);
        }

.card-box {
            background: #fff; border-radius: 12px;
            box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02); padding: 20px;
        }

/* TABLE MODERN */
        .table-modern { width: 100%; border-collapse: separate; border-spacing: 0; }
        .table-modern thead th {
            text-align: left; padding: 12px 15px; color: #b5b5c3;
            font-size: 12px; font-weight: 600; text-transform: uppercase;
            border-bottom: 1px solid #ebedf3; cursor: pointer; user-select: none;
        }
        .table-modern thead th:hover { color: var(--primary); }
        .table-modern tbody td { padding: 16px 15px; border-bottom: 1px solid #f3f6f9; vertical-align: middle; font-size: 14px; font-weight: 500; }
        .table-modern tbody tr:hover td { background-color: #f9f9fc; }
        .img-profile-circle { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #ebedf3; }
        
        /* ACTION BUTTONS */
        .btn-icon-action { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: none; margin-right: 5px; transition: 0.2s; }
        .btn-soft-primary { background: #fee8e6; color: #f44336; }
        .btn-soft-primary:hover { background: #F44336; color: #fff; }

/* --- STYLES KHUSUS MODAL EDIT (NUANSA MERAH) --- */
        .modal-content { border-radius: 12px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
        .modal-header { padding: 20px 25px; border-bottom: 1px solid #f0f2f5; display: flex; align-items: center; justify-content: space-between; }
        
        /* Judul Modal Merah */
        .modal-title { font-weight: 700; font-size: 18px; color: var(--text-dark); display: flex; align-items: center; }
        .modal-title i { margin-right: 10px; color: var(--primary); } 
        
        .close-modal { background: none; border: none; font-size: 24px; color: #b5b5c3; cursor: pointer; }
        
        .modal-body { padding: 25px; }
        
        .form-group-edit { margin-bottom: 20px; }
        .label-edit { display: block; font-size: 13px; font-weight: 700; color: #5e6278; margin-bottom: 8px; }
        
        /* Input Focus Merah */
        .input-edit {
            width: 100%; padding: 12px 15px; border-radius: 8px;
            border: 1px solid var(--border-input); font-size: 14px; color: #181c32;
            transition: all 0.2s; outline: none;
        }
        .input-edit:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1); }
        .input-edit::placeholder { color: #b5b5c3; }
        
        select.input-edit { appearance: none; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%237e8299"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 15px center/12px; background-color: #fff; }

.modal-footer-custom {
            padding: 20px 25px; border-top: 1px solid #f0f2f5;
            display: flex; justify-content: space-between; align-items: center;
        }

/* Button Styles Merah */
        .btn-delete-link {
            background: none; border: none; color: #b5b5c3; font-weight: 600; font-size: 14px;
            display: flex; align-items: center; cursor: pointer; padding: 0; transition: color 0.2s;
        }
        .btn-delete-link i { margin-right: 8px; font-size: 16px; }
        .btn-delete-link:hover { color: var(--primary); text-decoration: none; }

.btn-cancel {
            background: #e4e6ef; color: #5e6278; font-weight: 700; padding: 12px 24px;
            border-radius: 8px; border: none; margin-right: 10px; font-size: 13px;
        }
        .btn-cancel:hover { background: #d1d3e0; }

.btn-update {
            background: var(--primary); /* TOMBOL MERAH */
            color: #fff; font-weight: 700; padding: 12px 24px;
            border-radius: 8px; border: none; font-size: 13px;
            box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
            transition: all 0.2s;
        }
        .btn-update:hover { background: var(--primary-dark); box-shadow: 0 6px 15px rgba(244, 67, 54, 0.3); }
        
        /* Helper */
        .fa-sort, .fa-sort-asc, .fa-sort-desc { float: right; margin-top: 3px; }
        .pagination-modern-wrapper { display: flex; gap: 5px; justify-content: flex-end; margin-top: 20px; }
        .page-link-modern { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 5px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #7e8299; text-decoration: none !important; transition: all 0.2s; cursor: pointer; background: #fff; border: 1px solid #ebedf3; }
        .page-link-modern:hover { background-color: #f3f6f9; color: #3699ff; }
        .page-link-modern.active { background-color: var(--primary); color: #ffffff; border-color: var(--primary); }

</style>
</head>
<body class="menubar-hoverable header-fixed">

<?php $this->load->view('admin/v_header'); ?>

<div id="content">
            <section>
                <div class="section-body" style="margin: 0 auto;">
                    
                    <div class="page-header-white">
                       <h1 class="header-title">👨🏻‍💼 Data Pelanggan</h1>
                        <div class="dash-meta-white"> 
                            📅 &nbsp; <?php echo date('d M Y'); ?> <span style="margin:0 10px; color:#ddd;">|</span> 🕒 &nbsp; <span id="clock">--:--</span>
                        </div>
                    </div>
                    
                    <?php echo $this->session->flashdata('msg');?>

<div class="card-box">
                        
                        <div class="filter-section">
                            
                            <div style="font-size: 14px; color: #7e8299; font-weight: 500;">
                                Total: <span id="total_records" style="font-weight: 700; color: var(--primary); font-size: 16px;">0</span> Pelanggan
                            </div>

<div class="table-responsive">
                            <table class="table-modern">
                                <thead>
                                    <tr>
                                        <th width="60">Photo</th>
                                        <th width="200" onclick="sortData('plg_nama')" class="sortable">
                                            Nama <i class="fa fa-sort" id="sort-icon-plg_nama"></i>
                                        </th>
                                        <th>Gender</th>
                                        <th>Alamat</th>
                                        <th>Kontak</th>
                                        <th onclick="sortData('plg_register')" class="sortable">
                                            Register <i class="fa fa-sort" id="sort-icon-plg_register"></i>
                                        </th>
                                        <th class="text-right">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="data_container">
                                    <tr><td colspan="7" class="text-center">Mengambil data...</td></tr>
                                </tbody>
                            </table>
                        </div>

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

<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width: 800px;">
            <div class="modal-content">
                
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-pencil-square-o"></i> Edit Pelanggan</h4>
                    <button type="button" class="close-modal" data-dismiss="modal">Ã—</button>
                </div>

<form action="<?php echo base_url().'admin/pelanggan/update_pelanggan'?>" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <input type="hidden" name="kode" id="edit_id">
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group-edit">
                                    <label class="label-edit">Nama Lengkap</label>
                                    <input type="text" class="input-edit" name="nama" id="edit_nama" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group-edit">
                                    <label class="label-edit">Kontak (HP)</label>
                                    <input type="text" class="input-edit" name="notelp" id="edit_notelp" required>
                                </div>
                            </div>
                        </div>

<div class="row">
                            <div class="col-md-6">
                                <div class="form-group-edit">
                                    <label class="label-edit">Jenis Kelamin</label>
                                    <select class="input-edit" name="jenkel" id="edit_jenkel">
                                        <option value="L">Laki-Laki</option>
                                        <option value="P">Perempuan</option>
                                    </select>
                                </div>
                                
                                <div class="alert alert-info" style="background-color: #ffe2e5; border-color: #ffcdd2; color: #c62828; padding: 10px; font-size: 12px; margin-top: 20px;">
                                    <i class="fa fa-info-circle"></i> Pastikan data kontak aktif untuk keperluan notifikasi pesanan.
                                </div>
                            </div>

<div class="col-md-6">
                                <div class="form-group-edit" style="height: 100%;">
                                    <label class="label-edit">Alamat Lengkap</label>
                                    <textarea class="input-edit" name="alamat" id="edit_alamat" rows="5" style="height: 130px; resize: none;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="modal-footer-custom">
                        <button type="button" class="btn-delete-link" id="btn_trigger_delete">
                            <i class="fa fa-trash"></i> Hapus Pelanggan
                        </button>

<div>
                            <button type="button" class="btn-cancel" data-dismiss="modal">BATAL</button>
                            <button type="submit" class="btn-update">UPDATE DATA</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<div class="modal fade" id="modal_hapus_confirm" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1060;">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content" style="border-radius: 12px;">
                <div class="modal-body text-center" style="padding: 30px 20px;">
                    <i class="fa fa-exclamation-circle text-danger" style="font-size: 50px; margin-bottom: 15px;"></i>
                    <h4 style="font-weight: 700; margin-bottom: 10px;">Hapus Data?</h4>
                    <p class="text-muted">Data yang dihapus tidak dapat dikembalikan.</p>
                    <form action="<?php echo base_url().'admin/pelanggan/hapus_pelanggan'?>" method="post">
                        <input type="hidden" name="kode" id="hapus_id_final">
                        <input type="hidden" name="nama" id="hapus_nama_final">
                        <div style="margin-top: 20px;">
                            <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-right: 10px;">Batal</button>
                            <button type="submit" class="btn btn-danger">Ya, Hapus</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

$(document).ready(function() {
            load_data(1);

// Live Search
            $('#live_search').on('keyup', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    currentPage = 1;
                    load_data(1);
                }, 500);
            });

// Trigger Delete dari Modal Edit
            $('#btn_trigger_delete').click(function(){
                let id = $('#edit_id').val();
                let nama = $('#edit_nama').val();
                
                $('#modal_edit').modal('hide');
                
                setTimeout(function(){
                    $('#hapus_id_final').val(id);
                    $('#hapus_nama_final').val(nama);
                    $('#modal_hapus_confirm').modal('show');
                }, 400); 
            });
        });

function sortData(col) {
            $('.fa-sort').removeClass('fa-sort-asc fa-sort-desc').addClass('fa-sort');
            if(orderCol === col) { orderDir = (orderDir === 'ASC') ? 'DESC' : 'ASC'; } 
            else { orderCol = col; orderDir = 'ASC'; }

let iconId = '#sort-icon-' + col;
            let iconClass = (orderDir === 'ASC') ? 'fa-sort-asc' : 'fa-sort-desc';
            $(iconId).removeClass('fa-sort').addClass(iconClass);
            load_data(currentPage);
        }

function formatDateIndo(dateString) {
            if(!dateString) return '-';
            let date = new Date(dateString);
            if (isNaN(date.getTime())) return dateString;
            return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
        }

function load_data(page) {
            currentPage = page;
            $('#data_container').css('opacity', '0.5');
            
            const searchQuery = $('#live_search').val();

$.ajax({
                url: "<?php echo base_url(); ?>admin/pelanggan/get_pelanggan_json",
                method: "POST",
                dataType: "JSON",
                data: {
                    page: page, limit: limit, search: searchQuery, order_col: orderCol, order_dir: orderDir
                },
                success: function(response) {
                    $('#total_records').text(response.recordsTotal);
                    let html = '';
                    if(response.data.length > 0) {
                        $.each(response.data, function(index, row) {
                            let photo = row.plg_photo ? "<?php echo base_url().'assets/images/'; ?>" + row.plg_photo : "<?php echo base_url().'assets/img/maskotnyinyir.png'; ?>";
                            let jenkelBadge = (row.plg_jenkel == 'L') ? '<span class="badge" style="background:#e1f0ff; color:#3699ff;">Laki-Laki</span>' : '<span class="badge" style="background:#ffe2e5; color:#f64e60;">Perempuan</span>';
                            let regDate = formatDateIndo(row.plg_register);
                            let rowData = JSON.stringify(row).replace(/'/g, "&apos;");

html += `
                            <tr>
                                <td><img src="${photo}" class="img-profile-circle" onerror="this.onerror=null;this.src='<?php echo base_url().'assets/img/maskotnyinyir.png'; ?>';"></td>
                                <td style="font-weight:600;">${row.plg_nama}</td>
                                <td>${jenkelBadge}</td>
                                <td>${(row.plg_alamat && row.plg_alamat.length > 25) ? row.plg_alamat.substring(0, 25) + '...' : (row.plg_alamat || '-')}</td>
                                <td>${row.plg_notelp || '-'}</td>
                                <td><small style="font-weight:600; color:#7e8299;">${regDate}</small></td>
                                <td>
                                    <button class="btn-icon-action btn-soft-primary" onclick='editUser(${rowData})' title="Edit Pelanggan">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                </td>
                            </tr>`;
                        });
                    } else {
                        html = '<tr><td colspan="7" class="text-center" style="padding:30px;">Tidak ada data ditemukan</td></tr>';
                    }
                    $('#data_container').html(html);
                    $('#data_container').css('opacity', '1');
                    renderPagination(response.recordsFiltered, response.per_page, page);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    $('#data_container').html('<tr><td colspan="7" class="text-center text-danger">Terjadi kesalahan koneksi</td></tr>');
                }
            });
        }

// Logic Modal Edit (Populate Form)
        function editUser(data) {
            $('#edit_id').val(data.plg_id);
            $('#edit_nama').val(data.plg_nama);
            $('#edit_notelp').val(data.plg_notelp);
            $('#edit_alamat').val(data.plg_alamat);
            
            // Set Dropdown Jenis Kelamin
            if(data.plg_jenkel) {
                $('#edit_jenkel').val(data.plg_jenkel);
            }
            
            $('#modal_edit').modal('show');
        }

function renderPagination(totalRows, limit, currentPage) {
            let totalPages = Math.ceil(totalRows / limit);
            let html = '<div class="pagination-modern-wrapper">';
            if(totalPages > 1) {
                if(currentPage > 1) html += `<a href="javascript:void(0)" onclick="load_data(${currentPage - 1})" class="page-link-modern"><i class="fa fa-angle-left"></i></a>`;
                
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, currentPage + 2);

if(startPage > 1) {
                    html += `<a href="javascript:void(0)" onclick="load_data(1)" class="page-link-modern">1</a>`;
                    if(startPage > 2) html += `<span class="page-link-modern" style="cursor:default">...</span>`;
                }
                for(let i = startPage; i <= endPage; i++) {
                    let active = (i == currentPage) ? 'active' : '';
                    html += `<a href="javascript:void(0)" onclick="load_data(${i})" class="page-link-modern ${active}">${i}</a>`;
                }
                if(endPage < totalPages) {
                    if(endPage < totalPages - 1) html += `<span class="page-link-modern" style="cursor:default">...</span>`;
                    html += `<a href="javascript:void(0)" onclick="load_data(${totalPages})" class="page-link-modern">${totalPages}</a>`;
                }
                if(currentPage < totalPages) html += `<a href="javascript:void(0)" onclick="load_data(${currentPage + 1})" class="page-link-modern"><i class="fa fa-angle-right"></i></a>`;
            }
            html += '</div>';
            $('#pagination_link').html(html);
        }
    </script>
</body>
</html>

Batal

⬅ views 14 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 v_dashboard.php	php	74 KB	29/04/26 10:31	0644	✏️ ⬇
🐘 v_dashboard_tv.php	php	49.6 KB	09/05/26 14:35	0644	✏️ ⬇
🐘 v_gallery.php	php	20.1 KB	24/02/26 08:22	0644	✏️ ⬇
🐘 v_header.php	php	14.3 KB	20/02/26 08:48	0644	✏️ ⬇
📄 v_header.php.bak	bak	4.6 KB	17/08/24 07:14	0644	✏️ ⬇
🐘 v_kategori.php	php	9.6 KB	31/01/26 13:43	0644	✏️ ⬇
🐘 v_konfirmasi.php	php	27 KB	20/02/26 08:19	0644	✏️ ⬇
🐘 v_login.php	php	9.7 KB	04/02/26 15:13	0644	✏️ ⬇
🐘 v_menu.php	php	71.9 KB	19/02/26 14:56	0644	✏️ ⬇
🐘 v_order.php	php	63.6 KB	24/02/26 08:23	0644	✏️ ⬇
🐘 v_pelanggan.php	php	23.8 KB	24/02/26 08:22	0644	✏️ ⬇
🐘 v_pengguna.php	php	27.4 KB	24/02/26 08:21	0644	✏️ ⬇
🐘 v_rekening.php	php	12.4 KB	31/01/26 13:44	0644	✏️ ⬇
🐘 v_status.php	php	9.6 KB	31/01/26 13:45	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission