<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Purchased Orders')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Ecommerce', 'title' => 'Purchased Orders')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Ecommerce', 'title' => 'Purchased Orders')) ?>

                    <div class="container-fluid">
<div class="card" data-table="" data-table-rows-per-page="10">
<div class="card-header">
<!-- Search -->
<div class="flex gap-2.5">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search..." type="search"/>
</div>
<button class="btn bg-danger text-white hover:bg-danger-hover hidden" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 lg:flex-nowrap">
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<div class="items-center gap-2.5 md:flex">
<span class="font-semibold me-2.5">Filter By:</span>
<!-- Payment Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--credit-card input-icon"></i>
<select class="form-select" data-table-filter="payment-status">
<option value="All">Payment Status</option>
<option value="Paid">Paid</option>
<option value="Pending">Pending</option>
<option value="Unpaid">Unpaid</option>
<option value="Overdue">Overdue</option>
</select>
</div>
</div>
<!-- Order Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--truck input-icon"></i>
<select class="form-select" data-table-filter="order-status">
<option value="All">Order Status</option>
<option value="Completed">Completed</option>
<option value="Processing">Processing</option>
<option value="Partially Received">Partially Received</option>
<option value="Pending Delivery">Pending Delivery</option>
<option value="Awaiting Delivery">Awaiting Delivery</option>
<option value="Awaiting Shipment">Awaiting Shipment</option>
<option value="Cancelled">Cancelled</option>
<option value="In Progress">In Progress</option>
</select>
</div>
<!-- Records Per Page -->
<div class="relative">
<select class="form-select" data-table-set-rows-per-page="">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<a aria-controls="addPurchaseOrderModal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-danger text-white hover:bg-danger-hover" data-hs-overlay="#addPurchaseOrderModal" href="#addPurchaseOrderModal">
<i class="iconify tabler--plus"></i>
                                    Add New
                                </a>
</div>
<div class="table-wrapper">
<table class="table table-select table-hover">
<thead class="thead-sm">
<tr class="bg-light/25 text-2xs uppercase">
<th class="w-[1%]">
<input class="form-checkbox form-checkbox-light size-4.5" data-table-select-all="" id="select-all-orders" type="checkbox"/>
</th>
<th data-table-sort="">PO Number</th>
<th data-table-sort="">Supplier</th>
<th data-table-sort="">Items</th>
<th data-table-sort="">Order Date</th>
<th data-table-sort="">Delivery Date</th>
<th data-table-sort="">Total Amount</th>
<th data-column="payment-status" data-table-sort="">Payment Status</th>
<th data-column="order-status" data-table-sort="">Order Status</th>
<th class="text-center w-[1%]">Actions</th>
</tr>
</thead>
<tbody>
<!-- row-1 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0148</a>
</td>
<td>
<div>
<h6>TechVision Supplies</h6>
<p class="text-default-400 text-xs">techvision@email.com</p>
</div>
</td>
<td>12 Items</td>
<td>
                                                05 Oct, 2025
                                                <small class="text-default-400 text-2xs">09:15 AM</small>
</td>
<td>
                                                10 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$3,480.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Paid</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-primary/15 text-primary">Received</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-2 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0149</a>
</td>
<td>
<div>
<h6>Global Stationers</h6>
<p class="text-default-400 text-xs">orders@globalstationers.com</p>
</div>
</td>
<td>8 Items</td>
<td>
                                                06 Oct, 2025
                                                <small class="text-default-400 text-2xs">02:45 PM</small>
</td>
<td>
                                                12 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$1,260.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-warning/15 text-warning">Pending</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-info/15 text-info">Processing</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-3 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0150</a>
</td>
<td>
<div>
<h6>NextGen Components</h6>
<p class="text-default-400 text-xs">support@nextgen.com</p>
</div>
</td>
<td>25 Items</td>
<td>
                                                02 Oct, 2025
                                                <small class="text-default-400 text-2xs">11:05 AM</small>
