Add income and spending insight cards to dashboard (#668)

* Generate time series for rolling 30 day sum of income and spending

* Highlight accounts with most income and spending in the last 30 days

* Aggregate chips after 3 top accounts in insight card

* Refactor aggregation filter

I think this is easier to read and understand whats happening at a
glance

* Refactor and tidy

* Use family currency for insight cards

* Further reduce risk of sql injection

* Fix lint

* Refactor rolling total queries

* Add test for transaction snapshot

app/views/pages/dashboard.html.erb

@@ -33,39 +33,71 @@
   </section>
   <section class="grid grid-cols-2 gap-4">
     <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-      <div class="flex gap-4 h-full">
-        <div class="grow">
+      <div class="flex flex-col gap-4 h-full">
+        <div class="flex gap-4">
+          <div class="grow">
           <%= render partial: "shared/value_heading", locals: {
-          label: t(".income"),
-            period: @period,
-            value: @income_series.last.value,
-            trend: @income_series.trend
-          } %>
+            label: t(".income"),
+              period: Period.last_30_days,
+              value: @income_series.last&.value,
+              trend: @income_series.trend
+            } %>
+          </div>
+          <div
+            id="incomeChart"
+            class="h-full w-2/5"
+            data-controller="time-series-chart"
+            data-time-series-chart-data-value="<%= @income_series.to_json %>"
+            data-time-series-chart-use-labels-value="false"
+            data-time-series-chart-use-tooltip-value="false"></div>
+        </div>
+        <div class="flex gap-1.5">
+          <% @top_earners.first(3).each do |account| %>
+            <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+              <div class="flex items-center justify-center text-xs w-5 h-5 rounded-full <%= accountable_text_class(account.accountable_type) %> <%= accountable_bg_transparent_class(account.accountable_type) %>">
+                <%= account.name[0].upcase %>
+              </div>
+              <span>+<%= Money.new(account.income, account.currency) %></span>
+            <% end %>
+          <% end %>
+          <% if @top_earners.count > 3 %>
+            <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_earners.count - 3 %></div>
+          <% end %>
         </div>
-        <div
-          id="incomeChart"
-          class="h-full w-2/5"
-          data-controller="time-series-chart"
-          data-time-series-chart-data-value="<%= @income_series.to_json %>"
-          data-time-series-chart-use-labels-value="false"></div>
       </div>
     </div>
     <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-      <div class="flex gap-4 h-full">
-        <div class="grow">
-          <%= render partial: "shared/value_heading", locals: {
-          label: t(".spending"),
-            period: @period,
-            value: @spending_series.last.value,
-            trend: @spending_series.trend
-          } %>
+      <div class="flex flex-col gap-4 h-full">
+        <div class="flex gap-4">
+          <div class="grow">
+            <%= render partial: "shared/value_heading", locals: {
+            label: t(".spending"),
+              period: Period.last_30_days,
+              value: @spending_series.last&.value,
+              trend: @spending_series.trend
+            } %>
+          </div>
+          <div
+            id="spendingChart"
+            class="h-full w-2/5"
+            data-controller="time-series-chart"
+            data-time-series-chart-data-value="<%= @spending_series.to_json %>"
+            data-time-series-chart-use-labels-value="false"
+            data-time-series-chart-use-tooltip-value="false"></div>
+        </div>
+        <div class="flex gap-1.5">
+          <% @top_spenders.first(3).each do |account| %>
+            <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+              <div class="flex items-center justify-center text-xs w-5 h-5 rounded-full <%= accountable_text_class(account.accountable_type) %> <%= accountable_bg_transparent_class(account.accountable_type) %>">
+                <%= account.name[0].upcase %>
+              </div>
+              -<%= Money.new(account.spending, account.currency) %>
+            <% end %>
+          <% end %>
+          <% if @top_spenders.count > 3 %>
+            <div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_spenders.count - 3 %></div>
+          <% end %>
         </div>
-        <div
-          id="spendingChart"
-          class="h-full w-2/5"
-          data-controller="time-series-chart"
-          data-time-series-chart-data-value="<%= @spending_series.to_json %>"
-          data-time-series-chart-use-labels-value="false"></div>
       </div>
     </div>
     <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">