File "dashboard.php"
Full path: /home/atrmarke/public_html/atrdemolive.site/lab/pages/dashboard.php
File
size: 0.01 KB (13.74 KB bytes)
MIME-type: text/x-php
Charset: utf-8
Download Open Edit Advanced Editor Back
<?php
include("../db/cn.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../img/print_logo.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Laboratory L.I.M.S</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.0 " rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/css/demo.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<style>
.small-box {
position: relative;
border-radius: 8px;
color: white;
margin-bottom: 15px;
overflow: hidden;
transition: transform 0.3s ease;
}
.small-box .inner {
padding: 20px;
position: relative;
z-index: 2;
}
.small-box .icon-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
opacity: 0.2;
z-index: 1;
}
.small-box:hover .icon-popup {
opacity: 1;
transform: scale(1);
}
.small-box .icon-popup {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
z-index: 3;
}
.small-box-header {
background: rgba(0, 0, 0, 0.1);
padding: 10px;
font-weight: bold;
text-align: left;
font-size:12px;
}
.small-box-footer {
background: rgba(0, 0, 0, 0.1);
padding: 10px;
text-align: center;
}
.bg-primary { background-color: #007bff; }
.bg-success { background-color: #28a745; }
.bg-info { background-color: #17a2b8; }
.bg-warning { background-color: #ffc107; color: #212529; }
.bg-secondary { background-color: #6c757d; }
</style>
<body>
<div class="wrapper">
<div class="sidebar" data-image="../assets/img/sidebar-7.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
Tip 2: you can also add an image using data-image tag
--> <?php include("common/sd.php"); ?>
</div>
<div class="main-panel">
<!-- Navbar -->
<?php include("common/hd.php"); ?>
<!-- End Navbar -->
<div class="content">
<div class="container ">
<div class="row">
<?php // SQL query to count the number of patients
$sql2 = "SELECT COUNT(*) AS total_patients FROM lab_test";
// Execute the query
$result2 = $connection->query($sql2);
if ($result2 && $result2->num_rows > 0) {
// Fetch the result as an associative array
$rows2 = $result2->fetch_assoc();
$totalPatients2 = $rows2["total_patients"];
echo "" ;;
} else {
echo "No patients found";
}
?>
<div class="col-sm-3">
<div class="small-box bg-primary">
<div class="small-box-header">Lab Tests</div>
<div class="inner">
<i class="fas fa-clipboard-check icon-background"></i>
<h4><?php echo $totalPatients2; ?></h4>
</div>
<div class="small-box-footer">
<a href="lab.php" class="text-white">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
<div class="icon-popup"><i class="fas fa-clipboard-check"></i></div>
</div>
</div>
<?php // SQL query to count the number of patients
$sql = "SELECT COUNT(*) AS total_patients FROM patient";
// Execute the query
$result = $connection->query($sql);
if ($result && $result->num_rows > 0) {
// Fetch the result as an associative array
$rows = $result->fetch_assoc();
$totalPatients = $rows["total_patients"];
echo "" ;;
} else {
echo "No patients found";
}
?>
<div class="col-sm-3">
<div class="small-box bg-success">
<div class="small-box-header">Patients</div>
<div class="inner">
<i class="fas fa-users icon-background"></i>
<h4><?php echo $totalPatients; ?></h4>
</div>
<div class="small-box-footer">
<a href="patient.php" class="text-white">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
<div class="icon-popup"><i class="fas fa-users"></i></div>
</div>
</div>
<?php // SQL query to count the number of patients
$sql12 = "SELECT COUNT(*) AS total_patients FROM lab_report";
// Execute the query
$result12 = $connection->query($sql12);
if ($result12 && $result12->num_rows > 0) {
// Fetch the result as an associative array
$rows12 = $result12->fetch_assoc();
$totalPatients12 = $rows12["total_patients"];
echo "" ;;
} else {
echo "No patients found";
}
?>
<div class="col-sm-3">
<div class="small-box bg-info">
<div class="small-box-header">Documents</div>
<div class="inner">
<i class="fas fa-clipboard icon-background"></i>
<h4><?php echo $totalPatients12 ;?></h4>
</div>
<div class="small-box-footer">
<a href="lab_reports.php" class="text-white">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
<div class="icon-popup"><i class="fas fa-clipboard"></i></div>
</div>
</div>
<?php // SQL query to count the number of patients
$sql1 = "SELECT COUNT(*) AS total_patients FROM lab_invoice";
// Execute the query
$result1 = $connection->query($sql1);
if ($result1 && $result1->num_rows > 0) {
// Fetch the result as an associative array
$rows1 = $result1->fetch_assoc();
$totalPatients1 = $rows1["total_patients"];
echo "" ;;
} else {
echo "No patients found";
}
?>
<div class="col-sm-3">
<div class="small-box bg-dark">
<div class="small-box-header">Invoice</div>
<div class="inner">
<i class="fas fa-dollar-sign icon-background"></i>
<h4><?php echo $totalPatients1; ?></h4>
</div>
<div class="small-box-footer">
<a href="financial.php" class="text-white">More info <i class="fas fa-arrow-circle-right"></i></a>
</div>
<div class="icon-popup"><i class="fas fa- fa-dollar-sign"></i></div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 mb-4">
<canvas id="weekIncomeChart"></canvas>
</div>
<div class="col-sm-6 mb-4">
<canvas id="monthIncomeChart"></canvas>
</div>
<div class="col-sm-12">
<canvas id="yearIncomeChart"></canvas>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
</div>
</footer>
</div>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
const weekIncomeCtx = document.getElementById('weekIncomeChart').getContext('2d');
const monthIncomeCtx = document.getElementById('monthIncomeChart').getContext('2d');
const yearIncomeCtx = document.getElementById('yearIncomeChart').getContext('2d');
const weekIncomeData = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'This Week Income',
data: [12, 19, 3, 5, 2, 3, 9],
borderColor: 'maroon',
borderWidth: 2,
fill: true,
backgroundColor: 'rgba(128, 0, 0, 0.2)',
tension: 0.4,
pointBackgroundColor: 'maroon',
cubicInterpolationMode: 'monotone'
}]
};
const monthIncomeData = {
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
datasets: [{
label: 'This Month Income',
data: [200, 450, 300, 600],
borderColor: 'maroon',
borderWidth: 2,
fill: true,
backgroundColor: 'rgba(128, 0, 0, 0.2)',
tension: 0.4,
pointBackgroundColor: 'maroon',
cubicInterpolationMode: 'monotone'
}]
};
const yearIncomeData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'This Year Income',
data: [1200, 1900, 3000, 5000, 2000, 3000, 4500, 6000, 3500, 4000, 3200, 4100],
borderColor: 'maroon',
borderWidth: 2,
fill: true,
backgroundColor: 'rgba(128, 0, 0, 0.2)',
tension: 0.4,
pointBackgroundColor: 'maroon',
cubicInterpolationMode: 'monotone'
}]
};
const config = (data) => ({
type: 'line',
data: data,
options: {
responsive: true,
animation: {
duration: 2000,
easing: 'easeInOutQuart'
},
scales: {
y: {
beginAtZero: true
}
},
plugins: {
beforeDatasetsDraw: (chart, easing) => {
const ctx = chart.ctx;
chart.data.datasets.forEach((dataset, i) => {
const meta = chart.getDatasetMeta(i);
meta.data.forEach((point, index) => {
if (index < meta.data.length - 1) {
const nextPoint = meta.data[index + 1];
ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
ctx.beginPath();
ctx.moveTo(point.x, point.y);
ctx.lineTo(nextPoint.x, nextPoint.y);
ctx.lineWidth = dataset.borderWidth;
ctx.strokeStyle = dataset.borderColor;
ctx.stroke();
ctx.restore();
}
});
});
}
}
}
});
new Chart(weekIncomeCtx, config(weekIncomeData));
new Chart(monthIncomeCtx, config(monthIncomeData));
new Chart(yearIncomeCtx, config(yearIncomeData));
});
</script>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist Plugin -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.0 " type="text/javascript"></script>
<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>
<script type="text/javascript">
</script>
</html>