diff --git a/app/views/expenses/_expense.html.erb b/app/views/expenses/_expense.html.erb index 83e9896..2b4a868 100644 --- a/app/views/expenses/_expense.html.erb +++ b/app/views/expenses/_expense.html.erb @@ -1,32 +1,80 @@ -
-

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

+
+
+

<%= expense.description %>

+ +
+
+

Payment Amount

+

<%= number_to_currency(expense.payment) %>

+
+ +
+

Monthly Amount

+

<%= number_to_currency(expense.monthly) %>

+
+
+
-

- Payment: - <%= expense.payment %> -

- -

- Period: - <%= expense.period %> -

- -

- Credit card: - <%= expense.credit_card %> -

- -

- Estimated: - <%= expense.estimated %> -

+
+

Details

+
+ + + + + <%= expense.period.downcase %> + + + <% if expense.credit_card %> + + + + + + credit card + + <% else %> + + + + + bank account + + <% end %> + + <% if expense.estimated %> + + + + + estimated + + <% else %> + + + + + actual + + <% end %> +
+
<% if action_name != "show" %> - <%= link_to "Show this expense", expense, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> - <%= link_to 'Edit this expense', edit_expense_path(expense), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %> -
+
+ <%= link_to expense, 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_expense_path(expense), 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 expense + <% end %> +
<% end %>
diff --git a/app/views/expenses/_form.html.erb b/app/views/expenses/_form.html.erb index 766faec..9ec09c6 100644 --- a/app/views/expenses/_form.html.erb +++ b/app/views/expenses/_form.html.erb @@ -1,47 +1,103 @@ -<%= form_with(model: expense, class: "contents") do |form| %> +<%= form_with(model: expense, class: "space-y-6") do |form| %> <% if expense.errors.any? %> -
-

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

- - +
+
+
+ + + +
+
+

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

+
+
    + <% expense.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" %> +
+

Expense Information

+ +
+
+ <%= 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., Netflix subscription" %> +

A brief description of the expense

+
+ +
+ <%= form.label :payment, class: "block text-sm font-medium text-gray-700" %> +
+
+ $ +
+ <%= form.text_field :payment, 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" %> +
+

The payment amount for this billing period

+
+ +
+ <%= form.label :period, class: "block text-sm font-medium text-gray-700" %> + <%= + form.select :period, + options_for_select(expense_periods, expense.period), + {}, + 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" + %> +

How often this expense is billed

+
+
-
- <%= form.label :payment %> - <%= form.text_field :payment, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %> +
+

Payment Details

+ +
+
+
+ +

This expense is paid by credit card

+
+
+ <%= form.check_box :credit_card, class: "toggle-checkbox sr-only" %> + +
+
+ +
+
+ +

This amount is an estimate

+
+
+ <%= form.check_box :estimated, class: "toggle-checkbox sr-only" %> + +
+
+
+ + -
- <%= form.label :period %> - <%= - form.select :period, - options_for_select(expense_periods, expense.period), - {}, - class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" - %> -
- -
- <%= form.label :credit_card %> - <%= form.check_box :credit_card, class: "block mt-2 h-5 w-5" %> -
- -
- <%= form.label :estimated %> - <%= form.check_box :estimated, class: "block mt-2 h-5 w-5" %> -
- -
- <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %> +
+ <%= link_to "Cancel", expenses_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/expenses/edit.html.erb b/app/views/expenses/edit.html.erb index f5db8f0..dc50764 100644 --- a/app/views/expenses/edit.html.erb +++ b/app/views/expenses/edit.html.erb @@ -1,8 +1,39 @@ -
-

Editing expense

+
+
+ +
+ +
+

Editing expense

+

Update the details for this expense.

+
<%= render "form", expense: @expense %> - - <%= link_to "Show this expense", @expense, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> - <%= link_to "Back to expenses", expenses_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
diff --git a/app/views/expenses/index.html.erb b/app/views/expenses/index.html.erb index 3008610..983f8aa 100644 --- a/app/views/expenses/index.html.erb +++ b/app/views/expenses/index.html.erb @@ -1,14 +1,130 @@ -
+
<% if notice.present? %> -

<%= notice %>

+
+

+ + + + <%= notice %> +

+
<% end %> -
-

Expenses

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

Expenses

+ <%= link_to new_expense_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 flex items-center" do %> + + + + New expense + <% end %>
-
- <%= render @expenses %> -
+ <% if @expenses.any? %> + + +
+ <% @expenses.each do |expense| %> +
+
+

<%= expense.description %>

+
+ <%= link_to expense, class: "text-blue-600 hover:text-blue-800" do %> + + + + + <% end %> + <%= link_to edit_expense_path(expense), class: "text-indigo-600 hover:text-indigo-800" do %> + + + + <% end %> +
+
+
+
+

Payment

+

<%= number_to_currency(expense.payment) %>

+
+
+

Monthly

+

<%= number_to_currency(expense.monthly) %>

+
+
+
+ + <%= expense.period.downcase %> + + <% if expense.credit_card %> + credit card + <% end %> + <% if expense.estimated %> + estimated + <% end %> +
+
+ <% end %> +
+ <% else %> +
+ + + +

No expenses

+

Get started by creating a new expense.

+
+ <%= link_to new_expense_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 expense + <% end %> +
+
+ <% end %>
diff --git a/app/views/expenses/new.html.erb b/app/views/expenses/new.html.erb index 5afd7be..b40b8e5 100644 --- a/app/views/expenses/new.html.erb +++ b/app/views/expenses/new.html.erb @@ -1,7 +1,31 @@ -
-

New expense

+
+
+ +
+ +
+

New expense

+

Add a new recurring expense to track your spending.

+
<%= render "form", expense: @expense %> - - <%= link_to 'Back to expenses', expenses_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
diff --git a/app/views/expenses/show.html.erb b/app/views/expenses/show.html.erb index e4a6db3..288bf1a 100644 --- a/app/views/expenses/show.html.erb +++ b/app/views/expenses/show.html.erb @@ -1,15 +1,60 @@ -
-
- <% if notice.present? %> -

<%= notice %>

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

+ + + + <%= notice %> +

- <%= link_to 'Back to expenses', expenses_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %> + <% end %> + +
+ +
+ + <%= render @expense %> + +
+ <%= link_to edit_expense_path(@expense), 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 expense + <% end %> + + <%= button_to expense_path(@expense), method: :delete, form: { data: { turbo_confirm: "Are you sure you want to delete this expense?" } }, 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 expense + <% end %> + + <%= link_to expenses_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 expenses + <% end %>