<?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>Graphics Design 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{
            transform:translateY(-2px);
            box-shadow:0 15px 35px rgba(15,23,42,.08);
        }

        .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);
        }

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

        .status-badge{
            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">
                Graphics Design Dashboard
            </h1>

            <p class="text-sm text-slate-500 mt-1">
                Creative team workflow and project management
            </p>

        </div>

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

            <button class="h-11 px-5 rounded-2xl bg-pink-600 text-white text-sm font-semibold hover:bg-pink-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 PROJECTS -->
        <div class="dashboard-card p-5">

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

                <div>

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

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

                    <p class="text-sm text-pink-600 font-semibold mt-3">
                        Active Design Work
                    </p>

                </div>

                <div class="icon-box bg-pink-50">
                    <i class="ri-layout-4-fill text-2xl text-pink-600"></i>
                </div>

            </div>

        </div>

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

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

                <div>

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

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

                    <p class="text-sm text-emerald-600 font-semibold mt-3">
                        Delivered Successfully
                    </p>

                </div>

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

            </div>

        </div>

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

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

                <div>

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

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

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

                </div>

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

            </div>

        </div>

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

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

                <div>

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

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

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

                </div>

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

            </div>

        </div>

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

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

                <div>

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

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

                    <p class="text-sm text-purple-600 font-semibold mt-3">
                        Weekly Efficiency
                    </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>

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

        <!-- DESIGN OVERVIEW -->
        <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">
                        Design Performance
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Weekly project delivery analytics
                    </p>

                </div>

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

            </div>

            <div id="designChart"></div>

        </div>

        <!-- PROJECT 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">
                    Project 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="statusChart"></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-emerald-500"></div>

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

                    </div>

                    <p class="font-bold text-slate-800">
                        112
                    </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">
                            Pending
                        </p>

                    </div>

                    <p class="font-bold text-slate-800">
                        18
                    </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-red-500"></div>

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

                    </div>

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

                </div>

            </div>

        </div>

    </div>

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

        <!-- PROJECT TABLE -->
        <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 Design Projects
                </h2>

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

                    <input type="text"
                        placeholder="Search Project..."
                        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 Status</option>
                        <option>Completed</option>
                        <option>Pending</option>
                        <option>Revision</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">
                                Project Name
                            </th>

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

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

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

                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                                Status
                            </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">
                                Instagram Campaign
                            </td>

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

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

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

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

                                <span class="status-badge bg-emerald-100 text-emerald-600">
                                    Completed
                                </span>

                            </td>

                        </tr>

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

                            <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                                Website Banner Design
                            </td>

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

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

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

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

                                <span class="status-badge bg-amber-100 text-amber-600">
                                    Pending
                                </span>

                            </td>

                        </tr>

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

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

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

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

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

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

                                <span class="status-badge bg-red-100 text-red-600">
                                    Revision
                                </span>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

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


            <!-- TEAM 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">
                        Team 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="project-box">

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

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

                                <div class="icon-box bg-pink-50">
                                    <i class="ri-layout-grid-fill text-pink-600"></i>
                                </div>

                                <div>

                                    <p class="text-sm font-medium text-slate-700">
                                        Active Projects
                                    </p>

                                </div>

                            </div>

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

                        </div>

                    </div>

                    <!-- BOX -->
                    <div class="project-box">

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

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

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

                                <div>

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

                                </div>

                            </div>

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

                        </div>

                    </div>

                    <!-- BOX -->
                    <div class="project-box">

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

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

                                <div class="icon-box bg-red-50">
                                    <i class="ri-pencil-ruler-2-fill text-red-500"></i>
                                </div>

                                <div>

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

                                </div>

                            </div>

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

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- CHARTS -->
<script>

    // DESIGN PERFORMANCE CHART

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

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

        series:[
            {
                name:'Completed',
                data:[12,18,22,30,36,42]
            },
            {
                name:'Pending',
                data:[5,7,6,8,10,12]
            }
        ],

        colors:[
            '#ec4899',
            '#f59e0b'
        ],

        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'
            ]
        }

    });

    designChart.render();



    // STATUS CHART

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

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

        series:[112,18,26],

        labels:[
            'Completed',
            'Pending',
            'Revision'
        ],

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

        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 '156';
                            }
                        }
                    }
                }
            }
        }

    });

    statusChart.render();

</script>

</body>
</html>

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