budget/app/views/credit_card_bills/_credit_card_bill.html.erb

<div id="<%= dom_id credit_card_bill %>" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 space-y-6">
  <!-- Bill Header -->
  <div class="border-b border-gray-200 pb-6">
    <h2 class="text-2xl font-semibold text-gray-900 mb-4"><%= credit_card_bill.description %></h2>
    
    <!-- Financial Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-blue-700">Total Bill</p>
            <p class="text-xl font-bold text-blue-900"><%= number_to_currency(credit_card_bill.amount) %></p>
          </div>
        </div>
      </div>
      
      <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-green-700">Accounted For</p>
            <p class="text-xl font-bold text-green-900"><%= number_to_currency(Expense.credit_card_monthly_total) %></p>
          </div>
        </div>
      </div>
      
      <div class="bg-gradient-to-br from-<%= credit_card_bill.unpaid > 0 ? 'red' : 'gray' %>-50 to-<%= credit_card_bill.unpaid > 0 ? 'red' : 'gray' %>-100 rounded-lg p-4">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <% if credit_card_bill.unpaid > 0 %>
              <svg class="h-8 w-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            <% else %>
              <svg class="h-8 w-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
            <% end %>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-<%= credit_card_bill.unpaid > 0 ? 'red' : 'gray' %>-700">Unpaid Balance</p>
            <p class="text-xl font-bold text-<%= credit_card_bill.unpaid > 0 ? 'red' : 'gray' %>-900"><%= number_to_currency(credit_card_bill.unpaid) %></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Member Burden Breakdown -->
  <div>
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-medium text-gray-900">Member Burden Breakdown</h3>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
        Based on unpaid amount: <%= number_to_currency(credit_card_bill.unpaid) %>
      </span>
    </div>
    
    <!-- Desktop Table -->
    <div class="hidden sm:block overflow-x-auto">
      <table class="min-w-full bg-gray-50 rounded-lg overflow-hidden">
        <thead class="bg-gray-100">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Member</th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Burden %</th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount Owed</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
          <% Member.all.each do |member| %>
            <tr class="hover:bg-gray-100 transition-colors">
              <td class="px-4 py-3">
                <div class="flex items-center">
                  <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
                    <span class="text-white text-sm font-medium"><%= member.name.first.upcase %></span>
                  </div>
                  <div class="ml-3">
                    <p class="text-sm font-medium text-gray-900"><%= member.name %></p>
                  </div>
                </div>
              </td>
              <td class="px-4 py-3">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                  <%= (member.burden_percent * 100).round(1) %>%
                </span>
              </td>
              <td class="px-4 py-3">
                <span class="text-sm font-mono font-medium text-gray-900">
                  <%= number_to_currency(member.burden_amount(total_amount: credit_card_bill.unpaid)) %>
                </span>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
    
    <!-- Mobile Cards -->
    <div class="sm:hidden space-y-3">
      <% Member.all.each do |member| %>
        <div class="bg-gray-50 rounded-lg p-4">
          <div class="flex items-center justify-between mb-2">
            <div class="flex items-center">
              <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
                <span class="text-white text-sm font-medium"><%= member.name.first.upcase %></span>
              </div>
              <p class="ml-3 text-sm font-medium text-gray-900"><%= member.name %></p>
            </div>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
              <%= (member.burden_percent * 100).round(1) %>%
            </span>
          </div>
          <div class="text-right">
            <p class="text-lg font-mono font-semibold text-gray-900">
              <%= number_to_currency(member.burden_amount(total_amount: credit_card_bill.unpaid)) %>
            </p>
          </div>
        </div>
      <% end %>
    </div>
  </div>

  <!-- Action Buttons -->
  <% if action_name != "show" %>
    <div class="border-t border-gray-200 pt-6 flex flex-wrap gap-3">
      <%= link_to credit_card_bill, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
        </svg>
        View details
      <% end %>
      <%= link_to edit_credit_card_bill_path(credit_card_bill), class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
        </svg>
        Edit bill
      <% end %>
    </div>
  <% end %>
</div>