Packages
phoenix_kit
1.7.52
1.7.208
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
Current section
Files
Jump to
Current section
Files
lib/modules/shop/web/user_orders.html.heex
<PhoenixKitWeb.Layouts.dashboard {dashboard_assigns(assigns)}>
<div class="container mx-auto">
<%!-- Header --%>
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<h1 class="text-2xl font-bold">{gettext("My Orders")}</h1>
<p class="text-base-content/70 mt-1">{gettext("View your order history")}</p>
</div>
<div class="mt-4 md:mt-0">
<.link
navigate={PhoenixKit.Utils.Routes.path("/shop")}
class="btn btn-primary"
>
<.icon name="hero-shopping-bag" class="h-5 w-5" /> {gettext("Browse Shop")}
</.link>
</div>
</div>
<%!-- Status Filter --%>
<div class="bg-base-200 rounded-lg p-4 mb-6">
<form phx-change="filter" class="flex flex-col md:flex-row gap-4 items-center">
<div class="w-full md:w-48">
<select name="filters[status]" class="select select-bordered w-full">
<option value="">{gettext("All Statuses")}</option>
<option value="pending" selected={@status_filter == "pending"}>
{gettext("Pending")}
</option>
<option value="processing" selected={@status_filter == "processing"}>
{gettext("Processing")}
</option>
<option value="shipped" selected={@status_filter == "shipped"}>
{gettext("Shipped")}
</option>
<option value="delivered" selected={@status_filter == "delivered"}>
{gettext("Delivered")}
</option>
<option value="completed" selected={@status_filter == "completed"}>
{gettext("Completed")}
</option>
<option value="cancelled" selected={@status_filter == "cancelled"}>
{gettext("Cancelled")}
</option>
</select>
</div>
<%= if @status_filter do %>
<button type="button" phx-click="clear_filters" class="btn btn-ghost btn-sm">
{gettext("Clear")}
</button>
<% end %>
<div class="flex-1 text-right text-sm text-base-content/70">
{ngettext("%{count} order", "%{count} orders", @total_count, count: @total_count)}
</div>
</form>
</div>
<%!-- Orders List --%>
<div class="space-y-4">
<%= 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 bg-base-100 rounded-lg shadow">
<.icon name="hero-shopping-bag" class="h-16 w-16 mx-auto text-base-content/30 mb-4" />
<h3 class="text-lg font-medium mb-2">{gettext("No orders yet")}</h3>
<p class="text-base-content/70 mb-4">
<%= if @status_filter do %>
{gettext("No orders with this status. Try a different filter.")}
<% else %>
{gettext("Start shopping to see your orders here.")}
<% end %>
</p>
<.link
navigate={PhoenixKit.Utils.Routes.path("/shop")}
class="btn btn-primary"
>
<.icon name="hero-shopping-bag" class="h-5 w-5" /> {gettext("Browse Products")}
</.link>
</div>
<% else %>
<%= for order <- @orders do %>
<.link
navigate={PhoenixKit.Utils.Routes.path("/dashboard/orders/#{order.uuid}")}
class="block bg-base-100 rounded-lg shadow hover:shadow-md transition p-4"
>
<div class="flex items-start justify-between">
<div class="flex-1 min-w-0">
<h3 class="font-semibold text-lg font-mono">{order.order_number}</h3>
<p class="text-base-content/70 text-sm mt-1">
{items_count(order.line_items)} {ngettext(
"item",
"items",
items_count(order.line_items)
)}
</p>
</div>
<div class="ml-4 flex-shrink-0 text-right">
<span class={"badge #{status_badge_class(order.status)} capitalize"}>
{order.status}
</span>
<div class="text-lg font-bold mt-1">
{format_price(order.total, @currency)}
</div>
</div>
</div>
<div class="flex items-center gap-4 mt-3 text-sm text-base-content/60">
<span class="flex items-center gap-1">
<.icon name="hero-calendar" class="w-4 h-4" />
{format_date(order.inserted_at)}
</span>
</div>
</.link>
<% end %>
<%!-- Pagination --%>
<%= if @total_pages > 1 do %>
<div class="flex justify-center items-center gap-2 py-4">
<button
phx-click="change_page"
phx-value-page={max(1, @page - 1)}
class={"btn btn-sm #{if @page == 1, do: "btn-disabled"}"}
disabled={@page == 1}
>
{gettext("Previous")}
</button>
<span class="text-sm">
{gettext("Page %{page} of %{total}", page: @page, total: @total_pages)}
</span>
<button
phx-click="change_page"
phx-value-page={min(@total_pages, @page + 1)}
class={"btn btn-sm #{if @page == @total_pages, do: "btn-disabled"}"}
disabled={@page == @total_pages}
>
{gettext("Next")}
</button>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>
</PhoenixKitWeb.Layouts.dashboard>