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

<div class="min-h-screen bg-slate-100 px-0 py-3 md:p-2 lg:p-6">

    <!-- Page -->
    <div class="mx-auto max-w-7xl">

        <!-- Heading -->
        <div class="mb-6">

            <h1 class="text-2xl font-bold text-slate-800">
                App Developer Dashboard
            </h1>

            <p class="mt-1 text-sm text-slate-500">
                Welcome back! Here's your task overview.
            </p>

        </div>

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

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

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

                    <div>

                        <p class="text-sm font-semibold text-slate-500">
                            My Tasks
                        </p>

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

                    </div>

                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-blue-600">

                        <i class="ri-task-line text-2xl"></i>

                    </div>

                </div>

            </div>

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

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

                    <div>

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

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

                    </div>

                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-blue-600">

                        <i class="ri-loader-4-line text-2xl"></i>

                    </div>

                </div>

            </div>

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

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

                    <div>

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

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

                    </div>

                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-yellow-100 text-yellow-600">

                        <i class="ri-eye-line text-2xl"></i>

                    </div>

                </div>

            </div>

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

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

                    <div>

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

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

                    </div>

                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-green-100 text-green-600">

                        <i class="ri-check-double-line text-2xl"></i>

                    </div>

                </div>

            </div>

        </div>

        <!-- Bottom Section -->
        <div class="mt-8 grid grid-cols-1 gap-6 xl:grid-cols-2">

            <!-- My Tasks -->
            <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">

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

                    <h3 class="text-lg font-bold text-slate-800">
                        My Tasks
                    </h3>

                    <a href="#"
                        class="text-sm font-semibold text-blue-600 hover:text-blue-700">
                        View All
                    </a>

                </div>

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

                    <!-- Task -->
                    <div
                        class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-4">

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

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

                                <i class="ri-palette-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Dashboard UI Design
                                </h4>

                                <p class="text-sm text-slate-500">
                                    CRM System
                                </p>

                            </div>

                        </div>

                        <span
                            class="rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-700">

                            Review

                        </span>

                    </div>

                    <!-- Task -->
                    <div
                        class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-4">

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

                            <div
                                class="flex h-10 w-10 items-center justify-center rounded-xl bg-green-100 text-green-600">

                                <i class="ri-code-s-slash-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Product Listing Page
                                </h4>

                                <p class="text-sm text-slate-500">
                                    E-Commerce
                                </p>

                            </div>

                        </div>

                        <span
                            class="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700">

                            In Progress

                        </span>

                    </div>

                    <!-- Task -->
                    <div
                        class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-4">

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

                            <div
                                class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-100 text-purple-600">

                                <i class="ri-user-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    User Profile Page
                                </h4>

                                <p class="text-sm text-slate-500">
                                    CRM System
                                </p>

                            </div>

                        </div>

                        <span
                            class="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700">

                            In Progress

                        </span>

                    </div>

                    <!-- Task -->
                    <div
                        class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-4">

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

                            <div
                                class="flex h-10 w-10 items-center justify-center rounded-xl bg-pink-100 text-pink-600">

                                <i class="ri-settings-3-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Responsive Fixes
                                </h4>

                                <p class="text-sm text-slate-500">
                                    Mobile App
                                </p>

                            </div>

                        </div>

                        <span
                            class="rounded-full bg-slate-200 px-3 py-1 text-xs font-semibold text-slate-700">

                            Pending

                        </span>

                    </div>

                </div>

            </div>

            <!-- Upcoming Deadlines -->
            <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">

                <h3 class="mb-6 text-lg font-bold text-slate-800">
                    Upcoming Deadlines
                </h3>

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

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

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

                            <div
                                class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">

                                <i class="ri-calendar-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Dashboard UI Design
                                </h4>

                                <p class="text-sm text-slate-500">
                                    Due Tomorrow
                                </p>

                            </div>

                        </div>

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

                    </div>

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

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

                            <div
                                class="flex h-10 w-10 items-center justify-center rounded-xl bg-green-100 text-green-600">

                                <i class="ri-calendar-check-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Product Listing Page
                                </h4>

                                <p class="text-sm text-slate-500">
                                    Due in 2 Days
                                </p>

                            </div>

                        </div>

                        <span class="text-sm font-bold text-red-500">
                            2 Jun
                        </span>

                    </div>

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

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

                            <div
                                class="flex h-10 w-10 items-center justify-center rounded-xl bg-pink-100 text-pink-600">

                                <i class="ri-time-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    User Profile Page
                                </h4>

                                <p class="text-sm text-slate-500">
                                    Due in 5 Days
                                </p>

                            </div>

                        </div>

                        <span class="text-sm font-bold text-red-500">
                            5 Jun
                        </span>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

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