feat: init tools page (#271)

frontend/components/App/ImportDialog.vue

@@ -53,11 +53,16 @@
   );
 
   function setFile(e: Event) {
-    importCsv.value = e.target.files[0];
+    const result = e.target as HTMLInputElement;
+    if (!result.files || result.files.length === 0) {
+      return;
+    }
+
+    importCsv.value = result.files[0];
   }
 
   function uploadCsv() {
-    importRef.value.click();
+    importRef.value?.click();
   }
 
   const eventBus = useEventBus();
@@ -86,5 +91,7 @@
     }
 
     eventBus.emit(EventTypes.InvalidStores);
+
+    toast.success("Import successful!");
   }
 </script>

frontend/components/DetailAction.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-10 py-6">
+    <div class="col-span-3">
+      <h4 class="mb-1 text-lg font-semibold">
+        <slot name="title"></slot>
+      </h4>
+      <p class="text-sm">
+        <slot></slot>
+      </p>
+    </div>
+    <BaseButton class="btn-primary mt-auto" @click="$emit('action')">
+      <slot name="button">
+        <slot name="title"></slot>
+      </slot>
+    </BaseButton>
+  </div>
+</template>