Packages

phoenix_kit

1.7.49
1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
221 Versions
38 Dependencies
Dependants
Files
Activity
phoenix_kit lib modules billing web orders.html.heex
Raw

lib/modules/billing/web/orders.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title="{@project_title} Orders"

  current_path={@url_path}

  project_title={@project_title}

>

  <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-ghost btn-xs"

                        >

                          <.icon name="hero-eye" class="w-4 h-4" />

                        </.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>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>