kaui 4.0.17 → 4.0.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98e5dfbab802d1505c3e5c5e85dcde9ee8c98724f35ad5a007acd2849f75eb6e
-  data.tar.gz: 5cdcd79cdc9a95951c09bed2b2cbda90f3fe750e59d2adb93e1b83196f0a91a9
+  metadata.gz: f667be5cb34e03c3d1b4da18ef422934d9794643606c998cf1ac84f2e6d99f60
+  data.tar.gz: e202ccb38314d766896d3b72235de05c2818b74b985cb8b2717ff4850ab0b4ae
 SHA512:
-  metadata.gz: fde50f9e9a89e44b0370a9c2b31713735fc3603accab084bede5bf03ca8586da3f12809be9cdf6a098d272ae02e5f7ee5a531d5cd056b5ed1820944f1fd72071
-  data.tar.gz: 4539ef5e1f52389fb34d1905e31fd58d3c4d9941dc491b0d79fe31db83c1b431fdb5268b6bbe47a652c1f15edb69d0d6e4012898a06f650dc5af516b1470c530
+  metadata.gz: 18c8742fd7498cab0431aa9758b7f7ebda0e225d7fba76c9dd8a1fa97bd52a8678812b3a6e0397e1d15fc8128e59f451ee455ac7ebdfe8cb13de888a86101501
+  data.tar.gz: ee27c185159e1b564e0a0d16322178ddf3fbbce4c78929a0dfd3747c4c198084f1269f3e7d261047b0a2589b5f08d70be3ab07f8d727dfcc969e372929f7395a

data/app/assets/javascripts/kaui/kaui_override.js

@@ -392,69 +392,12 @@ function isBlank(value) {
 //      data-id = content of the popover,object id; required
 //      title = title of the popover; not required
 //      id = (must be {{id}}-popover) used to close popover when the copy image is clicked; if present; if not present a timeout of 5s will apply; not required
+//
+// Deprecated: the underlying Bootstrap 4 popover('destroy') API was removed in
+// Bootstrap 5 and this implementation has been superseded by setObjectIdTooltip().
+// Kept as a thin shim so existing call sites continue to work.
 function setObjectIdPopover(){
-    $(".object-id-popover").each(function(idx, e){
-        $(this).popover('destroy');
-        $(this).off("shown.bs.popover");
-        $(this).data("index", idx);
-
-        $(this).popover({
-            html: true,
-            content: function() {
-                var template = '<div class="{{id}}-content" >' +
-                    '{{id}}&emsp;<i id="{{id}}-copy" class="fa fa-clipboard copy-icon" aria-hidden="true"></i> ' +
-                    '</div>';
-
-                var popover_html = Mustache.render( template , { id: $(this).data("id") });
-                return popover_html;
-            },
-            container: 'body',
-            trigger: 'hover',
-            delay: { "show": 100, "hide": 4000 }
-        });
-
-        $(this).on("show.bs.popover", function(e) {
-            var currentPopoverIndex = $(this).data('index');
-            $(".object-id-popover").each(function(idx, e){
-                var index = $(this).data('index');
-
-                if (currentPopoverIndex != index) {
-                    $(this).popover('hide');
-                }
-            });
-        });
-
-        $(this).on("shown.bs.popover", function(e) {
-            var objectId = $(this).data('id');
-            var copyIdImg = $("#" + objectId + "-copy");
-
-            copyIdImg.data("popover",$(this).attr("id"));
-            copyIdImg.click(function(e){
-                var id = ($(this).attr("id")).replace('-copy','');
-                navigator.clipboard.writeText(id);
-                ajaxInfoAlert("Id [" + id + "] was copied into the clipboard!", 4000);
-
-                if (!isBlank(popover)) {
-                    popover.popover('hide');
-                }
-
-            });
-
-        });
-
-    });
-
-    // close all object id popover on modal show
-    $(".modal").on('show.bs.modal',function(e){
-        $(".object-id-popover").each(function(idx, e) {
-            $(this).popover('destroy');
-        });
-    });
-
-    // check if object id must be restored
-    $(".modal").on('hide.bs.modal',function(e){
-        setObjectIdPopover();
-    });
+    setObjectIdTooltip();
 }
 
 // Custom tooltip function for object IDs

data/app/controllers/kaui/subscriptions_controller.rb

@@ -14,6 +14,7 @@ module Kaui
 
       @bundle, plans_details = lookup_bundle_and_plan_details(@subscription, @base_product_name)
       @plans = plans_details.map(&:plan)
+      @plan_phases = build_plan_phases_map(plans_details)
 
       return unless @plans.empty?
 
@@ -30,6 +31,7 @@ module Kaui
       _, plans_details = lookup_bundle_and_plan_details(@subscription)
       # Use a Set to deal with multiple pricelists
       @plans = Set.new.merge(plans_details.map(&:plan))
+      @plan_phases = build_plan_phases_map(plans_details)
     end
 
     def create
@@ -46,15 +48,7 @@ module Kaui
         @subscription.plan_name = plan_name
         requested_date = params[:type_change] == 'DATE' ? params[:requested_date].presence : nil
 
-        # price override?
-        override_fixed_price = begin
-          plan_details.phases.first.prices.blank?
-        rescue StandardError
-          false
-        end
-        override_recurring_price = !override_fixed_price
-        phase_type = @bundle.nil? ? plan_details.phases.first.type : @bundle.subscriptions.first.phase_type
-        overrides = price_overrides(phase_type, override_fixed_price, override_recurring_price)
+        overrides = price_overrides(plan_details)
         @subscription.price_overrides = overrides if overrides.present?
         @subscription.quantity = params[:quantity].to_i if params[:quantity].present? && params[:quantity].to_i.positive?
 
@@ -95,11 +89,9 @@ module Kaui
 
       input = { planName: plan_name }
 
-      # price override?
-      current_plan = subscription.prices.select { |price| price['phaseType'] == subscription.phase_type }
-      override_fixed_price = current_plan.last['recurringPrice'].nil?
-      override_recurring_price = !override_fixed_price
-      overrides = price_overrides(subscription.phase_type, override_fixed_price, override_recurring_price)
+      _, plans_details = lookup_bundle_and_plan_details(subscription)
+      plan_details = plans_details.find { |p| p.plan == plan_name }
+      overrides = plan_details ? price_overrides(plan_details) : nil
       input[:priceOverrides] = overrides if overrides.present?
 
       subscription.change_plan(input,
@@ -158,11 +150,113 @@ module Kaui
       redirect_to kaui_engine.account_bundles_path(input_subscription['account_id']), notice: 'Subscription BCD was successfully changed'
     end
 
+    def edit_quantity
+      @subscription = Kaui::Subscription.find_by_id(params.require(:id), 'NONE', options_for_klient)
+    end
+
+    def update_quantity
+      id = params.require(:id)
+      input_subscription = params.require(:subscription)
+
+      quantity_raw = input_subscription['quantity'].to_s.strip
+      quantity = Integer(quantity_raw, exception: false)
+      if quantity.nil? || quantity <= 0
+        flash.now[:error] = 'Quantity must be a positive integer'
+        @subscription = Kaui::Subscription.find_by_id(id, 'NONE', options_for_klient)
+        @subscription.quantity = quantity_raw
+        render :edit_quantity and return
+      end
+
+      subscription = Kaui::Subscription.new
+      subscription.subscription_id = id
+      subscription.quantity = quantity
+
+      effective_from_date = params['effective_from_date']
+
+      subscription.update_quantity(current_user.kb_username, params[:reason], params[:comment], effective_from_date, nil, options_for_klient)
+      redirect_to kaui_engine.account_bundles_path(input_subscription['account_id']), notice: 'Subscription quantity was successfully changed'
+    rescue ActionController::ParameterMissing
+      redirect_to kaui_engine.edit_quantity_path(params[:id]), flash: { error: 'Required parameter missing: subscription' }
+    end
+
+    def record_usage
+      @subscription = Kaui::Subscription.find_by_id(params.require(:id), 'NONE', options_for_klient)
+      @unit_types = fetch_unit_types_from_subscription(@subscription)
+    end
+
+    def create_usage
+      subscription_id = params.require(:id)
+      unit_type = params[:unit_type].to_s.strip
+      amount_raw = params[:amount].to_s.strip
+      record_date = params[:record_date].to_s.strip
+
+      # Input validation
+      errors = []
+      errors << 'Unit type is required' if unit_type.blank?
+      errors << 'Amount is required' if amount_raw.blank?
+      amount = Integer(amount_raw, exception: false)
+      errors << 'Amount must be a positive integer' if amount.nil? || amount <= 0
+      errors << 'Date/time of usage is required' if record_date.blank?
+      parsed_date = parse_usage_date(record_date) if record_date.present?
+      errors << 'Date/time of usage must be a valid date or datetime' if record_date.present? && parsed_date.nil?
+
+      if errors.any?
+        flash.now[:error] = errors.join('. ')
+        @subscription = Kaui::Subscription.find_by_id(subscription_id, 'NONE', options_for_klient)
+        @unit_types = fetch_unit_types_from_subscription(@subscription)
+        @unit_type = unit_type
+        @amount = amount_raw
+        @record_date = record_date
+        @tracking_id = params[:tracking_id]
+        render :record_usage and return
+      end
+
+      begin
+        usage_record = KillBillClient::Model::UsageRecordAttributes.new
+        usage_record.record_date = parsed_date.utc.iso8601
+        usage_record.amount = amount
+
+        unit_usage_record = KillBillClient::Model::UnitUsageRecordAttributes.new
+        unit_usage_record.unit_type = unit_type
+        unit_usage_record.usage_records = [usage_record]
+
+        usage = Kaui::Usage.new
+        usage.subscription_id = subscription_id
+        usage.tracking_id = params[:tracking_id].presence
+        usage.unit_usage_records = [unit_usage_record]
+
+        usage.create(current_user.kb_username, nil, nil, options_for_klient)
+
+        subscription = Kaui::Subscription.find_by_id(subscription_id, 'NONE', options_for_klient)
+        redirect_to kaui_engine.account_bundles_path(subscription.account_id), notice: 'Usage was successfully recorded'
+      rescue StandardError => e
+        Rails.logger.error("Failed to record usage for subscription #{subscription_id}: #{e.class}: #{e.message}")
+        Rails.logger.error(e.backtrace.join("\n")) if e.backtrace
+        flash.now[:error] = "Error while recording usage: #{as_string(e)}"
+        @subscription = Kaui::Subscription.find_by_id(subscription_id, 'NONE', options_for_klient)
+        @unit_types = fetch_unit_types_from_subscription(@subscription)
+        @unit_type = unit_type
+        @amount = amount_raw
+        @record_date = record_date
+        @tracking_id = params[:tracking_id]
+        render :record_usage
+      end
+    end
+
     def restful_show
       subscription = Kaui::Subscription.find_by_id(params.require(:id), 'NONE', options_for_klient)
       redirect_to kaui_engine.account_bundles_path(subscription.account_id)
     end
 
+    def show_json
+      raw_body = Kaui::Subscription.find_raw_by_id(params.require(:id), 'NONE', options_for_klient)
+      render body: raw_body, content_type: 'application/json'
+    rescue KillBillClient::API::ResponseError => e
+      render body: e.response.body, content_type: 'application/json', status: e.code
+    rescue StandardError => e
+      render json: { error: e.message }, status: :internal_server_error
+    end
+
     def validate_bundle_external_key
       json_response do
         external_key = params.require(:external_key)
@@ -254,19 +348,119 @@ module Kaui
       plans
     end
 
-    def price_overrides(phase_type, override_fixed_price, override_recurring_price)
-      return nil if params[:price_override].blank? || params[:price_override].to_i.negative?
+    def price_overrides(plan_details)
+      raw = params[:price_overrides]
+      return nil if raw.blank?
+
+      entries = raw.respond_to?(:values) ? raw.values : Array(raw)
+      phase_meta = (plan_details.phases || []).index_by(&:type)
+
+      overrides = entries.filter_map do |entry|
+        entry = entry.to_unsafe_h if entry.respond_to?(:to_unsafe_h)
+        entry = entry.with_indifferent_access if entry.respond_to?(:with_indifferent_access)
+
+        price_str = entry[:price].to_s.strip
+        phase_type = entry[:phase_type].to_s.strip
+
+        price = BigDecimal(price_str, exception: false)
+
+        next if price.nil? || phase_type.blank? || price.negative?
+
+        phase = phase_meta[phase_type]
+        next if phase.nil?
+
+        override = KillBillClient::Model::PhasePriceAttributes.new
+        override.phase_type = phase_type
+        if phase_uses_fixed_price?(phase)
+          override.fixed_price = price.to_s('F')
+        else
+          override.recurring_price = price.to_s('F')
+        end
+        override
+      end
+
+      overrides.presence
+    end
+
+    def build_plan_phases_map(plans_details)
+      (plans_details || []).to_h do |pd|
+        phases = (pd.phases || []).map do |ph|
+          fixed = phase_uses_fixed_price?(ph)
+          prices = ph.prices || []
+          price_label = if fixed
+                          '$0.00'
+                        elsif prices.any?
+                          format('$%.2f', prices.first.value.to_f)
+                        else
+                          ''
+                        end
+          { type: ph.type, fixed: fixed, priceLabel: price_label }
+        end
+        [pd.plan, phases]
+      end
+    end
 
-      price_override = params[:price_override]
-      overrides = []
-      override = KillBillClient::Model::PhasePriceAttributes.new
-      override.phase_type = phase_type
-      override.fixed_price = price_override if override_fixed_price
-      override.recurring_price = price_override if override_recurring_price
+    def phase_uses_fixed_price?(phase)
+      (phase.prices || []).empty?
+    end
+
+    def fetch_unit_types_from_subscription(subscription)
+      unit_types = []
+      (subscription.prices || []).each do |phase_price|
+        usage_prices = if phase_price.is_a?(Hash)
+                         phase_price['usagePrices'] || phase_price[:usagePrices] || []
+                       elsif phase_price.respond_to?(:usage_prices)
+                         phase_price.usage_prices || []
+                       else
+                         []
+                       end
+        (usage_prices || []).each do |usage_price|
+          tier_prices = if usage_price.is_a?(Hash)
+                          usage_price['tierPrices'] || usage_price[:tierPrices] || []
+                        elsif usage_price.respond_to?(:tier_prices)
+                          usage_price.tier_prices || []
+                        else
+                          []
+                        end
+          (tier_prices || []).each do |tier_price|
+            block_prices = if tier_price.is_a?(Hash)
+                             tier_price['blockPrices'] || tier_price[:blockPrices] || []
+                           elsif tier_price.respond_to?(:block_prices)
+                             tier_price.block_prices || []
+                           else
+                             []
+                           end
+            (block_prices || []).each do |block_price|
+              unit_name = if block_price.is_a?(Hash)
+                            block_price['unitName'] || block_price[:unitName] || block_price['unit_name']
+                          elsif block_price.respond_to?(:unit_name)
+                            block_price.unit_name
+                          end
+              unit_types << unit_name if unit_name.present?
+            end
+          end
+        end
+      end
+      unit_types.uniq
+    rescue StandardError => e
+      Rails.logger.warn("Failed to extract unit types from subscription #{subscription&.subscription_id}: #{e.class}: #{e.message}")
+      []
+    end
 
-      overrides << override
+    def parse_usage_date(str)
+      str = str.to_s.strip
+      return nil if str.empty?
 
-      overrides
+      if str.match?(/^\d{4}-\d{2}-\d{2}$/)
+        year, month, day = str.split('-').map(&:to_i)
+        Time.utc(year, month, day)
+      elsif str.match?(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+        Time.iso8601("#{str}:00Z")
+      else
+        Time.iso8601(str)
+      end
+    rescue ArgumentError
+      nil
     end
   end
 end

data/app/helpers/kaui/subscription_helper.rb

@@ -189,6 +189,34 @@ module Kaui
       sub.present? and sub.billing_end_date.present?
     end
 
+    def subscription_has_usage?(sub, catalog = nil)
+      return false if sub.blank?
+
+      # First try the subscription's resolved per-phase prices
+      # (populated by GET /subscriptions/{id} but not by the bundles listing endpoint).
+      (sub.prices || []).each do |phase_price|
+        usage_prices = if phase_price.is_a?(Hash)
+                         phase_price['usagePrices'] || phase_price[:usagePrices] ||
+                           phase_price['usage_prices'] || phase_price[:usage_prices]
+                       elsif phase_price.respond_to?(:usage_prices)
+                         phase_price.usage_prices
+                       end
+        return true if usage_prices.present?
+      end
+
+      # Fall back to the catalog plan definition
+      return false if catalog.blank? || sub.plan_name.blank?
+
+      product = catalog.products&.find { |p| p.name == sub.product_name }
+      plan = product&.plans&.find { |p| p.name == sub.plan_name }
+      return false if plan.nil?
+
+      (plan.phases || []).any? do |phase|
+        usages = phase.respond_to?(:usages) ? phase.usages : nil
+        usages.present?
+      end
+    end
+
     def paging_button_class(num, current_page)
       num == current_page ? 'btn btn-primary' : 'btn btn-custom'
     end

data/app/models/kaui/usage.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Kaui
+  class Usage < KillBillClient::Model::UsageRecord
+  end
+end

data/app/views/kaui/bundles/index.html.erb

@@ -61,9 +61,9 @@
           <% end %>
 
           
-          <% if @bundles.empty? %>
+          <% if @bundles.empty? && @search_query.present? %>
             <div class="custom-alert custom-alert-info mt-3">
-              <span>No bundles found<%= @search_query.present? ? " for the given search query." : "." %></span>
+              <span>No bundles found for the given search query.</span>
             </div>
           <% end %>
 

data/app/views/kaui/components/menu_dropdown/_menu_dropdown.html.erb

@@ -17,10 +17,11 @@
 
   <ul class="dropdown-menu header-menu shadow border-0 rounded-3"
       id="<%= dropdown_id %>_menu"
+      aria-labelledby="<%= dropdown_id %>_button"
       style="min-width: 6.25rem; display: none;">
     <% menu_items&.each do |item| %>
       <li>
-        <%= link_to item[:path], class: "dropdown-item d-flex align-items-center gap-2" do %>
+        <%= link_to item[:path], class: "dropdown-item d-flex align-items-center gap-2", data: (item[:data] || {}), method: item[:method] do %>
           <%= image_tag(item[:icon], alt: "#{item[:label]} Icon", size: "16x16") if item[:icon].present? %>
           <span class="text-black-700 fs-6 text-normal" style="font-weight: 500; font-size: 0.875rem !important; line-height: 1.25rem;"><%= item[:label] %></span>
         <% end %>
@@ -31,28 +32,21 @@
 
 <%= javascript_tag do %>
   document.addEventListener('DOMContentLoaded', function () {
-    const button = document.getElementById('<%= dropdown_id %>_button');
-    const menu = document.getElementById('<%= dropdown_id %>_menu');
-    const wrapper = document.getElementById('<%= dropdown_id %>_wrapper');
+    var button = document.getElementById('<%= dropdown_id %>_button');
+    var menu = document.getElementById('<%= dropdown_id %>_menu');
+    var wrapper = document.getElementById('<%= dropdown_id %>_wrapper');
 
     button.addEventListener('click', function (e) {
       e.stopPropagation();
-      const isShown = menu.style.display === 'block';
-
-      // Close all other open dropdowns first (including other dots menus)
-      document.querySelectorAll('.dropdown-menu').forEach(function (m) {
-        if (m !== menu) {
-          m.style.display = 'none';
-        }
-      });
-
-      // Toggle this one
+      var isShown = menu.style.display === 'block';
       menu.style.display = isShown ? 'none' : 'block';
+      button.setAttribute('aria-expanded', !isShown);
     });
 
     document.addEventListener('click', function (e) {
-      if (!wrapper.contains(e.target)) {
+      if (!wrapper.contains(e.target) && menu.style.display === 'block') {
         menu.style.display = 'none';
+        button.setAttribute('aria-expanded', 'false');
       }
     });
   });

data/app/views/kaui/invoices/_multi_functions_bar.html.erb

@@ -45,10 +45,7 @@
       type: "button",
       html_class: "kaui-button custom-hover",
       html_options: {
-        id: "dropdownMenu1",
-        data: {
-          bs_toggle: "dropdown"
-        }
+        id: "dropdownMenu1"
       }
     } %>
     <ul class="dropdown-menu" id="column-visibility" aria-labelledby="dropdownMenu1">
@@ -213,13 +210,15 @@
 
 <%= javascript_tag do %>
 $(document).ready(function() {
-  // Initialize Bootstrap dropdown
-  var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
-  var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
-    return new bootstrap.Dropdown(dropdownToggleEl);
+  // Toggle Edit Columns dropdown
+  $('#dropdownMenu1').on('click', function(e) {
+    e.stopPropagation();
+    var $menu = $('#column-visibility');
+    $menu.toggleClass('show');
+    $(this).attr('aria-expanded', $menu.hasClass('show'));
   });
 
-  $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
+  $('#column-visibility').on('click', 'input[type="checkbox"], label', function(event) {
     event.stopPropagation();
   });
 

data/app/views/kaui/payments/_multi_functions_bar.html.erb

@@ -45,10 +45,7 @@
       type: "button",
       html_class: "kaui-button custom-hover",
       html_options: {
-        id: "dropdownMenu1",
-        data: {
-          bs_toggle: "dropdown"
-        }
+        id: "dropdownMenu1"
       }
     } %>
     <ul class="dropdown-menu" id="column-visibility" aria-labelledby="dropdownMenu1">
@@ -213,13 +210,15 @@
 
 <%= javascript_tag do %>
 $(document).ready(function() {
-  // Initialize Bootstrap dropdown
-  var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
-  var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
-    return new bootstrap.Dropdown(dropdownToggleEl);
+  // Toggle Edit Columns dropdown
+  $('#dropdownMenu1').on('click', function(e) {
+    e.stopPropagation();
+    var $menu = $('#column-visibility');
+    $menu.toggleClass('show');
+    $(this).attr('aria-expanded', $menu.hasClass('show'));
   });
 
-  $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
+  $('#column-visibility').on('click', 'input[type="checkbox"], label', function(event) {
     event.stopPropagation();
   });
 

data/app/views/kaui/subscriptions/_edit_form.html.erb

@@ -7,9 +7,49 @@
     </div>
 
     <div class="form-group d-flex pb-3 border-bottom mb-3">
-      <%= label_tag :price_override, 'Price Override', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= number_field_tag :price_override, nil, min: 0, :step => :any, :class => 'form-control' %>
+      <div class="col-sm-3 control-label" style="padding-top: 2px;">
+        <div id="toggle_phase_overrides" style="cursor: pointer; user-select: none;">
+          <span id="toggle_phase_overrides_caret">&#9662;</span>
+          <strong>Phase Overrides</strong>
+        </div>
+      </div>
+      <div class="col-sm-9" id="phase_overrides_section">
+        <p class="text-muted mb-2" style="font-size: 13px;">Override prices for specific phases. All other phases will use catalog pricing.</p>
+        <div id="phase_overrides_headers" class="d-flex mb-1 gap-2" style="display: none;">
+          <div style="flex: 1; padding-left: 2px;"><small><strong>Phase</strong></small></div>
+          <div style="flex: 1; padding-left: 2px;">
+            <small><strong>Override Price</strong></small>
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 3px;" title="Leave blank to use catalog pricing">
+              <circle cx="8" cy="8" r="7" stroke="#A4A7AE" stroke-width="1.25"/>
+              <path d="M8 7v5M8 5.5v-.5" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <div style="width: 40px;"></div>
+        </div>
+        <div id="phase_overrides_rows"></div>
+        <button type="button" id="add_phase_override" class="btn w-100 mt-2 d-flex align-items-center justify-content-center gap-1"
+          style="border: 1px dashed #d0d5dd; background: white; color: #2563eb; font-size: 14px;">
+          <span style="font-size: 16px; line-height: 1;">+</span> Add another phase
+        </button>
+        <script type="application/json" id="plan_phases_data"><%= raw json_escape((@plan_phases || {}).to_json) %></script>
+        <style>.phase-override-remove:hover svg path { stroke: #D92D20; }</style>
+        <template id="phase_override_row_template">
+          <div class="phase-override-row d-flex align-items-center mb-2 gap-2">
+            <select name="price_overrides[][phase_type]" class="form-control phase-override-type" style="flex: 1;"></select>
+            <div class="input-group phase-override-price-group" style="flex: 1;">
+              <span class="input-group-text">$</span>
+              <input type="number" name="price_overrides[][price]" step="any" min="0" placeholder="0.00" class="form-control phase-override-price">
+            </div>
+            <button type="button" class="btn btn-outline-secondary phase-override-remove" style="padding: 6px 10px; flex-shrink: 0;" aria-label="Remove">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13 3.66699L12.4093 13.4143C12.3666 14.1181 11.7834 14.667 11.0783 14.667H4.92164C4.21659 14.667 3.6334 14.1181 3.59075 13.4143L3 3.66699" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 3.66634H5.33333M5.33333 3.66634L6.16017 1.73706C6.26522 1.49194 6.50625 1.33301 6.77293 1.33301H9.22707C9.49373 1.33301 9.7348 1.49194 9.8398 1.73706L10.6667 3.66634M5.33333 3.66634H10.6667M14 3.66634H10.6667" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M6.33325 11V7" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.66675 11V7" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </template>
       </div>
     </div>
     <div class="form-group d-flex pb-3" id="radio_group">
@@ -106,5 +146,99 @@ $(document).ready(function() {
     $( "input[type=radio]").on("click", function() {
         onTypeChange();
     });
+    initPhaseOverrides();
 });
+
+function initPhaseOverrides() {
+    var planPhases = {};
+    try { planPhases = JSON.parse($('#plan_phases_data').text() || '{}'); } catch (e) { planPhases = {}; }
+
+    var $section = $('#phase_overrides_section');
+    var $rows = $('#phase_overrides_rows');
+    var $addBtn = $('#add_phase_override');
+    var $headers = $('#phase_overrides_headers');
+    var $template = $('#phase_override_row_template');
+    var $planSelect = $('select[name="plan_name"]');
+
+    function currentPhases() {
+        return planPhases[$planSelect.val()] || [];
+    }
+
+    function phaseLabel(p) {
+        var title = p.type.charAt(0) + p.type.slice(1).toLowerCase();
+        return p.priceLabel ? title + ' (' + p.priceLabel + ')' : title;
+    }
+
+    function selectedTypes($exceptRow) {
+        return $rows.find('.phase-override-row').filter(function() {
+            return !$exceptRow || this !== $exceptRow[0];
+        }).map(function() { return $(this).find('.phase-override-type').val(); }).get();
+    }
+
+    function refreshAddBtn() {
+        var phases = currentPhases();
+        var used = selectedTypes();
+        var hasMore = phases.length > 0 && used.length < phases.length;
+        $addBtn.toggle(hasMore);
+        $headers.css('display', $rows.find('.phase-override-row').length > 0 ? 'flex' : 'none');
+    }
+
+    function rebuildRowOptions() {
+        var phases = currentPhases();
+        $rows.find('.phase-override-row').each(function() {
+            var $row = $(this);
+            var $select = $row.find('.phase-override-type');
+            var current = $select.val();
+            var used = selectedTypes($row);
+            $select.empty();
+            phases.forEach(function(p) {
+                if (used.indexOf(p.type) === -1) {
+                    $select.append($('<option>', { value: p.type, text: phaseLabel(p) }));
+                }
+            });
+            var currentStillValid = phases.some(function(p) { return p.type === current; }) && used.indexOf(current) === -1;
+            if (currentStillValid) $select.val(current);
+        });
+        refreshAddBtn();
+    }
+
+    function addRow(preferredType) {
+        var phases = currentPhases();
+        if (phases.length === 0) return;
+        var used = selectedTypes();
+        var next = preferredType && phases.some(function(p) { return p.type === preferredType; }) && used.indexOf(preferredType) === -1
+            ? preferredType
+            : (phases.find(function(p) { return used.indexOf(p.type) === -1; }) || {}).type;
+        if (!next) return;
+
+        var $row = $($template.html());
+        $rows.append($row);
+        rebuildRowOptions();
+        $row.find('.phase-override-type').val(next);
+        rebuildRowOptions();
+    }
+
+    function resetRows() {
+        $rows.empty();
+        var phases = currentPhases();
+        if (phases.length > 0) addRow(phases[0].type);
+        refreshAddBtn();
+    }
+
+    $('#toggle_phase_overrides').on('click', function() {
+        $section.toggle();
+        $('#toggle_phase_overrides_caret').html($section.is(':visible') ? '&#9662;' : '&#9656;');
+    });
+
+    $addBtn.on('click', function() { addRow(); });
+
+    $rows.on('change', '.phase-override-type', rebuildRowOptions);
+    $rows.on('click', '.phase-override-remove', function() {
+        $(this).closest('.phase-override-row').remove();
+        refreshAddBtn();
+    });
+
+    $planSelect.on('change', resetRows);
+    resetRows();
+}
 <% end %>

data/app/views/kaui/subscriptions/_form.html.erb

@@ -35,9 +35,49 @@
       </div>
     </div>
     <div class="form-group d-flex pb-3">
-      <%= label_tag :price_override, 'Price Override', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= number_field_tag :price_override, nil, :step => :any, :min => 0, :class => 'form-control' %>
+      <div class="col-sm-3 control-label" style="padding-top: 2px;">
+        <div id="toggle_phase_overrides" style="cursor: pointer; user-select: none;">
+          <span id="toggle_phase_overrides_caret">&#9662;</span>
+          <strong>Phase Overrides</strong>
+        </div>
+      </div>
+      <div class="col-sm-9" id="phase_overrides_section">
+        <p class="text-muted mb-2" style="font-size: 13px;">Override prices for specific phases. All other phases will use catalog pricing.</p>
+        <div id="phase_overrides_headers" class="d-flex mb-1 gap-2" style="display: none;">
+          <div style="flex: 1; padding-left: 2px;"><small><strong>Phase</strong></small></div>
+          <div style="flex: 1; padding-left: 2px;">
+            <small><strong>Override Price</strong></small>
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 3px;" title="Leave blank to use catalog pricing">
+              <circle cx="8" cy="8" r="7" stroke="#A4A7AE" stroke-width="1.25"/>
+              <path d="M8 7v5M8 5.5v-.5" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <div style="width: 40px;"></div>
+        </div>
+        <div id="phase_overrides_rows"></div>
+        <button type="button" id="add_phase_override" class="btn w-100 mt-2 d-flex align-items-center justify-content-center gap-1"
+          style="border: 1px dashed #d0d5dd; background: white; color: #2563eb; font-size: 14px;">
+          <span style="font-size: 16px; line-height: 1;">+</span> Add another phase
+        </button>
+        <script type="application/json" id="plan_phases_data"><%= raw json_escape((@plan_phases || {}).to_json) %></script>
+        <style>.phase-override-remove:hover svg path { stroke: #D92D20; }</style>
+        <template id="phase_override_row_template">
+          <div class="phase-override-row d-flex align-items-center mb-2 gap-2">
+            <select name="price_overrides[][phase_type]" class="form-control phase-override-type" style="flex: 1;"></select>
+            <div class="input-group phase-override-price-group" style="flex: 1;">
+              <span class="input-group-text">$</span>
+              <input type="number" name="price_overrides[][price]" step="any" min="0" placeholder="0.00" class="form-control phase-override-price">
+            </div>
+            <button type="button" class="btn btn-outline-secondary phase-override-remove" style="padding: 6px 10px; flex-shrink: 0;" aria-label="Remove">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13 3.66699L12.4093 13.4143C12.3666 14.1181 11.7834 14.667 11.0783 14.667H4.92164C4.21659 14.667 3.6334 14.1181 3.59075 13.4143L3 3.66699" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 3.66634H5.33333M5.33333 3.66634L6.16017 1.73706C6.26522 1.49194 6.50625 1.33301 6.77293 1.33301H9.22707C9.49373 1.33301 9.7348 1.49194 9.8398 1.73706L10.6667 3.66634M5.33333 3.66634H10.6667M14 3.66634H10.6667" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M6.33325 11V7" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.66675 11V7" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </template>
       </div>
     </div>
     <div class="form-group d-flex pb-3 border-bottom mb-3">
@@ -123,5 +163,99 @@ $(document).ready(function() {
     $( "input[type=radio]").on("click", function() {
         onTypeChange();
     });
+    initPhaseOverrides();
 });
+
+function initPhaseOverrides() {
+    var planPhases = {};
+    try { planPhases = JSON.parse($('#plan_phases_data').text() || '{}'); } catch (e) { planPhases = {}; }
+
+    var $section = $('#phase_overrides_section');
+    var $rows = $('#phase_overrides_rows');
+    var $addBtn = $('#add_phase_override');
+    var $headers = $('#phase_overrides_headers');
+    var $template = $('#phase_override_row_template');
+    var $planSelect = $('select[name="plan_name"]');
+
+    function currentPhases() {
+        return planPhases[$planSelect.val()] || [];
+    }
+
+    function phaseLabel(p) {
+        var title = p.type.charAt(0) + p.type.slice(1).toLowerCase();
+        return p.priceLabel ? title + ' (' + p.priceLabel + ')' : title;
+    }
+
+    function selectedTypes($exceptRow) {
+        return $rows.find('.phase-override-row').filter(function() {
+            return !$exceptRow || this !== $exceptRow[0];
+        }).map(function() { return $(this).find('.phase-override-type').val(); }).get();
+    }
+
+    function refreshAddBtn() {
+        var phases = currentPhases();
+        var used = selectedTypes();
+        var hasMore = phases.length > 0 && used.length < phases.length;
+        $addBtn.toggle(hasMore);
+        $headers.css('display', $rows.find('.phase-override-row').length > 0 ? 'flex' : 'none');
+    }
+
+    function rebuildRowOptions() {
+        var phases = currentPhases();
+        $rows.find('.phase-override-row').each(function() {
+            var $row = $(this);
+            var $select = $row.find('.phase-override-type');
+            var current = $select.val();
+            var used = selectedTypes($row);
+            $select.empty();
+            phases.forEach(function(p) {
+                if (used.indexOf(p.type) === -1) {
+                    $select.append($('<option>', { value: p.type, text: phaseLabel(p) }));
+                }
+            });
+            var currentStillValid = phases.some(function(p) { return p.type === current; }) && used.indexOf(current) === -1;
+            if (currentStillValid) $select.val(current);
+        });
+        refreshAddBtn();
+    }
+
+    function addRow(preferredType) {
+        var phases = currentPhases();
+        if (phases.length === 0) return;
+        var used = selectedTypes();
+        var next = preferredType && phases.some(function(p) { return p.type === preferredType; }) && used.indexOf(preferredType) === -1
+            ? preferredType
+            : (phases.find(function(p) { return used.indexOf(p.type) === -1; }) || {}).type;
+        if (!next) return;
+
+        var $row = $($template.html());
+        $rows.append($row);
+        rebuildRowOptions();
+        $row.find('.phase-override-type').val(next);
+        rebuildRowOptions();
+    }
+
+    function resetRows() {
+        $rows.empty();
+        var phases = currentPhases();
+        if (phases.length > 0) addRow(phases[0].type);
+        refreshAddBtn();
+    }
+
+    $('#toggle_phase_overrides').on('click', function() {
+        $section.toggle();
+        $('#toggle_phase_overrides_caret').html($section.is(':visible') ? '&#9662;' : '&#9656;');
+    });
+
+    $addBtn.on('click', function() { addRow(); });
+
+    $rows.on('change', '.phase-override-type', rebuildRowOptions);
+    $rows.on('click', '.phase-override-remove', function() {
+        $(this).closest('.phase-override-row').remove();
+        refreshAddBtn();
+    });
+
+    $planSelect.on('change', resetRows);
+    resetRows();
+}
 <% end %>

data/app/views/kaui/subscriptions/_subscriptions_table.html.erb

@@ -111,8 +111,26 @@
           </span>
         </td>
         <td><span class="phase-type"><%= humanized_subscription_phase_type(sub).downcase %></span></td>
-        <td><%= humanized_subscription_start_date(sub, account) %></td>
-        <td><%= humanized_subscription_cancelled_information(sub, account) %></td>
+        <td>
+          <% if sub.start_date.present? %>
+            <span class="object-id-popover" data-id="<%= sub.start_date %>" data-title="Start Date (ISO)">
+              <%= humanized_subscription_start_date(sub, account) %>
+            </span>
+          <% end %>
+        </td>
+        <td>
+          <% if sub.cancelled_date.present? %>
+            <span class="object-id-popover" data-id="<%= sub.cancelled_date %>" data-title="Entitlement Date (ISO)">
+              <%= humanized_subscription_cancelled_date(sub, account) %>
+            </span>
+            <% if sub.billing_end_date.present? %>
+              <br>
+              <span class="object-id-popover" data-id="<%= sub.billing_end_date %>" data-title="Billing End Date (ISO)">
+                <%= humanized_subscription_billing_end_date(sub, account) %>
+              </span>
+            <% end %>
+          <% end %>
+        </td>
         <td><%= humanized_subscription_charged_through_date(sub, account) %></td>
         <td><%= sub.quantity || 1 %></td>
         <td class="text-center">
@@ -141,9 +159,9 @@
                 </div>
               <% end %>
 
-              <% if can?(:create, Kaui::Subscription) || can?(:pause_resume, Kaui::Subscription) || can?(:change_plan, Kaui::Subscription) || can?(:transfer, Kaui::Bundle) %>
-                <% menu_items = [] %>
+              <% menu_items = [] %>
 
+              <% if can?(:create, Kaui::Subscription) || can?(:pause_resume, Kaui::Subscription) || can?(:change_plan, Kaui::Subscription) || can?(:transfer, Kaui::Bundle) || (can?(:record, Kaui::Usage) && subscription_has_usage?(sub, catalog_for_subscription(sub, catalogs))) %>
                 <% if can?(:change_plan, Kaui::Subscription) %>
                   <% menu_items << {
                     label: "Change Plan",
@@ -183,6 +201,22 @@
                   } %>
                 <% end %>
 
+                <% if can?(:create, Kaui::Subscription) %>
+                  <% menu_items << {
+                    label: "Update Quantity",
+                    path: kaui_engine.edit_quantity_path(id: sub.subscription_id),
+                    icon: "kaui/subscription/change.svg"
+                  } %>
+                <% end %>
+
+                <% if can?(:record, Kaui::Usage) && subscription_has_usage?(sub, catalog_for_subscription(sub, catalogs)) %>
+                  <% menu_items << {
+                    label: "Record Usage",
+                    path: kaui_engine.record_usage_path(id: sub.subscription_id),
+                    icon: "kaui/subscription/change.svg"
+                  } %>
+                <% end %>
+
                 <% if can?(:transfer, Kaui::Bundle) && sub.product_category != 'ADD_ON' %>
                   <% menu_items << {
                     label: I18n.translate('transfer'),
@@ -190,7 +224,18 @@
                     icon: "kaui/subscription/transfer.svg"
                   } %>
                 <% end %>
+              <% end %>
+
+              <% if can?(:read, Kaui::Subscription) %>
+                <% menu_items << {
+                  label: "View JSON",
+                  path: "#view_subscription_json_modal",
+                  icon: "kaui/view-doc.svg",
+                  data: { bs_toggle: 'modal', id: sub.subscription_id }
+                } %>
+              <% end %>
 
+              <% if menu_items.any? %>
                 <%= render partial: "kaui/components/menu_dropdown/menu_dropdown", locals: {
                     variant: "btn-light",
                     label: "",
@@ -210,6 +255,7 @@
 </table>
 
 <%= render :partial => 'kaui/subscriptions/cancel_by_date_modal' %>
+<%= render :partial => 'kaui/subscriptions/view_json_modal' %>
 
 <%= javascript_tag do %>
   $(document).ready(function() {

data/app/views/kaui/subscriptions/_view_json_modal.html.erb

@@ -0,0 +1,100 @@
+<div class="modal fade view_subscription_json_modal" id="view_subscription_json_modal" tabindex="-1" role="dialog" aria-labelledby="viewSubscriptionJsonLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title d-flex align-items-center gap-3" id="viewSubscriptionJsonLabel">
+          <span class="icon-container">
+            <%= image_tag("kaui/view-doc.svg", width: 20, height: 20) %>
+          </span>
+          Subscription JSON
+        </h5>
+        <button type="button" class="close close-button custom-hover" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">
+            <%= image_tag("kaui/modal/close.svg", width: 20, height: 20) %>
+          </span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="view_subscription_json_loading">Loading...</div>
+        <div id="view_subscription_json_error" class="text-danger" style="display: none;"></div>
+        <pre id="view_subscription_json_content" style="display: none; max-height: 60vh; overflow: auto; background-color: #f8f9fa; padding: 1rem; border-radius: 0.375rem; font-size: 0.8125rem; line-height: 1.4;"></pre>
+      </div>
+      <div class="modal-footer">
+        <%= render "kaui/components/button/button", {
+          label: 'Close',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-button custom-hover",
+          html_options: {
+            data: {
+              bs_dismiss: "modal"
+            }
+          }
+        } %>
+        <%= render "kaui/components/button/button", {
+          label: 'Copy JSON',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-dropdown custom-hover",
+          html_options: {
+            id: "copy_subscription_json_btn"
+          }
+        } %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= javascript_tag do %>
+  $(document).ready(function() {
+    var $modal = $('#view_subscription_json_modal');
+    if (!$modal.length) return;
+
+    $modal.on('show.bs.modal', function (e) {
+      var subId = e.relatedTarget && e.relatedTarget.dataset ? e.relatedTarget.dataset['id'] : null;
+      var $loading = $('#view_subscription_json_loading');
+      var $error = $('#view_subscription_json_error');
+      var $content = $('#view_subscription_json_content');
+
+      $loading.show();
+      $error.hide().text('');
+      $content.hide().text('');
+
+      if (!subId) {
+        $loading.hide();
+        $error.text('Missing subscription id').show();
+        return;
+      }
+
+      $.ajax({
+        url: Routes.kaui_engine_show_subscription_json_path(subId),
+        type: 'GET',
+        dataType: 'json'
+      })
+      .done(function (data) {
+        $content.text(JSON.stringify(data, null, 2)).show();
+        $loading.hide();
+      })
+      .fail(function (xhr) {
+        $loading.hide();
+        var message = 'Failed to load subscription JSON';
+        if (xhr && xhr.responseText) {
+          message += ': ' + xhr.responseText;
+        }
+        $error.text(message).show();
+      });
+    });
+
+    $('#copy_subscription_json_btn').on('click', function () {
+      var text = $('#view_subscription_json_content').text();
+      if (!text) return;
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(function () {
+          if (typeof ajaxInfoAlert === 'function') {
+            ajaxInfoAlert('JSON copied to clipboard!', 3000);
+          }
+        });
+      }
+    });
+  });
+<% end %>

data/app/views/kaui/subscriptions/edit_quantity.erb

@@ -0,0 +1,59 @@
+<div class="register kaui-subscription-new">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-title border-bottom pb-3 mb-3">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M9.16675 11.6665H13.3334M6.66675 11.6665H6.67423M10.8334 14.9998H6.66675M13.3334 14.9998H13.3259" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Update Subscription Quantity
+            </h5>
+            <%= form_for @subscription, :as => :subscription, :url => update_quantity_path(@subscription.subscription_id), :html => {:method => :put, :class => 'form-horizontal'} do |f| %>
+                <%= f.hidden_field :account_id %>
+
+                <div class="form-group d-flex pb-3">
+                    <%= f.label :quantity, 'Quantity', :class => 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <%= f.number_field :quantity, { :min => 1, :required => true, :class => 'form-control'} %>
+                    </div>
+                </div>
+                <div class="form-group d-flex pb-3 border-bottom mb-3" id="form_effective_from_date">
+                    <%= label_tag :effective_from_date, 'Effective Date', :class => 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <div class="custom-date-input-wrapper kaui-button custom-hover">
+                            <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M14.9167 12.5V18.3333M17.8333 15.4167H12" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M14.0833 1.66675V5.00008M6.58325 1.66675V5.00008" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M17.8333 10.8333V4.99992C17.8333 4.07944 17.0871 3.33325 16.1666 3.33325H4.49992C3.57944 3.33325 2.83325 4.07944 2.83325 4.99992V16.6666C2.83325 17.5871 3.57944 18.3333 4.49992 18.3333H10.3333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M2.83325 8.33325H17.8333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            <input class="form-control" value="<%= Time.zone.today.strftime('%Y-%m-%d') %>" id="effective_from_date" name="effective_from_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group d-flex justify-content-end pb-3">
+                    <%= render "kaui/components/button/button", {
+                        label: 'Close',
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "button",
+                        html_class: "kaui-button custom-hover mx-2",
+                        html_options: {
+                        id: "closeButton",
+                        onclick: "window.history.back();"
+                        }
+                    } %>
+                    <%= render "kaui/components/button/button", {
+                        label: 'Save Subscription',
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "submit",
+                        html_class: "kaui-dropdown custom-hover"
+                    } %>
+                </div>
+        <% end %>
+        </div>
+    </div>
+</div>

data/app/views/kaui/subscriptions/record_usage.erb

@@ -0,0 +1,110 @@
+<div class="register kaui-subscription-new">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+            <h5 class="add-account-title border-bottom pb-3 mb-3">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M9.16675 11.6665H13.3334M6.66675 11.6665H6.67423M10.8334 14.9998H6.66675M13.3334 14.9998H13.3259" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Record Usage
+            </h5>
+
+            <p class="text-muted small mb-3">
+                Record usage for subscription
+                <strong><%= @subscription.plan_name %></strong>
+                (<code><%= @subscription.subscription_id %></code>).
+            </p>
+
+            <%= form_tag create_usage_path(@subscription.subscription_id), method: :post, id: 'record_usage_form', class: 'form-horizontal' do %>
+
+                <div class="form-group d-flex pb-3">
+                    <%= label_tag :unit_type, 'Unit Type', class: 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <% if @unit_types.length == 1 %>
+                            <%= text_field_tag :unit_type, @unit_types.first, readonly: true, required: true, class: 'form-control bg-light' %>
+                        <% elsif @unit_types.length > 1 %>
+                            <%= select_tag :unit_type, options_for_select(@unit_types.map { |u| [u, u] }, @unit_type.presence || @unit_types.first), required: true, class: 'form-select' %>
+                        <% else %>
+                            <%= text_field_tag :unit_type, @unit_type, required: true, maxlength: 255, class: 'form-control', placeholder: 'e.g. api-calls' %>
+                        <% end %>
+                    </div>
+                </div>
+
+                <div class="form-group d-flex pb-3">
+                    <%= label_tag :amount, 'Amount', class: 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <%= number_field_tag :amount, @amount, required: true, min: 1, step: 1, class: 'form-control', placeholder: 'Positive integer' %>
+                    </div>
+                </div>
+
+                <div class="form-group d-flex pb-3">
+                    <%= label_tag :record_date, 'Date/Time of Usage', class: 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <%= datetime_field_tag :record_date,
+                                               @record_date.presence || Time.now.utc.strftime('%Y-%m-%dT%H:%M'),
+                                               required: true,
+                                               class: 'form-control' %>
+                        <small class="form-text text-muted">Date and time treated as UTC</small>
+                    </div>
+                </div>
+
+                <div class="form-group d-flex pb-3">
+                    <%= label_tag :tracking_id, 'Tracking ID', class: 'col-sm-3 control-label' %>
+                    <div class="col-sm-9">
+                        <%= text_field_tag :tracking_id, @tracking_id, maxlength: 255, class: 'form-control', placeholder: 'Optional, used for idempotency' %>
+                    </div>
+                </div>
+
+                <div class="form-group d-flex justify-content-end pb-3">
+                    <%= render "kaui/components/button/button", {
+                        label: 'Close',
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "button",
+                        html_class: "kaui-button custom-hover mx-2",
+                        html_options: {
+                          id: "closeButton",
+                          onclick: "window.history.back();"
+                        }
+                    } %>
+                    <%= render "kaui/components/button/button", {
+                        label: 'Record Usage',
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "submit",
+                        html_class: "kaui-dropdown custom-hover"
+                    } %>
+                </div>
+            <% end %>
+        </div>
+    </div>
+</div>
+
+<%= javascript_tag do %>
+  document.addEventListener('DOMContentLoaded', function () {
+    var form = document.getElementById('record_usage_form');
+    if (!form) { return; }
+    form.addEventListener('submit', function (e) {
+      var errors = [];
+
+      var unitTypeEl = document.getElementById('unit_type');
+      var unitType = unitTypeEl ? (unitTypeEl.value || '').trim() : '';
+      if (unitType.length === 0) {
+        errors.push('Unit type is required.');
+      }
+
+      var amountStr = (document.getElementById('amount').value || '').trim();
+      var amount = parseInt(amountStr, 10);
+      if (amountStr.length === 0 || isNaN(amount) || amount <= 0 || String(amount) !== amountStr) {
+        errors.push('Amount must be a positive integer.');
+      }
+
+      if (errors.length > 0) {
+        e.preventDefault();
+        alert(errors.join('\n'));
+      }
+    });
+  });
+<% end %>

data/config/routes.rb

@@ -141,7 +141,12 @@ Kaui::Engine.routes.draw do
     post '/:id/tags' => 'subscriptions#update_tags', :as => 'update_subscriptions_tags'
     get '/:id/edit_bcd' => 'subscriptions#edit_bcd', :as => 'edit_bcd'
     put '/:id/update_bcd' => 'subscriptions#update_bcd', :as => 'update_bcd'
+    get '/:id/edit_quantity' => 'subscriptions#edit_quantity', :as => 'edit_quantity'
+    put '/:id/update_quantity' => 'subscriptions#update_quantity', :as => 'update_quantity'
+    get '/:id/record_usage' => 'subscriptions#record_usage', :as => 'record_usage'
+    post '/:id/record_usage' => 'subscriptions#create_usage', :as => 'create_usage'
     put '/:id/reinstate' => 'subscriptions#reinstate', :as => 'reinstate'
+    get '/:id/show_json' => 'subscriptions#show_json', :as => 'show_subscription_json'
     get '/validate_external_key' => 'subscriptions#validate_external_key', :as => 'subscriptions_validate_external_key'
     get '/validate_bundle_external_key' => 'subscriptions#validate_bundle_external_key', :as => 'subscriptions_validate_bundle_external_key'
   end

data/lib/kaui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Kaui
-  VERSION = '4.0.17'
+  VERSION = '4.0.19'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kaui
 version: !ruby/object:Gem::Version
-  version: 4.0.17
+  version: 4.0.19
 platform: ruby
 authors:
 - Kill Bill core team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-03 00:00:00.000000000 Z
+date: 2026-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -507,6 +507,7 @@ files:
 - app/models/kaui/tag_definition.rb
 - app/models/kaui/tenant.rb
 - app/models/kaui/transaction.rb
+- app/models/kaui/usage.rb
 - app/models/kaui/user.rb
 - app/models/kaui/user_role.rb
 - app/services/dependencies/kenui.rb
@@ -649,9 +650,12 @@ files:
 - app/views/kaui/subscriptions/_edit_form.html.erb
 - app/views/kaui/subscriptions/_form.html.erb
 - app/views/kaui/subscriptions/_subscriptions_table.html.erb
+- app/views/kaui/subscriptions/_view_json_modal.html.erb
 - app/views/kaui/subscriptions/edit.html.erb
 - app/views/kaui/subscriptions/edit_bcd.erb
+- app/views/kaui/subscriptions/edit_quantity.erb
 - app/views/kaui/subscriptions/new.html.erb
+- app/views/kaui/subscriptions/record_usage.erb
 - app/views/kaui/tag_definitions/_form.html.erb
 - app/views/kaui/tag_definitions/index.html.erb
 - app/views/kaui/tag_definitions/new.html.erb