beskar 0.0.2 → 0.1.0

data/app/views/beskar/banned_ips/index.html.erb

@@ -0,0 +1,361 @@
+<% content_for :page_title, "Banned IPs" %>
+
+<% content_for :header_actions do %>
+  <div style="display: flex; gap: 0.5rem;">
+    <%= link_to "+ New Ban", new_banned_ip_path, class: "btn btn-primary" %>
+    <%= link_to "Export CSV", export_banned_ips_path(format: :csv, params: request.query_parameters),
+        class: "btn btn-secondary" %>
+    <%= link_to "Export JSON", export_banned_ips_path(format: :json, params: request.query_parameters),
+        class: "btn btn-secondary" %>
+  </div>
+<% end %>
+
+<!-- Filters Card -->
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Filters</h3>
+    <div class="card-subtitle">Search and filter banned IPs</div>
+  </div>
+  <div class="card-body">
+    <%= form_with url: banned_ips_path, method: :get, local: true do |f| %>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+        <!-- Status -->
+        <div class="form-group">
+          <label>Status</label>
+          <%= select_tag :status,
+              options_for_select([
+                ['All', ''],
+                ['Active', 'active'],
+                ['Expired', 'expired'],
+                ['Permanent', 'permanent'],
+                ['Temporary', 'temporary']
+              ], params[:status]),
+              style: "width: 100%;" %>
+        </div>
+
+        <!-- Reason -->
+        <div class="form-group">
+          <label>Reason</label>
+          <%= select_tag :reason,
+              options_for_select(@ban_reasons, params[:reason]),
+              prompt: 'All reasons',
+              style: "width: 100%;" %>
+        </div>
+
+        <!-- IP Search -->
+        <div class="form-group">
+          <label>IP Address</label>
+          <%= text_field_tag :ip_search, params[:ip_search],
+              placeholder: "Search IPs..." %>
+        </div>
+
+        <!-- Date Range -->
+        <div class="form-group">
+          <label>Banned After</label>
+          <%= date_field_tag :banned_after, params[:banned_after] %>
+        </div>
+
+        <div class="form-group">
+          <label>Banned Before</label>
+          <%= date_field_tag :banned_before, params[:banned_before] %>
+        </div>
+      </div>
+
+      <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
+        <%= submit_tag "Apply Filters", class: "btn btn-primary" %>
+        <%= link_to "Clear Filters", banned_ips_path, class: "btn btn-secondary" %>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Results Summary -->
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+  <div style="font-size: 14px; color: #697386;">
+    Showing <%= @pagination[:records].count %> of <%= number_with_delimiter(@pagination[:total_count]) %> banned IPs
+  </div>
+
+  <div style="display: flex; align-items: center; gap: 0.5rem;">
+    <label style="margin: 0; font-size: 13px; color: #697386;">Per page:</label>
+    <%= form_with url: banned_ips_path, method: :get, local: true, style: "display: inline;" do |f| %>
+      <% request.query_parameters.except(:per_page).each do |key, value| %>
+        <%= hidden_field_tag key, value %>
+      <% end %>
+      <%= select_tag :per_page,
+          options_for_select([10, 25, 50, 100], params[:per_page]&.to_i || 25),
+          onchange: "this.form.submit();",
+          style: "padding: 0.25rem 0.5rem; font-size: 13px;" %>
+    <% end %>
+  </div>
+</div>
+
+<!-- Bulk Actions Form -->
+<%= form_with url: bulk_action_banned_ips_path, method: :post, local: true, id: "bulk-actions-form" do |f| %>
+  <!-- Bulk Actions Bar -->
+  <div class="card" id="bulk-actions-bar" style="display: none; margin-bottom: 1rem;">
+    <div class="card-body" style="padding: 0.75rem 1rem;">
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <span style="font-size: 14px; color: #697386;">
+            <span id="selected-count">0</span> items selected
+          </span>
+
+          <div style="display: flex; gap: 0.5rem;">
+            <%= submit_tag "Unban Selected", name: "bulk_action", value: "unban",
+                class: "btn btn-sm btn-secondary",
+                onclick: "return confirm('Are you sure you want to unban the selected IPs?');" %>
+            <%= submit_tag "Make Permanent", name: "bulk_action", value: "make_permanent",
+                class: "btn btn-sm btn-danger",
+                onclick: "return confirm('Are you sure you want to make the selected bans permanent?');" %>
+
+            <div style="display: flex; align-items: center; gap: 0.25rem;">
+              <%= select_tag :duration,
+                  options_for_select([
+                    ['Extend by 24h', '24h'],
+                    ['Extend by 7d', '7d'],
+                    ['Extend by 30d', '30d']
+                  ]),
+                  style: "padding: 0.25rem 0.5rem; font-size: 13px;" %>
+              <%= submit_tag "Extend", name: "bulk_action", value: "extend",
+                  class: "btn btn-sm btn-warning" %>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" onclick="clearSelection()" class="btn btn-sm btn-secondary">
+          Clear Selection
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Banned IPs Table -->
+  <div class="card">
+    <div class="card-body" style="padding: 0;">
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 40px;">
+                <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)">
+              </th>
+              <th>IP Address</th>
+              <th>Reason</th>
+              <th>Banned At</th>
+              <th>Expires</th>
+              <th>Status</th>
+              <th>Violations</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% if @banned_ips.any? %>
+              <% @banned_ips.each do |ban| %>
+                <tr>
+                  <td>
+                    <%= check_box_tag "ip_ids[]", ban.id, false,
+                        class: "ban-checkbox",
+                        onchange: "updateBulkActions()" %>
+                  </td>
+                  <td>
+                    <div style="font-family: monospace; font-size: 14px; font-weight: 500;">
+                      <%= ban.ip_address %>
+                    </div>
+                    <% if ban.metadata&.dig("geolocation", "country") %>
+                      <div style="font-size: 11px; color: #697386; margin-top: 2px;">
+                        <%= [ban.metadata.dig("geolocation", "city"),
+                             ban.metadata.dig("geolocation", "country")].compact.join(", ") %>
+                      </div>
+                    <% end %>
+                  </td>
+                  <td>
+                    <div style="font-size: 13px;">
+                      <%= ban.reason.humanize %>
+                    </div>
+                    <% if ban.details.present? %>
+                      <div style="font-size: 11px; color: #697386; margin-top: 2px;">
+                        <%= truncate(ban.details, length: 50) %>
+                      </div>
+                    <% end %>
+                  </td>
+                  <td>
+                    <div style="font-size: 13px;">
+                      <%= ban.banned_at.strftime("%Y-%m-%d") %>
+                    </div>
+                    <div style="font-size: 11px; color: #697386;">
+                      <%= ban.banned_at.strftime("%H:%M:%S") %>
+                    </div>
+                  </td>
+                  <td>
+                    <% if ban.permanent? %>
+                      <span class="badge badge-critical">Never</span>
+                    <% elsif ban.expires_at %>
+                      <div style="font-size: 13px;">
+                        <%= ban.expires_at.strftime("%Y-%m-%d %H:%M") %>
+                      </div>
+                      <div style="font-size: 11px; color: #697386;">
+                        <%= distance_of_time_in_words(Time.current, ban.expires_at) %>
+                      </div>
+                    <% else %>
+                      <span style="color: #C1C7D0;">-</span>
+                    <% end %>
+                  </td>
+                  <td>
+                    <% if ban.permanent? %>
+                      <span class="badge badge-critical">Permanent</span>
+                    <% elsif ban.active? %>
+                      <span class="badge badge-danger">Active</span>
+                    <% else %>
+                      <span class="badge badge-neutral">Expired</span>
+                    <% end %>
+                  </td>
+                  <td>
+                    <div style="text-align: center;">
+                      <% if ban.violation_count > 0 %>
+                        <span style="font-size: 14px; font-weight: 600; color: <%= ban.violation_count > 3 ? '#D32F2F' : '#E91E63' %>;">
+                          <%= ban.violation_count %>
+                        </span>
+                      <% else %>
+                        <span style="color: #C1C7D0;">0</span>
+                      <% end %>
+                    </div>
+                  </td>
+                  <td>
+                    <div style="display: flex; gap: 0.25rem; align-items: center;">
+                      <%= link_to "View", banned_ip_path(ban),
+                          class: "btn btn-sm btn-secondary" %>
+
+                      <% if ban.active? && !ban.permanent? %>
+                        <%= link_to "Extend", extend_banned_ip_path(ban, duration: '24h'),
+                            data: {
+                              "turbo-method": "post",
+                              "turbo-confirm": "Extend this ban by 24 hours?"
+                            },
+                            class: "btn btn-sm btn-warning" %>
+                      <% end %>
+
+                      <%= link_to "Unban", banned_ip_path(ban),
+                          data: {
+                            "turbo-method": "delete",
+                            "turbo-confirm": "Are you sure you want to unban #{ban.ip_address}?"
+                          },
+                          class: "btn btn-sm btn-danger" %>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            <% else %>
+              <tr>
+                <td colspan="8" style="text-align: center; padding: 3rem;">
+                  <div style="color: #697386;">
+                    <svg width="48" height="48" fill="currentColor" viewBox="0 0 24 24" style="margin: 0 auto 1rem;">
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+                    </svg>
+                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 0.5rem;">No banned IPs found</div>
+                    <div style="font-size: 14px;">Try adjusting your filters or add a new ban</div>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Pagination -->
+<% if @pagination[:total_pages] > 1 %>
+  <div class="pagination">
+    <% if @pagination[:has_previous] %>
+      <%= link_to "← Previous", banned_ips_path(params.to_unsafe_h.merge(page: @pagination[:previous_page])),
+          class: "pagination-link" %>
+    <% else %>
+      <span class="pagination-link disabled">← Previous</span>
+    <% end %>
+
+    <% # Show page numbers %>
+    <% if @pagination[:total_pages] <= 7 %>
+      <% (1..@pagination[:total_pages]).each do |page| %>
+        <%= link_to page, banned_ips_path(params.to_unsafe_h.merge(page: page)),
+            class: "pagination-link #{'active' if page == @pagination[:current_page]}" %>
+      <% end %>
+    <% else %>
+      <% if @pagination[:current_page] <= 4 %>
+        <% (1..5).each do |page| %>
+          <%= link_to page, banned_ips_path(params.to_unsafe_h.merge(page: page)),
+              class: "pagination-link #{'active' if page == @pagination[:current_page]}" %>
+        <% end %>
+        <span class="pagination-link disabled">...</span>
+        <%= link_to @pagination[:total_pages], banned_ips_path(params.to_unsafe_h.merge(page: @pagination[:total_pages])),
+            class: "pagination-link" %>
+      <% elsif @pagination[:current_page] >= @pagination[:total_pages] - 3 %>
+        <%= link_to 1, banned_ips_path(params.to_unsafe_h.merge(page: 1)),
+            class: "pagination-link" %>
+        <span class="pagination-link disabled">...</span>
+        <% ((@pagination[:total_pages] - 4)..@pagination[:total_pages]).each do |page| %>
+          <%= link_to page, banned_ips_path(params.to_unsafe_h.merge(page: page)),
+              class: "pagination-link #{'active' if page == @pagination[:current_page]}" %>
+        <% end %>
+      <% else %>
+        <%= link_to 1, banned_ips_path(params.to_unsafe_h.merge(page: 1)),
+            class: "pagination-link" %>
+        <span class="pagination-link disabled">...</span>
+        <% ((@pagination[:current_page] - 1)..(@pagination[:current_page] + 1)).each do |page| %>
+          <%= link_to page, banned_ips_path(params.to_unsafe_h.merge(page: page)),
+              class: "pagination-link #{'active' if page == @pagination[:current_page]}" %>
+        <% end %>
+        <span class="pagination-link disabled">...</span>
+        <%= link_to @pagination[:total_pages], banned_ips_path(params.to_unsafe_h.merge(page: @pagination[:total_pages])),
+            class: "pagination-link" %>
+      <% end %>
+    <% end %>
+
+    <% if @pagination[:has_next] %>
+      <%= link_to "Next →", banned_ips_path(params.to_unsafe_h.merge(page: @pagination[:next_page])),
+          class: "pagination-link" %>
+    <% else %>
+      <span class="pagination-link disabled">Next →</span>
+    <% end %>
+  </div>
+
+  <div style="text-align: center; margin-top: 1rem; font-size: 13px; color: #697386;">
+    Page <%= @pagination[:current_page] %> of <%= @pagination[:total_pages] %> •
+    Total: <%= number_with_delimiter(@pagination[:total_count]) %> banned IPs
+  </div>
+<% end %>
+
+<script>
+  function toggleSelectAll(checkbox) {
+    const checkboxes = document.querySelectorAll('.ban-checkbox');
+    checkboxes.forEach(cb => {
+      cb.checked = checkbox.checked;
+    });
+    updateBulkActions();
+  }
+
+  function updateBulkActions() {
+    const checkboxes = document.querySelectorAll('.ban-checkbox:checked');
+    const bulkBar = document.getElementById('bulk-actions-bar');
+    const selectedCount = document.getElementById('selected-count');
+
+    if (checkboxes.length > 0) {
+      bulkBar.style.display = 'block';
+      selectedCount.textContent = checkboxes.length;
+    } else {
+      bulkBar.style.display = 'none';
+    }
+
+    // Update select-all checkbox state
+    const selectAll = document.getElementById('select-all');
+    const allCheckboxes = document.querySelectorAll('.ban-checkbox');
+    if (allCheckboxes.length > 0) {
+      selectAll.checked = checkboxes.length === allCheckboxes.length;
+    }
+  }
+
+  function clearSelection() {
+    document.getElementById('select-all').checked = false;
+    toggleSelectAll(document.getElementById('select-all'));
+  }
+</script>

