Improve dashboard badges

This commit is contained in:
Andrew Tomaka 2025-06-10 22:09:34 -04:00
parent 0e049a0993
commit 0b5fd582e6
Signed by: atomaka
GPG key ID: 61209BF70A5B18BE

View file

@ -53,9 +53,9 @@
</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>
<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>
<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>
@ -72,10 +72,8 @@
<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>
<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>
@ -87,27 +85,21 @@
<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 %>
<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 %>