feat: add order management admin with list and detail views

Admin UI at /admin/orders to view, filter, and inspect orders.
Adds list_orders/1 and count_orders_by_status/0 to the Orders
context, status filter tabs, clickable order table with streams,
and a detail page showing items, totals, and shipping address.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/layouts/root.html.heex

@@ -45,6 +45,9 @@
           <li>
             <.link href={~p"/admin/theme"}>Theme</.link>
           </li>
+          <li>
+            <.link href={~p"/admin/orders"}>Orders</.link>
+          </li>
           <li>
             <.link href={~p"/admin/settings"}>Credentials</.link>
           </li>

lib/simpleshop_theme_web/live/admin_live/order_show.ex

@@ -0,0 +1,175 @@
+defmodule SimpleshopThemeWeb.AdminLive.OrderShow do
+  use SimpleshopThemeWeb, :live_view
+
+  alias SimpleshopTheme.Orders
+  alias SimpleshopTheme.Cart
+
+  @impl true
+  def mount(%{"id" => id}, _session, socket) do
+    case Orders.get_order(id) do
+      nil ->
+        socket =
+          socket
+          |> put_flash(:error, "Order not found")
+          |> push_navigate(to: ~p"/admin/orders")
+
+        {:ok, socket}
+
+      order ->
+        socket =
+          socket
+          |> assign(:page_title, order.order_number)
+          |> assign(:order, order)
+
+        {:ok, socket}
+    end
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <Layouts.app flash={@flash} current_scope={@current_scope}>
+      <.header>
+        <.link
+          navigate={~p"/admin/orders"}
+          class="text-sm font-normal text-base-content/60 hover:underline"
+        >
+          &larr; Orders
+        </.link>
+        <div class="flex items-center gap-3 mt-1">
+          <span class="text-2xl font-bold">{@order.order_number}</span>
+          <.status_badge status={@order.payment_status} />
+        </div>
+      </.header>
+
+      <div class="grid gap-6 mt-6 lg:grid-cols-2">
+        <%!-- order info --%>
+        <div class="card bg-base-100 shadow-sm border border-base-200">
+          <div class="card-body">
+            <h3 class="card-title text-base">Order details</h3>
+            <.list>
+              <:item title="Date">{format_date(@order.inserted_at)}</:item>
+              <:item title="Customer">{@order.customer_email || "—"}</:item>
+              <:item title="Payment status">
+                <.status_badge status={@order.payment_status} />
+              </:item>
+              <:item :if={@order.stripe_payment_intent_id} title="Stripe payment">
+                <code class="text-xs">{@order.stripe_payment_intent_id}</code>
+              </:item>
+              <:item title="Currency">{String.upcase(@order.currency)}</:item>
+            </.list>
+          </div>
+        </div>
+
+        <%!-- shipping address --%>
+        <div class="card bg-base-100 shadow-sm border border-base-200">
+          <div class="card-body">
+            <h3 class="card-title text-base">Shipping address</h3>
+            <%= if @order.shipping_address != %{} do %>
+              <.list>
+                <:item :if={@order.shipping_address["name"]} title="Name">
+                  {@order.shipping_address["name"]}
+                </:item>
+                <:item :if={@order.shipping_address["line1"]} title="Address">
+                  {@order.shipping_address["line1"]}
+                  <span :if={@order.shipping_address["line2"]}>
+                    <br />{@order.shipping_address["line2"]}
+                  </span>
+                </:item>
+                <:item :if={@order.shipping_address["city"]} title="City">
+                  {@order.shipping_address["city"]}
+                </:item>
+                <:item :if={@order.shipping_address["state"]} title="State">
+                  {@order.shipping_address["state"]}
+                </:item>
+                <:item :if={@order.shipping_address["postal_code"]} title="Postcode">
+                  {@order.shipping_address["postal_code"]}
+                </:item>
+                <:item :if={@order.shipping_address["country"]} title="Country">
+                  {@order.shipping_address["country"]}
+                </:item>
+              </.list>
+            <% else %>
+              <p class="text-base-content/60 text-sm">No shipping address provided</p>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <%!-- line items --%>
+      <div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
+        <div class="card-body">
+          <h3 class="card-title text-base">Items</h3>
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Product</th>
+                <th>Variant</th>
+                <th class="text-right">Qty</th>
+                <th class="text-right">Unit price</th>
+                <th class="text-right">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr :for={item <- @order.items}>
+                <td>{item.product_name}</td>
+                <td>{item.variant_title}</td>
+                <td class="text-right">{item.quantity}</td>
+                <td class="text-right">{Cart.format_price(item.unit_price)}</td>
+                <td class="text-right">{Cart.format_price(item.unit_price * item.quantity)}</td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="4" class="text-right font-medium">Subtotal</td>
+                <td class="text-right font-medium">{Cart.format_price(@order.subtotal)}</td>
+              </tr>
+              <tr class="text-lg">
+                <td colspan="4" class="text-right font-bold">Total</td>
+                <td class="text-right font-bold">{Cart.format_price(@order.total)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </Layouts.app>
+    """
+  end
+
+  defp status_badge(assigns) do
+    {bg, text, ring, icon} =
+      case assigns.status do
+        "paid" ->
+          {"bg-green-50", "text-green-700", "ring-green-600/20", "hero-check-circle-mini"}
+
+        "pending" ->
+          {"bg-amber-50", "text-amber-700", "ring-amber-600/20", "hero-clock-mini"}
+
+        "failed" ->
+          {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
+
+        "refunded" ->
+          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-arrow-uturn-left-mini"}
+
+        _ ->
+          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-question-mark-circle-mini"}
+      end
+
+    assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
+
+    ~H"""
+    <span class={[
+      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
+      @bg,
+      @text,
+      @ring
+    ]}>
+      <.icon name={@icon} class="size-3" /> {@status}
+    </span>
+    """
+  end
+
+  defp format_date(datetime) do
+    Calendar.strftime(datetime, "%d %b %Y %H:%M")
+  end
+end

lib/simpleshop_theme_web/live/admin_live/orders.ex

@@ -0,0 +1,162 @@
+defmodule SimpleshopThemeWeb.AdminLive.Orders do
+  use SimpleshopThemeWeb, :live_view
+
+  alias SimpleshopTheme.Orders
+  alias SimpleshopTheme.Cart
+
+  @impl true
+  def mount(_params, _session, socket) do
+    counts = Orders.count_orders_by_status()
+    orders = Orders.list_orders()
+
+    socket =
+      socket
+      |> assign(:page_title, "Orders")
+      |> assign(:status_filter, "all")
+      |> assign(:status_counts, counts)
+      |> assign(:order_count, length(orders))
+      |> stream(:orders, orders)
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_event("filter", %{"status" => status}, socket) do
+    orders = Orders.list_orders(status: status)
+
+    socket =
+      socket
+      |> assign(:status_filter, status)
+      |> assign(:order_count, length(orders))
+      |> stream(:orders, orders, reset: true)
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <Layouts.app flash={@flash} current_scope={@current_scope}>
+      <.header>
+        Orders
+      </.header>
+
+      <div class="flex gap-2 mt-6 mb-4 flex-wrap">
+        <.filter_tab
+          status="all"
+          label="All"
+          count={total_count(@status_counts)}
+          active={@status_filter}
+        />
+        <.filter_tab
+          status="paid"
+          label="Paid"
+          count={@status_counts["paid"]}
+          active={@status_filter}
+        />
+        <.filter_tab
+          status="pending"
+          label="Pending"
+          count={@status_counts["pending"]}
+          active={@status_filter}
+        />
+        <.filter_tab
+          status="failed"
+          label="Failed"
+          count={@status_counts["failed"]}
+          active={@status_filter}
+        />
+        <.filter_tab
+          status="refunded"
+          label="Refunded"
+          count={@status_counts["refunded"]}
+          active={@status_filter}
+        />
+      </div>
+
+      <.table
+        :if={@order_count > 0}
+        id="orders"
+        rows={@streams.orders}
+        row_item={fn {_id, order} -> order end}
+        row_click={fn {_id, order} -> JS.navigate(~p"/admin/orders/#{order}") end}
+      >
+        <:col :let={order} label="Order">{order.order_number}</:col>
+        <:col :let={order} label="Date">{format_date(order.inserted_at)}</:col>
+        <:col :let={order} label="Customer">{order.customer_email || "—"}</:col>
+        <:col :let={order} label="Total">{Cart.format_price(order.total)}</:col>
+        <:col :let={order} label="Status"><.status_badge status={order.payment_status} /></:col>
+      </.table>
+
+      <div :if={@order_count == 0} class="text-center py-12 text-base-content/60">
+        <.icon name="hero-inbox" class="size-12 mx-auto mb-4" />
+        <p class="text-lg font-medium">No orders yet</p>
+        <p class="text-sm mt-1">Orders will appear here once customers check out.</p>
+      </div>
+    </Layouts.app>
+    """
+  end
+
+  defp filter_tab(assigns) do
+    count = assigns[:count] || 0
+    active = assigns.active == assigns.status
+
+    assigns = assign(assigns, count: count, active: active)
+
+    ~H"""
+    <button
+      phx-click="filter"
+      phx-value-status={@status}
+      class={[
+        "btn btn-sm",
+        @active && "btn-primary",
+        !@active && "btn-ghost"
+      ]}
+    >
+      {@label}
+      <span :if={@count > 0} class="badge badge-sm ml-1">{@count}</span>
+    </button>
+    """
+  end
+
+  defp status_badge(assigns) do
+    {bg, text, ring, icon} =
+      case assigns.status do
+        "paid" ->
+          {"bg-green-50", "text-green-700", "ring-green-600/20", "hero-check-circle-mini"}
+
+        "pending" ->
+          {"bg-amber-50", "text-amber-700", "ring-amber-600/20", "hero-clock-mini"}
+
+        "failed" ->
+          {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
+
+        "refunded" ->
+          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-arrow-uturn-left-mini"}
+
+        _ ->
+          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-question-mark-circle-mini"}
+      end
+
+    assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
+
+    ~H"""
+    <span class={[
+      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
+      @bg,
+      @text,
+      @ring
+    ]}>
+      <.icon name={@icon} class="size-3" /> {@status}
+    </span>
+    """
+  end
+
+  defp format_date(datetime) do
+    Calendar.strftime(datetime, "%d %b %Y %H:%M")
+  end
+
+  defp total_count(counts) do
+    counts |> Map.values() |> Enum.sum()
+  end
+end

lib/simpleshop_theme_web/router.ex

@@ -117,6 +117,8 @@ defmodule SimpleshopThemeWeb.Router do
       live "/admin/providers", ProviderLive.Index, :index
       live "/admin/providers/new", ProviderLive.Form, :new
       live "/admin/providers/:id/edit", ProviderLive.Form, :edit
+      live "/admin/orders", AdminLive.Orders, :index
+      live "/admin/orders/:id", AdminLive.OrderShow, :show
       live "/admin/settings", AdminLive.Settings, :index
     end