105 lines
2.5 KiB
Plaintext
105 lines
2.5 KiB
Plaintext
<p style="color: green"><%= notice %></p>
|
|
|
|
<% content_for :title, "Expenses" %>
|
|
|
|
<h1>Expenses</h1>
|
|
<div class="text-end mb-3">
|
|
<%= link_to "📊 Expense Report", expense_report_path, class: "btn btn-outline-primary" %>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
/* Container for all cards */
|
|
#expenses {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Individual expense card */
|
|
.expense-card-item {
|
|
background: linear-gradient(135deg, #f0f8ff, #e6f7ff); /* soft gradient */
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
width: 250px;
|
|
padding: 20px;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Hover effect for card */
|
|
.expense-card-item:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Amount styling */
|
|
.expense-card-item .amount {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
color: #007bff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Date styling */
|
|
.expense-card-item .date {
|
|
font-size: 0.9rem;
|
|
color: #555555;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Show link styling */
|
|
.expense-card-item .show-link {
|
|
align-self: flex-start;
|
|
background-color: #28a745;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.expense-card-item .show-link:hover {
|
|
background-color: #1e7e34;
|
|
transform: scale(1.05);
|
|
}
|
|
.btn-expense {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #6a11cb, #2575fc);
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.btn-expense:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
|
background: linear-gradient(135deg, #2575fc, #6a11cb);
|
|
}
|
|
</style>
|
|
<%= link_to "New Expense", new_expense_path, class: "btn-expense" %>
|
|
|
|
|
|
<div id="expenses">
|
|
<% @expenses.each do |expense| %>
|
|
<div class="expense-card-item">
|
|
<div class="amount"><%= number_to_currency(expense.amount) %></div>
|
|
<div class="date"><%= expense.created_at.strftime("%d %b %Y") %></div>
|
|
<%= link_to "Show this expense", expense, class: "show-link" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
|