finishes trail create

web/src/lib/components/base/button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    export let type: "button" | "submit" | "reset" | null | undefined =
+        undefined;
+    export let icon: string = "";
+    export let extraClasses: string = "";
+    export let primary: boolean = false;
+    export let secondary: boolean = false;
+    export let large: boolean = false;
+    export let loading: boolean = false;
+    export let disabled: boolean = false;
+</script>
+
+<button
+    class={extraClasses}
+    class:btn-primary={primary}
+    class:btn-secondary={secondary}
+    class:btn-large={large}
+    class:btn-disabled={disabled || loading}
+    disabled={disabled || loading}
+    on:click
+    {type}
+>
+    {#if !loading}
+        {#if icon}
+            <i class="fa fa-{icon} mr-2"></i>
+        {/if}
+        <slot />
+    {:else}
+        <div class="spinner"></div>
+    {/if}
+</button>

web/src/lib/components/base/datepicker.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let name: string = "";
+    export let value: string | number | Date = "";
+    export let label: string = "";
+    export let error: string = "";
+</script>
+
+<div>
+    {#if label.length}
+        <p class="text-sm font-medium pb-1">
+            {label}
+        </p>
+    {/if}
+    <div class="flex items-center gap-2">
+        <input
+            {name}
+            class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
+            class:border-red-400={error.length > 0}
+            class:bg-red-50={error.length > 0}
+            type="date"
+            bind:value
+            on:change
+        />
+    </div>
+
+    <span class="textfield-error text-xs text-red-400">
+        {error}
+    </span>
+</div>

web/src/lib/components/base/dropdown.svelte

@@ -7,7 +7,9 @@
 
     let isOpen = false;
 
-    function toggleMenu() {
+    function toggleMenu(e: MouseEvent) {
+        e.stopPropagation();
+        e.preventDefault();
         isOpen = !isOpen;
     }
 
@@ -15,8 +17,8 @@
         isOpen = false;
     }
 
-    function handleItemClick(item: { text: string, value: any }) {
-        dispatch("change", item);       
+    function handleItemClick(item: { text: string; value: any }) {
+        dispatch("change", item);
         closeMenu();
     }
 </script>
@@ -27,6 +29,7 @@
     <button
         class="hover:bg-gray-100 w-8 h-8 rounded-full"
         on:click={toggleMenu}
+        type="button"
     >
         <i class="fa fa-ellipsis-vertical"></i>
     </button>
@@ -42,8 +45,8 @@
                 <li
                     class="menu-item p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
                     tabindex="0"
-                    on:mouseup={() => handleItemClick(item)}
-                    on:keydown={() => handleItemClick(item)}
+                    on:mouseup|stopPropagation={() => handleItemClick(item)}
+                    on:keydown|stopPropagation={() => handleItemClick(item)}
                 >
                     {item.text}
                 </li>

web/src/lib/components/base/select.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    export let name: string = "";
     export let value: any;
     export let items: { text: string; value: any }[] = [];
     export let label: string = "";
@@ -11,6 +12,7 @@
         </p>
     {/if}
     <select
+        {name}
         class="bg-gray-50 h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-gray-200 rounded-md focus:outline-primary transition-colors"
         bind:value
     >

web/src/lib/components/base/text_field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    export let name: string = "";
     export let value: string | number = "";
     export let placeholder: string = "";
     export let label: string = "";
@@ -17,6 +18,7 @@
             <i class="fa fa-{icon}"></i>
         {/if}
         <input
+            {name}
             class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
             class:border-red-400={error.length > 0}
             class:bg-red-50={error.length > 0}

web/src/lib/components/base/textarea.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    export let name: string = "";
     export let value: string | number = "";
     export let placeholder: string = "";
     export let rows: number = 3;
@@ -13,6 +14,7 @@
         </p>
     {/if}
     <textarea
+        {name}
         class="bg-gray-50 border rounded-md p-3 resize-none transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
         {rows}
         {placeholder}