Change how cards are listed on the cards page

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 {
@@ -103,6 +105,13 @@ export interface Metric {
   short: string;
 }
 
+export interface Currency {
+  id: number;
+  name: string;
+  iso_name: string;
+  symbol: string;
+}
+
 export const EntityTypes = {
   card: "Card",
   type: "Type",
@@ -112,6 +121,7 @@ export const EntityTypes = {
   transfer: "Transfer",
   payment: "Payment",
   metric: "Metric",
+  currency: "Currency",
 } as const;
 
 export type EntityName = keyof typeof EntityTypes;
@@ -124,6 +134,7 @@ export type EntityType<T extends EntityName> =
   T extends "transfer" ? Transfer :
   T extends "payment" ? Payment :
   T extends "metric" ? Metric :
+  T extends "currency" ? Currency :
   never;
 
 //

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"
@@ -180,7 +213,11 @@
         class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
       >
         <div>
-          <strong class="block text-lg">{card.name}</strong>
+          <strong class="text-lg">{card.name}</strong>
+          <span class="text-gray-600 text-sm">{`•${card.last_digits}`}</span>
+          <span
+            >{` ${currencies.find((curr) => curr.id == card.currency_id)?.symbol}`}</span
+          >
           <div class="text-sm text-gray-600">
             <span>
               Balance: {NumberToFPA(card.balance)},

src/routes/expense/+page.svelte

@@ -162,17 +162,6 @@
       {editingExpense ? "Edit Expense" : "Add New Expense"}
     </h2>
     <form onsubmit={saveExpense} class="space-y-4">
-      <label class="block">
-        <span class="text-gray-700">Value:</span>
-        <input
-          type="text"
-          oninput={handleValueInput}
-          bind:this={valueRef}
-          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="block">
         <span class="text-gray-700">Card:</span>
         <select
@@ -198,6 +187,27 @@
         </select>
       </label>
 
+      <label class="block">
+        <span class="text-gray-700">Value:</span>
+        <input
+          type="text"
+          oninput={handleValueInput}
+          bind:this={valueRef}
+          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="block">
+        <span class="text-gray-700">Comment:</span>
+        <input
+          type="text"
+          bind:value={currentExpense.comment}
+          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>
+
       <div class="flex items-center space-x-4">
         <label>
           Date: