make this codes modern design (<?php
// /public/workspace/index.php

// Disable error reporting in production
ini_set('display_errors', 0);
ini_set('display_startup_errors', 0);
error_reporting(0);

// 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[] = "An error occurred while fetching summary data.";
    $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 >= CURDATE()
                               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 >= CURDATE() 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[] = "An error occurred while fetching calendar events.";
}

// 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[] = "An error occurred while fetching chart data.";
}

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

try {
    // Fetch Plans
    if ($user_role === 'admin') {
        $recent_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
                             ORDER BY wp.created_at DESC
                             LIMIT ?";
        $stmt = $conn->prepare($recent_plans_sql);
        $stmt->bind_param("i", $items_per_section);
    } else {
        $recent_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 = ?
                             ORDER BY wp.created_at DESC
                             LIMIT ?";
        $stmt = $conn->prepare($recent_plans_sql);
        $stmt->bind_param("ii", $user_id, $items_per_section);
    }

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

    // Fetch Posts
    if ($user_role === 'admin') {
        $recent_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
                             ORDER BY wp.created_at DESC
                             LIMIT ?";
        $stmt = $conn->prepare($recent_posts_sql);
        $stmt->bind_param("i", $items_per_section);
    } else {
        $recent_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 = ?
                             ORDER BY wp.created_at DESC
                             LIMIT ?";
        $stmt = $conn->prepare($recent_posts_sql);
        $stmt->bind_param("ii", $user_id, $items_per_section);
    }

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

    // Fetch Notes
    if ($user_role === 'admin') {
        $recent_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
                             ORDER BY wn.created_at DESC
                             LIMIT ?";
        $stmt = $conn->prepare($recent_notes_sql);
        $stmt->bind_param("i", $items_per_section);
    } else {
        $recent_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 = ?
                             ORDER BY wn.created_at DESC
                             LIMIT ?";
        $stmt = $conn->prepare($recent_notes_sql);
        $stmt->bind_param("ii", $user_id, $items_per_section);
    }

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

    // Fetch Ads
    if ($user_role === 'admin') {
        $recent_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
                          ORDER BY a.created_at DESC
                          LIMIT ?";
        $stmt = $conn->prepare($recent_ads_sql);
        $stmt->bind_param("i", $items_per_section);
    } else {
        $recent_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 = ?
                          ORDER BY a.created_at DESC
                          LIMIT ?";
        $stmt = $conn->prepare($recent_ads_sql);
        $stmt->bind_param("ii", $user_id, $items_per_section);
    }

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

    // Fetch Notifications
    if ($user_role === 'admin') {
        $recent_notifications_sql = "SELECT n.message AS title, n.created_at AS created_at, 'System' AS user, n.type AS type, n.link AS link
                                     FROM notifications n
                                     ORDER BY n.created_at DESC
                                     LIMIT ?";
        $stmt = $conn->prepare($recent_notifications_sql);
        $stmt->bind_param("i", $items_per_section);
    } else {
        $recent_notifications_sql = "SELECT n.message AS title, n.created_at AS created_at, 'System' AS user, n.type AS type, n.link AS link
                                     FROM notifications n
                                     WHERE n.user_id = ?
                                     ORDER BY n.created_at DESC
                                     LIMIT ?";
        $stmt = $conn->prepare($recent_notifications_sql);
        $stmt->bind_param("ii", $user_id, $items_per_section);
    }

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

    // Sort recent activities by created_at descending
    usort($recent_activities, function ($a, $b) {
        return strtotime($b['created_at']) - strtotime($a['created_at']);
    });

    // Limit to the latest $items_per_section activities
    if (count($recent_activities) > $items_per_section) {
        $recent_activities = array_slice($recent_activities, 0, $items_per_section);
    }
} catch (Exception $e) {
    $errors[] = "An error occurred while fetching recent activities.";
}
?>
<!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;
        }
        .dark-mode {
            background-color: #1a202c;
            color: #cbd5e0;
        }
        .dark-mode table {
            background-color: #2d3748;
        }
        .dark-mode th {
            background-color: #4a5568;
        }
        .dark-mode tr:hover {
            background-color: #4a5568;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900">
    <!-- Header -->
    <?php include __DIR__ . '/../../includes/header.php'; ?>

    <!-- Main Content -->
    <main class="container mx-auto p-6 mt-4 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 dark:bg-gray-800 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 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <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">Title</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-6 py-3"></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            <?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
                                    $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-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($title) ?>
                                        </a>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <?= htmlspecialchars($user) ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <?= htmlspecialchars($date) ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap 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; ?>
                        </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 dark:bg-gray-800 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 dark:bg-gray-800 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 dark:bg-gray-800 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 dark:bg-gray-800 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 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>
    <!-- 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 this Page Styling and Design Description

1. Overall Aesthetic and Theme

Modern and Clean Design: The page is designed with a minimalistic aesthetic focused on simplicity and clarity, allowing users to engage with form elements without distractions. This promotes easy interaction and efficient data entry.
Color Palette:
Primary Colors: A soothing teal hue (#20B2AA) highlights key interactive elements like buttons and icons, establishing a sense of trust and professionalism.
Neutral Backgrounds: Soft gray tones (e.g., #f1f5f9 for scrollbar tracks) provide a balanced backdrop that enhances readability without overpowering content.
Accent Colors: Red tones draw attention to error messages, while green hues are used for success indicators, offering clear, visual feedback for various form states.
2. Layout and Structure

Container-Based Layout: The content is housed in a responsive container (container mx-auto p-6), maintaining alignment and spacing across screen sizes. Generous padding (p-6) prevents clutter, creating a comfortable visual structure.
Sectioning and Hierarchy: The form is divided into sections (e.g., Customer Details, Order Details), each within distinct, bordered blocks (bg-white rounded-lg shadow-lg p-6 mb-8), helping users navigate and logically organize information.
Responsive Grid System: Using Tailwind CSS's grid utilities, form fields adapt to different screen sizes, appearing side-by-side on large screens (md:flex-row md:space-x-6) and stacking vertically on smaller devices for better accessibility.
3. Typography and Text Styling

Font Choices: A clean, sans-serif font is used for readability. Tailwind CSS's default font settings ensure consistency.
Text Hierarchy:
Headings: Prominent headings (text-3xl font-bold text-teal-600) guide users through sections.
Labels and Instructions: Labels use medium font weights (font-medium text-gray-700) for clarity, with additional descriptions styled smaller and gray for non-disruptive guidance.
4. Form Elements and Inputs

Input Fields:
Consistent Styling: Uniform styling across inputs (rounded-md border-gray-300 with focus states like focus:ring-teal-500 focus:border-teal-500) creates a cohesive user experience.
Padding and Sizing: Sufficient padding (p-2) enhances readability and interaction.
Buttons:
Primary Actions: Bold-colored buttons (bg-teal-500 rounded-lg) with hover effects (hover:bg-teal-600) provide visual feedback.
Icon Integration: Using icons (via Bootstrap Icons) next to button labels aids in clarity, making functions intuitive.
Checkboxes and Radio Buttons:
Customized Appearance: Consistent sizing and color accents (text-teal-600) make these elements noticeable without overwhelming the design.
5. Interactive Elements and Enhancements

Dynamic Form Rows: Animated transitions for adding/removing product rows (shadow-md) keep changes smooth and visually coherent.
Tooltips: Small icons (bi-question-circle) with tooltips provide guidance on hover, helping users without adding clutter. Tooltips have dark backgrounds and smooth animations.
6. Notifications and Alerts

Feedback Messages:
Error Messages: Styled with red tones (bg-red-100, border-red-400, text-red-700), they are prominent and actionable.
Success Messages: Green styling (bg-green-100, border-green-400, text-green-700) reinforces positive actions.
Iconography: Icons (bi-exclamation-triangle-fill for errors, bi-check-circle-fill for successes) enhance message clarity.
7. Scrollbar Customization

Aesthetic Scrollbars: Styled with narrow widths (8px) and rounded edges, ensuring they are functional but not intrusive. Colors align with the main scheme, and the thumb color changes on hover for feedback.
8. Buttons and Interactive Controls

Add and Remove Buttons: Both buttons are consistently designed with background colors, text colors, padding, and hover effects, making the interface predictable.
Icon Usage: Icons (e.g., bi-plus-circle-fill for adding, bi-trash-fill for removing) clarify actions.
9. Date and Time Picker Integration

Enhanced User Input: Integrate the Flatpickr library for date and time selection (#delivery_datetime), offering users an intuitive interface that matches other form styles.
Keyboard Accessibility: Designed to be keyboard-friendly, accommodating all users.
10. Footer Design

Subtle Footer: The footer uses soft gray tones (text-gray-600), ensuring it provides information without detracting from the main content.
11. Responsive Design and Mobile Optimization

Adaptive Layouts: Tailwind CSS responsive utilities ensure layout flexibility across devices.
Touch-Friendly Elements: Adequate sizing and spacing facilitate easy touchscreen interaction.
12. Accessibility Features

Semantic HTML: Elements like <label>, <input>, and <button> are used correctly to support assistive technologies.
Focus States: Interactive elements have clear focus states (focus:ring-teal-500 focus:border-teal-500) for keyboard navigation.
13. Consistent Spacing and Sizing

Whitespace Utilization: Generous margins (mb-6, mt-4) and padding (p-4, p-6) create visual balance.
Element Sizing: Uniform element sizing promotes a well-organized, professional appearance.
14. Visual Hierarchy and Emphasis

Clear Hierarchy: Larger, bolder fonts in headings guide users through sections.
Emphasized Labels: Important fields are marked with an asterisk (<span class="text-red-500">*</span>), drawing attention without overwhelming.
15. Interactive Feedback and Animations

Hover and Focus Effects: Color changes on hover (hover:bg-teal-600, hover:bg-red-600) provide feedback.
Smooth Transitions: Transition effects (transition duration-300) enhance user experience.
16. Iconography and Visual Cues

Bootstrap Icons Integration: Icons are sized and colored consistently (text-gray-400 text-sm for tooltips), ensuring they enhance without disrupting design.
17. Enhanced User Guidance

Tooltip Descriptions: Tooltips provide context-sensitive help, available only when needed to maintain a clean interface.
and type full codes