admin_hura_8/template/customer/home.html

<div class="w-[100%]">
    <div class="m-[15px] px-[15px] py-[20px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)]">
        <h1 class="text-2xl font-[700] mb-3">Danh sách khách hàng</h1>

        <div class="list-filter-account flex items-center">
            <a href="javacsript:void(0)"
                class="px-[30px] py-[6px] text-[#fff] mr-[5px] bg-[#0041E8] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Tất
                cả</a>
            <a href="javacsript:void(0)"
                class="px-[30px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Khách
                hàng đăng
                ký</a>
            <a href="javacsript:void(0)"
                class="px-[30px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Chưa
                đăng ký</a>
            <a href="javacsript:void(0)"
                class="px-[30px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">VIP</a>
        </div>

        <form action=""
            class="flex items-center p-[15px] rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] mt-[15px] border-[1px] border-[#F6F6F6]">
            <input type="text" name=""
                class="w-[375px] h-[35px] px-[10px] rounded-[4px] border-[#D8D8D8] border-[1px] mr-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"
                placeholder="Tìm khách hàng (* tên, email, điện thoại)">
            <button type="submit" class="px-[8px] py-[6px] rounded-[4px] text-white bg-[#0041E8]">Tìm kiếm</button>
        </form>

        <div class="list-filter flex flex-wrap items-center justify-between mt-[15px]">
            <select name="" id=""
                class="select w-[180px] h-[35px] min-h-[35px] p-[5px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mb-[15px]">
                <option value="">Sắp xếp khách hàng</option>
            </select>

            <div class="list flex items-center mb-[15px]">
                <a href="/admin/customer/customer_add" class="flex items-center p-[8px_15px] border-[1px] border-[#0041E8] rounded-[4px]
                text-[#0041E8] bg-[#F5F7FF] hover:text-white hover:bg-[#0041E8]">
                    <i class="fa-solid fa-user-plus"></i>
                    <span class="ml-[5px]">Thêm KH mới</span>
                </a>
                <a href="javascript:void(0)" class="flex items-center p-[8px_15px] border-[1px] border-[#0041E8] rounded-[4px]
                                text-[#0041E8] ml-[15px] bg-[#F5F7FF] hover:text-white hover:bg-[#0041E8]">
                    <i class="fa-solid fa-user-group"></i>
                    <span class="ml-[5px]">Các nhóm KH</span>
                </a>
                <a href="javascript:void(0)" class="flex items-center p-[8px_15px] border-[1px] border-[#0041E8] rounded-[4px]
                                text-[#0041E8] ml-[15px] bg-[#F5F7FF] hover:text-white hover:bg-[#0041E8]">
                    <i class="fa-regular fa-file-excel"></i>
                    <span class="ml-[5px]">Tải file excel</span>
                </a>
            </div>
        </div>
        <div class="overflow-x-auto sm:whitespace-nowrap">
            <table class="w-[100%] table">
                <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
                    <tr>
                        <th>STT</th>
                        <th>ID</th>
                        <th>Khách hàng</th>
                        <th>Thông tin</th>
                        <th>Tỉnh/TP</th>
                        <th>Trạng thái</th>
                        <th>Số đơn hàng</th>
                        <th>Tổng giá trị</th>
                        <th>Thời gian</th>
                        <th>Chỉnh sửa</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>1767</td>
                        <td>Đức Anh</td>
                        <td>
                            <p>- Email: ducanhnguyen199x@gmail.com</p>
                            <p>- Tel: 0976642092</p>
                            <p>- Mobile: 0976642092</p>
                        </td>
                        <td>
                            Hà Nội
                        </td>
                        <td>
                            <span class="w-[14px] h-[14px] bg-[#FFC700] block mx-auto my-0 rounded-[50%]"></span>
                        </td>
                        <td>
                            <span class="text-[#0041E8]">0</span><span class="ml-[5px]">Thành công</span>
                        </td>
                        <td>
                            <span class="text-[#0041E8]">0</span><span class="ml-[5px]">Thu</span>
                        </td>
                        <td>
                            <p>
                                - Tham gia: 06-10-2023, 10:46 am
                            </p>
                            <p>
                                - Đăng nhập cuối: Chưa bao giờ
                            </p>
                        </td>
                        <td>
                            <div class="flex items-center">
                                <a href="/admin/product/form?id={{item.id}}" title="Form sản phẩm"
                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
                                    <i class="icons icon-edit"></i>
                                </a>
                                <a href="{{item.request_path}}" title="Xem tại web" target="_blank"
                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
                                    <i class="fa-solid fa-lock text-[#0041E8]"></i>
                                </a>
                            </div>
                            <div class="flex items-center">
                                <a href=""
                                    class="w-[32px] h-[32px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
                                    <i class="fa-solid fa-globe text-[#9E9E9E]"></i>
                                </a>
                                <a href=""
                                    class="w-[32px] h-[32px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
                                    <i class="icons icon-delete"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="paging">
            <a href="">
                <i class="fas fa-chevron-left"></i>
            </a>
            <a href="{{paging.url}}" class="active">
                1
            </a>
            <a href="{{paging.url}}">
                2
            </a>
            <a href="{{paging.url}}">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>

    </div>
</div>