Packages
phoenix_kit
1.7.22
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/billing/web/settings.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title="{@project_title} Billing Settings"
current_path={@url_path}
project_title={@project_title}
>
<div class="container mx-auto px-4 py-6">
<%!-- Header --%>
<div class="flex items-center gap-4 mb-6">
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/billing")}
class="btn btn-ghost btn-sm"
>
<.icon name="hero-arrow-left" class="w-4 h-4" />
</.link>
<div>
<h1 class="text-3xl font-bold">Billing Settings</h1>
<p class="text-base-content/60 mt-1">Configure billing module options</p>
</div>
</div>
<%!-- Navigation Tabs --%>
<div class="tabs tabs-boxed bg-base-200 p-1 mb-6">
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing")}
class="tab tab-active"
>
<.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-2" /> General
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing/providers")}
class="tab"
>
<.icon name="hero-credit-card" class="w-4 h-4 mr-2" /> Payment Providers
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/billing/currencies")}
class="tab"
>
<.icon name="hero-currency-dollar" class="w-4 h-4 mr-2" /> Currencies
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/billing/plans")}
class="tab"
>
<.icon name="hero-clipboard-document-list" class="w-4 h-4 mr-2" /> Plans
</.link>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<%!-- Module Status --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Module Status</h2>
<div class="flex items-center justify-between mt-4">
<div>
<p class="font-medium">Billing Module</p>
<p class="text-sm text-base-content/60">Enable or disable billing functionality</p>
</div>
<label class="cursor-pointer">
<input
type="checkbox"
class="toggle toggle-success toggle-lg"
checked={@billing_enabled}
phx-click="toggle_billing"
/>
</label>
</div>
</div>
</div>
<%!-- General Settings --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">General Settings</h2>
<form phx-submit="save_general" class="space-y-4 mt-4">
<div class="form-control">
<label class="label">
<span class="label-text">Default Currency</span>
</label>
<select name="default_currency" class="select select-bordered">
<option value="EUR" selected={@default_currency == "EUR"}>EUR - Euro</option>
<option value="USD" selected={@default_currency == "USD"}>USD - US Dollar</option>
<option value="GBP" selected={@default_currency == "GBP"}>
GBP - British Pound
</option>
</select>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Order Prefix</span>
</label>
<input
type="text"
name="order_prefix"
value={@order_prefix}
class="input input-bordered input-sm"
placeholder="ORD"
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Invoice Prefix</span>
</label>
<input
type="text"
name="invoice_prefix"
value={@invoice_prefix}
class="input input-bordered input-sm"
placeholder="INV"
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Receipt Prefix</span>
</label>
<input
type="text"
name="receipt_prefix"
value={@receipt_prefix}
class="input input-bordered input-sm"
placeholder="RCP"
/>
</div>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Invoice Due Days</span>
</label>
<input
type="number"
name="invoice_due_days"
value={@invoice_due_days}
class="input input-bordered input-sm w-32"
min="1"
max="90"
/>
</div>
<div class="divider">Tax Settings</div>
<div class="grid grid-cols-2 gap-4 items-end">
<div class="form-control">
<label class="label cursor-pointer justify-start gap-3">
<input
type="checkbox"
name="tax_enabled"
value="true"
checked={@tax_enabled}
class="checkbox checkbox-primary checkbox-sm"
/>
<span class="label-text">Enable Tax</span>
</label>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Default Tax Rate (%)</span>
</label>
<input
type="number"
name="tax_rate"
value={@tax_rate}
class="input input-bordered input-sm"
min="0"
max="100"
step="0.01"
phx-change="tax_rate_changed"
/>
</div>
</div>
<%= if @suggested_tax_rate do %>
<div class="alert alert-info py-2 mt-2">
<div class="flex items-center gap-2">
<.icon name="hero-light-bulb" class="w-4 h-4" />
<span class="text-sm">
Suggested rate for selected country: <strong>{@suggested_tax_rate}%</strong>
</span>
<button
type="button"
class="btn btn-xs btn-primary"
phx-click="apply_suggested_tax"
>
Apply
</button>
</div>
</div>
<% end %>
<div class="card-actions justify-end mt-4">
<button type="submit" class="btn btn-primary btn-sm">Save General Settings</button>
</div>
</form>
</div>
</div>
<%!-- Company & Bank Information (Preview) --%>
<div class="card bg-base-100 shadow-xl lg:col-span-2">
<div class="card-body">
<div class="flex items-center justify-between">
<div>
<h2 class="card-title">Company & Bank Information</h2>
<p class="text-sm text-base-content/60">Shown on invoices and receipts</p>
</div>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/settings/organization")}
class="btn btn-primary btn-sm"
>
<.icon name="hero-pencil-square" class="w-4 h-4" /> Edit in Organization
</.link>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<%!-- Company Info Preview (same style as Legal Settings) --%>
<div>
<h3 class="font-semibold text-base-content/80 mb-3">Company</h3>
<%= if @company_info["name"] && @company_info["name"] != "" do %>
<div class="bg-base-200 rounded-lg p-4 space-y-3">
<div class="flex items-start gap-2">
<.icon
name="hero-building-office"
class="w-5 h-5 text-primary shrink-0 mt-0.5"
/>
<div>
<p class="font-semibold">{@company_info["name"]}</p>
<%= if @company_info["registration_number"] && @company_info["registration_number"] != "" do %>
<p class="text-xs text-base-content/60">
Reg. No: {@company_info["registration_number"]}
</p>
<% end %>
</div>
</div>
<%= if @company_info["address_line1"] && @company_info["address_line1"] != "" do %>
<div class="flex items-start gap-2">
<.icon name="hero-map-pin" class="w-5 h-5 text-primary shrink-0 mt-0.5" />
<div class="text-sm">
<p>{@company_info["address_line1"]}</p>
<%= if @company_info["address_line2"] && @company_info["address_line2"] != "" do %>
<p>{@company_info["address_line2"]}</p>
<% end %>
<p>
{@company_info["city"]}
<%= if @company_info["state"] && @company_info["state"] != "" do %>
, {@company_info["state"]}
<% end %>
{@company_info["postal_code"]}
</p>
<%= if @company_country_name != "" do %>
<p>{@company_country_name}</p>
<% end %>
</div>
</div>
<% end %>
<%= if @company_info["vat_number"] && @company_info["vat_number"] != "" do %>
<div class="flex items-start gap-2">
<.icon
name="hero-document-text"
class="w-5 h-5 text-primary shrink-0 mt-0.5"
/>
<div class="text-sm">
<span class="text-base-content/60">VAT:</span> {@company_info[
"vat_number"
]}
</div>
</div>
<% end %>
</div>
<% else %>
<div class="alert alert-warning">
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
<span>Company information not configured</span>
</div>
<% end %>
</div>
<%!-- Bank Details Preview --%>
<div>
<h3 class="font-semibold text-base-content/80 mb-3">Bank Details</h3>
<%= if @bank_details["bank_name"] && @bank_details["bank_name"] != "" do %>
<div class="bg-base-200 rounded-lg p-4 space-y-3">
<div class="flex items-start gap-2">
<.icon
name="hero-building-library"
class="w-5 h-5 text-primary shrink-0 mt-0.5"
/>
<p class="font-semibold">{@bank_details["bank_name"]}</p>
</div>
<%= if @bank_details["iban"] && @bank_details["iban"] != "" do %>
<div class="flex items-start gap-2">
<.icon
name="hero-credit-card"
class="w-5 h-5 text-primary shrink-0 mt-0.5"
/>
<div class="text-sm">
<span class="text-base-content/60">IBAN:</span>
<span class="font-mono">{@bank_details["iban"]}</span>
</div>
</div>
<% end %>
<%= if @bank_details["swift"] && @bank_details["swift"] != "" do %>
<div class="flex items-start gap-2">
<.icon
name="hero-globe-americas"
class="w-5 h-5 text-primary shrink-0 mt-0.5"
/>
<div class="text-sm">
<span class="text-base-content/60">SWIFT:</span>
<span class="font-mono">{@bank_details["swift"]}</span>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="alert alert-info">
<.icon name="hero-information-circle" class="w-5 h-5" />
<span>Bank details not configured (optional)</span>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<%!-- Quick Links --%>
<div class="card bg-base-100 shadow-xl mt-6">
<div class="card-body">
<h2 class="card-title">Related Settings</h2>
<div class="flex flex-wrap gap-4 mt-4">
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing/providers")}
class="btn btn-primary"
>
<.icon name="hero-credit-card" class="w-5 h-5" /> Payment Providers
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/billing/currencies")}
class="btn btn-outline"
>
<.icon name="hero-currency-dollar" class="w-5 h-5" /> Manage Currencies
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/billing/plans")}
class="btn btn-outline"
>
<.icon name="hero-clipboard-document-list" class="w-5 h-5" /> Subscription Plans
</.link>
<.link navigate={PhoenixKit.Utils.Routes.path("/admin/modules")} class="btn btn-outline">
<.icon name="hero-squares-2x2" class="w-5 h-5" /> All Modules
</.link>
</div>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>