phoenix_kit

1.7.4

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

HexDocs

Current section

Files

Jump to

Readme 222 Versions 36 Dependencies Dependants Files Activity

phoenix_kit lib phoenix_kit_web live modules billing settings.html.heex

Raw

lib/phoenix_kit_web/live/modules/billing/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 Information --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">Company Information</h2>
          <p class="text-sm text-base-content/60">Shown on invoices and receipts</p>
          <form phx-submit="save_company" class="space-y-4 mt-4">
            <%!-- Company Name (required) --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Company Name <span class="text-error">*</span></span>
              </label>
              <input
                type="text"
                name="company_name"
                value={@company_name}
                class="input input-bordered"
                placeholder="Your Company Name"
                required
              />
            </div>

            <%!-- VAT Number (required) --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">VAT Number <span class="text-error">*</span></span>
              </label>
              <input
                type="text"
                name="company_vat"
                value={@company_vat}
                class="input input-bordered font-mono"
                placeholder="EE123456789"
                required
              />
            </div>

            <div class="divider">Address</div>

            <%!-- Street Address (required) --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Street Address <span class="text-error">*</span></span>
              </label>
              <input
                type="text"
                name="company_address_line1"
                value={@company_address_line1}
                class="input input-bordered"
                placeholder="123 Business Street"
                required
              />
            </div>

            <%!-- Address Line 2 (optional) --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Address Line 2</span>
              </label>
              <input
                type="text"
                name="company_address_line2"
                value={@company_address_line2}
                class="input input-bordered"
                placeholder="Suite, Floor, Building (optional)"
              />
            </div>

            <%!-- City + State row --%>
            <div class="grid grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">City <span class="text-error">*</span></span>
                </label>
                <input
                  type="text"
                  name="company_city"
                  value={@company_city}
                  class="input input-bordered"
                  placeholder="Tallinn"
                  required
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">State/Region</span>
                </label>
                <input
                  type="text"
                  name="company_state"
                  value={@company_state}
                  class="input input-bordered"
                  placeholder="(optional)"
                />
              </div>
            </div>

            <%!-- Postal Code + Country row --%>
            <div class="grid grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Postal Code</span>
                </label>
                <input
                  type="text"
                  name="company_postal_code"
                  value={@company_postal_code}
                  class="input input-bordered font-mono"
                  placeholder="10115"
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Country <span class="text-error">*</span></span>
                </label>
                <select
                  name="company_country"
                  class="select select-bordered"
                  phx-change="country_changed"
                  required
                >
                  <option value="">Select country...</option>
                  <%= for {name, code} <- @countries do %>
                    <option value={code} selected={@company_country == code}>
                      {name}
                    </option>
                  <% end %>
                </select>
              </div>
            </div>

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary btn-sm">Save Company Info</button>
            </div>
          </form>
        </div>
      </div>

      <%!-- Bank Details --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">Bank Details</h2>
          <p class="text-sm text-base-content/60">For bank transfer payments</p>
          <form phx-submit="save_bank" class="space-y-4 mt-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Bank Name</span>
              </label>
              <input
                type="text"
                name="bank_name"
                value={@bank_name}
                class="input input-bordered"
                placeholder="Bank Name"
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">IBAN</span>
              </label>
              <input
                type="text"
                name="bank_iban"
                value={@bank_iban}
                class="input input-bordered font-mono"
                placeholder="EE00 0000 0000 0000 0000"
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">SWIFT/BIC</span>
              </label>
              <input
                type="text"
                name="bank_swift"
                value={@bank_swift}
                class="input input-bordered font-mono"
                placeholder="XXXXEEHH"
              />
            </div>

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary btn-sm">Save Bank Details</button>
            </div>
          </form>
        </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>

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT