Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

nginx/1.28.0

System:

Linux 6.8.0-90-generic

PHP Version:

8.4.15

User:

alqudsvolunteers

Directory:

/home/avi/htdocs/www.alqudsvolunteers.id/test

Free Space:

81.75 GB

🔧 Quick Actions

✏️ Editing: bills.php

<?php
// bills.php - Halaman untuk melihat semua bill
// URL: https://alqudsvolunteers.id/test/bills.php
// ================================================

require_once 'config.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Semua Bill - Al-Quds Volunteers</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <style>
        /* Additional styles for bills page */
        .bills-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            text-align: center;
        }
        
        .stat-card i {
            font-size: 2rem;
            color: #1b4332;
            margin-bottom: 10px;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: #1b4332;
        }
        
        .stat-label {
            color: #64748b;
            margin-top: 5px;
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: flex-end;
        }
        
        .filter-group {
            flex: 1;
            min-width: 150px;
        }
        
        .bills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }
        
        .bill-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.3s;
            border: 1px solid #e2e8f0;
        }
        
        .bill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-color: #1b4332;
        }
        
        .bill-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .bill-number {
            font-weight: 700;
            color: #1b4332;
            font-size: 0.9rem;
        }
        
        .bill-source {
            font-size: 0.8rem;
            padding: 4px 8px;
            border-radius: 20px;
            background: #e2e8f0;
        }
        
        .bill-source.flip {
            background: #1b4332;
            color: white;
        }
        
        .bill-body {
            margin-bottom: 15px;
        }
        
        .bill-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: #0f172a;
        }
        
        .bill-amount {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1b4332;
            margin-bottom: 10px;
        }
        
        .bill-meta {
            display: flex;
            flex-direction: column;
            gap: 5px;
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .bill-meta i {
            width: 20px;
            color: #1b4332;
        }
        
        .bill-footer {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }
        
        .btn {
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
            flex: 1;
            justify-content: center;
        }
        
        .btn-primary {
            background: #1b4332;
            color: white;
        }
        
        .btn-success {
            background: #2d6a4f;
            color: white;
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        
        .btn-warning {
            background: #ffc107;
            color: black;
        }
        
        .btn-secondary {
            background: #64748b;
            color: white;
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .status-badge.success {
            background: #c6f6d5;
            color: #22543d;
        }
        
        .status-badge.pending {
            background: #feebc8;
            color: #744210;
        }
        
        .status-badge.failed {
            background: #fed7d7;
            color: #742a2a;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 15px;
            grid-column: 1 / -1;
        }
        
        .empty-state i {
            font-size: 4rem;
            color: #cbd5e0;
            margin-bottom: 20px;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            grid-column: 1 / -1;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }
        
        .page-btn {
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            background: white;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .page-btn.active {
            background: #1b4332;
            color: white;
            border-color: #1b4332;
        }
        
        .sandbox-banner {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            padding: 12px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 20px;
            border-radius: 10px;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        @media (max-width: 768px) {
            .bills-grid {
                grid-template-columns: 1fr;
            }
            
            .filter-section {
                flex-direction: column;
            }
            
            .filter-group {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-hand-holding-heart"></i>
                <span>Al-Quds <span class="brand-highlight">Volunteers</span></span>
            </div>
            <div class="nav-menu">
                <a href="index.php" class="nav-link">
                    <i class="fas fa-home"></i>
                    <span>Beranda</span>
                </a>
                <a href="bills.php" class="nav-link active">
                    <i class="fas fa-file-invoice"></i>
                    <span>Semua Bill</span>
                </a>
                <a href="index.php#payment" class="nav-link">
                    <i class="fas fa-plus-circle"></i>
                    <span>Buat Bill</span>
                </a>
            </div>
        </div>
    </nav>

<div class="sandbox-banner">
        <i class="fas fa-flask"></i> 
        SANDBOX MODE - Data tersimpan di session (akan hilang jika browser ditutup)
    </div>

<div class="main-container">
        
        
        <div class="bills-header">
            <div>
                <h1>📋 Daftar Semua Bill</h1>
                <p>Total <span id="totalBills">0</span> bill ditemukan</p>
            </div>
            <div class="action-buttons">
                <button onclick="loadBills()" class="btn btn-primary">
                    <i class="fas fa-sync-alt"></i> Refresh
                </button>
                <button onclick="clearAllBills()" class="btn btn-danger">
                    <i class="fas fa-trash"></i> Hapus Semua
                </button>
                <button onclick="exportToJSON()" class="btn btn-success">
                    <i class="fas fa-download"></i> Export JSON
                </button>
            </div>
        </div>
        
        
        <div class="stats-grid" id="statsContainer">
            <div class="stat-card">
                <i class="fas fa-file-invoice"></i>
                <div class="stat-value" id="statTotal">0</div>
                <div class="stat-label">Total Bills</div>
            </div>
            <div class="stat-card">
                <i class="fas fa-clock"></i>
                <div class="stat-value" id="statPending">0</div>
                <div class="stat-label">Pending</div>
            </div>
            <div class="stat-card">
                <i class="fas fa-check-circle"></i>
                <div class="stat-value" id="statSuccess">0</div>
                <div class="stat-label">Success</div>
            </div>
            <div class="stat-card">
                <i class="fas fa-money-bill-wave"></i>
                <div class="stat-value" id="statAmount">Rp 0</div>
                <div class="stat-label">Total Amount</div>
            </div>
        </div>
        
        
        <div class="filter-section">
            <div class="filter-group">
                <label>Status</label>
                <select id="filterStatus" class="form-control" onchange="filterBills()">
                    <option value="">Semua Status</option>
                    <option value="PENDING">Pending</option>
                    <option value="SUCCESS">Success</option>
                    <option value="PAID">Paid</option>
                    <option value="FAILED">Failed</option>
                    <option value="EXPIRED">Expired</option>
                </select>
            </div>
            <div class="filter-group">
                <label>Dari Tanggal</label>
                <input type="date" id="filterFrom" class="form-control" onchange="filterBills()">
            </div>
            <div class="filter-group">
                <label>Sampai Tanggal</label>
                <input type="date" id="filterTo" class="form-control" onchange="filterBills()">
            </div>
            <div class="filter-group">
                <label>Cari</label>
                <input type="text" id="filterSearch" class="form-control" placeholder="ID / Nama / Judul" onkeyup="filterBills()">
            </div>
            <div class="filter-group">
                <button onclick="resetFilter()" class="btn btn-secondary">Reset Filter</button>
            </div>
        </div>
        
        
        <div style="background: white; padding: 20px; border-radius: 15px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 15px; color: #1b4332;">
                <i class="fas fa-plus-circle"></i> Buat Bill Manual (Testing)
            </h3>
            <form id="manualBillForm" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                <input type="text" id="manual_title" placeholder="Judul Bill" class="form-control" value="Test Bill Manual">
                <input type="number" id="manual_amount" placeholder="Amount" class="form-control" value="50000">
                <input type="text" id="manual_name" placeholder="Nama" class="form-control" value="Test User">
                <input type="email" id="manual_email" placeholder="Email" class="form-control" value="test@example.com">
                <input type="text" id="manual_phone" placeholder="Phone" class="form-control" value="08123456789">
                <textarea id="manual_notes" placeholder="Notes" class="form-control" rows="1" style="grid-column: span 2;"></textarea>
                <button type="submit" class="btn btn-success" style="grid-column: span 2;">
                    <i class="fas fa-save"></i> Simpan Bill Manual
                </button>
            </form>
        </div>
        
        
        <div id="billsContainer">
            <div class="loading">
                <i class="fas fa-spinner fa-spin fa-3x"></i>
                <p style="margin-top: 15px;">Memuat daftar bill...</p>
            </div>
        </div>
        
        
        <div id="pagination" class="pagination"></div>
    </div>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: bills.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation