#38 transactions preview on analytics page

ya-erm · Aug 18, 2023 · 5c32334 · 5c32334
1 parent 534923e
commit 5c32334
Showing 1 changed file with 58 additions and 30 deletions.
diff --git a/src/routes/analytics/Analytics.svelte b/src/routes/analytics/Analytics.svelte
@@ -14,6 +14,7 @@
   import { formatMoney } from '$lib/utils/formatMoney';
   import { groupBy } from '$lib/utils/groupBy';
   import { findCurrencyRate } from '../accounts/utils';
+  import TransactionList from '../transactions/TransactionList.svelte';
 
   const categories = $categoriesStore;
   const currencyRates = $currencyRatesStore;
@@ -28,11 +29,13 @@
   function prevMonth() {
     startDate = startDate.subtract(1, 'month').startOf('month');
     endDate = endDate.subtract(1, 'month').endOf('month');
+    selectedGroup = null;
   }
 
   function nextMonth() {
     startDate = startDate.add(1, 'month').startOf('month');
     endDate = endDate.add(1, 'month').endOf('month');
+    selectedGroup = null;
   }
 
   let globalRates: Record<string, number> | null = null;
@@ -92,10 +95,12 @@
       };
     })
     .sort((a, b) => a.sum - b.sum);
+
+  let selectedGroup: (typeof groups)[number] | null = null;
 </script>
 
 <div class="p-1">
-  <div class="flex gap-1 items-center justify-between">
+  <div class="month-selector flex gap-1 items-center justify-between">
     <Button color="white" bordered on:click={prevMonth}>
       <Icon name="mdi:chevron-left" />
     </Button>
@@ -104,40 +109,51 @@
       <Icon name="mdi:chevron-right" />
     </Button>
   </div>
-  <ul class="list">
-    {#each groups as group (group.categoryId)}
-      <li class="item" data-id={group.categoryId}>
-        <div class="category">
-          <Icon name={group.category?.icon ?? 'mdi:help'} />
-          <span>{group.category?.name ?? group.categoryId}</span>
+
+  <div class="summary-by-categories">
+    <ul class="list">
+      {#each groups as group (group.categoryId)}
+        <li class="item" data-id={group.categoryId}>
+          <button on:click={() => (selectedGroup = group)}>
+            <div class="category">
+              <Icon name={group.category?.icon ?? 'mdi:help'} />
+              <span>{group.category?.name ?? group.categoryId}</span>
+            </div>
+            <span>
+              {formatMoney(group.sum, { currency: mainCurrency })}
+            </span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="total-container">
+      <div class="total">
+        <div>{$translate('categories.incomings')}:</div>
+        <div>
+          {formatMoney(
+            groups.filter((g) => g.category?.type === 'IN').reduce((sum, g) => sum + g.sum, 0),
+            { currency: mainCurrency },
+          )}
+        </div>
+        <div>{$translate('categories.outgoings')}:</div>
+        <div>
+          {formatMoney(
+            groups.filter((g) => g.category?.type === 'OUT').reduce((sum, g) => sum + g.sum, 0),
+            { currency: mainCurrency },
+          )}
         </div>
-        <span>
-          {formatMoney(group.sum, { currency: mainCurrency })}
-        </span>
-      </li>
-    {/each}
-  </ul>
-  <hr />
-  <div class="total-container">
-    <div class="total">
-      <div>{$translate('categories.incomings')}:</div>
-      <div>
-        {formatMoney(
-          groups.filter((g) => g.category?.type === 'IN').reduce((sum, g) => sum + g.sum, 0),
-          { currency: mainCurrency },
-        )}
-      </div>
-      <div>{$translate('categories.outgoings')}:</div>
-      <div>
-        {formatMoney(
-          groups.filter((g) => g.category?.type === 'OUT').reduce((sum, g) => sum + g.sum, 0),
-          { currency: mainCurrency },
-        )}
       </div>
     </div>
   </div>
 </div>
 
+{#if selectedGroup}
+  <div class="transactions-preview">
+    <TransactionList transactions={selectedGroup.transactions} />
+  </div>
+{/if}
+
 <style>
   .month {
     margin: 0;
@@ -149,12 +165,24 @@
     flex-direction: column;
     gap: 0.5rem;
   }
-  .item {
+  .item button {
+    padding: 0;
+    border: none;
+    font-size: 1rem;
+    background: transparent;
+    cursor: pointer;
+
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
   }
+  @media (hover: hover) {
+    .item button:hover {
+      color: var(--active-color);
+    }
+  }
   .category {
     display: flex;
     align-items: center;