feat(dashboard): where it went and where it came from instead of five column charts

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createQuery } from "@tanstack/svelte-query";
+  import MerchantsTop from "#lib/components/accounts/MerchantsTop.svelte";
   import AccountsBlock from "#lib/components/dashboard/AccountsBlock.svelte";
   import AccountsChart from "#lib/components/dashboard/AccountsChart.svelte";
   import BudgetsChart from "#lib/components/dashboard/BudgetsChart.svelte";
@@ -9,7 +10,6 @@
   import { accountsQuery } from "#lib/components/dashboard/data.js";
   import InboxBox from "#lib/components/dashboard/InboxBox.svelte";
   import InfoBoxes from "#lib/components/dashboard/InfoBoxes.svelte";
-  import InsightBox from "#lib/components/dashboard/InsightBox.svelte";
   import PaceBox from "#lib/components/dashboard/PaceBox.svelte";
   import PiggyBanksBox from "#lib/components/dashboard/PiggyBanksBox.svelte";
   import SubscriptionsBox from "#lib/components/dashboard/SubscriptionsBox.svelte";
@@ -86,10 +86,9 @@
     <AccountsChart />
     <BudgetsChart />
     <CategoriesChart />
+    <div class="grid gap-3 2xl:grid-cols-2">
+      <MerchantsTop kind="expense" />
+      <MerchantsTop kind="revenue" />
+    </div>
   </div>
 </div>
-
-<div class="mt-3 flex flex-col gap-3">
-  <InsightBox kind="expense" />
-  <InsightBox kind="revenue" />
-</div>