src/lib/entities.ts

@@ -35,14 +35,6 @@ export interface Expense {
   date: string;
 }
 
-export interface Income {
-  id: number;
-  card_id: number;
-  value: number;
-  comment: string;
-  date: string;
-}
-
 export interface Transfer {
   id: number;
   from_card_id: number;
@@ -56,7 +48,6 @@ export const EntityTypes = {
   type: "Type",
   category: "Category",
   expense: "Expense",
-  income: "Income",
   transfer: "Transfer",
 } as const;
 
@@ -66,7 +57,6 @@ export type EntityType<T extends EntityName> =
   T extends "type" ? Type :
   T extends "category" ? Category :
   T extends "expense" ? Expense :
-  T extends "income" ? Income :
   T extends "transfer" ? Transfer :
   never;
 

src/lib/util/fpa.ts

@@ -1,5 +0,0 @@
-
-
-export const NumberToFPA = (value: number): string => {
-  return (value / 100).toFixed(2);
-}

src/routes/+layout.svelte

@@ -7,6 +7,18 @@
   import UserIcon from '$lib/icons/UserIcon.svelte';
 
   const paths = [
+    {
+    Path: "/ping",
+    Name: "ping",
+    },
+    {
+    Path: "/test",
+    Name: "test",
+    },
+    {
+    Path: "/test2",
+    Name: "test2",
+    },
     {
     Path: "/card",
     Name: "Cards",
@@ -24,9 +36,6 @@
     Name: "Expense",
     },
     {
-    Path: "/income",
-    Name: "Income",
-    },
     Path: "/transfer",
     Name: "Transfer",
     }

src/routes/card/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { type Card } from "$lib/entities";
-  import { NumberToFPA } from "$lib/util/fpa";
 
   let cards: Card[] = $state([]);
   let error: string | null = $state(null);
@@ -58,12 +57,6 @@
 
   function editCard(card: Card) {
     editingCard = { ...card };
-    if (balanceRef) {
-      balanceRef.value = NumberToFPA(card.balance);
-    }
-    if (creditLineRef) {
-      creditLineRef.value = NumberToFPA(card.credit_line);
-    }
   }
 
   async function deleteCard(id: number) {
@@ -80,27 +73,7 @@
     }
   }
 
-  let balanceRef: HTMLInputElement | null = $state(null);
-  let creditLineRef: HTMLInputElement | null = $state(null);
-  function handleBalanceInput(
-    event: Event & { currentTarget: EventTarget & HTMLInputElement },
-  ): void {
-    const target = event.target as HTMLInputElement;
-    const rawValue = target.value.replace(/[^0-9]/g, "");
-    currentCard.balance = parseInt(rawValue || "0");
-    target.value = NumberToFPA(currentCard.balance);
-  }
-  function handleCreditLineInput(
-    event: Event & { currentTarget: EventTarget & HTMLInputElement },
-  ): void {
-    const target = event.target as HTMLInputElement;
-    const rawValue = target.value.replace(/[^0-9]/g, "");
-    currentCard.credit_line = parseInt(rawValue || "0");
-    target.value = NumberToFPA(currentCard.credit_line);
-  }
-
   const currentCard = $derived(editingCard ?? newCard);
