110 lines
5.7 KiB
Text
110 lines
5.7 KiB
Text
<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>
|