atomaka/budget
1
0
Fork 0
Code Issues 1 Pull requests 3 Activity Actions

Improve dashboard view

Browse source
This commit is contained in:
Andrew Tomaka 2025-06-10 22:04:30 -04:00
parent 295a5c0112
commit 0e049a0993
Signed by: atomaka
GPG key ID: 61209BF70A5B18BE
1 changed files with 109 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

170
app/views/dashboard/show.html.erb
View file

@ -1,70 +1,118 @@
<div class="flex flex-wrap">
<div class="m-8">
<table class="min-w-full mb-8">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Member</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Burden Percent</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Burden Amount</th>
</tr>
</thead>
<tbody>
<% @members.each do |member| %>
<tr class="even:bg-gray-50 border-b">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= member.name %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= member.burden_percent * 100 %>%</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= number_to_currency(member.burden_amount) %></td>
<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>
<% end %>
</tbody>
</table>
</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>
<table class="min-w-full">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Member</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">For</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Amount</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Included</th>
</tr>
</thead>
<tbody>
<% @incomes.each do |income| %>
<tr class="even:bg-gray-50 border-b">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= income.member.name %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= income.description %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= number_to_currency(income.amount) %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= income.included %></td>
<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>
<% end %>
</tbody>
</table>
</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-8">
<table class="min-w-full">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Bill</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Payment</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Period</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Montly</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">credit_card</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Estimated</th>
</tr>
</thead>
<tbody>
<% @expenses.each do |expense| %>
<tr class="even:bg-gray-50 border-b">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= expense.description %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= number_to_currency(expense.payment) %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= expense.period %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= number_to_currency(expense.monthly) %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= expense.credit_card %></td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= expense.estimated %></td>
<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">Period</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">Credit Card</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">Estimated</th>
</tr>
<% end %>
</tbody>
</table>
</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="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
<%= expense.period %>
</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">
<% 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">Yes</span>
<% else %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">No</span>
<% end %>
</td>
<td class="text-xs sm:text-sm text-gray-900 font-light px-3 sm:px-6 py-2 sm:py-4">
<% 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">Est.</span>
<% else %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Actual</span>
<% end %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>