phoenix_kit_billing

  <div class="container mx-auto px-4 py-6">
    <%!-- Header --%>
    <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/billing")}>
      <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-base-content">Orders</h1>
      <p class="text-sm text-base-content/60 mt-0.5">{@total_count} total orders</p>
      <:actions>
        <button phx-click="refresh" class="btn btn-ghost btn-sm">
          <.icon name="hero-arrow-path" class="w-4 h-4" /> Refresh
        </button>
        <.link
          navigate={PhoenixKit.Utils.Routes.path("/admin/billing/orders/new")}
          class="btn btn-primary btn-sm"
        >
          <.icon name="hero-plus" class="w-4 h-4" /> New Order
        </.link>
      </:actions>
    </.admin_page_header>

    <%!-- Filters --%>
    <div class="card bg-base-100 shadow mb-6">
      <div class="card-body py-4">
        <form phx-change="filter" phx-submit="filter" class="flex flex-wrap gap-4 items-end">
          <div class="form-control flex-1 min-w-[200px]">
            <label class="label">
              <span class="label-text">Search</span>
            </label>
            <input
              type="text"
              name="search"
              value={@search}
              placeholder="Order number, customer..."
              class="input input-bordered input-sm"
              phx-debounce="300"
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">Status</span>
            </label>
            <select name="status" class="select select-bordered select-sm">
              <option value="all" selected={@status_filter == "all"}>All Statuses</option>
              <option value="draft" selected={@status_filter == "draft"}>Draft</option>
              <option value="pending" selected={@status_filter == "pending"}>Pending</option>
              <option value="confirmed" selected={@status_filter == "confirmed"}>
                Confirmed
              </option>
              <option value="paid" selected={@status_filter == "paid"}>Paid</option>
              <option value="cancelled" selected={@status_filter == "cancelled"}>
                Cancelled
              </option>
              <option value="refunded" selected={@status_filter == "refunded"}>Refunded</option>
            </select>
          </div>

          <button type="button" phx-click="clear_filters" class="btn btn-ghost btn-sm">
            Clear Filters
          </button>
        </form>
      </div>
    </div>

    <%!-- Orders Table --%>
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body p-0">
        <%= if @loading do %>
          <div class="flex justify-center items-center py-12">
            <span class="loading loading-spinner loading-lg"></span>
          </div>
        <% else %>
          <%= if Enum.empty?(@orders) do %>
            <div class="text-center py-12">
              <.icon
                name="hero-clipboard-document-list"
                class="w-16 h-16 mx-auto mb-4 text-base-content/30"
              />
              <h3 class="text-xl font-semibold mb-2">No orders found</h3>
              <p class="text-base-content/60 mb-4">
                <%= if @search != "" or @status_filter != "all" do %>
                  Try adjusting your filters or search terms
                <% else %>
                  Get started by creating your first order
                <% end %>
              </p>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/billing/orders/new")}
                class="btn btn-primary"
              >
                <.icon name="hero-plus" class="w-4 h-4" /> Create Order
              </.link>
            </div>
          <% else %>
            <div class="overflow-x-auto">
              <table class="table">
                <thead>
                  <tr>
                    <th>Order #</th>
                    <th>Customer</th>
                    <th>Status</th>
                    <th>Payment</th>
                    <th>Total</th>
                    <th>Date</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <%= for order <- @orders do %>
                    <tr
                      class="hover cursor-pointer"
                      phx-click="view_order"
                      phx-value-uuid={order.uuid}
                    >
                      <td class="font-mono">{order.order_number}</td>
                      <td>
                        <%= if order.user do %>
                          <div class="flex items-center gap-2">
                            <.user_avatar user={order.user} size="sm" />
                            <div>
                              <div class="font-medium text-sm">{order.user.email}</div>
                            </div>
                          </div>
                        <% else %>
                          <span class="text-base-content/50">-</span>
                        <% end %>
                      </td>
                      <td><.order_status_badge status={order.status} /></td>
                      <td>
                        <%= if order.payment_method do %>
                          <span class="badge badge-outline badge-sm h-auto">
                            {String.upcase(order.payment_method)}
                          </span>
                        <% else %>
                          <span class="text-base-content/40">-</span>
                        <% end %>
                      </td>
                      <td>
                        <.currency_compact amount={order.total} currency={order.currency} />
                      </td>
                      <td class="text-sm text-base-content/60">
                        <.time_ago datetime={order.inserted_at} />
                      </td>
                      <td>
                        <.link
                          navigate={
                            PhoenixKit.Utils.Routes.path("/admin/billing/orders/#{order.uuid}")
                          }
                          class="btn btn-xs btn-outline btn-info tooltip tooltip-bottom"
                          data-tip={gettext("View")}
                        >
                          <.icon name="hero-eye" class="w-4 h-4 hidden sm:inline" />
                          <span class="sm:hidden whitespace-nowrap">{gettext("View")}</span>
                        </.link>
                      </td>
                    </tr>
                  <% end %>
                </tbody>
              </table>
            </div>

            <%!-- Pagination --%>
            <%= if @total_pages > 1 do %>
              <div class="flex justify-center py-4">
                <.pagination
                  current_page={@page}
                  total_pages={@total_pages}
                  base_path={PhoenixKit.Utils.Routes.path("/admin/billing/orders")}
                  params={%{"search" => @search, "status" => @status_filter}}
                />
              </div>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>