diff --git a/app/views/credit_card_bills/_credit_card_bill.html.erb b/app/views/credit_card_bills/_credit_card_bill.html.erb index df91f34..a68153c 100644 --- a/app/views/credit_card_bills/_credit_card_bill.html.erb +++ b/app/views/credit_card_bills/_credit_card_bill.html.erb @@ -1,48 +1,149 @@ -
-

- Description: - <%= credit_card_bill.description %> -

+
+ +
+

<%= credit_card_bill.description %>

+ + +
+
+
+
+ + + +
+
+

Total Bill

+

<%= number_to_currency(credit_card_bill.amount) %>

+
+
+
+ +
+
+
+ + + +
+
+

Accounted For

+

<%= number_to_currency(Expense.credit_card_monthly_total) %>

+
+
+
+ +
+
+
+ <% if credit_card_bill.unpaid > 0 %> + + + + <% else %> + + + + <% end %> +
+
+

Unpaid Balance

+

<%= number_to_currency(credit_card_bill.unpaid) %>

+
+
+
+
+
-

- Amount: - <%= credit_card_bill.amount %> -

- -

- Accounted For: - <%= Expense.credit_card_monthly_total %> -

- -

- Unpaid: - <%= credit_card_bill.unpaid %> -

- -

- - - - - - - - - - <% Member.all.each do |member| %> - - - - + +
+
+

Member Burden Breakdown

+ + Based on unpaid amount: <%= number_to_currency(credit_card_bill.unpaid) %> + +
+ + +
MemberBurden PercentBurden Amount
<%= member.name %><%= member.burden_percent * 100 %>%<%= number_to_currency(member.burden_amount(total_amount: credit_card_bill.unpaid)) %>
+ + + + + - <% end %> - -
MemberBurden %Amount Owed
-

+ + + <% Member.all.each do |member| %> + + +
+
+ <%= member.name.first.upcase %> +
+
+

<%= member.name %>

+
+
+ + + + <%= (member.burden_percent * 100).round(1) %>% + + + + + <%= number_to_currency(member.burden_amount(total_amount: credit_card_bill.unpaid)) %> + + + + <% end %> + + +
+ + +
+ <% Member.all.each do |member| %> +
+
+
+
+ <%= member.name.first.upcase %> +
+

<%= member.name %>

+
+ + <%= (member.burden_percent * 100).round(1) %>% + +
+
+

+ <%= number_to_currency(member.burden_amount(total_amount: credit_card_bill.unpaid)) %> +

+
+
+ <% end %> +
+
+ <% if action_name != "show" %> - <%= link_to "Show this credit card bill", credit_card_bill, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> - <%= link_to 'Edit this credit card bill', edit_credit_card_bill_path(credit_card_bill), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %> -
+
+ <%= link_to credit_card_bill, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %> + + + + + View details + <% end %> + <%= link_to edit_credit_card_bill_path(credit_card_bill), class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %> + + + + Edit bill + <% end %> +
<% end %> diff --git a/app/views/credit_card_bills/_form.html.erb b/app/views/credit_card_bills/_form.html.erb index 6098e1d..e6520a3 100644 --- a/app/views/credit_card_bills/_form.html.erb +++ b/app/views/credit_card_bills/_form.html.erb @@ -1,26 +1,75 @@ -<%= form_with(model: credit_card_bill, class: "contents") do |form| %> - <% if credit_card_bill.errors.any? %>
-

<%= pluralize(credit_card_bill.errors.count, "error") %> prohibited this credit_card_bill from being saved:

- - +<%= form_with(model: credit_card_bill, class: "space-y-6") do |form| %> + <% if credit_card_bill.errors.any? %> +
+
+
+ + + +
+
+

<%= pluralize(credit_card_bill.errors.count, "error") %> prohibited this credit card bill from being saved:

+
+
    + <% credit_card_bill.errors.each do |error| %> +
  • <%= error.full_message %>
    • + <% end %> +
+
+
+
<% end %> -
- <%= form.label :description %> - <%= form.text_field :description, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %> +
+
+
+ + + +
+
+

Credit Card Bill Information

+

Enter the details for this credit card statement

+
+
+ +
+
+ <%= form.label :description, class: "block text-sm font-medium text-gray-700" %> + <%= form.text_field :description, class: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", placeholder: "e.g., Chase Sapphire - January 2024" %> +

A description to identify this credit card bill

+
+ +
+ <%= form.label :amount, class: "block text-sm font-medium text-gray-700" %> +
+
+ $ +
+ <%= form.text_field :amount, class: "pl-7 pr-3 py-2 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", placeholder: "0.00" %> +
+

Total amount on the credit card statement

+
+ +
+
+
+ + + +
+

Auto-calculated unpaid amount

+

Based on total minus accounted expenses

