Mini Shell
<?php
session_start();
$rootPath = realpath(dirname(__FILE__) . '/..');
require_once $rootPath . '/Portal/config/config.php'; // Use clean config file
require_once $rootPath . '/Portal/include/auth_validate.php'; // Use clean config file
//$query3 = "SELECT * FROM `accesslevelmanagement`";
//$result3 = mysqli_query($connection, $query3);
/////// Code for new access control on header menu /////////////////////////
$User = $_SESSION['id'];
$User = $_SESSION['User_Type'];
$User_Type = "";
$result = mysqli_query( $conn,"SELECT * FROM admin_accounts WHERE id = '$User' ");
$num = mysqli_num_rows($result);
if ($num >0){
$rows = mysqli_fetch_array($result);
$User_Type = $rows['Access_Level'];
//$UserDepartment = $rows['UserDepartment'];
}
$connection = new mysqli($host, $username, $password, $database);
// Create connection with error handling
if (!isset($_SESSION['user_logged_in'])) {
header('Location:login.php');
}
$User = $_SESSION['id'];
$FullName = $_SESSION['Full_Name'];
$NewMessages = $numx = "";
$result = mysqli_query( $connection,"SELECT * FROM admin_accounts WHERE id = '$User' ");
$num = mysqli_num_rows($result);
if ($num >0){
$rows = mysqli_fetch_array($result);
$User_Type = $rows['User_Type'];
}
$numx = 0;
include_once('include/header.php');
?>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-6">
<h4 class="page-header">Student Name: <?php echo $FullName; ?></h4>
</div>
<div class="col-lg-6" style="">
<div class="page-action-links text-right">
<h6> <a href="" data-toggle="modal" data-target="#AddTopic-TESITING" ><button class="btn btn-success">Notifications <i class="fa fa-envelope" style="font-size:25px; color:white" ><sup><strong><?php if($numx >0){echo $numx;}?></strong></sup></i></button></a></h6>
</div>
</div>
</div>
<?php include('include/flash_messages.php') ?>
<br><br>
<!-- Notifications Modal Modal-->
<div class="modal fade" id="AddTopic-TESITING" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="text-align:center; background-color:#BAC4CC;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title" style="text-align:center;"><i class="fa fa-bell"></i><strong> NEW NOTIFICATIONS</strong> </h5>
</div>
<div class="modal-body" style="text-align:center; background-color:#F6F7FA;">
<?php if ($numx >0){?>
<div align='center'><h5><a href="NewBookings.php"> You have <?php echo $numx ; ?> new Online bookings</a> </h5></div>
<?php } else { ?><div align='center'><h5> There is no New Nofitication </h5></div>
<?php }?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></button>
</div>
</div>
</form></div> </div>
<div>
<link rel="stylesheet" href="aka.css">
<div class="col-lg-3 col-md-6">
<div class="card fade-in">
<div class="card-header">
<?php
//$resultz = mysqli_query( $connection,"SELECT * FROM rooms ");
// $numz = mysqli_num_rows($resultz);
?>
<div class="card-title">Student Record</div>
<div class="card-icon" style="background: var(--primary-color);">
<i class="fa fa-user"></i>
</div>
</div>
<div class="card-value">56</div>
<div class="card-trend">including Halls, Boardrooms etc</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card fade-in">
<div class="card-header">
<?php
//$resultq = mysqli_query( $connection,"SELECT * FROM rooms where room_type = 'Deluxe' ");
//$numq = mysqli_num_rows($resultq);
?>
<div class="card-title">School calendar</div>
<div class="card-icon" style="background: var(--success-color);">
<i class="fa fa-calendar"></i>
</div>
</div>
<div class="card-value">34</div>
<div class="card-trend">8 teaching hours</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card fade-in">
<div class="card-header">
<div class="card-title">Fees Payment</div>
<div class="card-icon" style="background: var(--warning-color);">
<i class="fa fa-money"></i>
</div>
</div>
<div class="card-value">40</div>
<div class="card-trend">Pending review</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card fade-in">
<div class="card-header">
<?php
//$resultvb = mysqli_query( $connection,"SELECT * FROM rooms where room_type != 'Deluxe' AND room_type != 'Deluxe'");
//$numvb = mysqli_num_rows($resultvb);
?>
<div class="card-title">Other Records</div>
<div class="card-icon" style="background: var(--danger-color);">
<i class="fa fa-history"></i>
</div>
</div>
<div class="card-value"><?php //echo " $numvb";?>20</div>
<div class="card-trend">Hall, Boardrooms etc</div>
</div>
</div>
<br>
</div>
<div class="col-lg-3 col-md-6">
</div>
<div class="col-lg-3 col-md-6">
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border-radius: 10px;
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
headers {
text-align: center;
margin-bottom: 40px;
padding: 20px;
border-radius: 10px;
color: white;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
}
.charts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.chart-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.chart-card:hover {
transform: translateY(-5px);
}
.chart-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.chart-wrapper {
position: relative;
height: 400px;
width: 100%;
}
.controls {
background: white;
padding: 25px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
.control-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
label {
font-weight: 600;
color: #2c3e50;
}
select, input, button {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
}
button {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: opacity 0.3s;
}
button:hover {
opacity: 0.9;
}
.data-table {
background: white;
border-radius: 12px;
padding: 25px;
margin-top: 30px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
background-color: #f8f9fa;
font-weight: 600;
color: #2c3e50;
}
tr:hover {
background-color: #f8f9fa;
}
@media (max-width: 768px) {
.charts-container {
grid-template-columns: 1fr;
}
.chart-card {
padding: 15px;
}
.chart-wrapper {
height: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<headers> <br><br><br> </headers>
<header>
<h1 style= "color:white;" >📊 Perfomance Visualization</h1>
</header>
<div class="controls">
<h2 class="chart-title">Chart Controls</h2>
<form method="GET" action="" class="control-group">
<div>
<label for="chartType">Chart Type:</label>
<select id="chartType" name="chartType">
<option value="sales">Sales by Month</option>
<option value="categories">Product Categories</option>
</select>
</div>
<div>
<label for="year">Year:</label>
<input type="number" id="year" name="year" value="<?php echo date('Y'); ?>" min="2000" max="2030">
</div>
<button type="submit">Update Chart</button>
</form>
</div>
<div class="charts-container">
<?php
// Include the data model
require_once 'models/ChartData.php';
// Get chart type from URL or default
$chartType = isset($_GET['chartType']) ? $_GET['chartType'] : 'sales';
$year = isset($_GET['year']) ? $_GET['year'] : date('Y');
// Fetch data based on chart type
if ($chartType === 'sales') {
$chartData = ChartData::getSalesByMonth($year);
$chartTitle = "Monthly Sales for $year";
$labels = array_column($chartData, 'month_name');
$values = array_column($chartData, 'total_sales');
$backgroundColor = 'rgba(54, 162, 235, 0.7)';
$borderColor = 'rgba(54, 162, 235, 1)';
} else {
$chartData = ChartData::getProductCategories();
$chartTitle = "Products by Category";
$labels = array_column($chartData, 'category_name');
$values = array_column($chartData, 'product_count');
$backgroundColor = 'rgba(255, 99, 132, 0.7)';
$borderColor = 'rgba(255, 99, 132, 1)';
}
// Convert PHP arrays to JSON for JavaScript
$labelsJson = json_encode($labels);
$valuesJson = json_encode($values);
?>
<div class="chart-card">
<h2 class="chart-title"><?php echo $chartTitle; ?></h2>
<div class="chart-wrapper">
<canvas id="barChart"></canvas>
</div>
</div>
<div class="chart-card">
<h2 class="chart-title">Data Summary</h2>
<div class="chart-wrapper">
<canvas id="pieChart"></canvas>
</div>
</div>
</div>
<?php if (!empty($chartData)): ?>
<div class="data-table">
<h2 class="chart-title">Raw Data Table</h2>
<table>
<thead>
<tr>
<?php foreach(array_keys($chartData[0]) as $column): ?>
<th><?php echo ucfirst(str_replace('_', ' ', $column)); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach($chartData as $row): ?>
<tr>
<?php foreach($row as $value): ?>
<td><?php echo htmlspecialchars($value); ?></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php endif; ?>
</div>
<script>
// Get data from PHP
const labels = <?php echo $labelsJson; ?>;
const values = <?php echo $valuesJson; ?>;
const chartTitle = "<?php echo $chartTitle; ?>";
const backgroundColor = "<?php echo $backgroundColor; ?>";
const borderColor = "<?php echo $borderColor; ?>";
// Bar Chart
const barCtx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(barCtx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: chartTitle,
data: values,
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 2,
borderRadius: 5,
hoverBackgroundColor: borderColor
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0,0,0,0.05)'
},
ticks: {
callback: function(value) {
// Format large numbers
if (value >= 1000) {
return (value / 1000).toFixed(1) + 'K';
}
return value;
}
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Pie Chart
const pieCtx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(pieCtx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: values,
backgroundColor: [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
'#9966FF', '#FF9F40', '#FF6384', '#C9CBCF',
'#4BC0C0', '#9966FF', '#FF9F40', '#36A2EB'
],
borderWidth: 2,
borderColor: '#fff'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
padding: 20,
usePointStyle: true
}
}
}
}
});
// Update select value based on current chart type
document.getElementById('chartType').value = "<?php echo $chartType; ?>";
</script>
</div>
<!-- /#page-wrapper -->
<?php include_once('include/footer.php'); ?>