</td>
<td>
                                                09 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$7,920.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Paid</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-warning/15 text-warning">Partially Received</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-4 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0151</a>
</td>
<td>
<div>
<h6>EcoHome Essentials</h6>
<p class="text-default-400 text-xs">contact@ecohome.com</p>
</div>
</td>
<td>5 Items</td>
<td>
                                                04 Oct, 2025
                                                <small class="text-default-400 text-2xs">03:30 PM</small>
</td>
<td>
                                                09 Oct, 2025
                                                <small class="text-default-400 text-2xs">Delivered</small>
</td>
<td>
<h5>$980.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-danger/15 text-danger">Unpaid</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Completed</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-5 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0152</a>
</td>
<td>
<div>
<h6>BrightLine Textiles</h6>
<p class="text-default-400 text-xs">info@brightline.com</p>
</div>
</td>
<td>16 Items</td>
<td>
                                                07 Oct, 2025
                                                <small class="text-default-400 text-2xs">08:20 AM</small>
</td>
<td>
                                                14 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$4,250.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Paid</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-warning/15 text-warning">Pending Delivery</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-6 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0153</a>
</td>
<td>
<div>
<h6>Urban Office Supplies</h6>
<p class="text-default-400 text-xs">sales@urbanoffice.com</p>
</div>
</td>
<td>9 Items</td>
<td>
                                                03 Oct, 2025
                                                <small class="text-default-400 text-2xs">01:10 PM</small>
</td>
<td>
                                                07 Oct, 2025
                                                <small class="text-default-400 text-2xs">Delivered</small>
</td>
<td>
<h5>$2,340.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-danger/15 text-danger">Overdue</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-danger/15 text-danger">Cancelled</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-7 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0154</a>
</td>
<td>
<div>
<h6>Northway Electronics</h6>
<p class="text-default-400 text-xs">contact@northway.com</p>
</div>
</td>
<td>14 Items</td>
<td>
                                                08 Oct, 2025
                                                <small class="text-default-400 text-2xs">10:00 AM</small>
</td>
<td>
                                                15 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$5,610.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-warning/15 text-warning">Pending</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-info/15 text-info">In Progress</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-8 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0155</a>
</td>
<td>
<div>
<h6>Apex Industrial Tools</h6>
<p class="text-default-400 text-xs">sales@apextools.com</p>
</div>
</td>
<td>20 Items</td>
<td>
                                                01 Oct, 2025
                                                <small class="text-default-400 text-2xs">04:30 PM</small>
</td>
<td>
                                                06 Oct, 2025
                                                <small class="text-default-400 text-2xs">Delivered</small>
</td>
<td>
<h5>$9,875.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Paid</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Completed</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-9 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0156</a>
</td>
<td>
<div>
<h6>GreenLeaf Packaging</h6>
<p class="text-default-400 text-xs">hello@greenleafpack.com</p>
</div>
</td>
<td>7 Items</td>
<td>
                                                09 Oct, 2025
                                                <small class="text-default-400 text-2xs">11:50 AM</small>
</td>
<td>
                                                15 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$2,120.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-warning/15 text-warning">Pending</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-secondary/15 text-secondary">Awaiting Shipment</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-10 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0157</a>
</td>
<td>
<div>
<h6>BlueSky Furnishings</h6>
<p class="text-default-400 text-xs">orders@bluesky.com</p>
</div>
</td>
<td>10 Items</td>
<td>
                                                06 Oct, 2025
                                                <small class="text-default-400 text-2xs">09:40 AM</small>
</td>
<td>
                                                11 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$3,950.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-success/15 text-success">Paid</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-info/15 text-info">Awaiting Delivery</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-11 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<a class="hover:text-primary font-semibold" href="#!">PO-2025-0158</a>
</td>
<td>
<div>
<h6>PrimeTech Hardware</h6>
<p class="text-default-400 text-xs">info@primetech.com</p>
</div>
</td>
<td>18 Items</td>
<td>
                                                05 Oct, 2025
                                                <small class="text-default-400 text-2xs">05:25 PM</small>