-  $inspect("currentCard = ", currentCard);
 </script>
 
 {#if error}
@@ -127,13 +100,22 @@
       <label class="block">
         <span class="text-gray-700">Balance:</span>
         <input
-          type="text"
+          type="number"
-          oninput={handleBalanceInput}
+          bind:value={currentCard.balance}
-          bind:this={balanceRef}
           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>
+      {#if currentCard.have_credit_line}
+        <label class="block">
+          <span class="text-gray-700">Credit Line:</span>
+          <input
+            type="number"
+            bind:value={currentCard.credit_line}
+            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>
+      {/if}
       <label class="flex items-center">
         <input
           type="checkbox"
@@ -142,17 +124,6 @@
         />
         <span class="ml-2 text-gray-700">Have Credit Line</span>
       </label>
-      {#if currentCard.have_credit_line}
-        <label class="block">
-          <span class="text-gray-700">Credit Line:</span>
-          <input
-            type="number"
-            oninput={handleCreditLineInput}
-            bind:this={creditLineRef}
-            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>
-      {/if}
       <div class="flex space-x-2">
         <button
           type="submit"
@@ -182,14 +153,8 @@
         <div>
           <strong class="block text-lg">{card.name}</strong>
           <div class="text-sm text-gray-600">
-            <span>
+            Balance: {card.balance}, Credit Line: {card.credit_line},{" "}
-              Balance: {NumberToFPA(card.balance)},
+            Have Credit Line: {card.have_credit_line ? "Yes" : "No"}
-            </span>
-            {#if card.have_credit_line}
-              Credit Line: {NumberToFPA(card.credit_line)}
-            {:else}
-              No Credit Line
-            {/if}
           </div>
         </div>
         <div class="flex space-x-2">

src/routes/expense/+page.svelte

@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import { type Card, type Expense, type Type } from "$lib/entities";
   import { selectedDate } from "$lib/stores/dateStore";
-  import { NumberToFPA } from "$lib/util/fpa";
 
   let mutateDate = $state($selectedDate);
   let selectedTime = $state("00:00:00");
@@ -93,9 +92,6 @@
     const parts = expense.date.split("T");
     mutateDate = parts[0];
     selectedTime = parts[1].split("Z")[0];
-    if (valueRef) {
-      valueRef.value = NumberToFPA(expense.value);
-    }
   }
 
   async function deleteExpense(id: number) {
@@ -129,16 +125,6 @@
     return type ? type.name : "Unknown";
   }
 
-  let valueRef: HTMLInputElement | null = $state(null);
-  function handleValueInput(
-    event: Event & { currentTarget: EventTarget & HTMLInputElement },
-  ): void {
-    const target = event.target as HTMLInputElement;
-    const rawValue = target.value.replace(/[^0-9]/g, "");
-    currentExpense.value = parseInt(rawValue || "0");
-    target.value = NumberToFPA(currentExpense.value);
-  }
-
   const constructedTime = $derived(`${mutateDate}T${selectedTime}Z`);
   const currentExpense = $derived(editingExpense ?? newExpense);
   const selectedType = $derived(
@@ -166,8 +152,7 @@
         <span class="text-gray-700">Value:</span>
         <input
           type="text"
-          oninput={handleValueInput}
+          bind:value={currentExpense.value}
-          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"
         />
@@ -245,7 +230,7 @@
         class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
       >
         <div>
-          <strong class="block text-lg">{NumberToFPA(expense.value)}</strong>
+          <strong class="block text-lg">{expense.value}</strong>
           <div class="text-sm text-gray-600">
             <span class="font-bold">Card:</span>
             {getCardName(expense.card_id)}

src/routes/income/+page.svelte

@@ -1,245 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { type Card, type Income, type Type } from "$lib/entities";
-  import { selectedDate } from "$lib/stores/dateStore";
-  import { NumberToFPA } from "$lib/util/fpa";
-
-  let mutateDate = $state($selectedDate);
-  let selectedTime = $state("00:00:00");
-  let incomes: Income[] = $state([]);
-  let cards: Card[] = $state([]);
-  let types: Type[] = $state([]);
-  let error: string | null = $state(null);
-  let editingIncome: Income | null = $state(null);
-  let newIncome: Partial<Income> = $state({
-    card_id: 0,
-    value: 0,
-    comment: "",
-    date: "2006-01-02T15:04:05Z",
-  });
-
-  onMount(async () => {
-    await fetchCategories();
-    await fetchCards();
-    await fetchTypes();
-  });
-
-  async function fetchTypes() {
-    const result = await fetch("/api/type/all");
-    if (!result.ok) {
-      const obj = await result.json();
-      error = obj.message;
-    } else {
-      types = await result.json();
-    }
-  }
-  async function fetchCards() {
-    const result = await fetch("/api/card/all");
-    if (!result.ok) {
-      const obj = await result.json();
-      error = obj.message;
-    } else {
-      cards = await result.json();
-    }
-  }
-  async function fetchCategories() {
-    const result = await fetch("/api/income/all");
-    if (!result.ok) {
-      const obj = await result.json();
-      error = obj.message;
-    } else {
-      incomes = await result.json();
-    }
-  }
-
-  async function saveIncome() {
-    const endpoint = editingIncome
-      ? `/api/income/update`
-      : "/api/income/create";
-    const method = editingIncome ? "PUT" : "POST";
-
-    const data = {
-      ...currentIncome,
-      card_id: Number(currentIncome.card_id),
-      value: Number(currentIncome.value),
-      date: constructedTime,
-    };
-    const response = await fetch(endpoint, {
-      method,
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
-
-    if (!response.ok) {
-      const { message } = await response.json();
-      error = message;
-    } else {
-      await fetchCategories();
-      if (editingIncome) {
-        editingIncome = null;
-      } else {
-        newIncome = {
-          card_id: 0,
-          value: 0,
-          comment: "",
-          date: "",
-        };
-      }
-    }
-  }
-
-  function editIncome(income: Income) {
-    editingIncome = { ...income };
-    const parts = income.date.split("T");
-    mutateDate = parts[0];
-    selectedTime = parts[1].split("Z")[0];
-    if (valueRef) {
-      valueRef.value = NumberToFPA(income.value);
-    }
-  }
-
-  async function deleteIncome(id: number) {
-    const response = await fetch(`/api/income/delete`, {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ id }),
-    });
-    if (!response.ok) {
-      const { message } = await response.json();
-      error = message;
-    } else {
-      await fetchCategories();
-    }
-  }
-
-  // Helper function to get the name of the parent category
-  function getCardName(cardId: number) {
-    if (cardId === 0) return "None";
-    const card = cards.find((card) => card.id === cardId);
-    return card ? card.name : "Unknown";
-  }
-
-  let valueRef: HTMLInputElement | null = $state(null);
-  function handleValueInput(
-    event: Event & { currentTarget: EventTarget & HTMLInputElement },
-  ): void {
-    const target = event.target as HTMLInputElement;
-    const rawValue = target.value.replace(/[^0-9]/g, "");
-    currentIncome.value = parseInt(rawValue || "0");
-    target.value = NumberToFPA(currentIncome.value);
-  }
-
-  const constructedTime = $derived(`${mutateDate}T${selectedTime}Z`);
-  const currentIncome = $derived(editingIncome ?? newIncome);
-  $inspect(currentIncome);
-  $inspect("constructedTime = ", constructedTime);
-</script>
-
-{#if error}
-  <p class="bg-red-100 text-red-700 p-4 rounded">{error}</p>
-{/if}
-
-<div class="container mx-auto my-8 p-6 bg-gray-100 rounded-lg shadow-lg">
-  <h1 class="text-2xl font-bold mb-4 text-center">Manage Incomes</h1>
-
-  <div class="mb-8 p-6 bg-white rounded-lg shadow-md">
-    <h2 class="text-xl font-semibold mb-4">
-      {editingIncome ? "Edit Income" : "Add New Income"}
-    </h2>
-    <form onsubmit={saveIncome} 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
-          bind:value={currentIncome.card_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 cards as card}
-            <option value={card.id}>{card.name}</option>
-          {/each}
-        </select>
-      </label>
-
-      <div class="flex items-center space-x-4">
-        <label>
-          Date:
-          <input
-            type="date"
-            bind:value={mutateDate}
-            class="bg-gray-800 text-white p-2 rounded-md border border-gray-700"
-          />
-        </label>
-
-        <label>
-          Time:
-          <input
-            type="time"
-            bind:value={selectedTime}
-            class="bg-gray-800 text-white p-2 rounded-md border border-gray-700"
-          />
-        </label>
-      </div>
-
-      <div class="flex space-x-2">
-        <button
-          type="submit"
-          class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600"
-        >
-          {editingIncome ? "Update Income" : "Add Income"}
-        </button>
-        {#if editingIncome}
-          <button
-            type="button"
-            onclick={() => (editingIncome = null)}
-            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
-          >
-            Cancel
-          </button>
-        {/if}
-      </div>
-    </form>
-  </div>
-
-  <h2 class="text-xl font-semibold mb-4 text-center">Incomes List</h2>
-  <ul class="space-y-4">
-    {#each incomes as income}
-      <li
-        class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
-      >
-        <div>
-          <strong class="block text-lg">{NumberToFPA(income.value)}</strong>
-          <div class="text-sm text-gray-600">
-            <span class="font-bold">Card:</span>
-            {getCardName(income.card_id)}
-            <span class="font-bold">Date:</span>
-            {income.date}
-          </div>
-        </div>
-        <div class="flex space-x-2">
-          <button
-            onclick={() => editIncome(income)}
-            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
-          >
-            Edit
-          </button>
-          <button
-            onclick={() => deleteIncome(income.id)}
-            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
-          >
-            Delete
-          </button>
-        </div>
-      </li>
-    {/each}
-  </ul>
-</div>

src/routes/transfer/+page.svelte

@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import { type Card, type Transfer } from "$lib/entities";
   import { selectedDate } from "$lib/stores/dateStore";
-  import { NumberToFPA } from "$lib/util/fpa";
 
   let mutateDate = $state($selectedDate);
   let selectedTime = $state("00:00:00");
@@ -30,7 +29,6 @@
       cards = await result.json();
     }
   }
-
   async function fetchCategories() {
     const result = await fetch("/api/transfer/all");
     if (!result.ok) {
@@ -106,15 +104,6 @@
     return card ? card.name : "Unknown";
   }
 
-  function handleValueInput(
-    event: Event & { currentTarget: EventTarget & HTMLInputElement },
-  ): void {
-    const target = event.target as HTMLInputElement;
-    const rawValue = target.value.replace(/[^0-9]/g, "");
-    currentTransfer.value = parseInt(rawValue || "0");
-    target.value = NumberToFPA(currentTransfer.value);
-  }
-
   const constructedTime = $derived(`${mutateDate}T${selectedTime}Z`);
   const currentTransfer = $derived(editingTransfer ?? newTransfer);
   $inspect(currentTransfer);
@@ -165,7 +154,7 @@
         <span class="text-gray-700">Value:</span>
         <input
           type="text"
-          oninput={handleValueInput}
+          bind:value={currentTransfer.value}
           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"
         />
@@ -218,7 +207,7 @@
         class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
       >
         <div>
-          <strong class="block text-lg">{NumberToFPA(transfer.value)}</strong>
+          <strong class="block text-lg">{transfer.value}</strong>
           <div class="text-sm text-gray-600">
             <span class="font-bold">From:</span>
             {getCardName(transfer.from_card_id)}