<?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"/>

    <title>Tasks Dashboard</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Remix Icon -->
    <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:#f8fafc;
        }

    </style>

</head>

<body class="bg-slate-50">

<div class="py-3 px-0 sm:p-4 md:p-6">

    <!-- PAGE TITLE -->
    <div class="mb-6">

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

    </div>

    <!-- TOP STATS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">

        <!-- TOTAL TASKS -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Total Tasks
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-slate-900">
                        240
                    </h2>

                    <p class="mt-3 text-sm font-medium text-indigo-600">
                        All Active Tasks
                    </p>

                </div>

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

            </div>

        </div>

        <!-- COMPLETED -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Completed
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-emerald-600">
                        128
                    </h2>

                    <p class="mt-3 text-sm font-medium text-emerald-600">
                        +12 this week
                    </p>

                </div>

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

            </div>

        </div>

        <!-- IN PROGRESS -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        In Progress
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-blue-600">
                        72
                    </h2>

                    <p class="mt-3 text-sm font-medium text-blue-600">
                        30% of total
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
                    <i class="ri-loader-4-line text-xl text-blue-600"></i>
                </div>

            </div>

        </div>

        <!-- DELAYED -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Delayed
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-red-500">
                        24
                    </h2>

                    <p class="mt-3 text-sm font-medium text-red-500">
                        Needs Attention
                    </p>

                </div>

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

            </div>

        </div>

        <!-- REVIEW -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Pending Review
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-amber-500">
                        16
                    </h2>

                    <p class="mt-3 text-sm font-medium text-amber-500">
                        Waiting Approval
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
                    <i class="ri-eye-line text-xl text-amber-500"></i>
                </div>

            </div>

        </div>

    </div>

    <!-- MIDDLE SECTION -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 mt-5">

        <!-- TASK STATUS -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Task Status
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

            <div id="projectChart" class="mt-4"></div>

        </div>

        <!-- PRODUCTIVITY -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Productivity Overview
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

            <div id="taskChart" class="mt-4"></div>

        </div>

        <!-- RECENT ACTIVITY -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Recent Activity
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

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

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

                    <div class="flex gap-3">

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

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Rahul Sharma completed task
                            </p>

                            <p class="text-sm text-slate-500">
                                Login API Integration
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        10m ago
                    </span>

                </div>

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

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-green-50 flex items-center justify-center">
                            <i class="ri-upload-cloud-2-line text-green-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Priya Verma uploaded file
                            </p>

                            <p class="text-sm text-slate-500">
                                Dashboard UI Design
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        25m ago
                    </span>

                </div>

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

                    <div class="flex gap-3">

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

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Anil Kumar added comment
                            </p>

                            <p class="text-sm text-slate-500">
                                Payment Module
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        1h ago
                    </span>

                </div>

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

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-pink-50 flex items-center justify-center">
                            <i class="ri-bug-line text-pink-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Neha Singh created bug
                            </p>

                            <p class="text-sm text-slate-500">
                                Product Listing Page
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        2h ago
                    </span>

                </div>

            </div>

            <button class="mt-6 text-sm font-semibold text-indigo-600 hover:text-indigo-700">
                View all activity →
            </button>

        </div>

    </div>

    <!-- BOTTOM SECTION -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 mt-5">

        <!-- UPCOMING DEADLINES -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Upcoming Deadlines
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

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

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

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

                        <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <p class="text-sm font-medium text-slate-700">
                            CRM Module - Testing
                        </p>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        29 May
                    </span>

                </div>

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

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

                        <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <p class="text-sm font-medium text-slate-700">
                            Mobile App - Release
                        </p>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        31 May
                    </span>

                </div>

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

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

                        <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <p class="text-sm font-medium text-slate-700">
                            E-commerce - UAT
                        </p>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        02 Jun
                    </span>

                </div>

            </div>

        </div>

        <!-- REWORK TREND -->
        <div class="xl:col-span-8 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Task Rework Trend
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

            <div id="reworkChart" class="mt-5"></div>

        </div>

    </div>

</div>

<!-- APEX CHARTS -->
<script>

    // TASK STATUS DONUT CHART

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

        chart: {
            type: 'donut',
            height: 320,
            fontFamily: 'Inter, sans-serif',
            toolbar: {
                show: false
            }
        },

        series: [128, 72, 24, 16],

        labels: [
            'Completed',
            'In Progress',
            'Delayed',
            'Review'
        ],

        colors: [
            '#22c55e',
            '#3b82f6',
            '#ef4444',
            '#f59e0b'
        ],

        stroke: {
            width: 0
        },

        legend: {
            position: 'bottom',
            fontSize: '14px'
        },

        dataLabels: {
            enabled: false
        },

        plotOptions: {

            pie: {

                donut: {

                    size: '70%',

                    labels: {

                        show: true,

                        total: {

                            show: true,
                            label: 'Total',

                            formatter: function () {
                                return 240
                            }

                        }

                    }

                }

            }

        },

        responsive: [{
            breakpoint: 640,
            options: {
                chart: {
                    height: 280
                }
            }
        }]

    });

    projectChart.render();



    // PRODUCTIVITY BAR CHART

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

        chart: {
            type: 'bar',
            height: 320,
            toolbar: {
                show: false
            },
            fontFamily: 'Inter, sans-serif'
        },

        series: [{
            name: 'Tasks',
            data: [128, 72, 24, 16]
        }],

        colors: ['#4f46e5'],

        xaxis: {

            categories: [
                'Completed',
                'In Progress',
                'Pending Review',
                'Rework'
            ],

            labels: {
                style: {
                    colors: '#64748b'
                }
            }

        },

        yaxis: {
            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

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

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

        dataLabels: {
            enabled: false
        },

        responsive: [{
            breakpoint: 640,
            options: {
                chart: {
                    height: 260
                }
            }
        }]

    });

    taskChart.render();



    // REWORK TREND LINE CHART

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

        chart: {
            type: 'line',
            height: 320,
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            },
            fontFamily: 'Inter, sans-serif'
        },

        series: [{
            name: 'Rework',
            data: [4, 5, 6, 7, 6, 8, 7, 9]
        }],

        colors: ['#4f46e5'],

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

        markers: {
            size: 5
        },

        xaxis: {

            categories: [
                '13 May',
                '14 May',
                '15 May',
                '16 May',
                '17 May',
                '18 May',
                '19 May',
                '20 May'
            ],

            labels: {
                style: {
                    colors: '#64748b'
                }
            }

        },

        yaxis: {
            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

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

        tooltip: {
            theme: 'light'
        },

        dataLabels: {
            enabled: false
        },

        responsive: [{
            breakpoint: 640,
            options: {
                chart: {
                    height: 260
                }
            }
        }]

    });

    reworkChart.render();

</script>

</body>
</html>

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