</td>
<td>
                                                13 Oct, 2025
                                                <small class="text-default-400 text-2xs">Expected</small>
</td>
<td>
<h5>$6,730.00</h5>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-danger/15 text-danger">Overdue</span>
</td>
<td>
<span class="badge py-0.5 font-semibold text-2xs badge-label bg-danger/15 text-danger">Cancelled</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="orders"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>

                <div aria-labelledby="addPurchaseOrderModalLabel" class="hs-overlay pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="addPurchaseOrderModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 m-3 flex min-h-[calc(100%-56px)] scale-95 items-center opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-2xl lg:max-w-3xl">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="card-header p-5">
<h3 class="flex items-center font-semibold" id="addPurchaseOrderModalLabel">
<i class="iconify tabler--file-text text-danger me-2.5"></i>
                                    Add New Purchase Order
                                </h3>
<button aria-label="Close" data-hs-overlay="#addPurchaseOrderModal" type="button">
<i class="iconify tabler--x text-2xl align-middle text-default-600"></i>
</button>
</div>
<div class="card-body">
<div class="grid grid-cols-1 md:grid-cols-2 gap-base">
<!-- PO Number -->
<div>
<label class="form-label" for="poNumber">PO Number</label>
<input class="form-input" id="poNumber" placeholder="PO-2025-0149" type="text"/>
</div>
<!-- Supplier Name -->
<div>
<label class="form-label" for="supplierName">Supplier Name</label>
<input class="form-input" id="supplierName" placeholder="Global Tech Supplies" type="text"/>
</div>
<!-- Supplier Email -->
<div>
<label class="form-label" for="supplierEmail">Supplier Email</label>
<input class="form-input" id="supplierEmail" placeholder="globaltech@email.com" type="email"/>
</div>
<!-- Items -->
<div>
<label class="form-label" for="poItems">Items Count</label>
<input class="form-input" id="poItems" placeholder="10" type="number"/>
</div>
<!-- Order Date -->
<div>
<label class="form-label" for="orderDate">Order Date</label>
<input class="form-input" data-date-format="d M, Y" data-provider="flatpickr" id="orderDate" type="date" value="2025-10-05"/>
</div>
<!-- Delivery Date -->
<div>
<label class="form-label" for="deliveryDate">Delivery Date</label>
<input class="form-input" data-date-format="d M, Y" data-provider="flatpickr" id="deliveryDate" type="date" value="2025-10-10"/>
</div>
<!-- Total Amount -->
<div>
<label class="form-label" for="totalAmount">Total Amount</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input class="form-input" id="totalAmount" placeholder="3480.00" step="0.01" type="number"/>
</div>
</div>
<!-- Payment Status -->
<div>
<label class="form-label" for="paymentStatus">Payment Status</label>
<select class="form-input" id="paymentStatus">
<option selected="">Paid</option>
<option>Pending</option>
<option>Partially Paid</option>
<option>Unpaid</option>
</select>
</div>
<!-- Order Status -->
<div>
<label class="form-label" for="orderStatus">Order Status</label>
<select class="form-input" id="orderStatus">
<option selected="">Received</option>
<option>Processing</option>
<option>Dispatched</option>
<option>Cancelled</option>
</select>
</div>
<!-- Notes -->
<div class="col-span-1 md:col-span-2">
<label class="form-label" for="poNotes">Additional Notes</label>
<textarea class="form-textarea" id="poNotes" placeholder="Add any special instructions or remarks here..." rows="2"></textarea>
</div>
</div>
</div>
<div class="border-default-300 flex items-center justify-end gap-2 border-t p-5">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#addPurchaseOrderModal" type="button">Close</button>
<button class="btn bg-danger text-white hover:bg-danger-hover" type="button">
<i class="iconify tabler--check"></i>
                                    Save Purchase Order
                                </button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Page content -->

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
</body>
</html>