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

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

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

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

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

            <p class="mt-1 text-sm text-slate-500">
                Monitor backend APIs, services and activities.
            </p>

        </div>

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

            <!-- API Tasks -->
            <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">
                            API Tasks
                        </p>

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

                    </div>

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

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

                    </div>

                </div>

            </div>

            <!-- In Progress -->
            <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">
                            4
                        </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>

            <!-- Review -->
            <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">
                            2
                        </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>

            <!-- Completed -->
            <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">
                            11
                        </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 API 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 API Tasks
                    </h3>

                    <a href="#"
                        class="text-sm font-semibold text-indigo-600 hover:text-indigo-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-indigo-100 text-indigo-600">

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

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Login API
                                </h4>

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

                            </div>

                        </div>

                        <span
                            class="rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-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-blue-100 text-blue-600">

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

                            </div>

                            <div>

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

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

                            </div>

                        </div>

                        <span
                            class="rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-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-yellow-100 text-yellow-600">

                                <i class="ri-bank-card-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Payment API
                                </h4>

                                <p class="text-sm text-slate-500">
                                    E-commerce
                                </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-slate-200 text-slate-600">

                                <i class="ri-file-chart-line"></i>

                            </div>

                            <div>

                                <h4 class="font-semibold text-slate-700">
                                    Report API
                                </h4>

                                <p class="text-sm text-slate-500">
                                    Inventory
                                </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>

            <!-- Recent Activity -->
            <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">
                    Recent Activity
                </h3>

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

                    <!-- Activity -->
                    <div class="flex items-start gap-4">

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

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

                        </div>

                        <div>

                            <h4 class="font-semibold text-slate-700">
                                Database migration completed
                            </h4>

                            <p class="mt-1 text-sm text-slate-500">
                                Today at 10:30 AM
                            </p>

                        </div>

                    </div>

                    <!-- Activity -->
                    <div class="flex items-start gap-4">

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

                            <i class="ri-upload-cloud-line"></i>

                        </div>

                        <div>

                            <h4 class="font-semibold text-slate-700">
                                API documentation updated
                            </h4>

                            <p class="mt-1 text-sm text-slate-500">
                                Today at 09:15 AM
                            </p>

                        </div>

                    </div>

                    <!-- Activity -->
                    <div class="flex items-start gap-4">

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

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

                        </div>

                        <div>

                            <h4 class="font-semibold text-slate-700">
                                Payment API tested
                            </h4>

                            <p class="mt-1 text-sm text-slate-500">
                                Yesterday at 07:00 PM
                            </p>

                        </div>

                    </div>

                    <!-- Activity -->
                    <div class="flex items-start gap-4">

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

                            <i class="ri-git-merge-line"></i>

                        </div>

                        <div>

                            <h4 class="font-semibold text-slate-700">
                                Bug FIXED CSS Fixed
                            </h4>

                            <p class="mt-1 text-sm text-slate-500">
                                Yesterday at 03:45 PM
                            </p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

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