based on this info database (-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
-- Host: 127.0.0.1:3306
-- Generation Time: Nov 11, 2024 at 06:48 AM
-- Server version: 10.11.9-MariaDB
-- PHP Version: 7.2.34

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT /;
/!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS /;
/!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION /;
/!40101 SET NAMES utf8mb4 */;

--
-- Database: u406552082_kaakalia
--
-- Table structure for table ads
CREATE TABLE ads (
id int(11) NOT NULL,
user_id int(11) NOT NULL,
name varchar(255) NOT NULL,
ad_type enum('Post','Story') NOT NULL,
related_id int(11) NOT NULL,
budget decimal(10,2) NOT NULL,
total_spent decimal(10,2) DEFAULT 0.00,
start_date date NOT NULL,
end_date date NOT NULL,
status enum('Active','Paused','Completed') DEFAULT 'Active',
created_at datetime DEFAULT current_timestamp(),
updated_at datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table ad_spend_logs
CREATE TABLE ad_spend_logs (
id int(11) NOT NULL,
ad_id int(11) NOT NULL,
amount decimal(10,2) NOT NULL,
spend_date datetime DEFAULT current_timestamp(),
description varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table customers
CREATE TABLE customers (
id int(11) NOT NULL,
name varchar(100) NOT NULL,
contact varchar(50) DEFAULT NULL,
delivery_address text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table drivers
CREATE TABLE drivers (
id int(11) NOT NULL,
name varchar(100) NOT NULL,
number varchar(15) NOT NULL,
is_star tinyint(1) DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table notifications
CREATE TABLE notifications (
id int(11) NOT NULL,
user_id int(11) NOT NULL,
type enum('order','post','plan','note') NOT NULL,
message varchar(255) NOT NULL,
link varchar(255) NOT NULL,
created_at datetime DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table orders
CREATE TABLE orders (
id int(11) NOT NULL,
customer_id int(11) NOT NULL,
status enum('Pending','In Progress','Completed','Delivered') DEFAULT 'Pending',
priority enum('Normal','Important','Quick') DEFAULT 'Normal',
order_date datetime DEFAULT current_timestamp(),
delivery_datetime datetime DEFAULT NULL,
delivery_date date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table order_items
CREATE TABLE order_items (
id int(11) NOT NULL,
order_id int(11) NOT NULL,
product_id int(11) NOT NULL,
quantity int(11) NOT NULL DEFAULT 1,
packaging_preferences varchar(255) DEFAULT NULL,
discount_percentage decimal(5,2) DEFAULT 0.00,
discount_reason varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table products
CREATE TABLE products (
id int(11) NOT NULL,
name varchar(100) NOT NULL,
size varchar(50) DEFAULT NULL,
price decimal(10,2) NOT NULL,
category varchar(50) DEFAULT NULL,
thumbnail varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table users
CREATE TABLE users (
id int(11) NOT NULL,
username varchar(50) NOT NULL,
email varchar(100) DEFAULT NULL,
password varchar(255) NOT NULL,
role enum('admin','staff') NOT NULL,
profile_image varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table workspace_notes
CREATE TABLE workspace_notes (
id int(11) NOT NULL,
user_id int(11) NOT NULL,
title varchar(255) NOT NULL,
content text NOT NULL,
created_at datetime DEFAULT current_timestamp(),
updated_at datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table workspace_plans
CREATE TABLE workspace_plans (
id int(11) NOT NULL,
user_id int(11) NOT NULL,
title varchar(255) NOT NULL,
description text DEFAULT NULL,
audio_path varchar(255) DEFAULT NULL,
due_date datetime DEFAULT NULL,
status enum('Not Started','In Progress','Completed') DEFAULT 'Not Started',
created_at datetime DEFAULT current_timestamp(),
updated_at datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Table structure for table workspace_posts
CREATE TABLE workspace_posts (
id int(11) NOT NULL,
user_id int(11) NOT NULL,
platform enum('Instagram','Facebook','Twitter','Other') NOT NULL,
content text NOT NULL,
media_url varchar(255) DEFAULT NULL,
scheduled_datetime datetime DEFAULT NULL,
status enum('Scheduled','Posted','Failed') DEFAULT 'Scheduled',
created_at datetime DEFAULT current_timestamp(),
updated_at datetime DEFAULT current_timestamp() ON UPDATE current_timestamp(),
type enum('Post','Story') DEFAULT 'Post'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Indexes for dumped tables
--
-- Indexes for table ads
ALTER TABLE ads
ADD PRIMARY KEY (id),
ADD KEY user_id (user_id),
ADD KEY related_id (related_id);

--
-- Indexes for table ad_spend_logs
ALTER TABLE ad_spend_logs
ADD PRIMARY KEY (id),
ADD KEY ad_id (ad_id);

--
-- Indexes for table customers
ALTER TABLE customers
ADD PRIMARY KEY (id);

--
-- Indexes for table drivers
ALTER TABLE drivers
ADD PRIMARY KEY (id);

--
-- Indexes for table notifications
ALTER TABLE notifications
ADD PRIMARY KEY (id),
ADD KEY user_id (user_id),
ADD KEY created_at (created_at);

--
-- Indexes for table orders
ALTER TABLE orders
ADD PRIMARY KEY (id),
ADD KEY customer_id (customer_id),
ADD KEY idx_orders_customer_id (customer_id);

--
-- Indexes for table order_items
ALTER TABLE order_items
ADD PRIMARY KEY (id),
ADD KEY order_id (order_id),
ADD KEY product_id (product_id),
ADD KEY idx_order_items_order_id (order_id),
ADD KEY idx_order_items_product_id (product_id);

--
-- Indexes for table products
ALTER TABLE products
ADD PRIMARY KEY (id);

--
-- Indexes for table users
ALTER TABLE users
ADD PRIMARY KEY (id),
ADD UNIQUE KEY username (username);

--
-- Indexes for table workspace_notes
ALTER TABLE workspace_notes
ADD PRIMARY KEY (id),
ADD KEY user_id (user_id);

--
-- Indexes for table workspace_plans
ALTER TABLE workspace_plans
ADD PRIMARY KEY (id),
ADD KEY user_id (user_id);

--
-- Indexes for table workspace_posts
ALTER TABLE workspace_posts
ADD PRIMARY KEY (id),
ADD KEY user_id (user_id);

--
-- AUTO_INCREMENT for dumped tables
--
-- AUTO_INCREMENT for table ads
ALTER TABLE ads
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table ad_spend_logs
ALTER TABLE ad_spend_logs
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table customers
ALTER TABLE customers
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table drivers
ALTER TABLE drivers
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table notifications
ALTER TABLE notifications
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table orders
ALTER TABLE orders
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table order_items
ALTER TABLE order_items
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table products
ALTER TABLE products
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table users
ALTER TABLE users
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table workspace_notes
ALTER TABLE workspace_notes
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table workspace_plans
ALTER TABLE workspace_plans
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table workspace_posts
ALTER TABLE workspace_posts
MODIFY id int(11) NOT NULL AUTO_INCREMENT;

--
-- Constraints for dumped tables
--
-- Constraints for table ads
ALTER TABLE ads
ADD CONSTRAINT fk_ads_related_id FOREIGN KEY (related_id) REFERENCES workspace_posts (id) ON DELETE CASCADE,
ADD CONSTRAINT fk_ads_user_id FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE;

--
-- Constraints for table ad_spend_logs
ALTER TABLE ad_spend_logs
ADD CONSTRAINT fk_ad_spend_logs_ad_id FOREIGN KEY (ad_id) REFERENCES ads (id) ON DELETE CASCADE;

--
-- Constraints for table notifications
ALTER TABLE notifications
ADD CONSTRAINT notifications_ibfk_1 FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE;

--
-- Constraints for table orders
ALTER TABLE orders
ADD CONSTRAINT fk_orders_customer_id FOREIGN KEY (customer_id) REFERENCES customers (id) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT orders_ibfk_1 FOREIGN KEY (customer_id) REFERENCES customers (id) ON DELETE CASCADE;

--
-- Constraints for table order_items
ALTER TABLE order_items
ADD CONSTRAINT fk_order_items_order_id FOREIGN KEY (order_id) REFERENCES orders (id) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT fk_order_items_product_id FOREIGN KEY (product_id) REFERENCES products (id) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT order_items_ibfk_1 FOREIGN KEY (order_id) REFERENCES orders (id) ON DELETE CASCADE,
ADD CONSTRAINT order_items_ibfk_2 FOREIGN KEY (product_id) REFERENCES products (id) ON DELETE CASCADE;

--
-- Constraints for table workspace_notes
ALTER TABLE workspace_notes
ADD CONSTRAINT fk_workspace_notes_user_id FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE;

--
-- Constraints for table workspace_plans
ALTER TABLE workspace_plans
ADD CONSTRAINT fk_workspace_plans_user_id FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE;

--
-- Constraints for table workspace_posts
ALTER TABLE workspace_posts
ADD CONSTRAINT fk_workspace_posts_user_id FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT /;
/!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS /;
/!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;) i want to appear the plans and notes and post and ad in Recent Activities, because i can't see the recente activites altghout there new plans were created, please fix it and this file activites.php (<?php
// /public/workspace/activities.php

// Enable error reporting for debugging (disable in production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Start output buffering to prevent "headers already sent" errors
ob_start();

// Include authentication, database connection, and utility functions
require_once DIR . '/../../includes/auth.php';
require_once DIR . '/../../includes/db_connect.php';
require_once DIR . '/../../includes/functions.php'; // Contains sanitize_input()

// Ensure the user is authenticated
if (!isset($_SESSION['user_id'])) {
header("Location: /public/login.php");
exit();
}

$user_id = $_SESSION['user_id'];
$user_role = $_SESSION['role']; // 'admin' or 'staff'
$errors = [];

// Fetch all activities: Plans, Posts, Notes, Ads, Notifications
$activities = [];

try {
// Fetch Plans
if ($user_role === 'admin') {
$plans_sql = "SELECT wp.title AS title, wp.created_at AS created_at, u.username AS user, 'plan' AS type, CONCAT('view_plan.php?id=', wp.id) AS link
FROM workspace_plans wp
JOIN users u ON wp.user_id = u.id";
$stmt = $conn->prepare($plans_sql);
} else {
$plans_sql = "SELECT wp.title AS title, wp.created_at AS created_at, u.username AS user, 'plan' AS type, CONCAT('view_plan.php?id=', wp.id) AS link
FROM workspace_plans wp
JOIN users u ON wp.user_id = u.id
WHERE wp.user_id = ?";
$stmt = $conn->prepare($plans_sql);
$stmt->bind_param("i", $user_id);
}


if ($stmt) {
    $stmt->execute();
    $result = $stmt->get_result();
    while ($plan = $result->fetch_assoc()) {
        $activities[] = $plan;
    }
    $stmt->close();
} else {
    throw new Exception("Prepare statement failed for plans: " . $conn->error);
}

// Fetch Posts
if ($user_role === 'admin') {
    $posts_sql = "SELECT CONCAT(wp.platform, ': ', wp.content) AS title, wp.created_at AS created_at, u.username AS user, 'post' AS type, CONCAT('view_post.php?id=', wp.id) AS link
                 FROM workspace_posts wp
                 JOIN users u ON wp.user_id = u.id";
    $stmt = $conn->prepare($posts_sql);
} else {
    $posts_sql = "SELECT CONCAT(wp.platform, ': ', wp.content) AS title, wp.created_at AS created_at, u.username AS user, 'post' AS type, CONCAT('view_post.php?id=', wp.id) AS link
                 FROM workspace_posts wp
                 JOIN users u ON wp.user_id = u.id
                 WHERE wp.user_id = ?";
    $stmt = $conn->prepare($posts_sql);
    $stmt->bind_param("i", $user_id);
}

if ($stmt) {
    $stmt->execute();
    $result = $stmt->get_result();
    while ($post = $result->fetch_assoc()) {
        $activities[] = $post;
    }
    $stmt->close();
} else {
    throw new Exception("Prepare statement failed for posts: " . $conn->error);
}

// Fetch Notes
if ($user_role === 'admin') {
    $notes_sql = "SELECT wn.title AS title, wn.created_at AS created_at, u.username AS user, 'note' AS type, CONCAT('view_note.php?id=', wn.id) AS link
                 FROM workspace_notes wn
                 JOIN users u ON wn.user_id = u.id";
    $stmt = $conn->prepare($notes_sql);
} else {
    $notes_sql = "SELECT wn.title AS title, wn.created_at AS created_at, u.username AS user, 'note' AS type, CONCAT('view_note.php?id=', wn.id) AS link
                 FROM workspace_notes wn
                 JOIN users u ON wn.user_id = u.id
                 WHERE wn.user_id = ?";
    $stmt = $conn->prepare($notes_sql);
    $stmt->bind_param("i", $user_id);
}

if ($stmt) {
    $stmt->execute();
    $result = $stmt->get_result();
    while ($note = $result->fetch_assoc()) {
        $activities[] = $note;
    }
    $stmt->close();
} else {
    throw new Exception("Prepare statement failed for notes: " . $conn->error);
}

// Fetch Ads
if ($user_role === 'admin') {
    $ads_sql = "SELECT a.name AS title, a.created_at AS created_at, u.username AS user, 'ad' AS type, CONCAT('view_ad.php?id=', a.id) AS link
               FROM ads a
               JOIN users u ON a.user_id = u.id";
    $stmt = $conn->prepare($ads_sql);
} else {
    $ads_sql = "SELECT a.name AS title, a.created_at AS created_at, u.username AS user, 'ad' AS type, CONCAT('view_ad.php?id=', a.id) AS link
               FROM ads a
               JOIN users u ON a.user_id = u.id
               WHERE a.user_id = ?";
    $stmt = $conn->prepare($ads_sql);
    $stmt->bind_param("i", $user_id);
}

if ($stmt) {
    $stmt->execute();
    $result = $stmt->get_result();
    while ($ad = $result->fetch_assoc()) {
        $activities[] = $ad;
    }
    $stmt->close();
} else {
    throw new Exception("Prepare statement failed for ads: " . $conn->error);
}

// Fetch Notifications
if ($user_role === 'admin') {
    $notifications_sql = "SELECT message AS title, created_at AS created_at, 'System' AS user, type AS type, link AS link
                          FROM notifications";
    $stmt = $conn->prepare($notifications_sql);
} else {
    $notifications_sql = "SELECT message AS title, created_at AS created_at, 'System' AS user, type AS type, link AS link
                          FROM notifications
                          WHERE user_id = ?";
    $stmt = $conn->prepare($notifications_sql);
    $stmt->bind_param("i", $user_id);
}

if ($stmt) {
    $stmt->execute();
    $result = $stmt->get_result();
    while ($notification = $result->fetch_assoc()) {
        $activities[] = $notification;
    }
    $stmt->close();
} else {
    throw new Exception("Prepare statement failed for notifications: " . $conn->error);
}

// Sort activities by created_at descending
usort($activities, function ($a, $b) {
    return strtotime($b['created_at']) - strtotime($a['created_at']);
});
} catch (Exception $e) {
$errors[] = $e->getMessage();
}
?>


<!-- Dark Mode Toggle Script -->
<script>
    // On load, check local storage for theme
    document.addEventListener('DOMContentLoaded', function() {
        if(localStorage.getItem('theme') === 'dark') {
            document.body.classList.add('dark-mode');
            document.getElementById('theme-toggle').checked = true;
        }
    });

    function toggleDarkMode() {
        const toggle = document.getElementById('theme-toggle');
        if(toggle.checked) {
            document.body.classList.add('dark-mode');
            localStorage.setItem('theme', 'dark');
        } else {
            document.body.classList.remove('dark-mode');
            localStorage.setItem('theme', 'light');
        }
    }
</script>

<!-- Main Content -->
<main class="container mx-auto p-6 mt-24 mb-20">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">All Activities</h1>
        <!-- Back to Dashboard Button -->
        <a href="index.php" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition flex items-center">
            <i class="bi bi-arrow-left-circle mr-2"></i> Back to Dashboard
        </a>
    </div>

    <!-- Display Errors -->
    <?php if (!empty($errors)): ?>
        <div class="mb-6">
            <?php foreach ($errors as $error): ?>
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-2">
                    <?= htmlspecialchars($error) ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Activities List -->
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow">
            <thead>
                <tr>
                    <th class="px-6 py-3 border-b-2 border-gray-300 dark:border-gray-700 text-left leading-4 text-blue-500 dark:text-blue-400 tracking-wider">Type</th>
                    <th class="px-6 py-3 border-b-2 border-gray-300 dark:border-gray-700 text-left leading-4 text-blue-500 dark:text-blue-400 tracking-wider">Title</th>
                    <th class="px-6 py-3 border-b-2 border-gray-300 dark:border-gray-700 text-left leading-4 text-blue-500 dark:text-blue-400 tracking-wider">User</th>
                    <th class="px-6 py-3 border-b-2 border-gray-300 dark:border-gray-700 text-left leading-4 text-blue-500 dark:text-blue-400 tracking-wider">Date</th>
                    <th class="px-6 py-3 border-b-2 border-gray-300 dark:border-gray-700"></th>
                </tr>
            </thead>
            <tbody class="text-gray-700 dark:text-gray-200">
                <?php if (!empty($activities)): ?>
                    <?php foreach ($activities as $activity): ?>
                        <?php
                            // Determine activity icon and color
                            switch ($activity['type']) {
                                case 'plan':
                                    $icon = '📋';
                                    $color_class = 'activity-plan';
                                    break;
                                case 'post':
                                    $icon = '📢';
                                    $color_class = 'activity-post';
                                    break;
                                case 'note':
                                    $icon = '📝';
                                    $color_class = 'activity-note';
                                    break;
                                case 'ad':
                                    $icon = '📣';
                                    $color_class = 'activity-ad';
                                    break;
                                case 'order':
                                case 'notification':
                                    $icon = '🔔';
                                    $color_class = 'activity-system';
                                    break;
                                default:
                                    $icon = '❓';
                                    $color_class = 'bg-gray-500';
                            }

                            // Sanitize output
                            $title = sanitize_input($activity['title']);
                            $user = sanitize_input($activity['user']);
                            $link = sanitize_input($activity['link']);
                            $date = date("d M Y, h:i A", strtotime($activity['created_at']));
                        ?>
                        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                            <td class="px-6 py-4 whitespace-no-wrap">
                                <div class="flex items-center">
                                    <div class="activity-icon <?= htmlspecialchars($color_class) ?>">
                                        <?= $icon ?>
                                    </div>
                                    <span class="ml-2 capitalize"><?= htmlspecialchars($activity['type']) ?></span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap">
                                <a href="<?= htmlspecialchars($link) ?>" class="text-blue-500 dark:text-blue-400 hover:underline">
                                    <?= $title ?>
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap">
                                <?= $user ?>
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap">
                                <?= $date ?>
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap text-right">
                                <a href="<?= htmlspecialchars($link) ?>" class="text-blue-500 dark:text-blue-400 hover:underline">
                                    <i class="bi bi-arrow-right-circle"></i>
                                </a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5" class="px-6 py-4 text-center text-gray-500">
                            No activities found.
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Optional Pagination (If needed in the future) -->
    <?php /* 
        Implement pagination here if the activities list becomes too long.
        This can be achieved by modifying the SQL queries to include LIMIT and OFFSET,
        and adding pagination controls below the table.
    */ ?>
</main>

<!-- Footer -->
<footer class="fixed bottom-0 left-0 w-full bg-gray-800 dark:bg-gray-900 text-white text-center p-4">
    &copy; 2024 Kaak Alia Bakery. All rights reserved.
</footer>

<!-- FullCalendar JS -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<!-- Custom Scripts (if any) -->
<script>
    // Additional JavaScript can be added here if needed
</script>
) and type full codes of index and please don't show the error and fix thie plans notes and ad and posts , when i create them


so i want to make sure this index.php is showing the plans and posts and notes and ad, (<?php
// /public/workspace/index.php

// Enable error reporting for debugging (disable in production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Start output buffering to prevent "headers already sent" errors
ob_start();

// Include authentication, database connection, and utility functions
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/db_connect.php';
require_once __DIR__ . '/../../includes/functions.php'; // Contains sanitize_input()

// Ensure the user is authenticated
if (!isset($_SESSION['user_id'])) {
    header("Location: /public/login.php");
    exit();
}

$user_id = $_SESSION['user_id'];
$user_role = $_SESSION['role']; // 'admin' or 'staff'
$calendar_events = []; // Initialize calendar events array
$errors = [];

// Initialize counts
$plans_count = $posts_count = $notes_count = $ads_count = 0;

// Fetch summary data: Total Number of Plans, Posts, Notes, Ads
try {
    // Total Plans
    if ($user_role === 'admin') {
        $plans_count_sql = "SELECT COUNT(*) AS total FROM workspace_plans";
    } else {
        $plans_count_sql = "SELECT COUNT(*) AS total FROM workspace_plans WHERE user_id = ?";
    }
    if ($stmt = $conn->prepare($plans_count_sql)) {
        if ($user_role !== 'admin') {
            $stmt->bind_param("i", $user_id);
        }
        $stmt->execute();
        $result = $stmt->get_result();
        $plans_count = $result->fetch_assoc()['total'] ?? 0;
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed for plans count: " . $conn->error);
    }

    // Total Posts
    if ($user_role === 'admin') {
        $posts_count_sql = "SELECT COUNT(*) AS total FROM workspace_posts";
    } else {
        $posts_count_sql = "SELECT COUNT(*) AS total FROM workspace_posts WHERE user_id = ?";
    }
    if ($stmt = $conn->prepare($posts_count_sql)) {
        if ($user_role !== 'admin') {
            $stmt->bind_param("i", $user_id);
        }
        $stmt->execute();
        $result = $stmt->get_result();
        $posts_count = $result->fetch_assoc()['total'] ?? 0;
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed for posts count: " . $conn->error);
    }

    // Total Notes
    if ($user_role === 'admin') {
        $notes_count_sql = "SELECT COUNT(*) AS total FROM workspace_notes";
    } else {
        $notes_count_sql = "SELECT COUNT(*) AS total FROM workspace_notes WHERE user_id = ?";
    }
    if ($stmt = $conn->prepare($notes_count_sql)) {
        if ($user_role !== 'admin') {
            $stmt->bind_param("i", $user_id);
        }
        $stmt->execute();
        $result = $stmt->get_result();
        $notes_count = $result->fetch_assoc()['total'] ?? 0;
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed for notes count: " . $conn->error);
    }

    // Total Ads
    if ($user_role === 'admin') {
        $ads_count_sql = "SELECT COUNT(*) AS total FROM ads";
    } else {
        $ads_count_sql = "SELECT COUNT(*) AS total FROM ads WHERE user_id = ?";
    }
    if ($stmt = $conn->prepare($ads_count_sql)) {
        if ($user_role !== 'admin') {
            $stmt->bind_param("i", $user_id);
        }
        $stmt->execute();
        $result = $stmt->get_result();
        $ads_count = $result->fetch_assoc()['total'] ?? 0;
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed for ads count: " . $conn->error);
    }

} catch (Exception $e) {
    $errors[] = $e->getMessage();
    $plans_count = $posts_count = $notes_count = $ads_count = 0; // Default values in case of error
}

// Fetch upcoming plans and posts for the calendar along with creator's username
try {
    // Fetch Plans
    if ($user_role === 'admin') {
        $calendar_plans_sql = "SELECT wp.id, wp.title, wp.due_date, u.username 
                               FROM workspace_plans wp
                               JOIN users u ON wp.user_id = u.id
                               WHERE wp.due_date >= NOW()
                               ORDER BY wp.due_date ASC";
    } else {
        $calendar_plans_sql = "SELECT wp.id, wp.title, wp.due_date, u.username 
                               FROM workspace_plans wp
                               JOIN users u ON wp.user_id = u.id
                               WHERE wp.due_date >= NOW() AND wp.user_id = ?
                               ORDER BY wp.due_date ASC";
    }
    $stmt = $conn->prepare($calendar_plans_sql);
    if ($stmt) {
        if ($user_role !== 'admin') {
            $stmt->bind_param("i", $user_id);
        }
        $stmt->execute();
        $result = $stmt->get_result();

        while ($plan = $result->fetch_assoc()) {
            $calendar_events[] = [
                'id'    => 'plan_' . $plan['id'], // Prefix to distinguish type
                'title' => sanitize_input($plan['title']) . " (by " . sanitize_input($plan['username']) . ")",
                'start' => $plan['due_date'],
                'type'  => 'plan', // Custom property to identify type
                'color' => '#3B82F6' // Tailwind Blue-500
            ];
        }
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed for calendar plans: " . $conn->error);
    }

    // Fetch Posts
    if ($user_role === 'admin') {
        $calendar_posts_sql = "SELECT wp.id, CONCAT(wp.platform, ': ', wp.content) AS content, wp.scheduled_datetime, u.username 
                               FROM workspace_posts wp
                               JOIN users u ON wp.user_id = u.id
                               WHERE wp.scheduled_datetime >= NOW()
                               ORDER BY wp.scheduled_datetime ASC";
    } else {
        $calendar_posts_sql = "SELECT wp.id, CONCAT(wp.platform, ': ', wp.content) AS content, wp.scheduled_datetime, u.username 
                               FROM workspace_posts wp
                               JOIN users u ON wp.user_id = u.id
                               WHERE wp.scheduled_datetime >= NOW() AND wp.user_id = ?
                               ORDER BY wp.scheduled_datetime ASC";
    }
    $stmt = $conn->prepare($calendar_posts_sql);
    if ($stmt) {
        if ($user_role !== 'admin') {
            $stmt->bind_param("i", $user_id);
        }
        $stmt->execute();
        $result = $stmt->get_result();

        while ($post = $result->fetch_assoc()) {
            $calendar_events[] = [
                'id'    => 'post_' . $post['id'], // Prefix to distinguish type
                'title' => sanitize_input($post['content']) . " (by " . sanitize_input($post['username']) . ")",
                'start' => $post['scheduled_datetime'],
                'type'  => 'post', // Custom property to identify type
                'color' => '#10B981' // Tailwind Green-500
            ];
        }
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed for calendar posts: " . $conn->error);
    }
} catch (Exception $e) {
    $errors[] = $e->getMessage();
}

// Fetch data for charts
$plans_per_month = array_fill(1, 12, 0);
$posts_per_platform = ['Instagram' => 0, 'Facebook' => 0, 'Twitter' => 0, 'Other' => 0];
$ads_budget = 0.00;
$ads_spent = 0.00;

try {
    // Plans per month
    $plans_chart_sql = "SELECT MONTH(created_at) as month, COUNT(*) as total 
                        FROM workspace_plans 
                        WHERE YEAR(created_at) = YEAR(CURDATE())";
    if ($user_role !== 'admin') {
        $plans_chart_sql .= " AND user_id = ?";
    }
    $stmt = $conn->prepare($plans_chart_sql);
    if ($user_role !== 'admin') {
        $stmt->bind_param("i", $user_id);
    }
    if ($stmt) {
        $stmt->execute();
        $result = $stmt->get_result();
        while ($row = $result->fetch_assoc()) {
            $plans_per_month[(int)$row['month']] = (int)$row['total'];
        }
        $stmt->close();
    }

    // Posts per platform
    $posts_chart_sql = "SELECT platform, COUNT(*) as total FROM workspace_posts ";
    if ($user_role !== 'admin') {
        $posts_chart_sql .= "WHERE user_id = ? ";
    }
    $posts_chart_sql .= "GROUP BY platform";
    $stmt = $conn->prepare($posts_chart_sql);
    if ($user_role !== 'admin') {
        $stmt->bind_param("i", $user_id);
    }
    if ($stmt) {
        $stmt->execute();
        $result = $stmt->get_result();
        while ($row = $result->fetch_assoc()) {
            if (array_key_exists($row['platform'], $posts_per_platform)) {
                $posts_per_platform[$row['platform']] = (int)$row['total'];
            } else {
                $posts_per_platform['Other'] += (int)$row['total'];
            }
        }
        $stmt->close();
    }

    // Ads Budget vs Spent
    $ads_chart_sql = "SELECT SUM(budget) as total_budget, SUM(total_spent) as total_spent FROM ads ";
    if ($user_role !== 'admin') {
        $ads_chart_sql .= "WHERE user_id = ?";
    }
    $stmt = $conn->prepare($ads_chart_sql);
    if ($user_role !== 'admin') {
        $stmt->bind_param("i", $user_id);
    }
    if ($stmt) {
        $stmt->execute();
        $result = $stmt->get_result();
        if ($row = $result->fetch_assoc()) {
            $ads_budget = (float)$row['total_budget'] ?? 0.00;
            $ads_spent = (float)$row['total_spent'] ?? 0.00;
        }
        $stmt->close();
    }

} catch (Exception $e) {
    $errors[] = $e->getMessage();
}

// Fetch recent activities from notifications
$recent_activities = [];
$items_per_section = 5; // Number of items to display in recent activities

try {
    $recent_activities_sql = "SELECT n.*, u.username 
                               FROM notifications n
                               JOIN users u ON n.user_id = u.id
                               WHERE n.user_id = ?
                               ORDER BY n.created_at DESC
                               LIMIT ?";
    $stmt = $conn->prepare($recent_activities_sql);
    $stmt->bind_param("ii", $user_id, $items_per_section);
    if ($stmt) {
        $stmt->execute();
        $result = $stmt->get_result();
        while ($activity = $result->fetch_assoc()) {
            $recent_activities[] = $activity;
        }
        $stmt->close();
    }
} catch (Exception $e) {
    $errors[] = $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Workspace Dashboard - Kaak Alia Management System</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <!-- FullCalendar CSS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Custom Styles -->
    <style>
        body {
            font-family: 'Cairo', sans-serif;
        }
        #calendar {
            max-width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 20px;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Header -->
    <?php include __DIR__ . '/../../includes/header.php'; ?>

    <!-- Main Content -->
    <main class="container mx-auto p-6 mt-24 mb-20">
        <h1 class="text-3xl font-bold mb-6">Workspace Dashboard</h1>

        <!-- Display Errors -->
        <?php if (!empty($errors)): ?>
            <div class="mb-6">
                <?php foreach ($errors as $error): ?>
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-2">
                        <?= htmlspecialchars($error) ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <!-- Plans -->
            <div class="flex items-center p-6 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow transform hover:scale-105 transition duration-300">
                <i class="bi bi-list-task text-4xl mr-4"></i>
                <div>
                    <h2 class="text-xl font-semibold">Total Plans</h2>
                    <p class="text-2xl"><?= htmlspecialchars(number_format($plans_count)) ?></p>
                </div>
            </div>
            <!-- Posts -->
            <div class="flex items-center p-6 bg-gradient-to-r from-green-500 to-teal-500 text-white rounded-lg shadow transform hover:scale-105 transition duration-300">
                <i class="bi bi-calendar-plus text-4xl mr-4"></i>
                <div>
                    <h2 class="text-xl font-semibold">Total Posts</h2>
                    <p class="text-2xl"><?= htmlspecialchars(number_format($posts_count)) ?></p>
                </div>
            </div>
            <!-- Notes -->
            <div class="flex items-center p-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg shadow transform hover:scale-105 transition duration-300">
                <i class="bi bi-stickies text-4xl mr-4"></i>
                <div>
                    <h2 class="text-xl font-semibold">Total Notes</h2>
                    <p class="text-2xl"><?= htmlspecialchars(number_format($notes_count)) ?></p>
                </div>
            </div>
            <!-- Ads -->
            <div class="flex items-center p-6 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-lg shadow transform hover:scale-105 transition duration-300">
                <i class="bi bi-megaphone text-4xl mr-4"></i>
                <div>
                    <h2 class="text-xl font-semibold">Total Ads</h2>
                    <p class="text-2xl"><?= htmlspecialchars(number_format($ads_count)) ?></p>
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <a href="plans.php" class="block p-6 bg-blue-400 text-white rounded-lg shadow hover:bg-blue-500 transition transform hover:scale-105 duration-300">
                <i class="bi bi-list-task text-3xl"></i>
                <h2 class="mt-2 text-xl font-semibold">Manage Plans</h2>
            </a>
            <a href="posts.php" class="block p-6 bg-green-400 text-white rounded-lg shadow hover:bg-green-500 transition transform hover:scale-105 duration-300">
                <i class="bi bi-calendar-plus text-3xl"></i>
                <h2 class="mt-2 text-xl font-semibold">Manage Posts</h2>
            </a>
            <a href="notes.php" class="block p-6 bg-purple-400 text-white rounded-lg shadow hover:bg-purple-500 transition transform hover:scale-105 duration-300">
                <i class="bi bi-stickies text-3xl"></i>
                <h2 class="mt-2 text-xl font-semibold">Manage Notes</h2>
            </a>
            <a href="ads/index.php" class="block p-6 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 transition transform hover:scale-105 duration-300">
                <i class="bi bi-megaphone text-3xl"></i>
                <h2 class="mt-2 text-xl font-semibold">Manage Ads</h2>
            </a>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold">Recent Activities</h2>
                <a href="activities.php" class="text-blue-500 hover:underline">Show All Activities</a>
            </div>
            <?php if (!empty($recent_activities)): ?>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Message</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Link</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <?php foreach ($recent_activities as $activity): ?>
                                <?php
                                    // Determine activity icon and color
                                    switch ($activity['type']) {
                                        case 'plan':
                                            $icon = '📋';
                                            $color_class = 'bg-blue-500';
                                            break;
                                        case 'post':
                                            $icon = '📢';
                                            $color_class = 'bg-green-500';
                                            break;
                                        case 'note':
                                            $icon = '📝';
                                            $color_class = 'bg-purple-500';
                                            break;
                                        case 'ad':
                                            $icon = '📣';
                                            $color_class = 'bg-red-500';
                                            break;
                                        case 'order':
                                        case 'notification':
                                            $icon = '🔔';
                                            $color_class = 'bg-yellow-500';
                                            break;
                                        default:
                                            $icon = '❓';
                                            $color_class = 'bg-gray-500';
                                    }

                                    // Sanitize output
                                    $message = sanitize_input($activity['message']);
                                    $link = sanitize_input($activity['link']);
                                    $date = date("d M Y, h:i A", strtotime($activity['created_at']));
                                ?>
                                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="inline-block w-4 h-4 rounded-full <?= htmlspecialchars($color_class) ?> text-white mr-2 text-center">
                                                <?= $icon ?>
                                            </span>
                                            <span class="capitalize"><?= htmlspecialchars($activity['type']) ?></span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <a href="<?= htmlspecialchars($link) ?>" class="text-blue-500 dark:text-blue-400 hover:underline">
                                            <?= htmlspecialchars($message) ?>
                                        </a>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <a href="<?= htmlspecialchars($link) ?>" class="text-blue-500 dark:text-blue-400 hover:underline">View</a>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <?= htmlspecialchars($date) ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php else: ?>
                <p class="text-gray-500">No recent activities found.</p>
            <?php endif; ?>
        </div>

        <!-- Overview Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- Plans Overview -->
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-semibold mb-4">Plans Created Per Month</h3>
                <canvas id="plansChart"></canvas>
            </div>
            <!-- Posts Overview -->
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-semibold mb-4">Posts by Platform</h3>
                <canvas id="postsChart"></canvas>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- Ads Budget vs Spent -->
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-semibold mb-4">Ads Budget vs Spent</h3>
                <canvas id="adsChart"></canvas>
            </div>
            <!-- Notes Overview -->
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-semibold mb-4">Total Notes</h3>
                <canvas id="notesChart"></canvas>
            </div>
        </div>

        <!-- Calendar -->
        <div class="mb-6">
            <h2 class="text-2xl font-bold mb-4">Upcoming Plans & Posts</h2>
            <div id='calendar'></div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="fixed bottom-0 left-0 w-full bg-gray-800 text-white text-center p-4">
        &copy; 2024 Kaak Alia Bakery. All rights reserved.
    </footer>

    <!-- FullCalendar JS -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
    <!-- Chart.js Scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize Charts
            // Plans Chart
            var ctxPlans = document.getElementById('plansChart').getContext('2d');
            var plansChart = new Chart(ctxPlans, {
                type: 'bar',
                data: {
                    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    datasets: [{
                        label: 'Plans Created',
                        data: [
                            <?= implode(',', $plans_per_month) ?>
                        ],
                        backgroundColor: 'rgba(59, 130, 246, 0.6)', // Tailwind Blue-500
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: { enabled: true }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // Posts Chart
            var ctxPosts = document.getElementById('postsChart').getContext('2d');
            var postsChart = new Chart(ctxPosts, {
                type: 'doughnut',
                data: {
                    labels: ['Instagram', 'Facebook', 'Twitter', 'Other'],
                    datasets: [{
                        data: [
                            <?= implode(',', $posts_per_platform) ?>
                        ],
                        backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#6B7280'], // Tailwind Colors
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'bottom' },
                        tooltip: { enabled: true }
                    }
                }
            });

            // Notes Chart
            var ctxNotes = document.getElementById('notesChart').getContext('2d');
            var notesChart = new Chart(ctxNotes, {
                type: 'bar',
                data: {
                    labels: ['Total Notes'],
                    datasets: [{
                        label: 'Notes',
                        data: [<?= htmlspecialchars($notes_count) ?>],
                        backgroundColor: 'rgba(128, 90, 213, 0.6)', // Tailwind Purple-500
                        borderColor: 'rgba(128, 90, 213, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: { enabled: true }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // Ads Chart
            var ctxAds = document.getElementById('adsChart').getContext('2d');
            var adsChart = new Chart(ctxAds, {
                type: 'bar',
                data: {
                    labels: ['Total Budget', 'Total Spent'],
                    datasets: [{
                        label: 'Amount ($)',
                        data: [<?= htmlspecialchars($ads_budget) ?>, <?= htmlspecialchars($ads_spent) ?>],
                        backgroundColor: ['rgba(239, 68, 68, 0.6)', 'rgba(34, 197, 94, 0.6)'], // Tailwind Red-500 & Green-500
                        borderColor: ['rgba(239, 68, 68, 1)', 'rgba(34, 197, 94, 1)'],
                        borderWidth: 1
                    }]
                },
                options: {  
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: { enabled: true }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // Initialize FullCalendar
            var calendarEl = document.getElementById('calendar');
            var calendarData = <?= json_encode($calendar_events) ?>;
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: calendarData,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                eventClick: function(info) {
                    // Determine the type of the event and redirect accordingly
                    const eventType = info.event.extendedProps.type;
                    const eventId = info.event.id.split('_')[1]; // Extract the numeric ID

                    if(eventType === 'plan'){
                        window.location.href = 'view_plan.php?id=' + eventId;
                    } else if(eventType === 'post'){
                        window.location.href = 'view_post.php?id=' + eventId;
                    } else {
                        // Default action or handle other types if necessary
                        alert('Unknown event type.');
                    }
                },
                navLinks: true, // Can click day/week names to navigate views
                selectable: true,
                selectMirror: true,
                select: function(arg) {
                    // Handle date selection for creating new plans
                    if(confirm('Would you like to add a new plan on ' + arg.startStr + '?')) {
                        window.location.href = 'create_plan.php?due_date=' + encodeURIComponent(arg.startStr);
                    }
                    calendar.unselect()
                },
                // Responsive Design Enhancements
                height: 'auto',
                windowResize: function(view) {
                    calendar.render();
                }
            });
            calendar.render();
        });
    </script>
</body>
</html>

<?php
// Flush the output buffer
ob_end_flush();
// No closing PHP tag to prevent unwanted output
?>) and type full codes