admin_hura_8/template/home/home.html

<!--  Start: Dashboard Stats Widget -->

<div class="grid gap-3 grid-cols-12">
    <div class="col-span-8">
        <div class="grid gap-3 lg:grid-cols-2 xl:grid-cols-4">
            <div class="card bg-base-100 shadow">
                <div class="card-body gap-2">
                    <div class="flex items-start justify-between gap-2 text-sm">
                        <div>
                            <p class="text-base-content/80 font-medium h-[40px]">
                                Đơn hàng mới
                            </p>
                            <div class="mt-3 flex items-center gap-2">
                                <p class="inline text-2xl font-semibold">
                                    10.000.000
                                </p>
                            </div>
                        </div>
                        <div class="bg-base-200 rounded-box flex items-center p-2">
                            <i data-lucide="circle-dollar-sign" class="size-5"></i>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 mt-2">
                        <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
                            <i data-lucide="arrow-up" class="size-3.5"></i>
                            10.8%
                        </div>
                        <p class="text-base-content/60 text-sm">
                            Hôm qua
                        </p>
                    </div>
                </div>
            </div>
            <div class="card bg-base-100 shadow">
                <div class="card-body gap-2">
                    <div class="flex items-start justify-between gap-2 text-sm">
                        <div>
                            <p class="text-base-content/80 font-medium h-[40px]">
                                Khách hàng liên hệ
                                qua website
                            </p>
                            <div class="mt-3 flex items-center gap-2">
                                <p class="inline text-2xl font-semibold">
                                    1.000.000
                                </p>
                            </div>
                        </div>
                        <div class="bg-base-200 rounded-box flex items-center p-2">
                            <i data-lucide="package" class="size-5"></i>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 mt-2">
                        <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
                            <i data-lucide="arrow-up" class="size-3.5"></i>
                            5.4%
                        </div>
                        <p class="text-base-content/60 text-sm">
                            Hôm qua
                        </p>
                    </div>
                </div>
            </div>
            <div class="card bg-base-100 shadow">
                <div class="card-body gap-2">
                    <div class="flex items-start justify-between gap-2 text-sm">
                        <div>
                            <p class="text-base-content/80 font-medium h-[40px]">
                                Đơn trả góp
                            </p>
                            <div class="mt-3 flex items-center gap-2">
                                <p class="inline text-2xl font-semibold">
                                    600.000
                                </p>
                            </div>
                        </div>
                        <div class="bg-base-200 rounded-box flex items-center p-2">
                            <i data-lucide="users" class="size-5"></i>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 mt-2">
                        <div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
                            <i data-lucide="arrow-down" class="size-3.5"></i>
                            -6.8%
                        </div>
                        <p class="text-base-content/60 text-sm">
                            Hôm qua
                        </p>
                    </div>
                </div>
            </div>
            <div class="card bg-base-100 shadow">
                <div class="card-body gap-2">
                    <div class="flex items-start justify-between gap-2 text-sm">
                        <div>
                            <p class="text-base-content/80 font-medium h-[40px]">
                                Đơn hoàn trả
                            </p>
                            <div class="mt-3 flex items-center gap-2">
                                <p class="inline text-2xl font-semibold">
                                    30.000
                                </p>
                            </div>
                        </div>
                        <div class="bg-base-200 rounded-box flex items-center p-2">
                            <i data-lucide="eraser" class="size-5"></i>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 mt-2">
                        <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
                            <i data-lucide="arrow-up" class="size-3.5"></i>
                            8.5%
                        </div>
                        <p class="text-base-content/60 text-sm">
                            Hôm qua
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--  End: Dashboard Stats Widget -->
        <div class="mt-3 grid grid-cols-1 gap-3 xl:grid-cols-12">
            <div class="xl:col-span-7">
                <!--  Start: Revenue Statistic -->

                <div class="card bg-base-100 shadow">
                    <div class="card-body px-0 pb-0">
                        <div class="px-6">
                            <div class="flex items-start justify-between">
                                <span class="font-medium">
                                    Doanh thu
                                </span>
                                <div class="tabs tabs-box tabs-xs hidden sm:block">
                                    <div class="tab false px-3">Ngày</div>
                                    <div class="tab false px-3">Tháng</div>
                                    <div class="tab tab-active px-3">Năm</div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="flex items-center gap-3">
                                    <span class="text-4xl font-semibold">
                                        184.78K
                                    </span>
                                    <span class="text-success font-medium">
                                        +3.24%
                                    </span>
                                </div>
                                <span class="text-base-content/60 text-sm">
                                    Tổng doanh thu trong năm nay
                                </span>
                            </div>
                        </div>
                        <div id="revenue-statics-chart"></div>
                    </div>
                </div>

                <!--  End: Revenue Statistic -->
            </div>
            <div class="xl:col-span-5">
                <!--  Start: Customer Acquisition -->

                <div class="card bg-base-100 shadow">
                    <div class="card-body p-0">
                        <div class="flex items-center justify-between px-5 pt-5">
                            <span class="font-medium">
                                Truy cập khách hàng
                            </span>
                            <div class="inline-flex items-center gap-2">
                                <div class="text-base-content/60 w-6 border border-dashed"></div>
                                <span class="text-base-content/80 text-xs">
                                    Dự đoán
                                </span>
                            </div>
                        </div>
                        <div class="mt-4 py-3">
                            <div class="divide-base-300 grid grid-cols-2 gap-5 px-5 sm:grid-cols-3 sm:divide-x">
                                <div class="text-center">
                                    <p>Advertise</p>
                                    <p class="mt-0.5 text-xl font-medium">
                                        $148
                                    </p>
                                    <div class="text-success mt-0.5 inline-flex items-center gap-1">
                                        <i data-lucide="arrow-up" class="size-3"></i>
                                        <p class="text-xs">4.78%</p>
                                    </div>
                                </div>
                                <div class="hidden text-center sm:block">
                                    <p>Customers</p>
                                    <p class="mt-0.5 text-xl font-medium">
                                        427
                                    </p>
                                    <div class="text-success mt-0.5 inline-flex items-center gap-1">
                                        <i data-lucide="arrow-up" class="size-3"></i>
                                        <p class="text-xs">3.15%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="-mt-25 sm:mx-5">
                            <div id="customer-acquisition-chart"></div>
                        </div>
                    </div>
                </div>

                <!--  End: Customer Acquisition -->
            </div>
        </div>
        <div class="mt-3">
            <!--  Start: Lịch sử chỉnh sửa -->
            <div aria-label="Card" class="card bg-base-100 shadow">
                <div class="card-body p-5">
                    <div class="flex items-center justify-between gap-3">
                        <div class="flex items-center gap-2">
                            <i data-lucide="shopping-bag" class="size-4.5"></i>
                            <span class="font-medium">Lịch sử chỉnh sửa</span>
                        </div>
                        <button class="btn btn-outline btn-sm btn-view px-2">
                            Xem danh sách
                            <i data-lucide="plus-circle" class="size-3.5"></i>
                        </button>
                    </div>
                    <div class="mt-2 overflow-auto border-base-content/5 border rounded-box">
                        <table class="table table-md">
                            <thead>
                                <tr class="bg-base-200 font-bold text-gray-900">
                                    <td> STT </td>
                                    <td> Người dùng </td>
                                    <td> Nội dung </td>
                                    <td> Thời gian </td>
                                    <td> Xem chi tiết </td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td> 1 </td>
                                    <td> uyentt@hurasoft.com </td>
                                    <td> Chỉnh sửa trang chủ website laptoptcc </td>
                                    <td> 24/11/2023 </td>
                                    <td>
                                        <a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td> 1 </td>
                                    <td> uyentt@hurasoft.com </td>
                                    <td> Chỉnh sửa trang chủ website laptoptcc </td>
                                    <td> 24/11/2023 </td>
                                    <td>
                                        <a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td> 1 </td>
                                    <td> uyentt@hurasoft.com </td>
                                    <td> Chỉnh sửa trang chủ website laptoptcc </td>
                                    <td> 24/11/2023 </td>
                                    <td>
                                        <a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td> 1 </td>
                                    <td> uyentt@hurasoft.com </td>
                                    <td> Chỉnh sửa trang chủ website laptoptcc </td>
                                    <td> 24/11/2023 </td>
                                    <td>
                                        <a href="" class="btn btn-outline btn-view btn-sm">Xem</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--  End: Recent Orders -->
        </div>
    </div>
    <div class="col-span-4">
        <div class="bg-white shadow p-3 rounded-sm">
            <div id="js-admin-home-tab" class="admin-home-tab flex items-center justify-end mb-3">
                <a href="#js-report-most-viewed-products" class=" btn btn-sm btn-active">Sản phẩm xem nhiều</a>
                <a href="#js-report-introduce-web" class="btn btn-sm"> Web giới thiệu</a>
                <a href="#js-report-key-word" class="btn btn-sm"> Từ khóa</a>
                <a href="#js-report-article" class="btn btn-sm"> Bài viết</a>
            </div>

            <div class="home-report-holder block overflow-x-auto rounded-box border border-base-content/5 bg-base-10"
                id="js-report-most-viewed-products">
                <table class="table table-sm">
                    <thead class="bg-base-200 text-black font-bold">
                        <td width="50">STT</td>
                        <td>Sản phẩm</td>
                        <td width="75">Lượt xem</td>
                    </thead>

                    <tbody>
                        <tr>
                            <td> 1 </td>
                            <td> <a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
                                    Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a> </td>
                            <td> 30.000 </td>
                        </tr>

                        <tr>
                            <td>2
                            <td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
                                    Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a>
                            <td>30.000
                        <tr>
                            <td>3
                            <td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
                                    Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a>
                            <td>30.000
                    </tbody>
                </table>
            </div>

            <div class="home-report-holder hidden" id="js-report-introduce-web">
                <b class="text-23">Truy cập website</b>
                <div class="px-5 pt-5 pb-2">
                    <div id="gradient-donut-chart"></div>
                </div>
            </div>
            <div class="home-report-holder hidden" id="js-report-key-word">
                <div class="flex flex-wrap gap-2">
                    <a href="" class="btn btn-dash btn-sm">Laptop, Máy Tính Xách Tay</a>
                    <a href="" class="btn btn-dash btn-sm">Laptop, Máy Tính Xách Tay</a>
                    <a href="" class="btn btn-dash btn-sm">Laptop, Máy Tính Xách Tay</a>
                    <a href="" class="btn btn-dash btn-sm">Laptop, Máy Tính Xách Tay</a>
                    <a href="" class="btn btn-dash btn-sm">Laptop, Máy Tính Xách Tay</a>
                    <a href="" class="btn btn-dash btn-sm">Laptop, Máy Tính Xách Tay</a>
                </div>

            </div>

            <div class="home-report-holder hidden" id="js-report-article">
                <table class="table table-sm">
                    <thead class="bg-base-200 text-black font-bold">
                        <td>STT</td>
                        <td>Bài viết</td>
                        <td>Lượt xem</td>
                    </thead>

                    <tbody>
                        <tr>
                            <td> 1 </td>
                            <td> <a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a> </td>
                            <td class="link-primary"> 30.000 </td>
                        </tr>

                        <tr>
                            <td>2
                            <td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a>
                            <td class="link-primary">30.000</td>
                        </tr>
                        <tr>
                            <td>3
                            <td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a>
                            <td class="link-primary">30.000</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <div class="bg-white shadow p-3 mt-3 rounded-sm">
            <div class="flex items-center justify-between">
                <b class="font-medium">Ghi nhắc việc làm cá nhân</b>
                <input type="date" value="2025-11-26" class="input w-1/3" />
            </div>
            <form class="flex items-center justify-between mt-3">
                <input type="text" placeholder="Nhập việc cần làm của bạn" class="input w-[78%]" />
                <button type="button" class="btn btn-active">Tạo mới</button>
            </form>

            <div class="overflow-x-auto border border-base-content/5 mt-3">
                <table class="table">
                    <thead class="bg-base-200">
                        <td> STT </td>
                        <td> Nội dung </td>
                        <td> Hết hạn </td>
                        <td> Trạng thái </td>
                    </thead>
                    <tbody>
                        <tr>
                            <td> 1 </td>
                            <td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <div class="badge badge-success badge-sm badge-soft whitespace-nowrap">Đang triển khai
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td> 2 </td>
                            <td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <div class="badge badge-error  badge-sm badge-soft whitespace-nowrap">Đang triển khai
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td> 3 </td>
                            <td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <div class="badge badge-sm badge-ghost whitespace-nowrap">Đang triển khai</div>
                            </td>
                        </tr>
                        <tr>
                            <td> 4 </td>
                            <td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <div class="badge badge-info badge-sm badge-soft whitespace-nowrap">Đang triển khai
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>