<div class="flex flex-wrap"> <div class="m-4 lg:m-8"> <div class="overflow-x-auto mb-8"> <table class="min-w-full"> <thead class="border-b bg-gray-50"> <tr> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Member</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Burden Percent</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Burden Amount</th> </tr> </thead> <tbody> <% @members.each do |member| %> <tr class="even:bg-gray-50 border-b hover:bg-gray-100"> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <div class="font-medium"><%= member.name %></div> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800"> <%= member.burden_percent * 100 %>% </span> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <span class="font-mono"><%= number_to_currency(member.burden_amount) %></span> </td> </tr> <% end %> </tbody> </table> </div> <div class="overflow-x-auto"> <table class="min-w-full"> <thead class="border-b bg-gray-50"> <tr> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Member</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">For</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Amount</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Included</th> </tr> </thead> <tbody> <% @incomes.each do |income| %> <tr class="even:bg-gray-50 border-b hover:bg-gray-100"> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <div class="font-medium"><%= income.member.name %></div> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <%= income.description %> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <span class="font-mono"><%= number_to_currency(income.amount) %></span> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <% if income.included %> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">yes</span> <% else %> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">no</span> <% end %> </td> </tr> <% end %> </tbody> </table> </div> </div> <div class="m-4 lg:m-8"> <div class="overflow-x-auto"> <table class="min-w-full"> <thead class="border-b bg-gray-50"> <tr> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Bill</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Payment</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left">Monthly</th> <th scope="col" class="text-xs sm:text-sm font-medium text-gray-900 px-3 sm:px-6 py-2 sm:py-4 text-left"></th> </tr> </thead> <tbody> <% @expenses.each do |expense| %> <tr class="even:bg-gray-50 border-b hover:bg-gray-100"> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <div class="font-medium"><%= expense.description %></div> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <span class="font-mono"><%= number_to_currency(expense.payment) %></span> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <span class="font-mono"><%= number_to_currency(expense.monthly) %></span> </td> <td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4"> <div class="flex flex-wrap gap-1"> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800"> <%= expense.period.downcase %> </span> <% if expense.credit_card %> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">credit card</span> <% end %> <% if expense.estimated %> <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">estimated</span> <% end %> </div> </td> </tr> <% end %> </tbody> </table> </div> </div> </div>