<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- Remix Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">

    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <style>
        body {
            font-family: Inter, sans-serif;
            background: #f4f7fb;
        }

        .dashboard-card {
            background: #fff;
            border-radius: 24px;
            border: 1px solid #edf2f7;
            box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
            transition: .3s;
        }

        .dashboard-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(15, 23, 42, .08);
        }

        .quick-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border-radius: 22px;
            padding: 24px;
            border: 1px solid #edf2f7;
            background: #f8fafc;
            transition: .3s;
        }

        .quick-btn:hover {
            transform: translateY(-4px);
            background: #fff;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .06);
        }

        .gradient-card {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
        }

        .gradient-card-2 {
            background: linear-gradient(135deg, #06b6d4, #2563eb);
        }

        .gradient-card-3 {
            background: linear-gradient(135deg, #10b981, #059669);
        }

        .gradient-card-4 {
            background: linear-gradient(135deg, #f59e0b, #ea580c);
        }

        .gradient-card-5 {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }

        .timeline {
            position: relative;
            padding-left: 28px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            width: 2px;
            height: 100%;
            background: #e2e8f0;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 26px;
        }

        .timeline-dot {
            position: absolute;
            left: -28px;
            top: 4px;
            width: 16px;
            height: 16px;
            border-radius: 100%;
            border: 3px solid #fff;
        }

        .table-badge {
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
        }
    </style>

</head>

<body>

    <div class="max-w-[1850px] mx-auto px-0 md:px-6 py-5">

        <!-- HEADER -->
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">

            <div>

                <h1 class="text-3xl font-bold text-slate-800">
                    Dashboard
                </h1>

            </div>


        </div>

        <!-- DASHBOARD MODULES -->
        <div class="mt-10 bg-white p-4 rounded-2xl">

            <div class="flex items-center justify-between mb-6">

                <h2 class="text-xl font-bold text-gray-800">
                    Dashboard Modules
                </h2>

            </div>

            <div class="grid grid-cols-1 md:grid-cols-5 gap-3">


                <!-- ACCOUNTS -->
                <div class="gradient-card-5 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-bank-card-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        Accounts
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Finance & Accounting
                    </p>

                    <a href="account_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-red-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>

                <!-- SALES -->
                <div class="gradient-card rounded-[18px] p-4 text-white shadow-lg">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-line-chart-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        Sales Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Revenue & Sales Analytics
                    </p>

                    <a href="sales_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-indigo-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>

                <!-- PROJECT -->
                <div class="gradient-card-2 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-briefcase-4-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        Projects
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Project Management
                    </p>

                    <a href="project_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-cyan-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>

                <!-- TASK -->
                <div class="gradient-card-3 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-task-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        Task Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Daily Task Monitoring
                    </p>

                    <a href="task_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-emerald-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>

                <!-- AMC -->
                <div class="gradient-card-4 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-service-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        AMC Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Contract & Renewals
                    </p>

                    <a href="amc_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-orange-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>


                <!-- HRMS -->
                <div class="gradient-card rounded-[18px] p-4 text-white shadow-lg">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-team-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        HRMS Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Employee & Attendance Management
                    </p>

                    <a href="employee_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-indigo-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>



                <!-- QA -->
                <div class="gradient-card-2 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-bug-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        QA Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Testing & Quality Assurance
                    </p>

                    <a href="qa_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-cyan-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>



                <!-- GRAPHICS -->
                <div class="gradient-card-5 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-palette-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        Graphics Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Creative & Design Management
                    </p>

                    <a href="graphics_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-red-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>



                <!-- SMO / SEO -->
                <div class="gradient-card-4 rounded-[18px] p-4 text-white shadow-xl">

                    <div class="flex items-center justify-between">

                        <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-2xl">
                            <i class="ri-global-line"></i>
                        </div>

                        <i class="ri-arrow-right-up-line text-2xl"></i>

                    </div>

                    <h3 class="text-base font-bold mt-4">
                        SMO / SEO Dashboard
                    </h3>

                    <p class="text-white/80 text-xs mt-1">
                        Social Media & SEO Analytics
                    </p>

                    <a href="smo_seo_dashboard.php" class="inline-flex items-center justify-center mt-4 bg-white text-orange-600 h-[34px] px-4 rounded-xl text-sm font-semibold">
                        Show
                    </a>

                </div>


            </div>

        </div>

        <!-- BUSINESS OVERVIEW -->
        <div class="grid grid-cols-1 xl:grid-cols-12 gap-5 mt-6">

            <!-- ACTIVE MODULES -->
            <div class="xl:col-span-4 dashboard-card p-6">

                <div class="flex items-center justify-between mb-6">

                    <div>

                        <h2 class="text-xl font-bold text-slate-800">
                            Active Modules
                        </h2>

                        <p class="text-sm text-slate-500 mt-1">
                            Running departments overview
                        </p>

                    </div>

                    <div class="w-12 h-12 rounded-2xl bg-indigo-100 flex items-center justify-center">
                        <i class="ri-apps-2-line text-xl text-indigo-600"></i>
                    </div>

                </div>

                <div class="space-y-5">

                    <div>

                        <div class="flex items-center justify-between mb-2">

                            <p class="text-sm font-semibold text-slate-700">
                                Sales Department
                            </p>

                            <p class="text-sm font-bold text-indigo-600">
                                92%
                            </p>

                        </div>

                        <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-full bg-indigo-600 rounded-full" style="width:92%;"></div>
                        </div>

                    </div>

                    <div>

                        <div class="flex items-center justify-between mb-2">

                            <p class="text-sm font-semibold text-slate-700">
                                Accounts
                            </p>

                            <p class="text-sm font-bold text-green-600">
                                84%
                            </p>

                        </div>

                        <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-full bg-green-500 rounded-full" style="width:84%;"></div>
                        </div>

                    </div>

                    <div>

                        <div class="flex items-center justify-between mb-2">

                            <p class="text-sm font-semibold text-slate-700">
                                HRMS
                            </p>

                            <p class="text-sm font-bold text-pink-600">
                                78%
                            </p>

                        </div>

                        <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-full bg-pink-500 rounded-full" style="width:78%;"></div>
                        </div>

                    </div>

                    <div>

                        <div class="flex items-center justify-between mb-2">

                            <p class="text-sm font-semibold text-slate-700">
                                QA Testing
                            </p>

                            <p class="text-sm font-bold text-orange-500">
                                66%
                            </p>

                        </div>

                        <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-full bg-orange-500 rounded-full" style="width:66%;"></div>
                        </div>

                    </div>

                </div>

            </div>

            <!-- COMPANY STATUS -->
            <div class="xl:col-span-4 dashboard-card p-6">

                <div class="flex items-center justify-between mb-6">

                    <div>

                        <h2 class="text-xl font-bold text-slate-800">
                            Company Status
                        </h2>

                        <p class="text-sm text-slate-500 mt-1">
                            Overall business health
                        </p>

                    </div>

                    <div class="w-12 h-12 rounded-2xl bg-green-100 flex items-center justify-center">
                        <i class="ri-pulse-line text-xl text-green-600"></i>
                    </div>

                </div>

                <div id="companyStatusChart"></div>

            </div>

            <!-- SYSTEM ALERTS -->
            <div class="xl:col-span-4 dashboard-card p-6">

                <div class="flex items-center justify-between mb-6">

                    <div>

                        <h2 class="text-xl font-bold text-slate-800">
                            System Alerts
                        </h2>

                        <p class="text-sm text-slate-500 mt-1">
                            Important notifications
                        </p>

                    </div>

                    <div class="w-12 h-12 rounded-2xl bg-red-100 flex items-center justify-center">
                        <i class="ri-notification-3-line text-xl text-red-600"></i>
                    </div>

                </div>

                <div class="space-y-4">

                    <div class="p-4 rounded-2xl bg-red-50 border border-red-100">

                        <div class="flex items-start gap-3">

                            <div class="w-10 h-10 rounded-xl bg-red-100 flex items-center justify-center">
                                <i class="ri-error-warning-line text-red-600"></i>
                            </div>

                            <div>

                                <h4 class="text-sm font-bold text-slate-800">
                                    AMC Renewal Pending
                                </h4>

                                <p class="text-xs text-slate-500 mt-1">
                                    4 contracts expiring this week
                                </p>

                            </div>

                        </div>

                    </div>

                    <div class="p-4 rounded-2xl bg-yellow-50 border border-yellow-100">

                        <div class="flex items-start gap-3">

                            <div class="w-10 h-10 rounded-xl bg-yellow-100 flex items-center justify-center">
                                <i class="ri-time-line text-yellow-600"></i>
                            </div>

                            <div>

                                <h4 class="text-sm font-bold text-slate-800">
                                    Pending Tasks
                                </h4>

                                <p class="text-xs text-slate-500 mt-1">
                                    18 tasks overdue in task dashboard
                                </p>

                            </div>

                        </div>

                    </div>

                    <div class="p-4 rounded-2xl bg-blue-50 border border-blue-100">

                        <div class="flex items-start gap-3">

                            <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
                                <i class="ri-bank-card-line text-blue-600"></i>
                            </div>

                            <div>

                                <h4 class="text-sm font-bold text-slate-800">
                                    Outstanding Payments
                                </h4>

                                <p class="text-xs text-slate-500 mt-1">
                                    ₹3.6L pending in accounts
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- CHARTS -->
        <div class="grid grid-cols-1 xl:grid-cols-12 gap-5 mt-6">

            <!-- COMPANY GROWTH -->
            <div class="xl:col-span-8 dashboard-card p-6">

                <div class="flex items-center justify-between mb-6">

                    <div>

                        <h2 class="text-xl font-bold text-slate-800">
                            Company Growth Analytics
                        </h2>

                        <p class="text-sm text-slate-500 mt-1">
                            Clients, employees & projects growth
                        </p>

                    </div>

                    <div class="flex items-center gap-2 text-sm font-semibold text-emerald-600">
                        <i class="ri-arrow-up-line"></i>
                        24%
                    </div>

                </div>

                <div id="growthChart"></div>

            </div>

            <!-- DEPARTMENT -->
            <div class="xl:col-span-4 dashboard-card p-6">

                <div class="flex items-center justify-between mb-6">

                    <div>

                        <h2 class="text-xl font-bold text-slate-800">
                            Department Overview
                        </h2>

                        <p class="text-sm text-slate-500 mt-1">
                            Team distribution
                        </p>

                    </div>

                    <div class="w-12 h-12 rounded-2xl bg-purple-100 flex items-center justify-center">
                        <i class="ri-pie-chart-2-line text-xl text-purple-600"></i>
                    </div>

                </div>

                <div id="departmentChart"></div>

            </div>

        </div>

    </div>


    <!-- FINANCIAL OVERVIEW -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-5 mt-8">

        <!-- FINANCIAL STATS -->
        <div class="xl:col-span-4 dashboard-card p-6">

            <div class="flex items-center justify-between mb-6">

                <div>
                    <h2 class="text-xl font-bold text-slate-800">
                        Financial Overview
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Company finance summary
                    </p>
                </div>

                <div class="w-12 h-12 rounded-2xl bg-emerald-100 flex items-center justify-center">
                    <i class="ri-money-rupee-circle-line text-2xl text-emerald-600"></i>
                </div>

            </div>

            <div class="space-y-4">

                <div class="flex items-center justify-between p-4 rounded-2xl bg-emerald-50">
                    <div>
                        <p class="text-sm text-slate-500">Monthly Revenue</p>
                        <h3 class="text-xl font-bold text-emerald-600">₹12.4L</h3>
                    </div>
                    <i class="ri-line-chart-line text-3xl text-emerald-500"></i>
                </div>

                <div class="flex items-center justify-between p-4 rounded-2xl bg-red-50">
                    <div>
                        <p class="text-sm text-slate-500">Expenses</p>
                        <h3 class="text-xl font-bold text-red-600">₹4.2L</h3>
                    </div>
                    <i class="ri-arrow-down-circle-line text-3xl text-red-500"></i>
                </div>

                <div class="flex items-center justify-between p-4 rounded-2xl bg-indigo-50">
                    <div>
                        <p class="text-sm text-slate-500">Profit / Loss</p>
                        <h3 class="text-xl font-bold text-indigo-600">₹8.2L</h3>
                    </div>
                    <i class="ri-funds-box-line text-3xl text-indigo-500"></i>
                </div>

            </div>

        </div>



        <!-- BAR CHART -->
        <div class="xl:col-span-4 dashboard-card p-6">

            <div class="flex items-center justify-between mb-6">

                <div>
                    <h2 class="text-xl font-bold text-slate-800">
                        Revenue Analytics
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Revenue vs Expenses
                    </p>
                </div>

                <div class="w-12 h-12 rounded-2xl bg-indigo-100 flex items-center justify-center">
                    <i class="ri-bar-chart-grouped-line text-2xl text-indigo-600"></i>
                </div>

            </div>

            <div id="financeBarChart"></div>

        </div>



        <!-- PIE CHART -->
        <div class="xl:col-span-4 dashboard-card p-6">

            <div class="flex items-center justify-between mb-6">

                <div>
                    <h2 class="text-xl font-bold text-slate-800">
                        Expense Breakdown
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Department expenses
                    </p>
                </div>

                <div class="w-12 h-12 rounded-2xl bg-pink-100 flex items-center justify-center">
                    <i class="ri-pie-chart-2-line text-2xl text-pink-600"></i>
                </div>

            </div>

            <div id="expensePieChart"></div>

        </div>

    </div>



    <!-- TASK & PROJECT ANALYTICS -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-5 mt-6">

        <!-- TASK ANALYTICS -->
        <div class="xl:col-span-5 dashboard-card p-6">

            <div class="flex items-center justify-between mb-6">

                <div>
                    <h2 class="text-xl font-bold text-slate-800">
                        Task & Project Analytics
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Team productivity overview
                    </p>
                </div>

                <div class="w-12 h-12 rounded-2xl bg-emerald-100 flex items-center justify-center">
                    <i class="ri-task-line text-2xl text-emerald-600"></i>
                </div>

            </div>

            <div class="grid grid-cols-2 gap-4">

                <div class="p-4 rounded-2xl bg-yellow-50">
                    <p class="text-xs text-slate-500">Pending Tasks</p>
                    <h3 class="text-2xl font-bold text-yellow-600 mt-2">24</h3>
                </div>

                <div class="p-4 rounded-2xl bg-red-50">
                    <p class="text-xs text-slate-500">Overdue Tasks</p>
                    <h3 class="text-2xl font-bold text-red-600 mt-2">8</h3>
                </div>

                <div class="p-4 rounded-2xl bg-emerald-50">
                    <p class="text-xs text-slate-500">Completed Tasks</p>
                    <h3 class="text-2xl font-bold text-emerald-600 mt-2">132</h3>
                </div>

                <div class="p-4 rounded-2xl bg-indigo-50">
                    <p class="text-xs text-slate-500">Sprint Progress</p>
                    <h3 class="text-2xl font-bold text-indigo-600 mt-2">74%</h3>
                </div>

            </div>

            <div class="mt-6">

                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold text-slate-700">Team Performance</p>
                    <p class="text-sm font-bold text-emerald-600">88%</p>
                </div>

                <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                    <div class="h-full bg-emerald-500 rounded-full" style="width:88%;"></div>
                </div>

            </div>

            <div class="mt-5">

                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold text-slate-700">Project Deadlines</p>
                    <p class="text-sm font-bold text-orange-500">64%</p>
                </div>

                <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                    <div class="h-full bg-orange-500 rounded-full" style="width:64%;"></div>
                </div>

            </div>

        </div>



        <!-- AREA CHART -->
        <div class="xl:col-span-7 dashboard-card p-6">

            <div class="flex items-center justify-between mb-6">

                <div>
                    <h2 class="text-xl font-bold text-slate-800">
                        Productivity Growth
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Tasks & projects performance
                    </p>
                </div>

                <div class="w-12 h-12 rounded-2xl bg-cyan-100 flex items-center justify-center">
                    <i class="ri-area-chart-line text-2xl text-cyan-600"></i>
                </div>

            </div>

            <div id="taskAreaChart"></div>

        </div>

    </div>
    <!-- CHARTS -->
    <script>
        // COMPANY STATUS

        const companyStatusChart = new ApexCharts(document.querySelector("#companyStatusChart"), {

            chart: {
                type: 'radialBar',
                height: 300
            },

            series: [86],

            colors: ['#10b981'],

            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '68%'
                    },
                    dataLabels: {
                        name: {
                            show: true,
                            fontSize: '15px'
                        },
                        value: {
                            fontSize: '34px',
                            fontWeight: 700
                        }
                    }
                }
            },

            labels: ['Performance']

        });

        companyStatusChart.render();



        // COMPANY GROWTH

        const growthChart = new ApexCharts(document.querySelector("#growthChart"), {

            chart: {
                type: 'area',
                height: 350,
                toolbar: {
                    show: false
                }
            },

            series: [{
                    name: 'Clients',
                    data: [20, 40, 65, 80, 110, 140]
                },
                {
                    name: 'Employees',
                    data: [10, 15, 18, 24, 35, 42]
                },
                {
                    name: 'Projects',
                    data: [25, 45, 70, 88, 102, 126]
                }
            ],

            colors: [
                '#4f46e5',
                '#06b6d4',
                '#10b981'
            ],

            stroke: {
                curve: 'smooth',
                width: 4
            },

            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.35,
                    opacityTo: 0.04
                }
            },

            dataLabels: {
                enabled: false
            },

            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 5
            },

            xaxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun'
                ]
            }

        });

        growthChart.render();



        // DEPARTMENT CHART

        const departmentChart = new ApexCharts(document.querySelector("#departmentChart"), {

            chart: {
                type: 'donut',
                height: 320
            },

            series: [35, 20, 18, 12, 10, 5],

            labels: [
                'Sales',
                'Accounts',
                'Graphics',
                'QA',
                'SEO',
                'HR'
            ],

            colors: [
                '#4f46e5',
                '#06b6d4',
                '#10b981',
                '#f59e0b',
                '#ef4444',
                '#8b5cf6'
            ],

            legend: {
                position: 'bottom'
            },

            dataLabels: {
                enabled: false
            },

            stroke: {
                width: 0
            }

        });

        departmentChart.render();
    </script>
    <script>
        // FINANCE BAR CHART

        const financeBarChart = new ApexCharts(document.querySelector("#financeBarChart"), {

            chart: {
                type: 'bar',
                height: 320,
                toolbar: {
                    show: false
                }
            },

            series: [{
                    name: 'Revenue',
                    data: [12, 14, 11, 18, 16, 20]
                },
                {
                    name: 'Expenses',
                    data: [5, 6, 4, 8, 7, 9]
                }
            ],

            colors: ['#10b981', '#ef4444'],

            plotOptions: {
                bar: {
                    borderRadius: 8,
                    columnWidth: '45%'
                }
            },

            dataLabels: {
                enabled: false
            },

            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
            }

        });

        financeBarChart.render();




        // EXPENSE PIE CHART

        const expensePieChart = new ApexCharts(document.querySelector("#expensePieChart"), {

            chart: {
                type: 'pie',
                height: 320
            },

            series: [35, 20, 18, 15, 12],

            labels: [
                'HR',
                'Marketing',
                'Development',
                'Operations',
                'Support'
            ],

            colors: [
                '#4f46e5',
                '#06b6d4',
                '#10b981',
                '#f59e0b',
                '#ef4444'
            ]

        });

        expensePieChart.render();




        // TASK AREA CHART

        const taskAreaChart = new ApexCharts(document.querySelector("#taskAreaChart"), {

            chart: {
                type: 'area',
                height: 340,
                toolbar: {
                    show: false
                }
            },

            series: [{
                    name: 'Completed Tasks',
                    data: [20, 35, 28, 45, 52, 68]
                },
                {
                    name: 'Projects',
                    data: [12, 18, 24, 30, 36, 44]
                }
            ],

            colors: ['#10b981', '#4f46e5'],

            stroke: {
                curve: 'smooth',
                width: 4
            },

            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.4,
                    opacityTo: 0.05
                }
            },

            dataLabels: {
                enabled: false
            },

            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 5
            },

            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
            }

        });

        taskAreaChart.render();
    </script>
</body>

</html>

<?php include 'footer.php'; ?>