feat: new dashboard implementation (#168)

* wip: charts.js experimental work

* update lock file

* wip: frontend redesign

* wip: more UI fixes for consistency across themes

* cleanup

* improve UI log

* style updates

* fix lint errors

frontend/components/App/ImportDialog.vue

@@ -0,0 +1,90 @@
+<template>
+  <BaseModal v-model="dialog">
+    <template #title> Import CSV File </template>
+    <p>
+      Import a CSV file containing your items, labels, and locations. See documentation for more information on the
+      required format.
+    </p>
+
+    <form @submit.prevent="submitCsvFile">
+      <div class="flex flex-col gap-2 py-6">
+        <input ref="importRef" type="file" class="hidden" accept=".csv,.tsv" @change="setFile" />
+
+        <BaseButton type="button" @click="uploadCsv">
+          <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
+          Upload
+        </BaseButton>
+        <p class="text-center pt-4 -mb-5">
+          {{ importCsv?.name }}
+        </p>
+      </div>
+
+      <div class="modal-action">
+        <BaseButton type="submit" :disabled="!importCsv"> Submit </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+  type Props = {
+    modelValue: boolean;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: false,
+  });
+
+  const emit = defineEmits(["update:modelValue"]);
+
+  const dialog = useVModel(props, "modelValue", emit);
+
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const importCsv = ref<File | null>(null);
+  const importLoading = ref(false);
+  const importRef = ref<HTMLInputElement>();
+  whenever(
+    () => !dialog.value,
+    () => {
+      importCsv.value = null;
+    }
+  );
+
+  function setFile(e: Event) {
+    importCsv.value = e.target.files[0];
+  }
+
+  function uploadCsv() {
+    importRef.value.click();
+  }
+
+  const eventBus = useEventBus();
+
+  async function submitCsvFile() {
+    if (!importCsv.value) {
+      toast.error("Please select a file to import.");
+      return;
+    }
+
+    importLoading.value = true;
+
+    const { error } = await api.items.import(importCsv.value);
+
+    if (error) {
+      toast.error("Import failed. Please try again later.");
+    }
+
+    // Reset
+    dialog.value = false;
+    importLoading.value = false;
+    importCsv.value = null;
+
+    if (importRef.value) {
+      importRef.value.value = "";
+    }
+
+    eventBus.emit(EventTypes.ClearStores);
+  }
+</script>