data/app/views/beskar/banned_ips/new.html.erb

@@ -0,0 +1,310 @@
+<% content_for :page_title, "New IP Ban" %>
+
+<% content_for :header_actions do %>
+  <%= link_to "← Cancel", banned_ips_path, class: "btn btn-secondary" %>
+<% end %>
+
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Ban IP Address</h3>
+    <div class="card-subtitle">Add a new IP address to the ban list</div>
+  </div>
+  <div class="card-body">
+    <%= form_with model: @banned_ip, url: banned_ips_path, local: true do |f| %>
+      <% if @banned_ip.errors.any? %>
+        <div class="alert alert-danger">
+          <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 0.5rem;">
+            <%= pluralize(@banned_ip.errors.count, "error") %> prohibited this ban from being saved:
+          </h4>
+          <ul style="margin: 0; padding-left: 1.5rem;">
+            <% @banned_ip.errors.full_messages.each do |message| %>
+              <li style="font-size: 13px;"><%= message %></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+
+      <div style="display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 600px;">
+        <!-- IP Address -->
+        <div class="form-group">
+          <%= f.label :ip_address, "IP Address *" %>
+          <%= f.text_field :ip_address,
+              value: @suggested_ip || @banned_ip.ip_address,
+              placeholder: "e.g., 192.168.1.1",
+              required: true,
+              style: "font-family: monospace;" %>
+          <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
+            Enter the IP address to ban. IPv4 and IPv6 formats are supported.
+          </div>
+        </div>
+
+        <!-- Reason -->
+        <div class="form-group">
+          <%= f.label :reason, "Ban Reason *" %>
+          <%= f.select :reason,
+              options_for_select([
+                ['Rate Limit Abuse', 'rate_limit_abuse'],
+                ['Authentication Abuse', 'authentication_abuse'],
+                ['WAF Violation', 'waf_violation'],
+                ['Brute Force Attack', 'brute_force_attack'],
+                ['Suspicious Activity', 'suspicious_activity'],
+                ['Manual Ban', 'manual_ban'],
+                ['Other', 'other']
+              ], @suggested_reason || @banned_ip.reason),
+              { prompt: 'Select a reason...' },
+              { required: true } %>
+          <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
+            Select the primary reason for banning this IP address.
+          </div>
+        </div>
+
+        <!-- Ban Duration -->
+        <div class="form-group">
+          <label>Ban Duration *</label>
+          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+              <%= radio_button_tag :ban_type, 'temporary', !@banned_ip.permanent?,
+                  onchange: "toggleDurationFields()" %>
+              <span style="font-weight: normal;">Temporary Ban</span>
+            </label>
+            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+              <%= radio_button_tag :ban_type, 'permanent', @banned_ip.permanent?,
+                  onchange: "toggleDurationFields()" %>
+              <span style="font-weight: normal; color: #D32F2F;">Permanent Ban</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Temporary Ban Options -->
+        <div id="temporary-options" style="<%= @banned_ip.permanent? ? 'display: none;' : '' %>">
+          <div class="form-group">
+            <label>Duration</label>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
+              <% [
+                ['1 Hour', 1.hour],
+                ['6 Hours', 6.hours],
+                ['24 Hours', 24.hours],
+                ['7 Days', 7.days],
+                ['30 Days', 30.days],
+                ['90 Days', 90.days]
+              ].each do |label, duration| %>
+                <label style="display: flex; align-items: center; padding: 0.75rem; background: #FAFBFC; border: 1px solid #E3E8EE; border-radius: 6px; cursor: pointer;">
+                  <%= radio_button_tag :duration, duration.to_i, false %>
+                  <span style="margin-left: 0.5rem; font-size: 13px; font-weight: normal;"><%= label %></span>
+                </label>
+              <% end %>
+            </div>
+            <div style="font-size: 12px; color: #697386; margin-top: 0.5rem;">
+              Or specify a custom expiry date and time:
+            </div>
+          </div>
+
+          <div class="form-group">
+            <%= f.label :expires_at, "Custom Expiry Date/Time" %>
+            <%= f.datetime_field :expires_at,
+                value: @banned_ip.expires_at&.strftime('%Y-%m-%dT%H:%M'),
+                min: DateTime.now.strftime('%Y-%m-%dT%H:%M') %>
+          </div>
+        </div>
+
+        <!-- Details -->
+        <div class="form-group">
+          <%= f.label :details, "Additional Details" %>
+          <%= f.text_area :details,
+              rows: 3,
+              placeholder: "Provide any additional context or details about this ban..." %>
+          <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
+            Optional. Add any relevant information about why this IP was banned.
+          </div>
+        </div>
+
+        <!-- Violation Count -->
+        <div class="form-group">
+          <%= f.label :violation_count, "Initial Violation Count" %>
+          <%= f.number_field :violation_count,
+              value: @banned_ip.violation_count || 1,
+              min: 0 %>
+          <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
+            Set the initial violation count. This affects ban escalation for repeat offenders.
+          </div>
+        </div>
+
+        <hr style="border: none; border-top: 1px solid #E3E8EE; margin: 1.5rem 0;">
+
+        <!-- Related Security Event (if coming from an event) -->
+        <% if params[:event_id].present? %>
+          <div class="alert alert-info">
+            <strong>Related Event:</strong> This ban is being created in response to security event #<%= params[:event_id] %>.
+            <%= link_to "View Event", security_event_path(params[:event_id]), target: "_blank" %>
+          </div>
+        <% end %>
+
+        <!-- Submit Buttons -->
+        <div style="display: flex; gap: 0.5rem;">
+          <%= f.submit "Ban IP Address", class: "btn btn-danger" %>
+          <%= link_to "Cancel", banned_ips_path, class: "btn btn-secondary" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Preview Card -->
+<div class="card" id="ban-preview" style="display: none;">
+  <div class="card-header">
+    <h3 class="card-title">Ban Preview</h3>
+    <div class="card-subtitle">This is how the ban will appear</div>
+  </div>
+  <div class="card-body">
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+      <div>
+        <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386;">
+          IP Address
+        </div>
+        <div style="font-family: monospace; font-size: 14px; color: #1A1F36; margin-top: 0.25rem;" id="preview-ip">
+          -
+        </div>
+      </div>
+      <div>
+        <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386;">
+          Reason
+        </div>
+        <div style="font-size: 14px; color: #1A1F36; margin-top: 0.25rem;" id="preview-reason">
+          -
+        </div>
+      </div>
+      <div>
+        <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386;">
+          Duration
+        </div>
+        <div style="font-size: 14px; color: #1A1F36; margin-top: 0.25rem;" id="preview-duration">
+          -
+        </div>
+      </div>
+      <div>
+        <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386;">
+          Status
+        </div>
+        <div style="margin-top: 0.25rem;">
+          <span class="badge badge-danger" id="preview-status">Active</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function toggleDurationFields() {
+    const isPermanent = document.querySelector('input[name="ban_type"]:checked').value === 'permanent';
+    const temporaryOptions = document.getElementById('temporary-options');
+
+    if (isPermanent) {
+      temporaryOptions.style.display = 'none';
+      // Clear duration selections
+      document.querySelectorAll('input[name="duration"]').forEach(input => {
+        input.checked = false;
+      });
+      document.getElementById('banned_ip_expires_at').value = '';
+    } else {
+      temporaryOptions.style.display = 'block';
+    }
+
+    updatePreview();
+  }
+
+  function updatePreview() {
+    const previewCard = document.getElementById('ban-preview');
+    const ipInput = document.getElementById('banned_ip_ip_address');
+    const reasonSelect = document.getElementById('banned_ip_reason');
+
+    if (ipInput.value || reasonSelect.value) {
+      previewCard.style.display = 'block';
+
+      // Update IP
+      document.getElementById('preview-ip').textContent = ipInput.value || '-';
+
+      // Update reason
+      const reasonText = reasonSelect.options[reasonSelect.selectedIndex]?.text || '-';
+      document.getElementById('preview-reason').textContent = reasonText;
+
+      // Update duration
+      const isPermanent = document.querySelector('input[name="ban_type"]:checked')?.value === 'permanent';
+      if (isPermanent) {
+        document.getElementById('preview-duration').textContent = 'Permanent';
+        document.getElementById('preview-duration').style.color = '#D32F2F';
+        document.getElementById('preview-status').className = 'badge badge-critical';
+        document.getElementById('preview-status').textContent = 'Permanent';
+      } else {
+        const durationRadio = document.querySelector('input[name="duration"]:checked');
+        const customExpiry = document.getElementById('banned_ip_expires_at').value;
+
+        if (customExpiry) {
+          const expiryDate = new Date(customExpiry);
+          document.getElementById('preview-duration').textContent = expiryDate.toLocaleString();
+        } else if (durationRadio) {
+          const label = durationRadio.parentElement.textContent.trim();
+          document.getElementById('preview-duration').textContent = label;
+        } else {
+          document.getElementById('preview-duration').textContent = 'Not specified';
+        }
+        document.getElementById('preview-duration').style.color = '#1A1F36';
+        document.getElementById('preview-status').className = 'badge badge-danger';
+        document.getElementById('preview-status').textContent = 'Active';
+      }
+    } else {
+      previewCard.style.display = 'none';
+    }
+  }
+
+  // Set up event listeners
+  document.addEventListener('DOMContentLoaded', function() {
+    // Update preview on input changes
+    document.getElementById('banned_ip_ip_address').addEventListener('input', updatePreview);
+    document.getElementById('banned_ip_reason').addEventListener('change', updatePreview);
+    document.getElementById('banned_ip_expires_at').addEventListener('change', updatePreview);
+
+    document.querySelectorAll('input[name="duration"]').forEach(input => {
+      input.addEventListener('change', function() {
+        // Clear custom expiry when selecting a preset duration
+        document.getElementById('banned_ip_expires_at').value = '';
+        updatePreview();
+      });
+    });
+
+    // Clear preset duration when entering custom expiry
+    document.getElementById('banned_ip_expires_at').addEventListener('input', function() {
+      if (this.value) {
+        document.querySelectorAll('input[name="duration"]').forEach(input => {
+          input.checked = false;
+        });
+      }
+    });
+
+    // Initial preview update
+    updatePreview();
+
+    // Handle form submission
+    document.querySelector('form').addEventListener('submit', function(e) {
+      const isPermanent = document.querySelector('input[name="ban_type"]:checked').value === 'permanent';
+
+      if (isPermanent) {
+        // Set permanent flag
+        const permanentField = document.createElement('input');
+        permanentField.type = 'hidden';
+        permanentField.name = 'banned_ip[permanent]';
+        permanentField.value = 'true';
+        this.appendChild(permanentField);
+      } else {
+        // Calculate expires_at based on duration if not custom
+        const durationRadio = document.querySelector('input[name="duration"]:checked');
+        const customExpiry = document.getElementById('banned_ip_expires_at').value;
+
+        if (!customExpiry && durationRadio) {
+          const durationSeconds = parseInt(durationRadio.value);
+          const expiresAt = new Date(Date.now() + durationSeconds * 1000);
+          document.getElementById('banned_ip_expires_at').value = expiresAt.toISOString().slice(0, 16);
+        }
+      }
+    });
+  });
+</script>