Add color style forms (#15)

* Clean up forms and add attributes to income_tax_calculator.rb

* Style dashboard page

app/assets/stylesheets/application.tailwind.css

@@ -4,19 +4,39 @@
 
 @layer components {
   .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
+    @apply rounded-lg px-4 bg-purple-800 inline-block font-medium text-white;
+  }
+
+  .btn-danger {
+    @apply rounded-lg px-4 bg-red-600 inline-block font-medium text-white;
+  }
+
+  h1 {
+    @apply text-3xl font-bold tracking-tight text-gray-800
+  }
+
+  h3 {
+    @apply text-2xl font-bold tracking-tight text-gray-800;
   }
 
   .flex-container {
-      display: inline-flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-evenly;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
   }
 
   .flex-item {
     order: 5;
   }
+
+  .primary-card {
+    background-color: white;
+    box-shadow: #2E2F30;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    color: #2b2b2b;
+  }
 }
 
 

app/poros/income_tax_calculator.rb

@@ -5,7 +5,12 @@ class IncomeTaxCalculator
     :net_after_fed_tax,
     :state_tax,
     :total_net_income,
-    :bi_weekly_net_income
+    :bi_weekly_net_income,
+    :daily_income,
+    :monthly_income,
+    :weekly_income,
+    :quarterly_income,
+    :biannual_income
 
   def initialize(income:)
     @income = income
@@ -15,6 +20,11 @@ def initialize(income:)
     @state_tax = nil
     @total_net_income = nil
     @bi_weekly_net_income = nil
+    @daily_income = nil
+    @weekly_income = nil
+    @monthly_income = nil
+    @quarterly_income = nil
+    @biannual_income = nil
   end
 
   def calculate_taxes
@@ -23,6 +33,11 @@ def calculate_taxes
     @state_tax = calculate_state_tax
     @total_net_income = calculate_total_net_income
     @bi_weekly_net_income = calculate_bi_weekly_income
+    @daily_income = calculate_daily_income
+    @weekly_income = calculate_weekly_income
+    @monthly_income = calculate_monthly_income
+    @quarterly_income = calculate_quarterly_income
+    @biannual_income = calculate_biannual_income
   end
 
   private
@@ -49,4 +64,24 @@ def calculate_total_net_income
   def calculate_bi_weekly_income
     Money.new(@total_net_income.fractional / 26)
   end
+
+  def calculate_daily_income
+    Money.new(@total_net_income.fractional / 365)
+  end
+
+  def calculate_weekly_income
+    Money.new(@total_net_income.fractional / 52)
+  end
+
+  def calculate_monthly_income
+    Money.new(@total_net_income.fractional / 12)
+  end
+
+  def calculate_quarterly_income
+    Money.new(@total_net_income.fractional / 4)
+  end
+
+  def calculate_biannual_income
+    Money.new(@total_net_income.fractional / 2)
+  end
 end

app/views/components/_income_switch.erb

@@ -1,7 +1,7 @@
 <%= form_with url: income_switch_url, local: true do |form| %>
   <label class="relative inline-flex items-center cursor-pointer">
     <%= form.check_box :enabled, class: "sr-only peer", onchange: "this.form.requestSubmit()" %>
-    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+    <div class="w-11 h-6 bg-gray-800 peer-focus:outline-none rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-800"></div>
     <span class="ms-3 text-sm font-medium text-gray-900">Switch income type</span>
   </label>
 <% end %>

app/views/dashboard/index.html.erb

@@ -1,66 +1,57 @@
 <div class="min-h-full">
-  <header class="bg-white shadow">
-    <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-        <h1 class="text-3xl font-bold tracking-tight text-gray-900">Budget Calculator</h1>
+  <div class="primary-card">
+    <div class="mx-auto px-4 py-6 sm:px-6 lg:px-8">
+        <h1>Budget Calculator</h1>
     </div>
-  </header>
+  </div>
 
-  <main>
-
-    <div class="bg-white shadow">
-      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
-        <div class="mt-5">
-          <h3 class="text-2xl font-bold tracking-tight text-gray-900">Final Budget</h3>
-          <div class="pt-4">
-            <%= render partial: "components/income_switch" %>
-          </div>
-        </div>
-        <div id="final_income">
-          <%= render partial: "budget/salary_budget", locals: {totals: @totals, income: @salary_taxed} %>
-        </div>
+  <div class="primary-card">
+    <div class="mx-auto py-6 sm:px-6 lg:px-8">
+      <h3>Final Budget</h3>
+      <div class="pt-4">
+        <%= render partial: "components/income_switch" %>
       </div>
-    </div>
-
-    <div class="bg-white shadow">
-      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
-        <%= turbo_frame_tag "income_header_frame" do %>
-          <div class="mt-5">
-            <h3 class="text-2xl font-bold tracking-tight text-gray-900">Income</h3>
-            <%= link_to "New Income", new_income_path, data: { turbo_frame: :incomes } %>
-          </div>
-        <% end %>
-
-        <div class="pt-4">
-          <%= turbo_frame_tag :incomes do %>
-            <%= render "incomes/index" %>
-          <% end %>
-        </div>
-
-        <div class="pt-4">
-          <%= turbo_frame_tag "taxed_incomes" do %>
-            <%= render partial: "shared/taxed_incomes", locals: { salary_taxed: @salary_taxed, hourly_taxed: @hourly_taxed} %>
-          <% end %>
-        </div>
+      <div id="final_income">
+        <%= render partial: "budget/salary_budget", locals: {totals: @totals, income: @salary_taxed} %>
       </div>
     </div>
-
-    <div class="bg-white shadow">
-      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
-        <%= turbo_frame_tag "fixed_expense_header_frame" do %>
-          <div class="mt-3">
-            <h3 class="text-2xl font-bold tracking-tight text-gray-900">Fixed Expenses</h3>
-            <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses } %>
-          </div>
+  </div>
+
+  <div class="primary-card">
+    <div class="mx-auto py-6 sm:px-6 lg:px-8">
+      <%= turbo_frame_tag "income_header_frame" do %>
+        <h3>Income</h3>
+        <%= link_to "New Income", new_income_path, data: { turbo_frame: :incomes }, class: "btn btn-primary" %>
+      <% end %>
+
+      <div class="pt-4">
+        <%= turbo_frame_tag :incomes do %>
+          <%= render "incomes/index" %>
         <% end %>
+      </div>
 
-        <%= turbo_frame_tag :fixed_expenses do %>
-          <%= render "fixed_expenses/index" %>
-        <% end  %>
-
-        <%= turbo_frame_tag "total_costs" do %>
-          <%= render partial: "shared/total_costs", locals: { totals: @totals } %>
+      <div class="pt-4">
+        <%= turbo_frame_tag "taxed_incomes" do %>
+          <%= render partial: "shared/taxed_incomes", locals: { salary_taxed: @salary_taxed, hourly_taxed: @hourly_taxed} %>
         <% end %>
       </div>
     </div>
-  </main>
+  </div>
+
+  <div class="primary-card">
+    <div class="mx-auto py-6 sm:px-6 lg:px-8">
+      <%= turbo_frame_tag "fixed_expense_header_frame" do %>
+        <h3>Fixed Expenses</h3>
+        <%= link_to "New Fixed Expense", new_fixed_expense_path, data: { turbo_frame: :fixed_expenses }, class: "btn btn-primary" %>
+      <% end %>
+
+      <%= turbo_frame_tag :fixed_expenses do %>
+        <%= render "fixed_expenses/index" %>
+      <% end  %>
+
+      <%= turbo_frame_tag "total_costs" do %>
+        <%= render partial: "shared/total_costs", locals: { totals: @totals } %>
+      <% end %>
+    </div>
+  </div>
 </div>

app/views/fixed_expenses/_fixed_expense.html.erb

@@ -1,10 +1,10 @@
 <%= turbo_frame_tag dom_id(fixed_expense)  do %>
-  <div class="grid grid-cols-6">
+  <div class="grid grid-cols-6 pb-1">
     <% attributes = [fixed_expense.expense_name, humanized_money_with_symbol(fixed_expense.annual_cost), humanized_money_with_symbol(fixed_expense.monthly_cost), humanized_money_with_symbol(fixed_expense.bi_weekly_cost)] %>
     <% attributes.each do |attribute| %>
       <div class="px-5"><%= attribute %></div>
     <% end %>
-    <div class="px-5"><%= link_to "Edit", edit_fixed_expense_path(fixed_expense), class:"rounded-lg px-2 bg-gray-100 inline-block font-medium" %></div>
-    <div class=""><%= button_to "Delete", fixed_expense_path(fixed_expense), method: :delete, class:"rounded-lg px-2 bg-gray-100 inline-block font-medium" %></div>
+    <div class=""><%= link_to "Edit", edit_fixed_expense_path(fixed_expense), class:"btn btn-primary" %></div>
+    <div class=""><%= button_to "Delete", fixed_expense_path(fixed_expense), method: :delete, class:"btn btn-danger" %></div>
   </div>
 <% end %>

app/views/incomes/_form.html.erb

@@ -14,35 +14,30 @@
       <div class="my-5 px-5">
         <%= form.label :income_type %><br>
         <% if @income.income_type.nil? %>
-          <%= form.select :income_type, [["Salary", "SA"], ["Hourly", "HR"]], {}, {class: "block shadow rounded-md border border-gray-200 px-3 py-2 mt-2 w-full"} %>
+          <%= form.select :income_type, [["Salary", "SA"], ["Hourly", "HR"]], {}, {class: "block shadow rounded-md border border-gray-200 px-3 py-2 w-full"} %>
         <% elsif @income.is_salary? %>
-          <%= form.select :income_type, [["Salary", "SA"]], {}, {class: "block shadow rounded-md border border-gray-200 px-3 py-2 mt-2 w-full"} %>
+          <%= form.select :income_type, [["Salary", "SA"]], {}, {class: "block shadow rounded-md border border-gray-200 px-3 py-2 w-full"} %>
         <% else %>
-          <%= form.select :income_type, [["Hourly", "HR"]], {}, {class: "block shadow rounded-md border border-gray-200 px-3 py-2 mt-2 w-full"} %>
+          <%= form.select :income_type, [["Hourly", "HR"]], {}, {class: "block shadow rounded-md border border-gray-200 px-3 py-2 w-full"} %>
         <% end %>
       </div>
 
       <div class="my-5 px-5">
         <%= form.label :rate %>
-        <%= form.number_field :rate, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+        <%= form.number_field :rate, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 w-full" %>
       </div>
 
       <div class="my-5 px-5">
         <%= form.label :hours %>
-        <%= form.number_field :hours, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
-      </div>
-
-      <div class="my-5 px-5">
-        <%= form.label :weekly_income %>
-        <%= form.number_field :weekly_income, readonly: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+        <%= form.number_field :hours, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 w-full" %>
       </div>
 
     <div class="my-5 px-5">
-      <div class="py-3">
-        <%= form.submit class: "rounded-lg py-1 px-4 bg-gray-100 inline-block font-medium" %>
+      <div class="py-2">
+        <%= form.submit class: "rounded-lg px-2 bg-gray-100 inline-block font-medium" %>
       </div>
       <div>
-        <%= link_to "Cancel", root_path, class: "rounded-lg py-1 px-4 bg-gray-100 inline-block font-medium" %>
+        <%= link_to "Cancel", root_path, class: "rounded-lg px-2 bg-gray-100 inline-block font-medium" %>
       </div>
     </div>
   </div>

app/views/incomes/_income.html.erb

@@ -1,9 +1,9 @@
 <%= turbo_frame_tag dom_id(income) do %>
-  <div class="grid grid-cols-6">
+  <div class="grid grid-cols-6 pb-1">
     <% attributes = [income.income_type, humanized_money_with_symbol(income.rate), income.hours, humanized_money_with_symbol(income.weekly_income)] %>
     <% attributes.each do |attribute| %>
       <div class="px-5"><%= attribute %></div>
     <% end %>
-    <div class="px-5"><%= link_to "Edit", edit_income_path(income), class:"rounded-lg px-2 bg-gray-100 inline-block font-medium" %></div>
+    <div class="px-5"><%= link_to "Edit", edit_income_path(income), class:"btn btn-primary" %></div>
   </div>
 <% end %>

app/views/layouts/application.html.erb

@@ -11,8 +11,8 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
-    <main class="container mx-auto mt-28 px-5 flex">
+  <body class="bg-gray-200">
+    <main class="mx-auto px-9 flex flex-container">
       <%= yield %>
     </main>
   </body>

app/views/shared/_budget.html.erb

@@ -4,7 +4,7 @@
   <div>0</div>
   <div>0</div>
   <div>
-    <%= humanized_money_with_symbol((income.total_net_income.fractional / 100) / 365 - totals.total_annual_cost / 365) %>
+    <%= humanized_money_with_symbol((income.daily_income.fractional / 100) - totals.total_annual_cost / 365) %>
   </div>
 </div>
 
@@ -14,7 +14,7 @@
   <div>0</div>
   <div>0</div>
   <div>
-    <%= humanized_money_with_symbol((income.bi_weekly_net_income.fractional / 100) / 2 - totals.total_bi_weekly_cost / 2) %>
+    <%= humanized_money_with_symbol((income.weekly_income.fractional / 100) - totals.total_bi_weekly_cost / 2) %>
   </div>
 </div>
 
@@ -34,7 +34,7 @@
   <div>0</div>
   <div>0</div>
   <div>
-    <%= humanized_money_with_symbol((income.total_net_income.fractional / 100) / 12 - totals.total_monthly_cost) %>
+    <%= humanized_money_with_symbol((income.monthly_income.fractional / 100) - totals.total_monthly_cost) %>
   </div>
 </div>
 
@@ -44,7 +44,17 @@
   <div>0</div>
   <div>0</div>
   <div>
-    <%= humanized_money_with_symbol((income.total_net_income.fractional / 100.0) / 4 - totals.total_annual_cost / 4) %>
+    <%= humanized_money_with_symbol((income.quarterly_income.fractional / 100.0) - totals.total_annual_cost / 4) %>
+  </div>
+</div>
+
+<div class="grid grid-cols-6">
+  <div>Biannual</div>
+  <%= render partial: "shared/total", locals: { total: totals.total_annual_cost / 4 } %>
+  <div>0</div>
+  <div>0</div>
+  <div>
+    <%= humanized_money_with_symbol((income.biannual_income.fractional / 100.0) - totals.total_annual_cost / 4) %>
   </div>
 </div>