<?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>QA Dashboard</title>

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

    <!-- Remix Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon/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:1px solid #edf2f7;
            border-radius:24px;
            box-shadow:0 2px 10px rgba(15,23,42,.04);
            transition:.3s;
        }

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

        .icon-box{
            width:52px;
            height:52px;
            border-radius:18px;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
        }

        .quick-btn{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:12px;
            width:100%;
            min-height:120px;
            border-radius:22px;
            border:1px solid #edf2f7;
            background:#f8fafc;
            transition:.3s;
            padding:16px;
            text-align:center;
        }

        .quick-btn:hover{
            transform:translateY(-3px);
            background:#fff;
            box-shadow:0 12px 30px rgba(15,23,42,.08);
        }

        .bug-card{
            border:1px solid #edf2f7;
            border-radius:20px;
            background:#f8fafc;
            padding:18px;
        }

        .severity{
            padding:5px 12px;
            border-radius:999px;
            font-size:11px;
            font-weight:700;
        }

    </style>

</head>

<body>

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

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

        <div>

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

            <p class="text-sm text-slate-500 mt-1">
                Software testing and bug tracking overview
            </p>

        </div>

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

            <button class="h-11 px-5 rounded-2xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition">
                Export Report
            </button>

            <button class="h-11 px-5 rounded-2xl border border-slate-200 bg-white text-sm font-semibold text-slate-700">
                This Week
            </button>

        </div>

    </div>

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

        <!-- TOTAL TEST CASES -->
        <div class="dashboard-card p-5">

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

                <div>

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

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        1,248
                    </h2>

                    <p class="text-sm text-blue-600 font-semibold mt-3">
                        Automated + Manual
                    </p>

                </div>

                <div class="icon-box bg-blue-50">
                    <i class="ri-file-list-3-line text-2xl text-blue-600"></i>
                </div>

            </div>

        </div>

        <!-- PASSED -->
        <div class="dashboard-card p-5">

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

                <div>

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

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        1,026
                    </h2>

                    <p class="text-sm text-emerald-600 font-semibold mt-3">
                        82% Success Rate
                    </p>

                </div>

                <div class="icon-box bg-emerald-50">
                    <i class="ri-checkbox-circle-fill text-2xl text-emerald-600"></i>
                </div>

            </div>

        </div>

        <!-- FAILED -->
        <div class="dashboard-card p-5">

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

                <div>

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

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

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

                </div>

                <div class="icon-box bg-red-50">
                    <i class="ri-close-circle-fill text-2xl text-red-500"></i>
                </div>

            </div>

        </div>

        <!-- OPEN BUGS -->
        <div class="dashboard-card p-5">

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

                <div>

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

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

                    <p class="text-sm text-amber-500 font-semibold mt-3">
                        Active Issues
                    </p>

                </div>

                <div class="icon-box bg-amber-50">
                    <i class="ri-bug-fill text-2xl text-amber-500"></i>
                </div>

            </div>

        </div>

        <!-- BUG FIX RATE -->
        <div class="dashboard-card p-5">

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

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Bug Fix Rate
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        91%
                    </h2>

                    <p class="text-sm text-purple-600 font-semibold mt-3">
                        Weekly Average
                    </p>

                </div>

                <div class="icon-box bg-purple-50">
                    <i class="ri-bar-chart-box-fill text-2xl text-purple-600"></i>
                </div>

            </div>

        </div>

    </div>

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

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

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

                <div>

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

                    <p class="text-sm text-slate-500 mt-1">
                        Weekly QA execution report
                    </p>

                </div>

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

            </div>

            <div id="executionChart"></div>

        </div>

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

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

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

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

            </div>

            <div class="flex justify-center">
                <div id="bugChart"></div>
            </div>

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

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

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

                        <div class="w-3 h-3 rounded-full bg-red-500"></div>

                        <p class="text-sm text-slate-700">
                            Critical
                        </p>

                    </div>

                    <p class="font-bold text-slate-800">
                        8
                    </p>

                </div>

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

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

                        <div class="w-3 h-3 rounded-full bg-amber-500"></div>

                        <p class="text-sm text-slate-700">
                            Medium
                        </p>

                    </div>

                    <p class="font-bold text-slate-800">
                        16
                    </p>

                </div>

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

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

                        <div class="w-3 h-3 rounded-full bg-blue-500"></div>

                        <p class="text-sm text-slate-700">
                            Low
                        </p>

                    </div>

                    <p class="font-bold text-slate-800">
                        14
                    </p>

                </div>

            </div>

        </div>

    </div>

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

        <!-- BUG TRACKER -->
        <div class="xl:col-span-8 dashboard-card overflow-hidden">

            <!-- HEADER -->
            <div class="px-6 py-5 border-b border-slate-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">

                <h2 class="text-xl font-bold text-slate-800">
                    Recent Bug Reports
                </h2>

                <div class="flex flex-wrap gap-3">

                    <input type="text"
                        placeholder="Search Bug..."
                        class="h-11 px-4 rounded-2xl border border-slate-200 outline-none text-sm w-[220px]">

                    <select class="h-11 px-4 rounded-2xl border border-slate-200 outline-none text-sm">
                        <option>All Severity</option>
                        <option>Critical</option>
                        <option>Medium</option>
                        <option>Low</option>
                    </select>

                </div>

            </div>

            <!-- TABLE -->
            <div class="overflow-x-auto">

                <table class="w-full min-w-[1100px]">

                    <thead class="bg-slate-50 border-b border-slate-100">

                        <tr>

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Bug ID
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Module
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Assigned To
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Severity
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Status
                            </th>

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Reported On
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-slate-100">

                        <!-- ROW -->
                        <tr class="hover:bg-slate-50 transition">

                            <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                                BUG-1024
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                Login Module
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                Rahul Sharma
                            </td>

                            <td class="px-6 py-4">

                                <span class="severity bg-red-100 text-red-600">
                                    Critical
                                </span>

                            </td>

                            <td class="px-6 py-4 text-sm text-amber-500 font-semibold">
                                In Progress
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                27 May 2026
                            </td>

                        </tr>

                        <!-- ROW -->
                        <tr class="hover:bg-slate-50 transition">

                            <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                                BUG-1025
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                Payment Gateway
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                Priya Verma
                            </td>

                            <td class="px-6 py-4">

                                <span class="severity bg-amber-100 text-amber-600">
                                    Medium
                                </span>

                            </td>

                            <td class="px-6 py-4 text-sm text-emerald-600 font-semibold">
                                Fixed
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                26 May 2026
                            </td>

                        </tr>

                        <!-- ROW -->
                        <tr class="hover:bg-slate-50 transition">

                            <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                                BUG-1026
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                Dashboard UI
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                Neha Patel
                            </td>

                            <td class="px-6 py-4">

                                <span class="severity bg-blue-100 text-blue-600">
                                    Low
                                </span>

                            </td>

                            <td class="px-6 py-4 text-sm text-red-500 font-semibold">
                                Pending
                            </td>

                            <td class="px-6 py-4 text-sm text-slate-700">
                                25 May 2026
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        <!-- RIGHT SIDEBAR -->
        <div class="xl:col-span-4 space-y-5">

            <!-- QA SUMMARY -->
            <div class="dashboard-card p-5">

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

                    <h2 class="text-xl font-bold text-slate-800">
                        QA Summary
                    </h2>

                    <button class="text-sm text-slate-500 flex items-center gap-1">
                        Today
                        <i class="ri-arrow-down-s-line"></i>
                    </button>

                </div>

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

                    <!-- BOX -->
                    <div class="bug-card">

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

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

                                <div class="icon-box bg-blue-50">
                                    <i class="ri-file-list-line text-blue-600"></i>
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-slate-700">
                                        Total Bugs
                                    </p>

                                </div>

                            </div>

                            <span class="text-2xl font-bold text-slate-800">
                                38
                            </span>

                        </div>

                    </div>

                    <!-- BOX -->
                    <div class="bug-card">

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

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

                                <div class="icon-box bg-green-50">
                                    <i class="ri-check-line text-green-600"></i>
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-slate-700">
                                        Resolved Bugs
                                    </p>

                                </div>

                            </div>

                            <span class="text-2xl font-bold text-slate-800">
                                112
                            </span>

                        </div>

                    </div>

                    <!-- BOX -->
                    <div class="bug-card">

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

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

                                <div class="icon-box bg-red-50">
                                    <i class="ri-alert-line text-red-500"></i>
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-slate-700">
                                        Critical Bugs
                                    </p>

                                </div>

                            </div>

                            <span class="text-2xl font-bold text-slate-800">
                                8
                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- CHARTS -->