+
+
+
+
+
-
- <%= form.label :amount %> - <%= form.text_field :amount, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %> -
- -
- <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %> +
+ <%= link_to "Cancel", credit_card_bills_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %> + <%= form.submit class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" %>
<% end %> diff --git a/app/views/credit_card_bills/edit.html.erb b/app/views/credit_card_bills/edit.html.erb index ec91b94..d2ab023 100644 --- a/app/views/credit_card_bills/edit.html.erb +++ b/app/views/credit_card_bills/edit.html.erb @@ -1,8 +1,39 @@ -
-

Editing credit card bill

+
+
+ +
+ +
+

Editing credit card bill

+

Update the details for this credit card bill.

+
<%= render "form", credit_card_bill: @credit_card_bill %> - - <%= link_to "Show this credit card bill", @credit_card_bill, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> - <%= link_to "Back to credit card bills", credit_card_bills_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
diff --git a/app/views/credit_card_bills/index.html.erb b/app/views/credit_card_bills/index.html.erb index c74377d..ded8cbc 100644 --- a/app/views/credit_card_bills/index.html.erb +++ b/app/views/credit_card_bills/index.html.erb @@ -1,14 +1,155 @@ -
+
<% if notice.present? %> -

<%= notice %>

+
+

+ + + + <%= notice %> +

+
<% end %> -
-

Credit card bills

- <%= link_to 'New credit card bill', new_credit_card_bill_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %> +
+
+

Credit Card Bills

+

Track and manage your credit card expenses and member burdens

+
+ <%= link_to new_credit_card_bill_path, class: "rounded-lg py-2.5 px-4 sm:py-3 sm:px-5 bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors inline-flex items-center justify-center sm:justify-start" do %> + + + + New credit card bill + <% end %>
-
- <%= render @credit_card_bills %> -
+ <% if @credit_card_bills.any? %> + +
+
+
+
+ + + +
+
+

Total Bills

+

<%= @credit_card_bills.count %>

+
+
+
+ +
+
+
+ + + +
+
+

Total Amount

+

<%= number_to_currency(@credit_card_bills.sum(:amount)) %>

+
+
+
+ +
+
+
+ + + +
+
+

Unbudgeted

+

<%= number_to_currency(@credit_card_bills.sum(&:unpaid)) %>

+
+
+
+
+ + + + + +
+ <% @credit_card_bills.each do |bill| %> +
+
+

<%= bill.description %>

+
+ <%= link_to bill, class: "text-blue-600 hover:text-blue-800" do %> + + + + + <% end %> + <%= link_to edit_credit_card_bill_path(bill), class: "text-indigo-600 hover:text-indigo-800" do %> + + + + <% end %> +
+
+
+
+ Total Amount + <%= number_to_currency(bill.amount) %> +
+
+ Unbudgeted + <%= number_to_currency(bill.unpaid) %> +
+
+
+ <% end %> +
+ <% else %> +
+ + + +

No credit card bills

+

Get started by creating a new credit card bill.

+
+ <%= link_to new_credit_card_bill_path, class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700" do %> + + + + New credit card bill + <% end %> +
+
+ <% end %>
diff --git a/app/views/credit_card_bills/new.html.erb b/app/views/credit_card_bills/new.html.erb index e0b9218..1a3208a 100644 --- a/app/views/credit_card_bills/new.html.erb +++ b/app/views/credit_card_bills/new.html.erb @@ -1,7 +1,31 @@ -
-

New credit card bill

+
+
+ +
+ +
+

New credit card bill

+

Add a new credit card bill to track member expenses and burden distribution.

+
<%= render "form", credit_card_bill: @credit_card_bill %> - - <%= link_to 'Back to credit card bills', credit_card_bills_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
diff --git a/app/views/credit_card_bills/show.html.erb b/app/views/credit_card_bills/show.html.erb index ee82a91..96db3c5 100644 --- a/app/views/credit_card_bills/show.html.erb +++ b/app/views/credit_card_bills/show.html.erb @@ -1,15 +1,60 @@ -
-
- <% if notice.present? %> -

<%= notice %>

- <% end %> - - <%= render @credit_card_bill %> - - <%= link_to 'Edit this credit card bill', edit_credit_card_bill_path(@credit_card_bill), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> -
- <%= button_to 'Destroy this credit card bill', credit_card_bill_path(@credit_card_bill), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %> +
+ <% if notice.present? %> +
+

+ + + + <%= notice %> +

- <%= link_to 'Back to credit card bills', credit_card_bills_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> + <% end %> + +
+ +
+ + <%= render @credit_card_bill %> + +
+ <%= link_to edit_credit_card_bill_path(@credit_card_bill), class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %> + + + + Edit credit card bill + <% end %> + + <%= button_to credit_card_bill_path(@credit_card_bill), method: :delete, form: { data: { turbo_confirm: "Are you sure you want to delete this credit card bill?" } }, class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" do %> + + + + Delete credit card bill + <% end %> + + <%= link_to credit_card_bills_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" do %> + + + + Back to credit card bills + <% end %>