Add path in navbar to expenses

src/lib/entities.ts

@@ -26,10 +26,20 @@ export interface Category {
   parent_id: number;
 }
 
+export interface Expense {
+  id: number;
+  card_id: number;
+  type_id: number;
+  value: number;
+  comment: string;
+  date: string;
+}
+
 export const EntityTypes = {
   card: "Card",
   type: "Type",
   category: "Category",
+  expense: "Expense",
 } as const;
 
 export type EntityName = keyof typeof EntityTypes;
@@ -37,6 +47,7 @@ export type EntityType<T extends EntityName> =
   T extends "card" ? Card :
   T extends "type" ? Type :
   T extends "category" ? Category :
+  T extends "expense" ? Expense :
   never;
 
 //

src/routes/+layout.svelte

@@ -30,6 +30,10 @@
     {
     Path: "/category",
     Name: "Categories",
+    },
+    {
+    Path: "/expense",
+    Name: "Expense",
     }
   ]
 </script>

src/routes/expense/+page.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { type Card, type Expense, type Type } from "$lib/entities";
+  import { selectedDate } from "$lib/stores/dateStore";
+
+  let mutateDate = $state($selectedDate);
+  let selectedTime = $state("00:00:00");
+  let expenses: Expense[] = $state([]);
+  let cards: Card[] = $state([]);
+  let types: Type[] = $state([]);
+  let error: string | null = $state(null);
+  let editingExpense: Expense | null = $state(null);
+  let newExpense: Partial<Expense> = $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/expense/all");
+    if (!result.ok) {
+      const obj = await result.json();
+      error = obj.message;
+    } else {
+      expenses = await result.json();
+    }
+  }
+
+  async function saveExpense() {
+    const endpoint = editingExpense
+      ? `/api/expense/update`
+      : "/api/expense/create";
+    const method = editingExpense ? "PUT" : "POST";
+
+    const data = {
+      ...currentExpense,
+      card_id: Number(currentExpense.card_id),
+      value: Number(currentExpense.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 (editingExpense) {
+        editingExpense = null;
+      } else {
+        newExpense = {
+          card_id: 0,
+          value: 0,
+          comment: "",
+          date: "",
+        };
+      }
+    }
+  }
+
+  function editExpense(expense: Expense) {
+    editingExpense = { ...expense };
+    const parts = expense.date.split("T");
+    mutateDate = parts[0];
+    selectedTime = parts[1].split("Z")[0];
+  }
+
+  async function deleteExpense(id: number) {
+    const response = await fetch(`/api/expense/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";
+  }
+  function getTypeColor(typeId: number) {
+    if (typeId === 0) return "None";
+    const type = types.find((card) => card.id === typeId);
+    return type ? type.color : "#000";
+  }
+  function getTypeName(typeId: number) {
+    if (typeId === 0) return "None";
+    const type = types.find((card) => card.id === typeId);
+    return type ? type.name : "Unknown";
+  }
+
+  const constructedTime = $derived(`${mutateDate}T${selectedTime}Z`);
+  const currentExpense = $derived(editingExpense ?? newExpense);
+  const selectedType = $derived(
+    types.find((type) => type.id == currentExpense.type_id) || {
+      color: "#fff",
+    },
+  );
+  $inspect(currentExpense);
+  $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 Categories</h1>
+
+  <div class="mb-8 p-6 bg-white rounded-lg shadow-md">
+    <h2 class="text-xl font-semibold mb-4">
+      {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"
+          bind:value={currentExpense.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"
+        />
+      </label>
+
+      <label class="block">
+        <span class="text-gray-700">Card:</span>
+        <select
+          bind:value={currentExpense.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>
+
+      <label class="block">
+        <span class="text-gray-700">Type:</span>
+        <select
+          bind:value={currentExpense.type_id}
+          style="color: {selectedType.color};"
+          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 types as type}
+            <option value={type.id}>{type.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"
+        >
+          {editingExpense ? "Update Expense" : "Add Expense"}
+        </button>
+        {#if editingExpense}
+          <button
+            type="button"
+            onclick={() => (editingExpense = 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">Categories List</h2>
+  <ul class="space-y-4">
+    {#each expenses as expense}
+      <li
+        class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
+      >
+        <div>
+          <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)}
+            <span class="font-bold">Type:</span>
+            <span style="color: {getTypeColor(expense.type_id)};"
+              >{getTypeName(expense.type_id)}</span
+            >
+            <span class="font-bold">Date:</span>
+            {expense.date}
+          </div>
+        </div>
+        <div class="flex space-x-2">
+          <button
+            onclick={() => editExpense(expense)}
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+          >
+            Edit
+          </button>
+          <button
+            onclick={() => deleteExpense(expense.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/test2/+page.svelte

@@ -1,7 +1,11 @@
-<script>
+<script lang="ts">
+  import ColorPicker from "$lib/components/ColorPicker.svelte";
   import { addSuccessToast } from "$lib/components/store";
   import Toasts from "$lib/components/Toasts.svelte";
+  import { selectedDate } from "$lib/stores/dateStore";
+
   let { data } = $props();
+  let selectedColor = $state("#ff0000");
 
   function testNotification() {
     console.log("Tested!");
@@ -20,6 +24,10 @@
   async function test3() {
     console.log(data);
   }
+
+  function handleColorChange(event: CustomEvent) {
+    selectedColor = event.detail;
+  }
 </script>
 
 <Toasts />
@@ -43,4 +51,8 @@
   >
     Click Me3!
   </button>
+  <ColorPicker on:change={handleColorChange} borderRadius="50%" />
+  <p>Selected color: {selectedColor}</p>
+  <h1>Selected Date</h1>
+  <p>The date you selected in the navbar is: {$selectedDate}</p>
 </div>