feat: Refactor transaction management with nanostores and convert components to React

- Added @nanostores/react for state management.
- Created AccountSummary component to display account balance.
- Replaced AddTransactionForm.astro with AddTransactionForm.tsx for better state handling.
- Introduced TransactionTable.tsx for displaying transactions with edit/delete functionality.
- Updated Sidebar.astro and MainContent.astro to use React components.
- Implemented transactionStore.ts for managing current account ID and transaction editing state.
- Removed obsolete AddTransactionForm.astro and related scripts.
- Enhanced error handling and loading states in transaction forms.
This fixes issues #7, #8, #9, #10, #11
This commit is contained in:
GitHub Copilot
2025-04-24 15:49:19 -04:00
parent d0a9af3dfd
commit 892ea684f4
24 changed files with 1000 additions and 2539 deletions

View File

@@ -23,30 +23,30 @@
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">2.22% </span>
<span class="quiet">Statements</span>
<span class='fraction'>271/271</span>
<span class='fraction'>211/9491</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">56.57% </span>
<span class="quiet">Branches</span>
<span class='fraction'>39/39</span>
<span class='fraction'>43/76</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">23.25% </span>
<span class="quiet">Functions</span>
<span class='fraction'>6/6</span>
<span class='fraction'>10/43</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">2.22% </span>
<span class="quiet">Lines</span>
<span class='fraction'>271/271</span>
<span class='fraction'>211/9491</span>
</div>
@@ -61,7 +61,7 @@
</div>
</template>
</div>
<div class='status-line high'></div>
<div class='status-line low'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
@@ -79,93 +79,333 @@
</tr>
</thead>
<tbody><tr>
<td class="file high" data-value="data"><a href="data/index.html">data</a></td>
<td class="file low" data-value="finance"><a href="finance/index.html">finance</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="24" class="abs low">0/24</td>
<td data-value="50" class="pct medium">50%</td>
<td data-value="2" class="abs medium">1/2</td>
<td data-value="50" class="pct medium">50%</td>
<td data-value="2" class="abs medium">1/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="24" class="abs low">0/24</td>
</tr>
<tr>
<td class="file low" data-value="finance/.astro"><a href="finance/.astro/index.html">finance/.astro</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js"><a href="finance/dist/_worker.js/index.html">finance/dist/_worker.js</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="58" class="abs low">0/58</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="5" class="abs low">0/5</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="5" class="abs low">0/5</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="58" class="abs low">0/58</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/chunks"><a href="finance/dist/_worker.js/chunks/index.html">finance/dist/_worker.js/chunks</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="5297" class="abs low">0/5297</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="7" class="abs low">0/7</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="7" class="abs low">0/7</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="5297" class="abs low">0/5297</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/chunks/astro"><a href="finance/dist/_worker.js/chunks/astro/index.html">finance/dist/_worker.js/chunks/astro</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2792" class="abs low">0/2792</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2792" class="abs low">0/2792</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/pages"><a href="finance/dist/_worker.js/pages/index.html">finance/dist/_worker.js/pages</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="123" class="abs low">0/123</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="123" class="abs low">0/123</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/pages/api"><a href="finance/dist/_worker.js/pages/api/index.html">finance/dist/_worker.js/pages/api</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="61" class="abs low">0/61</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="2" class="abs low">0/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="61" class="abs low">0/61</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/pages/api/accounts"><a href="finance/dist/_worker.js/pages/api/accounts/index.html">finance/dist/_worker.js/pages/api/accounts</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="25" class="abs low">0/25</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="25" class="abs low">0/25</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/pages/api/accounts/_id_"><a href="finance/dist/_worker.js/pages/api/accounts/_id_/index.html">finance/dist/_worker.js/pages/api/accounts/_id_</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="19" class="abs low">0/19</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="19" class="abs low">0/19</td>
</tr>
<tr>
<td class="file low" data-value="finance/dist/_worker.js/pages/api/transactions"><a href="finance/dist/_worker.js/pages/api/transactions/index.html">finance/dist/_worker.js/pages/api/transactions</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="102" class="abs low">0/102</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="102" class="abs low">0/102</td>
</tr>
<tr>
<td class="file low" data-value="finance/src"><a href="finance/src/index.html">finance/src</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="14" class="abs low">0/14</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="14" class="abs low">0/14</td>
</tr>
<tr>
<td class="file low" data-value="finance/src/components"><a href="finance/src/components/index.html">finance/src/components</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="560" class="abs low">0/560</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="7" class="abs low">0/7</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="7" class="abs low">0/7</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="560" class="abs low">0/560</td>
</tr>
<tr>
<td class="file high" data-value="finance/src/data"><a href="finance/src/data/index.html">finance/src/data</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="41" class="abs high">41/41</td>
<td data-value="37" class="abs high">37/37</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="0" class="abs high">0/0</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="0" class="abs high">0/0</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="41" class="abs high">41/41</td>
<td data-value="37" class="abs high">37/37</td>
</tr>
<tr>
<td class="file high" data-value="pages/api/accounts"><a href="pages/api/accounts/index.html">pages/api/accounts</a></td>
<td class="file low" data-value="finance/src/layouts"><a href="finance/src/layouts/index.html">finance/src/layouts</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="31" class="abs low">0/31</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="31" class="abs low">0/31</td>
</tr>
<tr>
<td class="file low" data-value="finance/src/pages"><a href="finance/src/pages/index.html">finance/src/pages</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="155" class="abs low">0/155</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="155" class="abs low">0/155</td>
</tr>
<tr>
<td class="file high" data-value="finance/src/pages/api/accounts"><a href="finance/src/pages/api/accounts/index.html">finance/src/pages/api/accounts</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="11" class="abs high">11/11</td>
<td data-value="9" class="abs high">9/9</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="11" class="abs high">11/11</td>
<td data-value="9" class="abs high">9/9</td>
</tr>
<tr>
<td class="file high" data-value="pages/api/accounts/[id]"><a href="pages/api/accounts/[id]/index.html">pages/api/accounts/[id]</a></td>
<td class="file high" data-value="finance/src/pages/api/accounts/[id]"><a href="finance/src/pages/api/accounts/[id]/index.html">finance/src/pages/api/accounts/[id]</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="22" class="abs high">22/22</td>
<td data-value="18" class="abs high">18/18</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="3" class="abs high">3/3</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="22" class="abs high">22/22</td>
<td data-value="18" class="abs high">18/18</td>
</tr>
<tr>
<td class="file high" data-value="pages/api/accounts/[id]/transactions"><a href="pages/api/accounts/[id]/transactions/index.html">pages/api/accounts/[id]/transactions</a></td>
<td class="file high" data-value="finance/src/pages/api/accounts/[id]/transactions"><a href="finance/src/pages/api/accounts/[id]/transactions/index.html">finance/src/pages/api/accounts/[id]/transactions</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="15" class="abs high">15/15</td>
<td data-value="12" class="abs high">12/12</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="15" class="abs high">15/15</td>
<td data-value="12" class="abs high">12/12</td>
</tr>
<tr>
<td class="file high" data-value="pages/api/transactions"><a href="pages/api/transactions/index.html">pages/api/transactions</a></td>
<td class="file high" data-value="finance/src/pages/api/transactions"><a href="finance/src/pages/api/transactions/index.html">finance/src/pages/api/transactions</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="56" class="abs high">56/56</td>
<td data-value="42" class="abs high">42/42</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="8" class="abs high">8/8</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="56" class="abs high">56/56</td>
<td data-value="42" class="abs high">42/42</td>
</tr>
<tr>
<td class="file high" data-value="pages/api/transactions/[id]"><a href="pages/api/transactions/[id]/index.html">pages/api/transactions/[id]</a></td>
<td class="file high" data-value="finance/src/pages/api/transactions/[id]"><a href="finance/src/pages/api/transactions/[id]/index.html">finance/src/pages/api/transactions/[id]</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="126" class="abs high">126/126</td>
<td data-value="93" class="abs high">93/93</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="25" class="abs high">25/25</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="126" class="abs high">126/126</td>
<td data-value="93" class="abs high">93/93</td>
</tr>
<tr>
<td class="file low" data-value="finance/src/stores"><a href="finance/src/stores/index.html">finance/src/stores</a></td>
<td data-value="0" class="pic low">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="17" class="abs low">0/17</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="1" class="abs low">0/1</td>
<td data-value="0" class="pct low">0%</td>
<td data-value="17" class="abs low">0/17</td>
</tr>
<tr>
<td class="file empty" data-value="finance/src/types"><a href="finance/src/types/index.html">finance/src/types</a></td>
<td data-value="0" class="pic empty">
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
</td>
<td data-value="0" class="pct empty">0%</td>
<td data-value="0" class="abs empty">0/0</td>
<td data-value="0" class="pct empty">0%</td>
<td data-value="1" class="abs empty">1/1</td>
<td data-value="0" class="pct empty">0%</td>
<td data-value="1" class="abs empty">1/1</td>
<td data-value="0" class="pct empty">0%</td>
<td data-value="0" class="abs empty">0/0</td>
</tr>
</tbody>
@@ -176,7 +416,7 @@
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2025-04-24T15:21:01.227Z
at 2025-04-24T19:21:13.627Z
</div>
<script src="prettify.js"></script>
<script>