Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/rutzotech.com/public_html/ems/superadmin/Uploads

Free Space:

10.25 TB

🔧 Quick Actions

✏️ Editing: attendence.php

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="utf-8">
    <title>Employee Attendance | Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description">
    <meta content="Coderthemes" name="author">

<link rel="shortcut icon" href="../images/dec.jpeg">

<script src="../js/hyper-config.js"></script>

<link href="../css/vendor.min.css" rel="stylesheet" type="text/css">

<link href="../css/app.min.css" rel="stylesheet" type="text/css" id="app-style">

<link href="../css/unicons.css" rel="stylesheet" type="text/css">
    <link href="../css/remixicon.css" rel="stylesheet" type="text/css">
    <link href="../css/materialdesignlabels.min.css" rel="stylesheet" type="text/css">
    
    <style>
        .attendance-card {
            transition: all 0.3s ease;
        }
        .attendance-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .late-login {
            background-color: rgba(255,193,7,0.1) !important;
        }
        .overtime {
            background-color: rgba(220,53,69,0.1) !important;
        }
        .weekend {
            background-color: rgba(13,110,253,0.1) !important;
        }
        .holiday {
            background-color: rgba(111,66,193,0.1) !important;
        }
        .table-responsive {
            overflow-x: auto;
        }
        .sortable {
            cursor: pointer;
        }
        .sortable:hover {
            background-color: rgba(0,0,0,0.05);
        }
        .sortable.active {
            background-color: rgba(0,0,0,0.1);
        }
        .sortable.active.asc::after {
            content: " ↑";
        }
        .sortable.active.desc::after {
            content: " ↓";
        }
        #attendanceChart {
            min-height: 300px;
        }
        @media (max-width: 768px) {
            .summary-card {
                margin-bottom: 15px;
            }
            .filter-section {
                flex-direction: column;
            }
            .filter-section .btn-group {
                margin-top: 10px;
            }
        }
    </style>
</head>

<div class="content-page">
        <div class="content">
            
            <div class="container-fluid">
                
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h4 class="page-title">Employee Attendance</h4>
                        </div>
                    </div>
                </div>

<div class="row mb-4">
                    <div class="col-md-3 col-sm-6">
                        <div class="card attendance-card bg-primary text-white">
                            <div class="card-body">
                                <h5 class="card-title">Employees Logged In</h5>
                                <h2 class="mb-0" id="totalLoggedIn">24</h2>
                                <p class="card-text">Today</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card attendance-card bg-danger text-white">
                            <div class="card-body">
                                <h5 class="card-title">Employees Absent</h5>
                                <h2 class="mb-0" id="totalAbsent">5</h2>
                                <p class="card-text">Today</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card attendance-card bg-success text-white">
                            <div class="card-body">
                                <h5 class="card-title">Avg. Working Hours</h5>
                                <h2 class="mb-0" id="avgWorkingHours">7.2</h2>
                                <p class="card-text">Today</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card attendance-card bg-info text-white">
                            <div class="card-body">
                                <h5 class="card-title">Current Time</h5>
                                <h2 class="mb-0" id="liveClock">10:45:32 AM</h2>
                                <p class="card-text" id="currentDate">June 15, 2023</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Attendance Overview (Last 7 Days)</h4>
                                <div id="attendanceChart"></div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="row mb-3">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center filter-section">
                                    <div class="d-flex flex-wrap gap-2">
                                        <div class="input-group" style="width: 250px;">
                                            <input type="text" class="form-control" id="dateRangePicker" placeholder="Select date range">
                                            <span class="input-group-text"><i class="ri-calendar-line"></i></span>
                                        </div>
                                        <div class="input-group" style="width: 250px;">
                                            <input type="text" class="form-control" id="employeeSearch" placeholder="Search employee...">
                                            <span class="input-group-text"><i class="ri-search-line"></i></span>
                                        </div>
                                        <div class="form-check form-switch align-self-center ms-2">
                                            <input class="form-check-input" type="checkbox" id="todayOnlyToggle" checked>
                                            <label class="form-check-label" for="todayOnlyToggle">Today Only</label>
                                        </div>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-line"></i> Export
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#" id="exportCSV">CSV</a></li>
                                            <li><a class="dropdown-item" href="#" id="exportExcel">Excel</a></li>
                                            <li><a class="dropdown-item" href="#" id="exportPDF">PDF</a></li>
                                        </ul>
                                        <button class="btn btn-primary" id="themeToggle">
                                            <i class="ri-moon-line"></i> Dark Mode
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover table-centered mb-0" id="attendanceTable">
                                        <thead>
                                            <tr>
                                                <th class="sortable" data-sort="employee_id">Employee ID</th>
                                                <th class="sortable active asc" data-sort="employee_name">Employee Name</th>
                                                <th class="sortable" data-sort="date">Date</th>
                                                <th class="sortable" data-sort="login_time">Login Time</th>
                                                <th class="sortable" data-sort="logout_time">Logout Time</th>
                                                <th class="sortable" data-sort="total_hours">Total Hours</th>
                                                <th>Status</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                            <tr>
                                                <td>EMP001</td>
                                                <td>John Doe</td>
                                                <td>2023-06-15</td>
                                                <td>09:15 AM</td>
                                                <td>05:30 PM</td>
                                                <td>8.25</td>
                                                <td><span class="badge bg-success">Present</span></td>
                                                <td><button class="btn btn-sm btn-outline-primary view-details">View</button></td>
                                            </tr>
                                            <tr class="late-login">
                                                <td>EMP002</td>
                                                <td>Jane Smith</td>
                                                <td>2023-06-15</td>
                                                <td>10:15 AM</td>
                                                <td>06:30 PM</td>
                                                <td>8.25</td>
                                                <td><span class="badge bg-success">Present</span></td>
                                                <td><button class="btn btn-sm btn-outline-primary view-details">View</button></td>
                                            </tr>
                                            <tr class="overtime">
                                                <td>EMP003</td>
                                                <td>Robert Johnson</td>
                                                <td>2023-06-15</td>
                                                <td>08:30 AM</td>
                                                <td>07:45 PM</td>
                                                <td>11.25</td>
                                                <td><span class="badge bg-success">Present</span></td>
                                                <td><button class="btn btn-sm btn-outline-primary view-details">View</button></td>
                                            </tr>
                                            <tr>
                                                <td>EMP004</td>
                                                <td>Emily Davis</td>
                                                <td>2023-06-15</td>
                                                <td>09:00 AM</td>
                                                <td>05:00 PM</td>
                                                <td>8.00</td>
                                                <td><span class="badge bg-success">Present</span></td>
                                                <td><button class="btn btn-sm btn-outline-primary view-details">View</button></td>
                                            </tr>
                                            <tr class="weekend">
                                                <td>EMP005</td>
                                                <td>Michael Wilson</td>
                                                <td>2023-06-10</td>
                                                <td>10:00 AM</td>
                                                <td>04:00 PM</td>
                                                <td>6.00</td>
                                                <td><span class="badge bg-warning">Weekend</span></td>
                                                <td><button class="btn btn-sm btn-outline-primary view-details">View</button></td>
                                            </tr>
                                            <tr>
                                                <td>EMP006</td>
                                                <td>Sarah Brown</td>
                                                <td>2023-06-15</td>
                                                <td>-</td>
                                                <td>-</td>
                                                <td>0.00</td>
                                                <td><span class="badge bg-danger">Absent</span></td>
                                                <td><button class="btn btn-sm btn-outline-primary view-details">View</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="modal fade" id="attendanceDetailsModal" tabindex="-1" aria-labelledby="attendanceDetailsModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="attendanceDetailsModalLabel">Attendance Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <p><strong>Employee ID:</strong> <span id="modalEmployeeId">EMP001</span></p>
                                <p><strong>Name:</strong> <span id="modalEmployeeName">John Doe</span></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Date:</strong> <span id="modalDate">2023-06-15</span></p>
                                <p><strong>Status:</strong> <span id="modalStatus" class="badge bg-success">Present</span></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title">Login Time</h6>
                                        <p class="card-text display-6" id="modalLoginTime">09:15 AM</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title">Logout Time</h6>
                                        <p class="card-text display-6" id="modalLogoutTime">05:30 PM</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title">Total Working Hours</h6>
                                        <p class="card-text display-4" id="modalTotalHours">8.25</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="alert" id="modalSpecialNote" style="display: none;">
                                    <i class="ri-alert-line me-2"></i><span id="modalNoteText"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

<footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <script>document.write(new Date().getFullYear())</script> © Your Company
                    </div>
                    <div class="col-md-6">
                        <div class="text-md-end footer-links d-none d-md-block">
                            <a href="javascript: void(0);">About</a>
                            <a href="javascript: void(0);">Support</a>
                            <a href="javascript: void(0);">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

<script src="../js/vendor.min.js"></script>

<script src="../js/app.js"></script>

<script src="../js/apexcharts.min.js"></script>

// Initialize Date Range Picker
            document.getElementById('dateRangePicker').addEventListener('click', function() {
                // This would be replaced with actual date range picker logic
                this.value = '2023-06-10 to 2023-06-15';
            });

// Today Only Toggle
            document.getElementById('todayOnlyToggle').addEventListener('change', function() {
                const table = document.getElementById('attendanceTable');
                const rows = table.getElementsByTagName('tbody')[0].rows;
                const today = new Date().toISOString().split('T')[0];
                
                for (let row of rows) {
                    if (this.checked) {
                        const dateCell = row.cells[2].textContent;
                        if (dateCell !== today) {
                            row.style.display = 'none';
                        } else {
                            row.style.display = '';
                        }
                    } else {
                        row.style.display = '';
                    }
                }
            });

// Employee Search
            document.getElementById('employeeSearch').addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const table = document.getElementById('attendanceTable');
                const rows = table.getElementsByTagName('tbody')[0].rows;
                
                for (let row of rows) {
                    const nameCell = row.cells[1].textContent.toLowerCase();
                    const dateCell = row.cells[2].textContent.toLowerCase();
                    
                    if (nameCell.includes(searchTerm) || dateCell.includes(searchTerm)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            });

// Table Sorting
            document.querySelectorAll('.sortable').forEach(header => {
                header.addEventListener('click', function() {
                    const table = document.getElementById('attendanceTable');
                    const tbody = table.getElementsByTagName('tbody')[0];
                    const rows = Array.from(tbody.rows);
                    const columnIndex = this.cellIndex;
                    const sortKey = this.getAttribute('data-sort');
                    const isAsc = this.classList.contains('asc');
                    
                    // Remove active and sort classes from all headers
                    document.querySelectorAll('.sortable').forEach(h => {
                        h.classList.remove('active', 'asc', 'desc');
                    });
                    
                    // Set active and sort class on current header
                    this.classList.add('active');
                    this.classList.add(isAsc ? 'desc' : 'asc');
                    
                    // Sort rows
                    rows.sort((a, b) => {
                        const aValue = a.cells[columnIndex].textContent;
                        const bValue = b.cells[columnIndex].textContent;
                        
                        if (sortKey === 'date' || sortKey === 'login_time' || sortKey === 'logout_time') {
                            return isAsc 
                                ? new Date(aValue) - new Date(bValue)
                                : new Date(bValue) - new Date(aValue);
                        } else if (sortKey === 'total_hours') {
                            return isAsc 
                                ? parseFloat(aValue) - parseFloat(bValue)
                                : parseFloat(bValue) - parseFloat(aValue);
                        } else {
                            return isAsc 
                                ? aValue.localeCompare(bValue)
                                : bValue.localeCompare(aValue);
                        }
                    });
                    
                    // Reappend sorted rows
                    rows.forEach(row => tbody.appendChild(row));
                });
            });

// View Details Modal
            document.querySelectorAll('.view-details').forEach(button => {
                button.addEventListener('click', function() {
                    const row = this.closest('tr');
                    const modal = new bootstrap.Modal(document.getElementById('attendanceDetailsModal'));
                    
                    document.getElementById('modalEmployeeId').textContent = row.cells[0].textContent;
                    document.getElementById('modalEmployeeName').textContent = row.cells[1].textContent;
                    document.getElementById('modalDate').textContent = row.cells[2].textContent;
                    document.getElementById('modalLoginTime').textContent = row.cells[3].textContent || '-';
                    document.getElementById('modalLogoutTime').textContent = row.cells[4].textContent || '-';
                    document.getElementById('modalTotalHours').textContent = row.cells[5].textContent;
                    
                    // Clone status badge
                    const statusBadge = row.cells[6].querySelector('.badge').cloneNode(true);
                    const modalStatus = document.getElementById('modalStatus');
                    modalStatus.className = 'badge';
                    modalStatus.classList.add(statusBadge.classList[1]);
                    modalStatus.textContent = statusBadge.textContent;
                    
                    // Special notes
                    const specialNote = document.getElementById('modalSpecialNote');
                    specialNote.style.display = 'none';
                    
                    if (row.classList.contains('late-login')) {
                        specialNote.style.display = 'block';
                        specialNote.className = 'alert alert-warning';
                        document.getElementById('modalNoteText').textContent = 'Late login (after 10:00 AM)';
                    } else if (row.classList.contains('overtime')) {
                        specialNote.style.display = 'block';
                        specialNote.className = 'alert alert-danger';
                        document.getElementById('modalNoteText').textContent = 'Overtime (more than 8 hours)';
                    } else if (row.classList.contains('weekend')) {
                        specialNote.style.display = 'block';
                        specialNote.className = 'alert alert-info';
                        document.getElementById('modalNoteText').textContent = 'Weekend day';
                    } else if (row.classList.contains('holiday')) {
                        specialNote.style.display = 'block';
                        specialNote.className = 'alert alert-primary';
                        document.getElementById('modalNoteText').textContent = 'Company holiday';
                    }
                    
                    modal.show();
                });
            });

// Export Functions
            document.getElementById('exportCSV').addEventListener('click', function(e) {
                e.preventDefault();
                alert('CSV export functionality would be implemented here');
            });
            
            document.getElementById('exportExcel').addEventListener('click', function(e) {
                e.preventDefault();
                alert('Excel export functionality would be implemented here');
            });
            
            document.getElementById('exportPDF').addEventListener('click', function(e) {
                e.preventDefault();
                alert('PDF export functionality would be implemented here');
            });

// Theme Toggle
            document.getElementById('themeToggle').addEventListener('click', function() {
                const html = document.documentElement;
                const currentTheme = html.getAttribute('data-bs-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                
                html.setAttribute('data-bs-theme', newTheme);
                this.innerHTML = newTheme === 'dark' 
                    ? '<i class="ri-sun-line"></i> Light Mode' 
                    : '<i class="ri-moon-line"></i> Dark Mode';
            });

// Initialize Attendance Chart
            var options = {
                series: [{
                    name: 'Working Hours',
                    data: [7.5, 8.0, 7.2, 8.5, 7.8, 6.0, 0.0]
                }],
                chart: {
                    type: 'bar',
                    height: 350,
                    toolbar: {
                        show: true,
                        tools: {
                            download: true,
                            selection: true,
                            zoom: true,
                            zoomin: true,
                            zoomout: true,
                            pan: true,
                            reset: true
                        }
                    }
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        horizontal: false,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: ['Jun 9', 'Jun 10', 'Jun 11', 'Jun 12', 'Jun 13', 'Jun 14', 'Jun 15'],
                },
                yaxis: {
                    title: {
                        text: 'Hours'
                    }
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return val + " hours";
                        }
                    }
                },
                colors: ['#727cf5']
            };

var chart = new ApexCharts(document.querySelector("#attendanceChart"), options);
            chart.render();
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: attendence.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation