rsb-entitlements 0.9.1

data/app/views/rsb/entitlements/admin/plans/_form.html.erb

@@ -0,0 +1,202 @@
+<%= form_with model: plan, url: url, method: method, local: true, scope: :plan do |f| %>
+  <% if plan.errors.any? %>
+    <div class="mb-4 p-4 bg-rsb-danger-bg border border-rsb-danger rounded-rsb">
+      <strong class="text-rsb-danger-text"><%= pluralize(plan.errors.count, "error") %> prohibited this plan from being saved:</strong>
+      <ul class="mt-2 pl-5 list-disc text-rsb-danger-text text-sm">
+        <% plan.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <%# Basic Fields %>
+  <div class="mb-4">
+    <%= f.label :name, class: "block text-sm font-medium mb-1" %>
+    <%= f.text_field :name, required: true, placeholder: "Pro Plan", id: "plan_name_field",
+        class: "w-full px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-card focus:outline-none focus:ring-2 focus:ring-rsb-primary" %>
+  </div>
+
+  <div class="mb-4">
+    <%= f.label :slug, class: "block text-sm font-medium mb-1" %>
+    <%= f.text_field :slug, required: true, placeholder: "pro-plan", id: "plan_slug_field",
+        class: "w-full px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-card focus:outline-none focus:ring-2 focus:ring-rsb-primary" %>
+    <p class="mt-1 text-xs text-rsb-muted">Auto-generated from name. Use lowercase letters, numbers, hyphens, and underscores only.</p>
+  </div>
+
+  <div class="mb-4">
+    <%= f.label :interval, class: "block text-sm font-medium mb-1" %>
+    <%= f.select :interval, [["Monthly", "monthly"], ["Yearly", "yearly"], ["Lifetime", "lifetime"], ["One-time", "one_time"]],
+        {}, class: "w-full px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-card focus:outline-none focus:ring-2 focus:ring-rsb-primary" %>
+  </div>
+
+  <div class="mb-4">
+    <%= f.label :price_cents, "Price (cents)", class: "block text-sm font-medium mb-1" %>
+    <%= f.number_field :price_cents, required: true, min: 0, placeholder: "2900",
+        class: "w-full px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-card focus:outline-none focus:ring-2 focus:ring-rsb-primary" %>
+    <p class="mt-1 text-xs text-rsb-muted">Enter price in cents. Example: 2900 = $29.00</p>
+  </div>
+
+  <div class="mb-4">
+    <%= f.label :currency, class: "block text-sm font-medium mb-1" %>
+    <%= f.text_field :currency, required: true, placeholder: "usd",
+        class: "w-full px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-card focus:outline-none focus:ring-2 focus:ring-rsb-primary" %>
+  </div>
+
+  <div class="mb-4">
+    <label class="flex items-center gap-2">
+      <%= f.check_box :active, class: "rounded border-rsb-border" %>
+      <span class="text-sm">Active plan</span>
+    </label>
+    <p class="mt-1 text-xs text-rsb-muted">Make this plan available for selection.</p>
+  </div>
+
+  <%# Features Section (dynamic) %>
+  <div class="mb-4">
+    <label class="block text-sm font-semibold mb-2">Features</label>
+    <div id="features-container" class="space-y-2">
+      <% if plan.features.present? && plan.features.any? %>
+        <% plan.features.each do |key, value| %>
+          <div class="flex items-center gap-2">
+            <input type="text" value="<%= key %>" placeholder="Feature name" readonly
+                   class="flex-1 px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-bg">
+            <label class="flex items-center gap-1 whitespace-nowrap">
+              <input type="hidden" name="plan[features][<%= key %>]" value="false">
+              <input type="checkbox" name="plan[features][<%= key %>]" value="true" <%= 'checked' if value %> class="rounded border-rsb-border">
+              <span class="text-sm">Enabled</span>
+            </label>
+            <button type="button" onclick="this.parentElement.remove()"
+                    class="px-2 py-1 bg-rsb-danger text-white rounded-rsb text-xs font-medium hover:opacity-90 transition-colors">Remove</button>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+    <button type="button" id="add-feature-btn"
+            class="mt-2 inline-flex items-center px-3 py-1.5 border border-rsb-border text-rsb-text rounded-rsb text-xs font-medium hover:bg-rsb-bg transition-colors">+ Add Feature</button>
+  </div>
+
+  <%# Limits Section (dynamic) %>
+  <div class="mb-4">
+    <label class="block text-sm font-semibold mb-2">Limits</label>
+    <div id="limits-container" class="space-y-2">
+      <% if plan.limits.present? && plan.limits.any? %>
+        <% plan.limits.each do |key, value| %>
+          <div class="flex items-center gap-2">
+            <input type="text" value="<%= key %>" placeholder="Limit name" readonly
+                   class="flex-1 px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-bg">
+            <input type="number" name="plan[limits][<%= key %>]" value="<%= value %>" placeholder="Value"
+                   class="w-30 px-3 py-2 border border-rsb-border rounded-rsb text-sm">
+            <button type="button" onclick="this.parentElement.remove()"
+                    class="px-2 py-1 bg-rsb-danger text-white rounded-rsb text-xs font-medium hover:opacity-90 transition-colors">Remove</button>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+    <button type="button" id="add-limit-btn"
+            class="mt-2 inline-flex items-center px-3 py-1.5 border border-rsb-border text-rsb-text rounded-rsb text-xs font-medium hover:bg-rsb-bg transition-colors">+ Add Limit</button>
+  </div>
+
+  <%# Description (from metadata) %>
+  <div class="mb-4">
+    <label for="plan_metadata_description" class="block text-sm font-medium mb-1">Description</label>
+    <textarea name="plan[metadata][description]" id="plan_metadata_description" rows="3"
+              placeholder="Describe this plan..."
+              class="w-full px-3 py-2 border border-rsb-border rounded-rsb text-sm bg-rsb-card focus:outline-none focus:ring-2 focus:ring-rsb-primary"><%= plan.metadata&.dig("description") %></textarea>
+  </div>
+
+  <%# Actions %>
+  <div class="flex gap-3 mt-6">
+    <button type="submit"
+            class="px-4 py-2 bg-rsb-primary text-rsb-primary-text rounded-rsb text-sm font-medium hover:bg-rsb-primary-hover transition-colors"><%= plan.new_record? ? "Create Plan" : "Update Plan" %></button>
+    <a href="/admin/plans"
+       class="px-4 py-2 border border-rsb-border text-rsb-text rounded-rsb text-sm hover:bg-rsb-bg transition-colors">Cancel</a>
+  </div>
+<% end %>
+
+<script>
+  // Auto-generate slug from name
+  document.addEventListener('DOMContentLoaded', function() {
+    var nameField = document.getElementById('plan_name_field');
+    var slugField = document.getElementById('plan_slug_field');
+
+    if (nameField && slugField) {
+      nameField.addEventListener('input', function() {
+        if (!slugField.dataset.manuallyEdited) {
+          var slug = this.value
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-|-$/g, '');
+          slugField.value = slug;
+        }
+      });
+
+      slugField.addEventListener('input', function() {
+        slugField.dataset.manuallyEdited = 'true';
+      });
+    }
+  });
+
+  // Add feature row
+  document.getElementById('add-feature-btn').addEventListener('click', function() {
+    var container = document.getElementById('features-container');
+    var timestamp = Date.now();
+    var row = document.createElement('div');
+    row.className = 'flex items-center gap-2';
+    row.innerHTML =
+      '<input type="text" id="feature-key-' + timestamp + '" placeholder="Feature name (e.g., sso)" ' +
+        'class="flex-1 px-3 py-2 border border-rsb-border rounded-rsb text-sm">' +
+      '<label class="flex items-center gap-1 whitespace-nowrap">' +
+        '<input type="hidden" id="feature-hidden-' + timestamp + '" value="false">' +
+        '<input type="checkbox" id="feature-value-' + timestamp + '" value="true" class="rounded border-rsb-border">' +
+        '<span class="text-sm">Enabled</span>' +
+      '</label>' +
+      '<button type="button" onclick="this.parentElement.remove()" ' +
+        'class="px-2 py-1 bg-rsb-danger text-white rounded-rsb text-xs font-medium hover:opacity-90 transition-colors">Remove</button>';
+    container.appendChild(row);
+
+    // When the key input changes, update the name attributes
+    var keyInput = row.querySelector('#feature-key-' + timestamp);
+    var hiddenInput = row.querySelector('#feature-hidden-' + timestamp);
+    var checkboxInput = row.querySelector('#feature-value-' + timestamp);
+
+    keyInput.addEventListener('input', function() {
+      var key = this.value.trim();
+      if (key) {
+        hiddenInput.name = 'plan[features][' + key + ']';
+        checkboxInput.name = 'plan[features][' + key + ']';
+      } else {
+        hiddenInput.name = '';
+        checkboxInput.name = '';
+      }
+    });
+  });
+
+  // Add limit row
+  document.getElementById('add-limit-btn').addEventListener('click', function() {
+    var container = document.getElementById('limits-container');
+    var timestamp = Date.now();
+    var row = document.createElement('div');
+    row.className = 'flex items-center gap-2';
+    row.innerHTML =
+      '<input type="text" id="limit-key-' + timestamp + '" placeholder="Limit name (e.g., api_calls)" ' +
+        'class="flex-1 px-3 py-2 border border-rsb-border rounded-rsb text-sm">' +
+      '<input type="number" id="limit-value-' + timestamp + '" placeholder="Value" ' +
+        'class="w-30 px-3 py-2 border border-rsb-border rounded-rsb text-sm">' +
+      '<button type="button" onclick="this.parentElement.remove()" ' +
+        'class="px-2 py-1 bg-rsb-danger text-white rounded-rsb text-xs font-medium hover:opacity-90 transition-colors">Remove</button>';
+    container.appendChild(row);
+
+    // When the key input changes, update the name attribute on the value input
+    var keyInput = row.querySelector('#limit-key-' + timestamp);
+    var valueInput = row.querySelector('#limit-value-' + timestamp);
+
+    keyInput.addEventListener('input', function() {
+      var key = this.value.trim();
+      if (key) {
+        valueInput.name = 'plan[limits][' + key + ']';
+      } else {
+        valueInput.name = '';
+      }
+    });
+  });
+</script>

data/app/views/rsb/entitlements/admin/plans/edit.html.erb

@@ -0,0 +1,9 @@
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">Edit <%= @plan.name %></h1>
+</div>
+
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6">
+  <%= render "form", plan: @plan,
+    url: "/admin/plans/#{@plan.id}",
+    method: :patch %>
+</div>

data/app/views/rsb/entitlements/admin/plans/index.html.erb

@@ -0,0 +1,74 @@
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">Plans</h1>
+  <div class="flex gap-2">
+    <a href="/admin/plans/new"
+       class="inline-flex items-center gap-1 px-4 py-2 bg-rsb-primary text-rsb-primary-text rounded-rsb text-sm font-medium hover:bg-rsb-primary-hover transition-colors">New Plan</a>
+  </div>
+</div>
+
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm overflow-hidden">
+  <% if @plans.any? %>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Name</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Slug</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Interval</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Price</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Features</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Limits</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Status</th>
+            <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @plans.each do |plan| %>
+            <tr class="hover:bg-rsb-bg border-b border-rsb-border last:border-b-0">
+              <td class="px-4 py-3 text-sm">
+                <a href="/admin/plans/<%= plan.id %>" class="text-rsb-primary hover:underline"><%= plan.name %></a>
+              </td>
+              <td class="px-4 py-3 text-sm text-rsb-muted"><%= plan.slug %></td>
+              <td class="px-4 py-3 text-sm">
+                <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-info-bg text-rsb-info-text text-xs font-medium"><%= plan.interval.titleize %></span>
+              </td>
+              <td class="px-4 py-3 text-sm">$<%= "%.2f" % (plan.price_cents / 100.0) %> <%= plan.currency.upcase %></td>
+              <td class="px-4 py-3 text-sm"><%= pluralize(plan.features.size, "feature") %></td>
+              <td class="px-4 py-3 text-sm"><%= pluralize(plan.limits.size, "limit") %></td>
+              <td class="px-4 py-3 text-sm">
+                <% if plan.active? %>
+                  <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-success-bg text-rsb-success-text text-xs font-medium">Active</span>
+                <% else %>
+                  <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-danger-bg text-rsb-danger-text text-xs font-medium">Inactive</span>
+                <% end %>
+              </td>
+              <td class="px-4 py-3 text-sm text-right">
+                <a href="/admin/plans/<%= plan.id %>/edit"
+                   class="inline-flex items-center gap-1 px-3 py-1.5 border border-rsb-border text-rsb-text rounded-rsb text-xs font-medium hover:bg-rsb-bg transition-colors">Edit</a>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <%# Pagination %>
+    <div class="flex justify-between items-center px-4 py-3 border-t border-rsb-border">
+      <span class="text-sm text-rsb-muted">Page <%= @current_page + 1 %></span>
+      <div class="flex gap-2">
+        <% if @current_page > 0 %>
+          <a href="/admin/plans?page=<%= @current_page - 1 %>"
+             class="inline-flex items-center px-3 py-1.5 border border-rsb-border text-rsb-text rounded-rsb text-xs font-medium hover:bg-rsb-bg transition-colors">Previous</a>
+        <% end %>
+        <% if @plans.size == @per_page %>
+          <a href="/admin/plans?page=<%= @current_page + 1 %>"
+             class="inline-flex items-center px-3 py-1.5 border border-rsb-border text-rsb-text rounded-rsb text-xs font-medium hover:bg-rsb-bg transition-colors">Next</a>
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+    <div class="p-8 text-center">
+      <p class="text-rsb-muted text-sm">No plans created yet. Create your first subscription plan to get started.</p>
+    </div>
+  <% end %>
+</div>

data/app/views/rsb/entitlements/admin/plans/new.html.erb

@@ -0,0 +1,9 @@
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">New Plan</h1>
+</div>
+
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6">
+  <%= render "form", plan: @plan,
+    url: "/admin/plans",
+    method: :post %>
+</div>

data/app/views/rsb/entitlements/admin/plans/show.html.erb

@@ -0,0 +1,94 @@
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold"><%= @plan.name %></h1>
+  <div class="flex gap-2">
+    <a href="/admin/plans/<%= @plan.id %>/edit"
+       class="inline-flex items-center gap-1 px-4 py-2 bg-rsb-primary text-rsb-primary-text rounded-rsb text-sm font-medium hover:bg-rsb-primary-hover transition-colors">Edit</a>
+    <a href="/admin/plans"
+       class="inline-flex items-center gap-1 px-4 py-2 border border-rsb-border rounded-rsb text-sm hover:bg-rsb-bg transition-colors">Back</a>
+  </div>
+</div>
+
+<%# Plan Details %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6 mb-4">
+  <h3 class="text-base font-semibold mb-4">Plan Information</h3>
+  <div class="grid grid-cols-[200px_1fr] gap-4">
+    <strong class="text-sm text-rsb-muted">Name</strong>
+    <div><%= @plan.name %></div>
+
+    <strong class="text-sm text-rsb-muted">Slug</strong>
+    <div><code class="px-1.5 py-0.5 bg-rsb-bg rounded-rsb-sm text-sm"><%= @plan.slug %></code></div>
+
+    <strong class="text-sm text-rsb-muted">Interval</strong>
+    <div>
+      <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-info-bg text-rsb-info-text text-xs font-medium"><%= @plan.interval.titleize %></span>
+    </div>
+
+    <strong class="text-sm text-rsb-muted">Price</strong>
+    <div>$<%= "%.2f" % (@plan.price_cents / 100.0) %> <%= @plan.currency.upcase %></div>
+
+    <strong class="text-sm text-rsb-muted">Status</strong>
+    <div>
+      <% if @plan.active? %>
+        <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-success-bg text-rsb-success-text text-xs font-medium">Active</span>
+      <% else %>
+        <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-danger-bg text-rsb-danger-text text-xs font-medium">Inactive</span>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<%# Features %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6 mb-4">
+  <h3 class="text-base font-semibold mb-4">Features</h3>
+  <% if @plan.features.any? %>
+    <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3">
+      <% @plan.features.each do |key, value| %>
+        <div class="flex items-center gap-2">
+          <span class="text-sm"><%= key.titleize %></span>
+          <% if value %>
+            <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-success-bg text-rsb-success-text text-xs font-medium">Enabled</span>
+          <% else %>
+            <span class="inline-block px-2.5 py-0.5 rounded-rsb bg-rsb-danger-bg text-rsb-danger-text text-xs font-medium">Disabled</span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <p class="text-rsb-muted text-sm">No features configured.</p>
+  <% end %>
+</div>
+
+<%# Limits %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6 mb-4">
+  <h3 class="text-base font-semibold mb-4">Limits</h3>
+  <% if @plan.limits.any? %>
+    <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3">
+      <% @plan.limits.each do |key, value| %>
+        <div>
+          <div class="text-sm text-rsb-muted"><%= key.titleize %></div>
+          <div class="text-xl font-semibold"><%= number_with_delimiter(value) %></div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <p class="text-rsb-muted text-sm">No limits configured.</p>
+  <% end %>
+</div>
+
+<%# Metadata %>
+<% if @plan.metadata.present? && @plan.metadata.any? %>
+  <div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6 mb-4">
+    <h3 class="text-base font-semibold mb-4">Metadata</h3>
+    <pre class="p-4 bg-rsb-bg rounded-rsb text-sm overflow-x-auto"><%= JSON.pretty_generate(@plan.metadata) %></pre>
+  </div>
+<% end %>
+
+<%# Danger Zone %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6">
+  <h3 class="text-base font-semibold text-rsb-danger mb-4">Danger Zone</h3>
+  <%= button_to "Delete Plan",
+        "/admin/plans/#{@plan.id}",
+        method: :delete,
+        data: { turbo_confirm: "Are you sure you want to delete this plan? This action cannot be undone." },
+        class: "px-4 py-2 bg-rsb-danger text-white rounded-rsb text-sm font-medium hover:opacity-90 transition-colors" %>
+</div>

data/app/views/rsb/entitlements/admin/usage_counters/index.html.erb

@@ -0,0 +1,110 @@
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">Usage Monitoring</h1>
+  <a href="/admin/usage_counters/trend" class="rsb-btn rsb-btn-secondary text-sm">
+    Trend Charts
+  </a>
+</div>
+
+<%# Filters %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg p-4 mb-4">
+  <form method="get" action="/admin/usage_counters" class="flex flex-wrap gap-4 items-end">
+    <div>
+      <label class="block text-xs font-semibold text-rsb-muted mb-1">Metric</label>
+      <select name="metric" class="rsb-input text-sm">
+        <option value="">All</option>
+        <% @available_metrics.each do |m| %>
+          <option value="<%= m %>" <%= "selected" if params[:metric] == m %>><%= m %></option>
+        <% end %>
+      </select>
+    </div>
+    <div>
+      <label class="block text-xs font-semibold text-rsb-muted mb-1">Period Key</label>
+      <input type="text" name="period_key" value="<%= params[:period_key] %>" placeholder="e.g., 2026-02" class="rsb-input text-sm">
+    </div>
+    <div>
+      <label class="block text-xs font-semibold text-rsb-muted mb-1">Countable Type</label>
+      <select name="countable_type" class="rsb-input text-sm">
+        <option value="">All</option>
+        <% @available_types.each do |t| %>
+          <option value="<%= t %>" <%= "selected" if params[:countable_type] == t %>><%= t %></option>
+        <% end %>
+      </select>
+    </div>
+    <div>
+      <button type="submit" class="rsb-btn rsb-btn-primary text-sm">Filter</button>
+      <a href="/admin/usage_counters" class="rsb-btn rsb-btn-ghost text-sm ml-2">Clear</a>
+    </div>
+  </form>
+</div>
+
+<%# Table %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm overflow-hidden">
+  <% if @usage_counters.any? %>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">
+              <a href="/admin/usage_counters?<%= { metric: params[:metric], period_key: params[:period_key], countable_type: params[:countable_type], sort: "period_key", direction: params[:sort] == "period_key" && params[:direction] != "asc" ? "asc" : "desc" }.compact.to_query %>">Period</a>
+            </th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Countable</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Metric</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">
+              <a href="/admin/usage_counters?<%= { metric: params[:metric], period_key: params[:period_key], countable_type: params[:countable_type], sort: "current_value", direction: params[:sort] == "current_value" && params[:direction] != "asc" ? "asc" : "desc" }.compact.to_query %>">Value</a>
+            </th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">Limit</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">% Used</th>
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-rsb-muted bg-rsb-bg border-b border-rsb-border">
+              <a href="/admin/usage_counters?<%= { metric: params[:metric], period_key: params[:period_key], countable_type: params[:countable_type], sort: "created_at", direction: params[:sort] == "created_at" && params[:direction] != "asc" ? "asc" : "desc" }.compact.to_query %>">Created</a>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @usage_counters.each do |counter| %>
+            <% pct = counter.limit && counter.limit > 0 ? (counter.current_value * 100.0 / counter.limit).round(1) : nil %>
+            <tr class="hover:bg-rsb-bg border-b border-rsb-border last:border-b-0">
+              <td class="px-4 py-3 text-sm font-mono"><%= counter.period_key == "__cumulative__" ? "Cumulative" : counter.period_key %></td>
+              <td class="px-4 py-3 text-sm"><%= counter.countable_type %>#<%= counter.countable_id %></td>
+              <td class="px-4 py-3 text-sm"><span class="rsb-badge"><%= counter.metric %></span></td>
+              <td class="px-4 py-3 text-sm font-mono"><%= counter.current_value %></td>
+              <td class="px-4 py-3 text-sm font-mono"><%= counter.limit || "&#8734;" %></td>
+              <td class="px-4 py-3 text-sm">
+                <% if pct %>
+                  <div class="flex items-center gap-2">
+                    <div class="w-16 h-2 bg-rsb-bg rounded-full overflow-hidden">
+                      <div class="h-full rounded-full <%= pct >= 90 ? 'bg-red-500' : pct >= 70 ? 'bg-yellow-500' : 'bg-green-500' %>" style="width: <%= [pct, 100].min %>%"></div>
+                    </div>
+                    <span class="text-xs text-rsb-muted"><%= pct %>%</span>
+                  </div>
+                <% else %>
+                  <span class="text-rsb-muted">&mdash;</span>
+                <% end %>
+              </td>
+              <td class="px-4 py-3 text-sm text-rsb-muted"><%= counter.created_at.strftime("%Y-%m-%d %H:%M") %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <%# Pagination %>
+    <% total_pages = (@total_count.to_f / @per_page).ceil %>
+    <% if total_pages > 1 %>
+      <div class="px-4 py-3 border-t border-rsb-border flex justify-between items-center text-sm text-rsb-muted">
+        <span>Showing <%= (@page - 1) * @per_page + 1 %>–<%= [@page * @per_page, @total_count].min %> of <%= @total_count %></span>
+        <div class="flex gap-2">
+          <% if @page > 1 %>
+            <a href="/admin/usage_counters?<%= { metric: params[:metric], period_key: params[:period_key], countable_type: params[:countable_type], sort: params[:sort], direction: params[:direction], page: @page - 1 }.compact.to_query %>" class="rsb-btn rsb-btn-ghost text-xs">Prev</a>
+          <% end %>
+          <% if @page < total_pages %>
+            <a href="/admin/usage_counters?<%= { metric: params[:metric], period_key: params[:period_key], countable_type: params[:countable_type], sort: params[:sort], direction: params[:direction], page: @page + 1 }.compact.to_query %>" class="rsb-btn rsb-btn-ghost text-xs">Next</a>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="p-8 text-center">
+      <p class="text-rsb-muted text-sm">No usage counters found.</p>
+    </div>
+  <% end %>
+</div>

data/app/views/rsb/entitlements/admin/usage_counters/trend.html.erb

@@ -0,0 +1,57 @@
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">Usage Trend</h1>
+  <a href="/admin/usage_counters" class="rsb-btn rsb-btn-secondary text-sm">
+    Back to Overview
+  </a>
+</div>
+
+<%# Metric selector %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg p-4 mb-4">
+  <form method="get" action="/admin/usage_counters/trend" class="flex flex-wrap gap-4 items-end">
+    <div>
+      <label class="block text-xs font-semibold text-rsb-muted mb-1">Metric</label>
+      <select name="metric" class="rsb-input text-sm">
+        <option value="">Select a metric</option>
+        <% @available_metrics.each do |m| %>
+          <option value="<%= m %>" <%= "selected" if @metric == m %>><%= m %></option>
+        <% end %>
+      </select>
+    </div>
+    <div>
+      <label class="block text-xs font-semibold text-rsb-muted mb-1">Countable Type</label>
+      <input type="text" name="countable_type" value="<%= params[:countable_type] %>" placeholder="Optional" class="rsb-input text-sm">
+    </div>
+    <div>
+      <label class="block text-xs font-semibold text-rsb-muted mb-1">Countable ID</label>
+      <input type="text" name="countable_id" value="<%= params[:countable_id] %>" placeholder="Optional" class="rsb-input text-sm">
+    </div>
+    <div>
+      <button type="submit" class="rsb-btn rsb-btn-primary text-sm">View Trend</button>
+    </div>
+  </form>
+</div>
+
+<%# Chart %>
+<div class="bg-rsb-card border border-rsb-border rounded-rsb-lg shadow-rsb-sm p-6">
+  <% if @metric.blank? %>
+    <div class="text-center py-8">
+      <p class="text-rsb-muted text-sm">Select a metric to view its usage trend.</p>
+    </div>
+  <% elsif @trend_data.blank? || @trend_data.empty? %>
+    <div class="text-center py-8">
+      <p class="text-rsb-muted text-sm">No data found for metric "<%= @metric %>".</p>
+    </div>
+  <% else %>
+    <h2 class="text-lg font-semibold mb-4"><%= @metric %> — Last <%= @trend_data.size %> periods</h2>
+    <div class="flex items-end gap-1" style="height: 200px;">
+      <% @trend_data.each do |period_key, value| %>
+        <% bar_pct = @max_value > 0 ? (value.to_f / @max_value * 100).round(1) : 0 %>
+        <div class="flex-1 flex flex-col items-center justify-end h-full">
+          <span class="text-xs text-rsb-muted mb-1"><%= value %></span>
+          <div class="w-full bg-blue-500 rounded-t" style="height: <%= bar_pct %>%; min-height: 2px;" title="<%= period_key %>: <%= value %>"></div>
+          <span class="text-xs text-rsb-muted mt-1 truncate w-full text-center" style="font-size: 0.6rem;"><%= period_key == "__cumulative__" ? "Cum." : period_key.gsub("2026-", "") %></span>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/config/locales/admin.en.yml

@@ -0,0 +1,25 @@
+en:
+  rsb:
+    admin:
+      resources:
+        plans:
+          label: "Plans"
+          columns:
+            price_cents: "Price"
+        entitlements:
+          label: "Entitlements"
+          columns:
+            entitleable_type: "Type"
+            entitleable_id: "Owner ID"
+        payment_requests:
+          label: "Payment Requests"
+          columns:
+            requestable_type: "Type"
+            requestable_id: "Owner ID"
+            provider_key: "Provider"
+            amount_cents: "Amount"
+            resolved_by: "Resolved By"
+            resolved_at: "Resolved At"
+            admin_note: "Admin Note"
+            expires_at: "Expires At"
+            provider_ref: "Provider Ref"

data/db/migrate/20260208200001_create_rsb_entitlements_plans.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class CreateRSBEntitlementsPlans < ActiveRecord::Migration[8.0]
+  def change
+    create_table :rsb_entitlements_plans do |t|
+      t.string  :name,        null: false
+      t.string  :slug,        null: false
+      t.string  :interval,    null: false
+      t.integer :price_cents, null: false, default: 0
+      t.string  :currency,    null: false, default: 'usd'
+      t.json    :features,    default: {}
+      t.json    :limits,      default: {}
+      t.json    :metadata,    default: {}
+      t.boolean :active,      default: true
+      t.timestamps
+    end
+
+    add_index :rsb_entitlements_plans, :slug, unique: true
+    add_index :rsb_entitlements_plans, :active
+  end
+end

data/db/migrate/20260208200002_create_rsb_entitlements_entitlements.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class CreateRSBEntitlementsEntitlements < ActiveRecord::Migration[8.0]
+  def change
+    create_table :rsb_entitlements_entitlements do |t|
+      t.references :entitleable, polymorphic: true, null: false
+      t.references :plan, null: false, foreign_key: { to_table: :rsb_entitlements_plans }
+      t.string   :status,       null: false, default: 'pending'
+      t.string   :provider,     null: false
+      t.string   :provider_ref
+      t.datetime :activated_at
+      t.datetime :expires_at
+      t.datetime :revoked_at
+      t.string   :revoke_reason
+      t.json     :metadata, default: {}
+      t.timestamps
+    end
+
+    add_index :rsb_entitlements_entitlements, :status
+    add_index :rsb_entitlements_entitlements, :provider
+    add_index :rsb_entitlements_entitlements, :expires_at
+  end
+end