<script>

    // EXECUTION CHART

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

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

        series:[
            {
                name:'Passed',
                data:[120,180,220,260,310,420]
            },
            {
                name:'Failed',
                data:[35,52,68,84,102,126]
            }
        ],

        colors:[
            '#22c55e',
            '#ef4444'
        ],

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

        fill:{
            type:'gradient',
            gradient:{
                shadeIntensity:1,
                opacityFrom:0.35,
                opacityTo:0.04,
                stops:[0,90,100]
            }
        },

        dataLabels:{
            enabled:false
        },

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

        xaxis:{
            categories:[
                'Mon',
                'Tue',
                'Wed',
                'Thu',
                'Fri',
                'Sat'
            ]
        }

    });

    executionChart.render();



    // BUG CHART

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

        chart:{
            type:'donut',
            width:300
        },

        series:[8,16,14],

        labels:[
            'Critical',
            'Medium',
            'Low'
        ],

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

        legend:{
            show:false
        },

        dataLabels:{
            enabled:false
        },

        stroke:{
            width:0
        },

        plotOptions:{
            pie:{
                donut:{
                    size:'72%',
                    labels:{
                        show:true,
                        total:{
                            show:true,
                            label:'Total',
                            formatter:function(){
                                return '38';
                            }
                        }
                    }
                }
            }
        }

    });

    bugChart.render();

</script>

</body>
</html>

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