Update. Add svelte admin frontend

web/frontend/src/lib/GenericForm.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" generics="T">
+  export let formData: T;
+  export let onSubmit: (data: T) => void;
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    onSubmit(formData);
+  }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+  <slot />
+  <button type="submit">Submit</button>
+</form>

web/frontend/src/lib/Table.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface Props {
+    columns: string[];
+    records: any;
+    removeRowHandler: (id: number) => void;
+  }
+
+  let { columns, records, removeRowHandler }: Props = $props();
+</script>
+
+<table class="table">
+  <thead>
+    <tr>
+      {#each columns as col}
+        <th scope="col">{col}</th>
+      {/each}
+      <th scope="col">edit</th>
+      <th scope="col">remove</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each records as row}
+      <tr>
+        {#each columns as col}
+          <td>{row[col]}</td>
+        {/each}
+        <td>
+          <button
+            onclick={() => removeRowHandler(row.id)}
+            class="btn btn-outline-success align-items-center"
+            aria-label="Edit record"
+          >
+            <i class="bi bi-pencil"></i>
+          </button>
+        </td>
+        <td>
+          <button
+            onclick={() => removeRowHandler(row.id)}
+            class="btn btn-outline-danger align-items-center"
+            aria-label="Remove record"
+          >
+            <i class="bi bi-x-lg"></i>
+          </button>
+        </td>
+      </tr>
+    {/each}
+  </tbody>
+</table>