add live statistics

src/components/admin/table/DataTable.svelte

@@ -2,7 +2,6 @@
   import type { Writable } from 'svelte/store';
   import SortableTr from '@components/admin/table/SortableTr.svelte';
   import SortableTh from '@components/admin/table/SortableTh.svelte';
-  import Icon from '@iconify/svelte';
   import type { Snippet } from 'svelte';
   import { getObjectEntryByKey } from '@util/objects.ts';
 
@@ -64,12 +63,12 @@
             <td>
               {#if onEdit}
                 <button class="cursor-pointer" onclick={() => onEdit(d)}>
-                  <Icon icon="heroicons:pencil-square" />
+                  <span class="iconify iconify-[heroicons--pencil-square]"></span>
                 </button>
               {/if}
               {#if onDelete}
                 <button class="cursor-pointer" onclick={() => onDelete(d)}>
-                  <Icon icon="heroicons:trash" />
+                  <span class="iconify iconify-[heroicons--trash]"></span>
                 </button>
               {/if}
             </td>

src/components/admin/table/SortableTh.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getContext, type Snippet } from 'svelte';
   import type { Writable } from 'svelte/store';
-  import Icon from '@iconify/svelte';
 
   // types
   interface Props {
@@ -37,9 +36,9 @@
     <button class="flex items-center gap-1" onclick={() => onButtonClick()}>
       <span>{@render children?.()}</span>
       {#if $headerKey === key && asc}
-        <Icon icon="heroicons:chevron-up-16-solid" />
+        <span class="iconify iconify-[heroicons--chevron-up-16-solid]"></span>
       {:else}
-        <Icon icon="heroicons:chevron-down-16-solid" />
+        <span class="iconify iconify-[heroicons--chevron-down-16-solid]"></span>
       {/if}
     </button>
   {:else}

src/components/input/Password.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import Icon from '@iconify/svelte';
 
   interface Props {
     id?: string;
@@ -44,19 +43,21 @@
     />
     <button
       type="button"
+      aria-label="Hide password"
       class="absolute right-2 cursor-pointer z-10"
       class:hidden={!visible}
       onclick={() => (visible = !visible)}
     >
-      <Icon icon="heroicons:eye-16-solid" width={22} />
+      <span class="iconify iconify-[heroicons--eye-16-solid] w-[22px]"></span>
     </button>
     <button
       type="button"
+      aria-label="Show password"
       class="absolute right-2 cursor-pointer z-10"
       class:hidden={visible}
       onclick={() => (visible = !visible)}
     >
-      <Icon icon="heroicons:eye-slash-16-solid" width={22} />
+      <span class="iconify iconify-[heroicons--eye-slash-16-solid] w-[22px]"></span>
     </button>
   </div>
   <p class="fieldset-label">