| 1 | <% content_for :title, "Subscriptions" %> |
| 2 | |
| 3 | <div class="mb-4"> |
| 4 | <h1 class="text-xl font-semibold text-gray-100">Subscriptions <span class="text-gray-500 text-base font-normal">(<%= number_with_delimiter(@search.total) %>)</span></h1> |
| 5 | <p class="text-sm text-gray-500">Local mirror of Stripe subscription state. Money is settled in Stripe.</p> |
| 6 | </div> |
| 7 | |
| 8 | <% by_plan = @search.by_plan; by_status = @search.by_status %> |
| 9 | <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6"> |
| 10 | <%= render "admin/stat", label: "Estimated MRR", value: admin_usd(@search.estimated_mrr), sub: "active paid plans", accent: "text-brand-300" %> |
| 11 | <%= render "admin/stat", label: "Pro", value: number_with_delimiter(by_plan["pro"].to_i) %> |
| 12 | <%= render "admin/stat", label: "Team", value: number_with_delimiter(by_plan["team"].to_i) %> |
| 13 | <%= render "admin/stat", label: "Active", value: number_with_delimiter(by_status["active"].to_i), |
| 14 | sub: "#{by_status['trialing'].to_i} trialing · #{by_status['past_due'].to_i} past due" %> |
| 15 | </div> |
| 16 | |
| 17 | <div class="flex flex-wrap items-center gap-2 mb-4 text-sm"> |
| 18 | <span class="text-gray-500">Plan:</span> |
| 19 | <%= link_to "All", admin_subscriptions_path(status: params[:status].presence), |
| 20 | class: "px-2.5 py-1 rounded #{params[:plan].blank? ? 'bg-surface-600 text-gray-200' : 'text-gray-400 hover:text-gray-200'}" %> |
| 21 | <% %w[free pro team].each do |plan| %> |
| 22 | <%= link_to plan.capitalize, admin_subscriptions_path(plan: plan, status: params[:status].presence), |
| 23 | class: "px-2.5 py-1 rounded #{params[:plan] == plan ? 'bg-surface-600 text-gray-200' : 'text-gray-400 hover:text-gray-200'}" %> |
| 24 | <% end %> |
| 25 | <span class="text-gray-600 mx-1">·</span> |
| 26 | <span class="text-gray-500">Status:</span> |
| 27 | <%= link_to "All", admin_subscriptions_path(plan: params[:plan].presence), |
| 28 | class: "px-2.5 py-1 rounded #{params[:status].blank? ? 'bg-surface-600 text-gray-200' : 'text-gray-400 hover:text-gray-200'}" %> |
| 29 | <% %w[active trialing past_due canceled].each do |status| %> |
| 30 | <%= link_to status.tr("_", " ").capitalize, admin_subscriptions_path(status: status, plan: params[:plan].presence), |
| 31 | class: "px-2.5 py-1 rounded #{params[:status] == status ? 'bg-surface-600 text-gray-200' : 'text-gray-400 hover:text-gray-200'}" %> |
| 32 | <% end %> |
| 33 | </div> |
| 34 | |
| 35 | <div class="rounded-lg border border-surface-600 overflow-hidden"> |
| 36 | <table class="w-full text-sm"> |
| 37 | <thead class="bg-surface-800 text-gray-500 text-xs uppercase tracking-wide"> |
| 38 | <tr> |
| 39 | <th class="text-left font-medium px-4 py-2.5">Customer</th> |
| 40 | <th class="text-left font-medium px-4 py-2.5">Plan</th> |
| 41 | <th class="text-left font-medium px-4 py-2.5">Status</th> |
| 42 | <th class="text-left font-medium px-4 py-2.5 hidden md:table-cell">Renews</th> |
| 43 | <th class="text-left font-medium px-4 py-2.5 hidden lg:table-cell">Stripe customer</th> |
| 44 | </tr> |
| 45 | </thead> |
| 46 | <tbody class="divide-y divide-surface-600"> |
| 47 | <% @search.records.each do |sub| %> |
| 48 | <tr class="hover:bg-surface-800/50"> |
| 49 | <td class="px-4 py-2.5"> |
| 50 | <%= link_to admin_user_path(sub.user.username), class: "text-gray-200 hover:text-brand-300" do %> |
| 51 | <%= sub.user.username %> |
| 52 | <% end %> |
| 53 | <p class="text-xs text-gray-500"><%= sub.user.email %></p> |
| 54 | </td> |
| 55 | <td class="px-4 py-2.5"><%= admin_plan_badge(sub.plan) %></td> |
| 56 | <td class="px-4 py-2.5"><%= admin_status_badge(sub.status) %></td> |
| 57 | <td class="px-4 py-2.5 hidden md:table-cell text-gray-500"><%= sub.current_period_end&.strftime("%b %-d, %Y") || "—" %></td> |
| 58 | <td class="px-4 py-2.5 hidden lg:table-cell text-gray-600 font-mono text-xs"><%= sub.stripe_customer_id.presence || "—" %></td> |
| 59 | </tr> |
| 60 | <% end %> |
| 61 | <% if @search.records.empty? %> |
| 62 | <tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">No subscriptions match this filter.</td></tr> |
| 63 | <% end %> |
| 64 | </tbody> |
| 65 | </table> |
| 66 | </div> |
| 67 | |
| 68 | <%= render "admin/pagination", page: @search.page, has_next: @search.has_next?, total: @search.total, per_page: @search.per_page %> |