admin_hura_8/template/order/home.html

<div class="order-page m-[16px] p-[20px_15px] bg-white">
    <p class="m-[0_0_10px] text-[24px] font-[600] leading-[31px]">Danh sách đơn hàng </p>

    <div class="order-page-title flex flex-wrap mb-[17px] leading-[36px]">
        <a href="/admin/?opt=order" class="current">Tất cả</a>
        <a href="/admin/?opt=order&list=mine">Tôi được giao</a>
        <a href="/admin/?opt=order&list=new">Đơn mới</a>
        <a href="/admin/?opt=order&list=unpaid">Chưa thanh toán</a>
        <a href="/admin/?opt=order&list=unfulfilled">Chưa ship</a>
    </div>
    
    <form method="get" action="" enctype="multipart/form-data" id="form-search">
        <input type="hidden" name="opt" value="order">
        <input type="hidden" name="status" id="js-status" value="">
        <input type="hidden" name="update_by" id="update_by" value="">
        <input type="hidden" name="assign_to" id="assign_to" value="">
        <input type="hidden" name="payment" id="js-payment" value="">
        <input type="hidden" name="fullfillment" id="js-fullfillment" value="">
    
        <div class="flex items-center mb-[15px] p-[15px_16px] border border-[#F6F6F6] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
            <input type="text" name="orderCode" value="" placeholder="Mã đơn hàng" class="w-[375px] h-[36px] p-[0_10px] m-[0_10px_0_0] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">

            <span>hoặc</span>

            <input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)" class="w-[375px] h-[36px] p-[0_10px] m-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
            
            <div class="relative m-[0_15px]">
                <i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
                <input type="text" name="from_date" value="" onfocus="scwShow(this,event);" onclick="scwShow(this,event);" placeholder="Từ ngày" class="w-[125px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
            </div>
            
            <div class="relative m-[0_15px]">
                <i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
                <input type="text" name="to_date" value="" onfocus="scwShow(this,event);" onclick="scwShow(this,event);" placeholder="Đến ngày" class="w-[125px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
            </div>

            <input type="submit" value="Tìm kiếm" class="bg-[#0041E8] rounded-[4px] text-[#fff] font-[500] h-[36px] p-[0_10px] cursor-pointer">
        </div>
    </form>
    
    <div class="flex items-center justify-between m-[14px_0_20px]">
        <div>
            <p class="m-[0_55px_0_0] inline-block">
                Tổng số đơn hàng: <b>1.458</b>
            </p>

            <p class="m-0 inline-block">
                Tổng giá trị: <b>14.948.348.000 VNĐ</b>
            </p>
        </div>

        <div>
            <a href="" class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
                <i class="fas fa-print m-[0_4px_0_0]"></i> In danh sách
            </a>

            <a href="" class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
                <i class="far fa-file-excel m-[0_4px_0_0]"></i> Tải file excel
            </a>
        </div>
    </div>

    <div class="order-page-table">
        <table>
            <thead>
                <tr>
                    <td> STT </td>
                    <td> Mã số </td>
                    <td> Thời gian </td>
                    <td> Khách hàng </td>
                    <td> Tỉnh/TP </td>
                    <td> Giá trị </td>
                    <td width="170">
                        <select onchange="setHiddenValue('js-payment', this.value); runFilter()">
                            <option value="">Thanh toán</option>
                            <option value="pending">Chờ</option>
                            <option value="authorized">Đã xác nhận</option>
                            <option value="overdue">Quá hạn</option>
                            <option value="expiring">Sắp hết hạn</option>
                            <option value="expired">Hết hạn</option>
                            <option value="paid">Đã thanh toán</option>
                            <option value="refunded">Đã hoàn lại</option>
                            <option value="partially-refunded">Hoàn lại 1 phần</option>
                            <option value="partially-paid">Thanh toán 1 phần</option>
                            <option value="voided">Hủy</option>
                            <option value="unpaid">Chưa thanh toán</option>
                        </select>
                    </td>

                    <td width="160">
                        <select onchange="setHiddenValue('js-fullfillment', this.value); runFilter()">
                            <option value="">Vận chuyển</option>
                            <option value="fulfilled">Đã chuyển hết</option>
                            <option value="unfulfilled">Chưa chuyển</option>
                            <option value="partially-fulfilled">Chuyển 1 phần</option>
                            <option value="scheduled">Đã lên kế hoạch</option>
                            <option value="onhold ">Giữ hàng</option>
                        </select>
                    </td>

                    <td width="160">
                        <select onchange="setHiddenValue('js-status', this.value); runFilter()">
                            <option value="">Tình trạng đơn</option>
                            <option value="new">Mới</option>
                            <option value="processing">Đang xử lý</option>
                            <option value="success">Thành công</option>
                            <option value="closed">Đóng lại</option>
                            <option value="canceled">Hủy</option>
                        </select>
                    </td>

                    <td width="170">
                        <select onchange="setHiddenValue('assign_to', this.value); runFilter()">
                            <option value="">Người được giao</option>
                        </select>
                    </td>

                    <td width="87"> Xem </td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td> 1 </td>
                    <td>
                        <a href=""> 000-369 </a>
                    </td>
                    <td> 16-11-2023, 9:59 am </td>
                    <td>
                        <a href=""> Nguyen Duc Quan </a>
                    </td>
                    <td> Hà Nội </td>
                    <td> 69.600.000 </td>
                    <td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: red"></span> </td>
                    <td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: yellow"></span> </td>
                    <td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: green"></span> </td>
                    <td>
                        <a href=""> Nguyen Duc Quan </a>
                    </td>
                    <td>
                        <a href="" class="icons icon-edit" title="Chi tiết"></a>
                        <a href="" class="icons icon-delete" title="Xóa"></a>
                    </td>
                </tr>

                <tr>
                    <td> 2 </td>
                    <td>
                        <a href=""> 000-369 </a>
                    </td>
                    <td> 16-11-2023, 9:59 am </td>
                    <td>
                        <a href=""> test hura </a>
                    </td>
                    <td> Hà Nội </td>
                    <td> 69.600.000 </td>
                    <td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: blue"></span> </td>
                    <td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: yellow"></span> </td>
                    <td> <span class="block w-[14px] h-[14px] rounded-[50%]" style="background-color: green"></span> </td>
                    <td>
                        <a href=""> test hura </a>
                    </td>
                    <td>
                        <a href="" class="icons icon-edit" title="Chi tiết"></a>
                        <a href="" class="icons icon-delete" title="Xóa"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="paging">
        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
        <a href="" class="current">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
    </div>
</div>