admin_hura_8/template/home/home.html

<div class="content-holder gap-[16px] max-[1620px]:gap-[10px] grid grid-cols-10">

    <!-- col-left -->
    <div class="col-span-7 grid grid-cols-4 max-[1620px]:gap-[10px] gap-[16px]">

        {% include 'home/components/main_stat' %}

        <div
            class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
            <div class="pb-[14px] mb-[10px] border-b border-gray-200 dark:border-gray-700">
                <h5 class="leading-[30px] text-[24px] font-[600]">3.4k</h5>

                <div class="flex items-center justify-between">
                    <p class="text-[14px] text-[#7E7E7E]">Truy cập web trong tuần này</p>

                    <span
                        class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
                        <svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 10 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 13V1m0 0L1 5m4-4 4 4" />
                        </svg>
                        42.5%
                    </span>
                </div>
            </div>

            <div class="grid grid-cols-2">
                <dl class="flex items-center">
                    <dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Lượt truy cập:
                    </dt>
                    <dd class="text-gray-900 text-sm dark:text-white font-semibold">1.458</dd>
                </dl>

                <dl class="flex items-center justify-end">
                    <dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Người xem:</dt>
                    <dd class="text-gray-900 text-sm dark:text-white font-semibold">2.130</dd>
                </dl>
            </div>

            <div id="js-access-chart"></div>

            <div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
                <div class="flex justify-between items-center pt-5">
                    <select>
                        <option value=""> Last 7 days </option>
                        <option value=""> Yesterday </option>
                        <option value=""> Today </option>
                        <option value=""> Last 7 days </option>
                        <option value=""> Last 30 days </option>
                        <option value=""> Last 90 days </option>
                    </select>

                    <a href="#"
                        class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500  hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
                        Leads Report
                        <svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 9 4-4-4-4" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <div
            class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-4">
            <p class="inline-block text-[20px] font-bold leading-[36px] mb-[16px] mr-[18px]"> Lịch sử chỉnh
                sửa </p>

            <a href=""
                class="group inline-flex items-center px-[15px] mb-[16px] leading-[36px] text-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] hover:bg-[#0041E8] hover:text-white duration-100">
                <span class="mr-[5px]">Xem danh sách</span>

                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
                    <path class="group-hover:fill-[#fff]" fill-rule="evenodd" clip-rule="evenodd"
                        d="M6.5 1C3.46243 1 1 3.46243 1 6.5C1 9.53757 3.46243 12 6.5 12C9.53757 12 12 9.53757 12 6.5C12 3.46243 9.53757 1 6.5 1ZM0 6.5C0 2.91015 2.91015 0 6.5 0C10.0899 0 13 2.91015 13 6.5C13 10.0899 10.0899 13 6.5 13C2.91015 13 0 10.0899 0 6.5Z"
                        fill="#0041E8" />
                    <path class="group-hover:fill-[#fff]" fill-rule="evenodd" clip-rule="evenodd"
                        d="M6.52779 4.02767C6.72306 3.83241 7.03964 3.83241 7.2349 4.02767L9.35365 6.14642C9.54891 6.34168 9.54891 6.65827 9.35365 6.85353L7.2349 8.97228C7.03964 9.16754 6.72306 9.16754 6.52779 8.97228C6.33253 8.77702 6.33253 8.46043 6.52779 8.26517L8.29299 6.49998L6.52779 4.73478C6.33253 4.53952 6.33253 4.22293 6.52779 4.02767Z"
                        fill="#0041E8" />
                    <path class="group-hover:fill-[#fff]" fill-rule="evenodd" clip-rule="evenodd"
                        d="M3.5 6.5C3.5 6.22386 3.72386 6 4 6H9C9.27614 6 9.5 6.22386 9.5 6.5C9.5 6.77614 9.27614 7 9 7H4C3.72386 7 3.5 6.77614 3.5 6.5Z"
                        fill="#0041E8" />
                </svg>
            </a>

            <table class="table">
                <thead align="center" class="bg-[#F6F6F6] font-700 text-[14px] text-[#000]">
                    <td width="50"> STT </td>
                    <td width="265"> Người dùng </td>
                    <td> Nội dung </td>
                    <td width="150"> Thời gian </td>
                    <td width="100"> Xem chi tiết </td>
                </thead>

                <tbody>

                    {% for item in page.lich_su_chinh_sua %}
                    <tr>
                        <td class="text-center"> {{ item.id }} </td>
                        <td> {{ item.email }} </td>
                        <td> {{ item.content }} </td>
                        <td> {{ item.time }} </td>
                        <td>
                            <a href=""
                                class="block text-center rounded-[4px] border border-[#0041E8] bg-[#F5F7FF] text-[#0041E8] font-[500] leading-[36px] hover:bg-[#0041E8] hover:text-[#fff]">
                                Xem </a>
                        </td>
                    </tr>

                    {% endfor %}

                </tbody>
            </table>
        </div>
    </div>

    <!-- col-right -->
    <div class="col-span-3">
        <div
            class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] mb-[16px]">
            <div id="js-admin-home-tab"
                class="admin-home-tab rounded-[8px] bg-[#FAFAFA] mb-[16px] text-[12px] font-[500] flex items-center">
                <a href="#js-report-most-viewed-products" class="current">Sản phẩm xem nhiều</a>
                <a href="#js-report-introduce-web"> Web giới thiệu</a>
                <a href="#js-report-key-word"> Từ khóa</a>
                <a href="#js-report-article"> Bài viết</a>
            </div>

            <div class="home-report-holder block" id="js-report-most-viewed-products">
                <table class="table">
                    <thead class="bg-[#f6f6f6] text-[14px] font-700 text-[#000]">
                        <td width="50" class="text-center">STT</td>
                        <td>Sản phẩm</td>
                        <td width="75">Lượt xem</td>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="text-center"> 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 class="text-center">2
                            <td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a>
                            <td>30.000
                        <tr>
                            <td class="text-center">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" id="js-report-introduce-web">
                <div>
                    <p class="font-bold leading-[20px] text-[16px] mb-[15px]">Truy cập website</p>

                    <div>
                        <div class="flex" id="devices">
                            <div class="flex items-center me-4">
                                <input id="web_1" type="checkbox" value="web_1"
                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="web_1" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Web
                                    1</label>
                            </div>

                            <div class="flex items-center me-4">
                                <input id="web_2" type="checkbox" value="web_2"
                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="web_2" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Web
                                    2</label>
                            </div>

                            <div class="flex items-center me-4">
                                <input id="web_3" type="checkbox" value="web_3"
                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="web_3" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Web
                                    3</label>
                            </div>
                        </div>
                    </div>

                    <!-- Donut Chart -->
                    <div class="py-6" id="js-introduce-web-chart"></div>

                    <div
                        class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
                        <div class="flex justify-between items-center pt-5">
                            <select>
                                <option value=""> Last 7 days </option>
                                <option value=""> Yesterday </option>
                                <option value=""> Today </option>
                                <option value=""> Last 7 days </option>
                                <option value=""> Last 30 days </option>
                                <option value=""> Last 90 days </option>
                            </select>
                            <a href="#"
                                class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500  hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
                                Traffic analysis
                                <svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="home-report-holder" id="js-report-key-word">
                <a href=""
                    class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
                    Laptop, Máy Tính Xách Tay
                </a>

                <a href=""
                    class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
                    Máy Tính Bảng </a><a href=""
                    class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
                    Điện thoại iPhone </a><a href=""
                    class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
                    Máy Đọc Sách </a><a href=""
                    class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
                    Macbook </a><a href=""
                    class="inline-block text-[#9E9E9E] font-[500] leading-[20px] p-[8px] rounded-[4px] border-[#9E9E9E] border border-dashed m-[0_6px_6px_0] hover:bg-[#0041E8] hover:text-[#fff] hover:border-[#0041E8] duration-100">
                    Linh kiện máy tính </a>
            </div>

            <div class="home-report-holder" id="js-report-article">
                <table class="table">
                    <thead class="bg-[#F6F6F6] text-[14px] font-700 text-[#000]">
                        <td width="50" class="text-center">STT</td>
                        <td>Bài viết</td>
                        <td width="75">Lượt xem</td>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="text-center"> 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 class="text-center">2
                            <td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
                                    UX3402VALaptop
                                    Asus ZenBook UX3402VA </a>
                            <td>30.000
                        <tr>
                            <td class="text-center">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>

        <div class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px]">
            <div class="flex flex-wrap items-center justify-between mb-[10px]">
                <p class="font-[500]">Ghi nhắc việc làm cá nhân</p>

                <div
                    class="relative rounded-[4px] max-w-[120px] bg-white leading-[32px] border border-[#d8d8d8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0px_9px_0px_30px]">
                    <svg class="absolute top-[8px] left-[9px]" xmlns="http://www.w3.org/2000/svg" width="13" height="14"
                        viewBox="0 0 13 14" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M1.90909 2.54545C1.55764 2.54545 1.27273 2.83036 1.27273 3.18181V12.0909C1.27273 12.4424 1.55764 12.7273 1.90909 12.7273H10.8182C11.1696 12.7273 11.4545 12.4424 11.4545 12.0909V3.18181C11.4545 2.83036 11.1696 2.54545 10.8182 2.54545H1.90909ZM0 3.18181C0 2.12745 0.854729 1.27272 1.90909 1.27272H10.8182C11.8725 1.27272 12.7273 2.12745 12.7273 3.18181V12.0909C12.7273 13.1453 11.8725 14 10.8182 14H1.90909C0.854729 14 0 13.1453 0 12.0909V3.18181Z"
                            fill="#7E7E7E" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M8.90907 0C9.26052 0 9.54543 0.28491 9.54543 0.636364V3.18182C9.54543 3.53327 9.26052 3.81818 8.90907 3.81818C8.55761 3.81818 8.27271 3.53327 8.27271 3.18182V0.636364C8.27271 0.28491 8.55761 0 8.90907 0Z"
                            fill="#7E7E7E" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M3.81813 0C4.16958 0 4.45449 0.28491 4.45449 0.636364V3.18182C4.45449 3.53327 4.16958 3.81818 3.81813 3.81818C3.46667 3.81818 3.18176 3.53327 3.18176 3.18182V0.636364C3.18176 0.28491 3.46667 0 3.81813 0Z"
                            fill="#7E7E7E" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M0 5.72728C0 5.37582 0.28491 5.09091 0.636364 5.09091H12.0909C12.4424 5.09091 12.7273 5.37582 12.7273 5.72728C12.7273 6.07873 12.4424 6.36364 12.0909 6.36364H0.636364C0.28491 6.36364 0 6.07873 0 5.72728Z"
                            fill="#7E7E7E" />
                    </svg>

                    <input type="text" value="23/11/2023" class="w-[100%] h-[32px]">
                </div>
            </div>

            <form class="flex items-center justify-between mb-[10px]">
                <input type="text" placeholder="Nhập việc cần làm của bạn"
                    class="border border-[#ECECEC] h-[36px] mr-[10px] p-[0px_12px] rounded-[4px] w-[calc(100%-87px)]">
                <button type="button" class="bg-[#0041E8] font-[500] h-[36px] rounded-[4px] text-[#fff] w-[77px]">Tạo
                    mới</button>
            </form>

            <div class="home-todo-list">
                <table class="table">
                    <thead class="bg-[#F6F6F6] text-[14px] text-[#000] font-700">
                        <td class="text-center"> STT </td>
                        <td> Nội dung </td>
                        <td> Hết hạn </td>
                        <td> Trạng thái </td>
                    </thead>

                    <tbody>



                        <tr>
                            <td class="text-center"> 2 </td>
                            <td> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <span
                                    class="bg-[#F9F2F2] border-[#E00000] text-[#E00000] block border font-[500] p-[0px_5px] rounded-[50px] text-[12px] text-center">
                                    Quá hạn </span>
                            </td>
                        </tr>

                        <tr>
                            <td class="text-center"> 3 </td>
                            <td> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <span
                                    class="bg-[#F7F5FF] border-[#0041E8] text-[#0041E8] block border font-[500] p-[0px_5px] rounded-[50px] text-[12px] text-center">
                                    Đã xong </span>
                            </td>
                        </tr>

                        <tr>
                            <td class="text-center"> 4 </td>
                            <td> Sửa trang chủ websiteLaptoptcc </td>
                            <td> 28/11/2023 </td>
                            <td>
                                <span
                                    class="whitespace-nowrap bg-[#FCFAF1] border-[#FFC700] text-[#FFC700] block border font-[500] p-[0px_5px] rounded-[50px] text-[12px] text-center">
                                    Sắp hết hạn </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>