turbovault-app/app/views/api_tokens/index.html.erb

<div class="max-w-4xl mx-auto">
  <h1 class="text-3xl font-bold mb-6">API Tokens</h1>
  
  <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm text-yellow-700">
          <strong>Important:</strong> Your API token will only be shown once when created. Make sure to copy it and store it securely!
        </p>
      </div>
    </div>
  </div>
  
  <div class="bg-white p-6 rounded-lg shadow mb-6">
    <h2 class="text-xl font-bold mb-4">Create New Token</h2>
    
    <%= form_with model: @api_token, url: api_tokens_path, class: "space-y-4" do |f| %>
      <% if @api_token.errors.any? %>
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
          <ul>
            <% @api_token.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>
      
      <div>
        <%= f.label :name, "Token Name (e.g., 'Mobile App', 'Third Party Integration')", class: "block text-sm font-medium text-gray-700" %>
        <%= f.text_field :name, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
      </div>
      
      <div>
        <%= f.label :expires_at, "Expiration Date (optional)", class: "block text-sm font-medium text-gray-700" %>
        <%= f.datetime_local_field :expires_at, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
        <p class="mt-1 text-sm text-gray-500">Leave blank for tokens that never expire</p>
      </div>
      
      <div>
        <%= f.submit "Create Token", class: "px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" %>
      </div>
    <% end %>
  </div>
  
  <div class="bg-white p-6 rounded-lg shadow">
    <h2 class="text-xl font-bold mb-4">Your API Tokens</h2>
    
    <% if @api_tokens.any? %>
      <div class="space-y-4">
        <% @api_tokens.each do |token| %>
          <div class="border border-gray-200 p-4 rounded-lg">
            <div class="flex justify-between items-start">
              <div class="flex-1">
                <div class="font-semibold text-lg"><%= token.name || "Unnamed Token" %></div>
                
                <div class="mt-2 space-y-1 text-sm text-gray-600">
                  <div>
                    <strong>Token:</strong> 
                    <code class="bg-gray-100 px-2 py-1 rounded font-mono text-xs">
                      <%= token.token[0..15] %>...
                    </code>
                  </div>
                  
                  <div><strong>Created:</strong> <%= token.created_at.strftime("%B %d, %Y at %I:%M %p") %></div>
                  
                  <% if token.last_used_at %>
                    <div><strong>Last Used:</strong> <%= time_ago_in_words(token.last_used_at) %> ago</div>
                  <% else %>
                    <div><strong>Last Used:</strong> Never</div>
                  <% end %>
                  
                  <% if token.expires_at %>
                    <div class="<%= token.expired? ? 'text-red-600' : '' %>">
                      <strong>Expires:</strong> <%= token.expires_at.strftime("%B %d, %Y") %>
                      <%= " (EXPIRED)" if token.expired? %>
                    </div>
                  <% else %>
                    <div><strong>Expires:</strong> Never</div>
                  <% end %>
                </div>
              </div>
              
              <div>
                <%= button_to "Delete", api_token_path(token), method: :delete, data: { turbo_confirm: "Are you sure you want to delete this API token? Apps using this token will stop working. This action cannot be undone." }, class: "px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 text-sm" %>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    <% else %>
      <p class="text-gray-500">You haven't created any API tokens yet. Create one above to start using the API.</p>
    <% end %>
  </div>
  
  <div class="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm text-blue-700">
          <strong>API Documentation:</strong> See <code class="bg-blue-100 px-2 py-1 rounded">API_DOCUMENTATION.md</code> for complete API reference and usage examples.
        </p>
      </div>
    </div>
  </div>
  
  <div class="mt-4">
    <%= link_to "← Back to Settings", settings_path, class: "text-indigo-600 hover:text-indigo-800" %>
  </div>
</div>