Implement Reporting tab (#276)

* First reporting version

* Fixes for all tabs

* Transactions table

* Budget section re-design

* FIX exports

Fix transactions table aggregation

* Add support for google sheets

Remove pdf and xlsx for now

* Multiple fixes

- Trends & Insights now follows top filter
- Transactions Breakdown removed filters, implemented sort by amount.
- The entire section follows top filters.
- Export to CSV adds per month breakdown

* Linter and tests

* Fix amounts

- Correctly handle amounts across the views and controller.
- Pass proper values to do calculation on, and not loose precision

* Update Gemfile.lock

* Add support for api-key on reports

Also fix custom date filter

* Review fixes

* Move budget status calculations out of the view.

* fix ensures that quarterly reports end at the quarter boundary

* Fix bugdet days remaining

Fix raw css style

* Fix test

* Implement google sheets properly with hotwire

* Improve UX on period comparison

* FIX csv export for non API key auth

app/views/budgets/show.html.erb

@@ -5,8 +5,10 @@
             next_budget: @next_budget,
             latest_budget: @latest_budget %>
 
-  <div class="flex flex-col items-start gap-4 md:flex-row">
-    <div class="w-full md:max-w-[300px] space-y-4">
+  <div class="space-y-4">
+    <%# Top Section: Donut and Summary side by side %>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <%# Budget Donut %>
       <div class="h-[300px] bg-container rounded-xl shadow-border-xs p-8">
         <% if @budget.available_to_allocate.negative? %>
           <%= render "budgets/over_allocation_warning", budget: @budget %>
@@ -15,8 +17,8 @@
         <% end %>
       </div>
 
-      <div>
-
+      <%# Actuals Summary %>
+      <div class="bg-container rounded-xl shadow-border-xs">
         <% if @budget.initialized? && @budget.available_to_allocate.positive? %>
           <%= render DS::Tabs.new(active_tab: params[:tab].presence || "budgeted") do |tabs| %>
             <% tabs.with_nav do |nav| %>
@@ -37,14 +39,13 @@
             <% end %>
           <% end %>
         <% else %>
-          <div class="bg-container rounded-xl shadow-border-xs">
-            <%= render "budgets/actuals_summary", budget: @budget %>
-          </div>
+          <%= render "budgets/actuals_summary", budget: @budget %>
         <% end %>
       </div>
     </div>
 
-    <div class="w-full grow bg-container rounded-xl shadow-border-xs p-4">
+    <%# Bottom Section: Categories full width %>
+    <div class="w-full bg-container rounded-xl shadow-border-xs p-4">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-lg font-medium">Categories</h2>