src/lib/api.ts

@@ -134,13 +134,6 @@ export async function login(username: string, password: string, cookies?: Cookie
   }, cookies);
 }
 
-export async function register(username: string, password: string, cookies?: Cookies): Promise<LoginResponse> {
-  return apiFetch<LoginResponse>('/user/register', {
-    method: 'POST',
-    body: JSON.stringify({ username, password }),
-  }, cookies);
-}
-
 // Get user data function with type annotation for the response
 export async function getUserData(token: string): Promise<UserData> {
   return apiFetch<UserData>('/user/me', {

src/lib/entities.ts

@@ -51,58 +51,6 @@ export interface Transfer {
   date: string;
 }
 
-export interface Payment {
-  id: number;
-  card_id: number | null;
-  category_id: number | null;
-  user_id: number | null;
-  title: string;
-  descr: string;
-  note: string;
-  date: string; // ISO 8601 format
-  items: ItemBought[];
-}
-
-export interface ItemBought {
-  id: number;
-  new_name: string;
-  new_comment: string;
-  item_id: number;
-  payment_id: number;
-  type_id: number;
-  price: number;
-  quantity: number;
-  total_cost: number;
-  metric_type: number;
-  metric_value: number;
-}
-
-export interface Item {
-  id: number;
-  category_id: number;
-  current_price_id: number;
-  type_id: number;
-  name: string;
-  comment: string;
-  metric_type: number;
-  metric_value: number;
-  proteins: number;
-  carbs: number;
-  fats: number;
-  price: number;
-}
-
-export interface ItemFilter {
-  category_id: number;
-  type_id: number;
-}
-
-export interface Metric {
-  value: number;
-  name: string;
-  short: string;
-}
-
 export const EntityTypes = {
   card: "Card",
   type: "Type",
@@ -110,8 +58,6 @@ export const EntityTypes = {
   expense: "Expense",
   income: "Income",
   transfer: "Transfer",
-  payment: "Payment",
-  metric: "Metric",
 } as const;
 
 export type EntityName = keyof typeof EntityTypes;
@@ -122,8 +68,6 @@ export type EntityType<T extends EntityName> =
   T extends "expense" ? Expense :
   T extends "income" ? Income :
   T extends "transfer" ? Transfer :
-  T extends "payment" ? Payment :
-  T extends "metric" ? Metric :
   never;
 
 //
@@ -258,32 +202,3 @@ export async function remove(groupName: string, id: number, session?: string): P
     return { message: error.message };
   }
 }
-
-export async function filter<F, R>(groupName: string, data: F, session?: string): Promise<R | ErrorMessage> {
-  const url = `${BASE_API_URL}/${groupName}/filter`
-  const defaultHeaders = {
-    'Content-Type': 'application/json',
-  };
-
-  const headers = session
-    ? { ...defaultHeaders, Cookie: `session=${session}` }
-    : defaultHeaders
-
-  const config: RequestInit = {
-    method: 'POST',
-    headers,
-    body: JSON.stringify(data)
-  };
-
-  try {
-    const response = await fetch(url, config);
-    if (!response.ok) {
-      const body = await response.json()
-      throw new Error(`Failed to update ${groupName}: ${body.message}`);
-    }
-    return await response.json() as R;
-  } catch (err) {
-    const error = err as Error
-    return { message: error.message };
-  }
-}

src/routes/+layout.svelte

@@ -30,10 +30,6 @@
     {
     Path: "/transfer",
     Name: "Transfer",
-    },
-    {
-    Path: "/payment",
-    Name: "Payment",
     }
   ]
 </script>

src/routes/api/auth/login/+server.ts

@@ -1,16 +1,26 @@
 // src/routes/api/auth/login/+server.ts
 import { json } from '@sveltejs/kit';
 import { login } from '$lib/api';
-import type { RequestHandler } from './$types';
+import type { PageServerLoad } from '../../../test2/$types';
 
-export const POST: RequestHandler = async ({ request, cookies }) => {
+export const POST: PageServerLoad = async ({ request, cookies }) => {
+  console.log("in POST1")
   const authToken = request.headers.get('App-Token');
+  console.log("authToken = ", authToken)
+  console.log("it should be = ", import.meta.env.VITE_AUTH_APP_TOKEN)
   if (authToken !== import.meta.env.VITE_AUTH_APP_TOKEN) {
     return json({ error: 'Forbidden' }, { status: 403 });
   }
+  console.log("in POST2")
   const { username, password } = await request.json();
+
+  console.log("in POST3")
   try {
+    console.log("in POST4")
     const loginResponse = await login(username, password, cookies);
+    console.log("loginResponse = ", loginResponse)
+
+    console.log("in POST5")
     return json({ id: loginResponse.id, name: loginResponse.name });
   } catch (error) {
     return json({ error: error }, { status: 401 });

src/routes/api/auth/register/+server.ts

@@ -1,19 +0,0 @@
-// src/routes/api/auth/login/+server.ts
-import { json } from '@sveltejs/kit';
-import { register } from '$lib/api';
-import type { RequestHandler } from './$types';
-
-export const POST: RequestHandler = async ({ request, cookies }) => {
-  const authToken = request.headers.get('App-Token');
-  if (authToken !== import.meta.env.VITE_AUTH_APP_TOKEN) {
-    return json({ error: 'Forbidden' }, { status: 403 });
-  }
-  const { username, password } = await request.json();
-  try {
-    const registerResponse = await register(username, password, cookies);
-    return json({ id: registerResponse.id, name: registerResponse.name });
-  } catch (error) {
-    return json({ error: error }, { status: 401 });
-  }
-}
-

src/routes/api/item/filter/+server.ts

@@ -1,23 +0,0 @@
-import type { ErrorMessage } from "$lib/api";
-import { filter, type ItemFilter, type Item } from "$lib/entities";
-import type { RequestHandler } from "./$types";
-
-function isErrorMessage(value: any): value is ErrorMessage {
-  return value && typeof value.message === 'string';
-}
-
-export const POST: RequestHandler = async ({ request, cookies }): Promise<Response> => {
-  const session = cookies.get('session')
-
-  if (!session) {
-    throw new Response(JSON.stringify("no cookies"), { status: 401 })
-  }
-
-  const data: ItemFilter = await request.json();
-  const result = await filter<ItemFilter, Item>("item", data, session);
-  if (isErrorMessage(result)) {
-    return new Response(JSON.stringify(result), { status: 500 })
-  }
-  return new Response(JSON.stringify(result), { status: 200 })
-}
-

src/routes/login/+page.svelte

@@ -14,9 +14,7 @@
       return;
     }
     try {
-      const url =
-        selected == "login" ? "/api/auth/login" : "/api/auth/register";
-      const resp = await fetch(url, {
+      const resp = await fetch("/api/auth/login", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -36,31 +34,12 @@
       }
     }
   }
-  let selected = $state("login");
 </script>
 
 <Toasts />
 <div class="flex justify-center items-center min-h-screen bg-gray-100">
   <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
-    <div class="toggle-container">
-      <!-- Toggle Button -->
-      <div class="toggle">
-        <button
-          class:active={selected === "login"}
-          class="toggle-option"
-          onclick={() => (selected = "login")}
-        >
-          Login
-        </button>
-        <button
-          class:active={selected === "register"}
-          class="toggle-option"
-          onclick={() => (selected = "register")}
-        >
-          Register
-        </button>
-      </div>
-    </div>
+    <h1 class="text-2xl font-bold text-center mb-6">Login</h1>
     {#if error}
       <p class="text-red-500 text-center mb-4">{error}</p>
     {/if}
@@ -89,50 +68,12 @@
           placeholder="••••••••"
         />
       </div>
-      <div class="flex flex-row justify-center">
-        <button
-          type="submit"
-          class="submit-btn w-2/4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
-        >
-          {selected == "login" ? "Login" : "Register"}
-        </button>
-      </div>
+      <button
+        type="submit"
+        class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+      >
+        Login
+      </button>
     </form>
   </div>
 </div>
-
-<style>
-  .toggle-container {
-    margin: 10px;
-  }
-
-  .toggle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 2px solid #ccc;
-    border-radius: 9999px;
-    overflow: hidden;
-    margin-bottom: 20px;
-  }
-
-  .toggle-option {
-    flex: 1;
-    text-align: center;
-    padding: 10px;
-    cursor: pointer;
-    background-color: #f3f4f6; /* Default gray */
-    transition:
-      background-color 0.3s,
-      color 0.3s;
-  }
-
-  .toggle-option.active {
-    background-color: #3b82f6; /* Blue when selected */
-    color: white;
-  }
-
-  .submit-btn {
-    border-radius: 9999px;
-  }
-</style>

src/routes/payment/+page.svelte

@@ -1,497 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { type Metric, type Payment, type Item, type ItemBought, type Card, type Type, type Category, type ItemFilter } 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 selectableItems: Item[] = $state([]);
-  let payments: Payment[] = $state([]);
-  let cards: Card[] = $state([]);
-  let types: Type[] = $state([]);
-  let categories: Category[] = $state([]);
-  let metrics: Metric[] = $state([]);
-  let error: string | null = $state(null);
-  let editingPayment: Payment | null = $state(null);
-  const newPayment: Partial<Payment> = $state({
-    card_id: 0,
-    category_id: 0,
-    title: "",
-    descr: "",
-    note: "",
-    date: new Date().toISOString().slice(0, 10), // Default to today
-    items: [] as ItemBought[],
-  });
-
-  onMount(async () => {
-    await fetchPayments();
-    await fetchCards();
-    await fetchTypes();
-    await fetchCategories();
-    await fetchMetrics();
-  });
-
-  const fetchCategories = async () => {
-    const res = await fetch("/api/category/all");
-    if (!res.ok) {
-      error = "Failed to fetch payments";
-    } else {
-      categories = await res.json();
-    }
-  };
-  const fetchPayments = async () => {
-    const res = await fetch("/api/payment/all");
-    if (!res.ok) {
-      error = "Failed to fetch payments";
-    } else {
-      payments = await res.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 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 fetchMetrics() {
-    const result = await fetch("/api/metric/all");
-    if (!result.ok) {
-      const obj = await result.json();
-      error = obj.message;
-    } else {
-      metrics = await result.json();
-    }
-  }
-
-  const savePayment = async () => {
-    let url = editingPayment
-      ? `/api/payment/update/${editingPayment.id}`
-      : "/api/payment/create";
-    let method = editingPayment ? "PUT" : "POST";
-
-    const data = {
-      ...currentPayment,
-      card_id: Number(currentPayment.card_id),
-      category_id: Number(currentPayment.category_id),
-      date: constructedTime,
-    };
-
-    const res = await fetch(url, {
-      method,
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
-
-    if (!res.ok) {
-      error = "Failed to save payment";
-    } else {
-      fetchPayments();
-      editingPayment = null;
-    }
-  };
-
-  function editPayment(payment: Payment) {
-    editingPayment = { ...payment };
-  }
-
-  async function deletePayment(id: number) {
-    const response = await fetch(`/api/payment/delete`, {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ id }),
-    });
-    if (!response.ok) {
-      const { message } = await response.json();
-      console.log(message)
-      error = message;
-    } else {
-      await fetchPayments();
-    }
-  }
-
-  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((type) => type.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";
-  }
-
-  // let priceRefs: Map<number,  = new Map();
-  function createHandler(item: ItemBought) {
-    return function handlePriceInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-      const target = event.target as HTMLInputElement;
-      const rawValue = target.value.replace(/[^0-9]/g, "");
-      item.price = parseInt(rawValue || "0");
-      target.value = NumberToFPA(item.price);
-    };
-  }
-
-  async function filterItemsBasedOnCategoryID(categoryID: number) {
-    const data : ItemFilter = {
-      category_id: categoryID,
-      type_id: 0,
-    }
-    const response = await fetch(`/api/item/filter`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
-    if (!response.ok) {
-      const { message } = await response.json();
-      console.log(message)
-      error = message;
-    } else {
-      selectableItems = await response.json();
-    }
-  }
-
-  function handleCategoryChange(
-    event: Event & { currentTarget: EventTarget & HTMLSelectElement},) {
-    const target = event.target as HTMLSelectElement;
-    const categoryID = parseInt(target.value);
-    if (currentPayment.items && currentPayment.items.length > 0) {
-      const confirmDeleteItems = confirm(
-        `Changing the category to ${categoryID} will clear all items in payment. Do you want to proceed?`
-      )
-      if (confirmDeleteItems) {
-      currentPayment.items = []
-      }
-    }
-    filterItemsBasedOnCategoryID(categoryID)
-  }
-
-
-  const constructedTime = $derived(`${mutateDate}T${selectedTime}Z`);
-  const currentPayment = $derived(editingPayment ?? newPayment);
-  $inspect("currentPayment", currentPayment)
-  $inspect("items", currentPayment.items)
-</script>
-
-<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 Payments</h1>
-
-  <!-- Error Message -->
-  {#if $error}
-    <p class="bg-red-100 text-red-700 p-4 rounded">{$error}</p>
-  {/if}
-
-  <!-- Form for Adding/Editing Payment -->
-  <form onsubmit={savePayment} class="mb-8 p-6 bg-white rounded-lg shadow-md">
-    <h2 class="text-xl font-semibold mb-4">
-      {editingPayment ? "Edit Payment" : "Add New Payment"}
-    </h2>
-
-
-    <!-- Card -->
-    <label class="block">
-      <span class="text-gray-700">Card:</span>
-      <select
-        bind:value={currentPayment.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>
-
-    <!-- Category -->
-    <label class="block">
-      <span class="text-gray-700">Category:</span>
-      <select
-        bind:value={currentPayment.category_id}
-        onchange={handleCategoryChange}
-        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 categories as category}
-          <option value={category.id}>{category.name}</option>
-        {/each}
-      </select>
-    </label>
-
-    <!-- Title -->
-    <label class="block">
-      <span class="text-gray-700">Title:</span>
-      <input
-        type="text"
-        bind:value={currentPayment.title}
-        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"
-        required
-      />
-    </label>
-
-    <!-- Description -->
-    <label class="block">
-      <span class="text-gray-700">Description:</span>
-      <textarea
-        bind:value={currentPayment.descr}
-        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"
-      ></textarea>
-    </label>
-
-    <!-- Note -->
-    <label class="block">
-      <span class="text-gray-700">Note:</span>
-      <textarea
-        bind:value={currentPayment.note}
-        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"
-      ></textarea>
-    </label>
-
-    <!-- Date -->
-    <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>
-
-    <!-- {{{ ITEM BLOCK-->
-    <!-- Items -->
-    <div class="block">
-      <h3 class="text-gray-700 text-lg mb-2">Items:</h3>
-
-      <!-- Add Item Button -->
-      <button
-        type="button"
-        class="mb-4 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
-        onclick={() => {
-          currentPayment.items?.push({
-            id: 0,
-            new_name: "",
-            new_comment: "",
-            price: 0,
-            item_id: -1,
-            payment_id: 0,
-            type_id: 0,
-            quantity: 1,
-            total_cost: 0,
-            metric_type: 0,
-            metric_value: 0,
-          });
-        }}
-      >
-        + Add Item
-      </button>
-
-      {#each (currentPayment.items as ItemBought[])  as itemBought, index}
-        <div class="p-4 bg-white mb-4 rounded-lg shadow-md">
-          <h4 class="text-gray-600 mb-2">Item {index + 1}</h4>
-
-          <label class="block">
-            <span class="text-gray-700">Select or Enter Item:</span>
-            <div class="relative">
-              <!-- Select Existing Item -->
-              <select
-                bind:value={itemBought.item_id}
-                onchange={() => {
-                  itemBought.item_id = Number(itemBought.item_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"
-              >
-                <option value="" disabled selected>Select an item</option>
-                {#each selectableItems as selectableItem}
-                  <option value={selectableItem.id}
-                    >{selectableItem.name}</option
-                  >
-                {/each}
-                <option value={0}>+ Add New Item</option>
-              </select>
-
-              {#if itemBought.item_id == 0}
-                <!-- Input for New Item Name -->
-                <input
-                  type="text"
-                  bind:value={itemBought.new_name}
-                  placeholder="Enter new item name"
-                  class="mt-2 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
-                />
-                <!-- Input for New Item Comment-->
-                <input
-                  type="text"
-                  bind:value={itemBought.new_comment}
-                  placeholder="Enter new item comment"
-                  class="mt-2 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200 focus:border-indigo-500"
-                />
-              {/if}
-            </div>
-          </label>
-
-          <!-- Type -->
-          <label class="block">
-            <span class="text-gray-700">Type:</span>
-            <select
-              bind:value={itemBought.type_id}
-              style="color: {getTypeColor(itemBought.type_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 types as type}
-                <option style="color: {type.color};" value={type.id}>{type.name}</option>
-              {/each}
-            </select>
-          </label>
-
-          <!-- Price -->
-          <label class="block mt-4">
-            <span class="text-gray-700">Price:</span>
-            <input
-              type="number"
-              oninput={createHandler(itemBought)}
-              min="0"
-              step="0.01"
-              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"
-              required
-            />
-          </label>
-
-          <!-- Quantity -->
-          <label class="block mt-4">
-            <span class="text-gray-700">Quantity:</span>
-            <input
-              type="number"
-              bind:value={itemBought.quantity}
-              min="1"
-              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"
-              required
-            />
-          </label>
-
-
-          <!-- Total Cost -->
-          <div class="block mt-4">
-            <span class="text-gray-700">Total Cost:</span>
-            <span>{NumberToFPA(itemBought.price*itemBought.quantity) || ""}</span>
-          </div>
-
-          <!-- Metric Type -->
-          <label class="block mt-4">
-            <span class="text-gray-700">Metric Type:</span>
-            <select
-              bind:value={itemBought.metric_type}
-              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 metrics as metric}
-                <option value={metric.value}>{metric.name}</option>
-              {/each}
-            </select>
-          </label>
-
-          {#if itemBought.metric_type != 0}
-          <!-- Metric Value -->
-          <label class="block mt-4">
-            <span class="text-gray-700">Metric Value:</span>
-            <input
-              type="number"
-              bind:value={itemBought.metric_value}
-              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}
-
-          <!-- Remove Item Button -->
-          <button
-            type="button"
-            class="mt-4 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
-            onclick={() => currentPayment.items?.splice(index, 1)}
-          >
-            Remove Item
-          </button>
-        </div>
-      {/each}
-    </div>
-
-    <!-- }}}-->
-    <!-- Buttons -->
-    <div class="flex space-x-2 mt-4">
-      <button
-        type="submit"
-        class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600"
-      >
-        {editingPayment ? "Update Payment" : "Add Payment"}
-      </button>
-      {#if editingPayment}
-        <button
-          type="button"
-          onclick={() => {
-            editingPayment = null;
-          }}
-          class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
-        >
-          Cancel
-        </button>
-      {/if}
-    </div>
-  </form>
-
-  <!-- Payments List -->
-  <h2 class="text-xl font-semibold mb-4 text-center">Payments List</h2>
-  <ul class="space-y-4">
-    {#each payments as payment}
-      <li
-        class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center"
-      >
-        <div>
-          <strong class="block text-lg">{payment.title}</strong>
-          <p>{payment.descr}</p>
-          <div class="text-sm text-gray-600">
-            <span class="font-bold">Card:</span>
-            {payment.card_id}
-            <span class="font-bold">Category:</span>
-            {payment.category_id}
-            <span class="font-bold">Date:</span>
-            {payment.date}
-          </div>
-        </div>
-        <div class="flex space-x-2">
-          <button
-            onclick={() => editPayment(payment)}
-            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
-          >
-            Edit
-          </button>
-          <button
-            onclick={() => deletePayment(payment.id)}
-            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
-          >
-            Delete
-          </button>
-        </div>
-      </li>
-    {/each}
-  </ul>
-</div>