Structure coming along

src/routes/account/[slug]/+page.svelte

@@ -0,0 +1,70 @@
+
+<script>
+  let { data } = $props();
+  let trans = $state(data.transactions);
+  let notes = $state("");
+  let currentTransaction = $state(null);
+
+  function editNotes(transaction) {
+      my_modal_3.showModal()
+      currentTransaction = transaction;
+      notes = transaction.notes;
+  }
+  async function saveNotes() {
+    let res = fetch(`/transcation/${currentTransaction.id}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ notes:$state.snapshot(notes) })
+    })
+    my_modal_3.close();
+    let result = await res;
+    if (result.ok) {
+      // Update the transaction in the data
+      currentTransaction.notes = notes;
+      // Optionally, you can also update the UI or show a success message
+    } else {
+      // Handle error case
+      console.error("Failed to save notes");
+    }
+  }
+</script>
+
+<h1>Transcations</h1>
+<table class="table w-full">
+  <thead>
+    <tr>
+      <th>Date</th>
+      <th>Description</th>
+      <th>Amount</th>
+      <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each trans as transaction}
+      <tr class="hover:bg-base-300" onclick={() => editNotes(transaction)}>
+        <td>{transaction.date.toDateString()}</td>
+        <td>{transaction.description}</td>
+        <td>{transaction.amount}</td>
+        <td>{transaction.notes}</td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+
+<dialog id="my_modal_3" class="modal">
+  <div class="modal-box">
+    <form method="dialog">
+      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+    </form>
+    <h3>{currentTransaction?.description}</h3>
+    <h4>${currentTransaction?.amount}</h4>
+    <p> {currentTransaction?.date?.toDateString()}</p>
+        <div>
+        <textarea bind:value={notes} class="textarea w-100"/>
+        </div>
+        <button onclick={() => saveNotes()} class="btn btn-primary mt-4">Save</button>
+  </div>
+</dialog>