126 lines
5.4 KiB
PHP
126 lines
5.4 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
try {
|
|
$pdo = db();
|
|
|
|
// Fetch calendar events
|
|
$stmt = $pdo->query("SELECT title, start_date as start, end_date as end, event_type FROM calendar_events");
|
|
$events = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
$calendar_events_json = json_encode($events);
|
|
|
|
// Stat cards data
|
|
$stmt_upcoming = $pdo->prepare("SELECT COUNT(*) FROM calendar_events WHERE start_date BETWEEN CURDATE() AND DATE_ADD(CURDATE(), INTERVAL 7 DAY)");
|
|
$stmt_upcoming->execute();
|
|
$upcoming_appointments_count = $stmt_upcoming->fetchColumn();
|
|
|
|
} catch (PDOException $e) {
|
|
$error = "Database error: " . $e->getMessage();
|
|
}
|
|
|
|
$project_name = "HVAC Command Center";
|
|
$page_title = "Calendar";
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title><?= htmlspecialchars($page_title) ?> - <?= htmlspecialchars($project_name) ?></title>
|
|
|
|
<!-- Styles -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- FullCalendar -->
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2 class="h5"><i class="fas fa-tachometer-alt me-2"></i><?= htmlspecialchars($project_name) ?></h2>
|
|
</div>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item"><a class="nav-link" href="index.php"><i class="fas fa-home"></i>Dashboard</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="customers.php"><i class="fas fa-users"></i>Customers</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="bookings.php"><i class="fas fa-calendar-check"></i>Bookings</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="ai-call-logs.php"><i class="fas fa-robot"></i>AI Call Logs</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="chat-logs.php"><i class="fas fa-comments"></i>Chat Logs</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="call-tracking.php"><i class="fas fa-phone-alt"></i>Call Tracking</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="reviews.php"><i class="fas fa-star"></i>Reviews</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="calendar.php"><i class="fas fa-calendar-alt"></i>Calendar</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<header class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1><?= htmlspecialchars($page_title) ?></h1>
|
|
</header>
|
|
|
|
<?php if (isset($error)): ?>
|
|
<div class="alert alert-danger"><i class="fas fa-exclamation-triangle me-2"></i> <?= htmlspecialchars($error) ?></div>
|
|
<?php else: ?>
|
|
<!-- Stat Cards -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card stat-card h-100">
|
|
<div class="card-body">
|
|
<h6 class="text-muted">Upcoming Appointments (Next 7 Days)</h6>
|
|
<h4 class="fw-bold mb-0"><?= htmlspecialchars($upcoming_appointments_count) ?></h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card stat-card h-100">
|
|
<div class="card-body">
|
|
<h6 class="text-muted">Technician Workload</h6>
|
|
<p class="text-muted small">Workload summary coming soon.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="calendar"></div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
},
|
|
events: <?= $calendar_events_json ?? '[]' ?>,
|
|
eventDidMount: function(info) {
|
|
// Apply custom styles for dark theme
|
|
info.el.style.borderColor = '#4dc9ff';
|
|
if (info.event.extendedProps.event_type === 'booking') {
|
|
info.el.style.backgroundColor = '#0d6efd';
|
|
} else if (info.event.extendedProps.event_type === 'maintenance') {
|
|
info.el.style.backgroundColor = '#198754';
|
|
} else {
|
|
info.el.style.backgroundColor = '#6c757d';
|
|
}
|
|
}
|
|
});
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|