Update Card interface to get and send new fields and add select for currency to cards

src/lib/entities.ts

@@ -18,6 +18,8 @@ export interface Card {
   have_credit_line: boolean;
   id: number;
   name: string;
+  last_digits: string;
+  currency_id: number;
 }
 
 export interface Category {

src/routes/card/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { type Card } from "$lib/entities";
+  import { type Card, type Currency } from "$lib/entities";
   import { NumberToFPA } from "$lib/util/fpa";
 
   let cards: Card[] = $state([]);
+  let currencies: Currency[] = $state([]);
   let error: string | null = $state(null);
   let editingCard: Card | null = $state(null);
   let newCard: Partial<Card> = $state({
@@ -16,6 +17,7 @@
   // Fetch all cards on page load
   onMount(async () => {
     await fetchCards();
+    await fetchCurrencies();
   });
 
   async function fetchCards() {
@@ -27,6 +29,15 @@
       cards = await result.json();
     }
   }
+  async function fetchCurrencies() {
+    const result = await fetch("/api/currency/all");
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      currencies = await result.json();
+    }
+  }
 
   async function saveCard() {
     const endpoint = editingCard ? `/api/card/update` : "/api/card/create";
@@ -134,6 +145,28 @@
           class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
         />
       </label>
+      <label class="block">
+        <span class="text-gray-700">Currency:</span>
+        <select
+          bind:value={currentCard.currency_id}
+          class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
+        >
+          {#each currencies as currency}
+            <option value={currency.id}
+              >{`${currency.symbol} (${currency.iso_name})`}</option
+            >
+          {/each}
+        </select>
+      </label>
+      <label class="block">
+        <span class="text-gray-700">Last 4 digits:</span>
+        <input
+          type="text"
+          bind:value={currentCard.last_digits}
+          required
+          class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
+        />
+      </label>
       <label class="flex items-center">
         <input
           type="checkbox"