Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/kuamontong

Free Space:

9.88 TB

🔧 Quick Actions

✏️ Editing: view_laporan.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - Pengaduan KUA</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    <style>
        :root {
            --primary-color: #2e7d32;
            --primary-light: #4caf50;
            --primary-dark: #1b5e20;
            --secondary-color: #f5f5f5;
            --text-color: #333;
            --light-text: #777;
            --white: #ffffff;
            --error-color: #d32f2f;
            --success-color: #388e3c;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--secondary-color);
            padding: 0;
            margin: 0;
        }
        
        .admin-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .admin-header {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
            color: var(--white);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .admin-header h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        
        .logout-btn {
            background-color: var(--white);
            color: var(--primary-dark);
            padding: 8px 15px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .logout-btn:hover {
            background-color: #e8f5e9;
            transform: translateY(-2px);
        }
        
        .logout-btn i {
            margin-right: 5px;
        }
        
        /* Table Styles */
        .complaints-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .complaints-table th, 
        .complaints-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .complaints-table th {
            background-color: var(--primary-color);
            color: var(--white);
            font-weight: 600;
        }
        
        .complaints-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .complaints-table tr:hover {
            background-color: #e8f5e9;
        }
        
        /* Status Badges */
        .status-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .status-pending {
            background-color: #fff3e0;
            color: #ff6d00;
        }
        
        .status-process {
            background-color: #e3f2fd;
            color: #1565c0;
        }
        
        .status-completed {
            background-color: #e8f5e9;
            color: var(--success-color);
        }
        
        /* Contact Info */
        .contact-info {
            font-size: 13px;
            color: var(--light-text);
        }
        
        .contact-info i {
            margin-right: 5px;
            width: 15px;
            text-align: center;
        }
        
        /* Action Buttons */
        .action-btn {
            padding: 5px 10px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
            margin-right: 5px;
            transition: all 0.3s ease;
            display: inline-block;
            margin-bottom: 5px;
        }
        
        .view-btn {
            background-color: var(--primary-light);
            color: var(--white);
        }
        
        .edit-btn {
            background-color: #2196f3;
            color: var(--white);
        }
        
        .delete-btn {
            background-color: var(--error-color);
            color: var(--white);
        }
        
        .action-btn:hover {
            opacity: 0.8;
            transform: translateY(-2px);
        }
        
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow: auto;
        }
        
        .modal-content {
            background-color: var(--white);
            margin: 5% auto;
            padding: 30px;
            border-radius: 10px;
            width: 80%;
            max-width: 700px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 24px;
            color: var(--light-text);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .close-btn:hover {
            color: var(--error-color);
        }
        
        .modal-header {
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .modal-header h2 {
            color: var(--primary-dark);
        }
        
        .modal-body {
            margin-bottom: 20px;
        }
        
        .detail-row {
            display: flex;
            margin-bottom: 15px;
        }
        
        .detail-label {
            font-weight: 600;
            width: 150px;
            color: var(--primary-dark);
        }
        
        .detail-value {
            flex: 1;
            word-break: break-word;
        }
        
        .file-download {
            display: inline-block;
            padding: 8px 15px;
            background-color: #e3f2fd;
            color: #1565c0;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 5px;
        }
        
        .file-download:hover {
            background-color: #bbdefb;
        }
        
        /* Filter Section */
        .filter-section {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .filter-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        
        .filter-group label {
            margin-right: 10px;
            font-weight: 600;
            width: 120px;
            margin-bottom: 5px;
        }
        
        .filter-control {
            padding: 8px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            flex: 1;
            min-width: 150px;
        }
        
        .apply-filter {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .apply-filter:hover {
            background-color: var(--primary-dark);
        }
        
        /* Responsive Styles for DataTables */
        .dtr-data {
            font-weight: bold;
        }
        
        .dtr-title {
            min-width: 100px;
            display: inline-block;
            font-weight: bold;
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            .admin-container {
                margin: 10px;
                padding: 15px;
            }
            
            .admin-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .logout-btn {
                margin-top: 10px;
            }
            
            .complaints-table th, 
            .complaints-table td {
                padding: 8px 5px;
                font-size: 14px;
            }
            
            .modal-content {
                width: 95%;
                padding: 15px;
                margin: 20px auto;
            }
            
            .detail-row {
                flex-direction: column;
            }
            
            .detail-label {
                width: 100%;
                margin-bottom: 5px;
            }
            
            .action-btn {
                padding: 4px 8px;
                font-size: 12px;
            }
            
            .filter-group label {
                width: 100%;
            }
            
            .filter-control {
                width: 100%;
                margin-bottom: 10px;
            }
        }
        
        @media (max-width: 480px) {
            .admin-header h1 {
                font-size: 1.4rem;
            }
            
            .status-badge {
                padding: 3px 6px;
                font-size: 10px;
            }
            
            .modal-content {
                padding: 10px;
            }
            
            .contact-info {
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <div class="admin-container">
        <div class="admin-header">
            <h1><i class="fas fa-tachometer-alt"></i> Dashboard Admin Pengaduan KUA</h1>
            <a href="dashboard_admin.php" class="logout-btn">
                <i class="fas fa-sign-out-alt"></i> kembali
            </a>
        </div>
        
        <div class="filter-section">
            <h3><i class="fas fa-filter"></i> Filter Data</h3>
            <div class="filter-group">
                <label for="filter-status">Status:</label>
                <select id="filter-status" class="filter-control">
                    <option value="">Semua Status</option>
                    <option value="pending">Pending</option>
                    <option value="process">Proses</option>
                    <option value="completed">Selesai</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="filter-jenis">Jenis:</label>
                <select id="filter-jenis" class="filter-control">
                    <option value="">Semua Jenis</option>
                    <option value="pelayanan">Pelayanan</option>
                    <option value="administrasi">Administrasi</option>
                    <option value="sarana_prasarana">Sarana dan Prasarana</option>
                    <option value="lainnya">Lainnya</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="filter-tanggal">Tanggal:</label>
                <input type="date" id="filter-tanggal" class="filter-control">
            </div>
            <button type="button" class="apply-filter" id="applyFilter">
                <i class="fas fa-check"></i> Terapkan Filter
            </button>
        </div>
        
        <table id="complaintsTable" class="complaints-table display responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Tanggal</th>
                    <th>Nama Pelapor</th>
                    <th>Jenis</th>
                    <th>Deskripsi</th>
                    <th>Kontak</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php
                include 'koneksi.php';
                
                $sql = "SELECT * FROM pengaduan ORDER BY tanggal_lapor DESC";
                $result = $conn->query($sql);
                
                if ($result->num_rows > 0) {
                    $no = 1;
                    while($row = $result->fetch_assoc()) {
                        // Potong deskripsi jika terlalu panjang
                        $short_desc = strlen($row['deskripsi']) > 50 ? 
                                      substr($row['deskripsi'], 0, 50) . '...' : 
                                      $row['deskripsi'];
                        
                        // Tentukan status
                        $status_class = '';
                        $status_text = '';
                        switch($row['status']) {
                            case 'pending':
                                $status_class = 'status-pending';
                                $status_text = 'Pending';
                                break;
                            case 'process':
                                $status_class = 'status-process';
                                $status_text = 'Proses';
                                break;
                            case 'completed':
                                $status_class = 'status-completed';
                                $status_text = 'Selesai';
                                break;
                            default:
                                $status_class = 'status-pending';
                                $status_text = 'Pending';
                        }
                        
                        // Tentukan jenis
                        $jenis_text = '';
                        switch($row['jenis_pengaduan']) {
                            case 'pelayanan':
                                $jenis_text = 'Pelayanan';
                                break;
                            case 'administrasi':
                                $jenis_text = 'Administrasi';
                                break;
                            case 'sarana_prasarana':
                                $jenis_text = 'Sarana & Prasarana';
                                break;
                            case 'lainnya':
                                $jenis_text = 'Lainnya';
                                break;
                            default:
                                $jenis_text = $row['jenis_pengaduan'];
                        }
                        
                        // Tampilkan email atau telepon
                        $contact_info = '';
                        if (!empty($row['email'])) {
                            $contact_info = '<div class="contact-info"><i class="fas fa-envelope"></i> ' . $row['email'] . '</div>';
                        } else if (!empty($row['no_telepon'])) {
                            $contact_info = '<div class="contact-info"><i class="fas fa-phone"></i> ' . $row['no_telepon'] . '</div>';
                        } else {
                            $contact_info = '<div class="contact-info"><i class="fas fa-question-circle"></i> Tidak ada kontak</div>';
                        }
                        
                        echo "<tr>
                                <td>{$no}</td>
                                <td>" . date('d/m/Y', strtotime($row['tanggal_lapor'])) . "</td>
                                <td>{$row['nama_pelapor']}</td>
                                <td>{$jenis_text}</td>
                                <td>{$short_desc}</td>
                                <td>{$contact_info}</td>
                                <td><span class='status-badge {$status_class}'>{$status_text}</span></td>
                                <td>
                                    <a href='#' class='action-btn view-btn' data-id='{$row['id']}'><i class='fas fa-eye'></i> Lihat</a>
                                    <a href='proses_hapus_laporan.php?id={$row['id']}' class='action-btn delete-btn' onclick='return confirm(\"Yakin ingin menghapus pengaduan ini?\")'><i class='fas fa-trash'></i> Hapus</a>
                                </td>
                              </tr>";
                        $no++;
                    }
                } else {
                    echo "<tr><td colspan='8' style='text-align: center;'>Tidak ada data pengaduan</td></tr>";
                }
                
                $conn->close();
                ?>
            </tbody>
        </table>
    </div>
    
    
    <div id="detailModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <div class="modal-header">
                <h2><i class="fas fa-info-circle"></i> Detail Pengaduan</h2>
            </div>
            <div class="modal-body" id="modalBody">
                
            </div>
        </div>
    </div>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: view_laporan.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation