File: /home/barbeatleanalyti/www/dashboard.beatleanalytics.com/dashboard_content.php
<?php
// Sample data for the dashboard
$stations = [
['name' => 'ADI', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'MSH', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'SBT', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'PNU', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'DHG', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'BLDI', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'VTA', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200'],
['name' => 'GIMB', 'surprise' => '83.33', 'performance' => '83.33', 'feedback' => '83.33', 'overall' => '83.33', 'billing' => '225200']
];
$totalBillingValue = '1801600';
// Get username from session if available
$username = isset($_SESSION['username']) ? $_SESSION['username'] : 'Guest';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Station Cleanliness Dashboard</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- AdminLTE -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body class="hold-transition sidebar-mini sidebar-collapse">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-user"></i>
<span class="d-none d-md-inline-block ml-1"><?php echo $username; ?></span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="logout.php" class="dropdown-item">
<i class="fas fa-sign-out-alt mr-2"></i> Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="#" class="brand-link">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel mt-2 pb-2 mb-2 d-flex">
<div class="image">
<img src="https://adminlte.io/themes/v3/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block"><?php echo $username; ?></a>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="logout.php" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i>
<p>Logout</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- Content Wrapper -->
<div class="content-wrapper">
<!-- Content Header -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-1">
<div class="col-sm-6">
<h1 class="m-0">DIVISIONAL DASHBOARD - Station Cleanliness</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Dashboard v2</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<!-- Info boxes -->
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box bg-info">
<span class="info-box-icon"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">Overall Performance</span>
<span class="info-box-number">83.33%</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box bg-danger">
<span class="info-box-icon"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Overall Surprise Audit</span>
<span class="info-box-number">83.33%</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box bg-success">
<span class="info-box-icon"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Overall Cleanliness</span>
<span class="info-box-number">83.33%</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box bg-warning">
<span class="info-box-icon"><i class="fas fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">Overall Feedback</span>
<span class="info-box-number">83.33%</span>
</div>
</div>
</div>
</div>
<!-- Main row -->
<?php
// Initialize totals
$totalSurprise = 0;
$totalPerformance = 0;
$totalFeedback = 0;
$totalOverall = 0;
$totalBilling = 0;
$count = count($stations);
?>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body p-0">
<div class="table-scroll">
<table class="table table-hover text-nowrap table-compact">
<thead>
<tr>
<th>Station</th>
<th>Surprise Audit</th>
<th>Performance</th>
<th>Feedback</th>
<th>Overall</th>
<th>Billing</th>
</tr>
</thead>
<tbody>
<?php foreach ($stations as $station): ?>
<tr>
<td class="text-center"><?php echo $station['name']; ?></td>
<td class="text-center"><?php echo $station['surprise']; ?>%</td>
<td class="text-center"><?php echo $station['performance']; ?>%</td>
<td class="text-center"><?php echo $station['feedback']; ?>%</td>
<td class="text-center"><?php echo $station['overall']; ?>%</td>
<td class="text-center"><?php echo number_format($station['billing'], 0, '.', ','); ?></td>
</tr>
<?php
// Accumulate totals
$totalSurprise += floatval($station['surprise']);
$totalPerformance += floatval($station['performance']);
$totalFeedback += floatval($station['feedback']);
$totalOverall += floatval($station['overall']);
$totalBilling += floatval($station['billing']);
?>
<?php endforeach; ?>
</tbody>
<tfoot>
<!-- Total Row -->
<tr class="bg-light">
<td class="text-center"><strong>Total</strong></td>
<td class="text-center"><strong><?php echo number_format($totalSurprise / $count, 2); ?>%</strong></td>
<td class="text-center"><strong><?php echo number_format($totalPerformance / $count, 2); ?>%</strong></td>
<td class="text-center"><strong><?php echo number_format($totalFeedback / $count, 2); ?>%</strong></td>
<td class="text-center"><strong><?php echo number_format($totalOverall / $count, 2); ?>%</strong></td>
<td class="text-center"><strong><?php echo number_format($totalBilling, 0, '.', ','); ?></strong></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Charts row -->
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Weekly Performance</h3>
</div>
<div class="card-body chart-height-sm">
<canvas id="weeklyPerformanceChart"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Weekly Feedback Count</h3>
</div>
<div class="card-body chart-height-sm">
<canvas id="weeklyFeedbackChart"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Subscription / Weekly Performance</h3>
</div>
<div class="card-body chart-height-sm" style="padding-top: 30px;">
<div class="row">
<div class="col-md-6">
<div class="chart-container" style="position: relative; height:150px;">
<canvas id="subscriptionChart"></canvas>
<div class="chart-center-text">65%</div>
</div>
</div>
<div class="col-md-6">
<div class="chart-container" style="position: relative; height:150px;">
<canvas id="performanceChart"></canvas>
<div class="chart-center-text">80%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<strong>Copyright © <?php echo date('Y'); ?> <a href="<?php echo SITE_URL; ?>"><?php echo "BeatleAnalytics" ?></a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 1.0.0
</div>
</footer>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap 4 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>