From fe8890013e94ed12bcf946988560f86073350166 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 27 Apr 2026 17:37:26 +0200
Subject: [PATCH 01/14] feat(CSVPreview): A preview of a csv file

---
 app/components/FileSelector.vue             |   6 +-
 app/components/FileUploader.vue             | 105 +++++++-
 app/components/MissingFilesSelector.vue     |  25 +-
 app/components/ObjectSelector.vue           |   5 +
 app/components/csv-preview/CsvPreviewer.vue | 255 ++++++++++++++++++++
 app/components/csv-preview/CsvSettings.vue  | 150 ++++++++++++
 app/components/csv-preview/CsvTable.vue     | 107 ++++++++
 7 files changed, 643 insertions(+), 10 deletions(-)
 create mode 100644 app/components/csv-preview/CsvPreviewer.vue
 create mode 100644 app/components/csv-preview/CsvSettings.vue
 create mode 100644 app/components/csv-preview/CsvTable.vue

diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index bbbf593a..bdd0c0db 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -48,7 +48,11 @@ async function get_allowed_files() {
   toggle_loading();
   const geodeStore = useGeodeStore();
   const response = await geodeStore.request(schema, {});
-  accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
+  const extensions = response.extensions.map((extension) => `.${extension}`);
+  if (!extensions.includes(".csv")) {
+    extensions.push(".csv");
+  }
+  accept.value = extensions.join(",");
   toggle_loading();
 }
 
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 83712a4d..476ef069 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -3,6 +3,7 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 import { useTemplateRef } from "vue";
 
 import DragAndDrop from "@ogw_front/components/DragAndDrop";
+import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
@@ -13,6 +14,7 @@ const {
   auto_upload,
   mini,
   show_overlay: showOverlay,
+  allow_csv_config: allowCsvConfig,
 } = defineProps({
   multiple: { type: Boolean, required: true },
   accept: { type: String, required: true },
@@ -20,6 +22,7 @@ const {
   auto_upload: { type: Boolean, required: false, default: false },
   mini: { type: Boolean, required: false, default: false },
   show_overlay: { type: Boolean, required: false, default: true },
+  allow_csv_config: { type: Boolean, required: false, default: false },
 });
 
 const geodeStore = useGeodeStore();
@@ -29,8 +32,38 @@ const loading = ref(false);
 const files_uploaded = ref(false);
 const dragAndDropRef = useTemplateRef("dragAndDropRef");
 
+const csv_dialog = ref(false);
+const current_csv_file = ref(null);
+const current_csv_index = ref(-1);
+
 const toggle_loading = useToggle(loading);
 
+function isCsv(file) {
+  return allowCsvConfig && file.name.toLowerCase().endsWith(".csv");
+}
+
+function openCsvPreviewer(file, index) {
+  current_csv_file.value = file;
+  current_csv_index.value = index;
+  csv_dialog.value = true;
+}
+
+function onCsvConfirm(result) {
+  const json_content = JSON.stringify(result, null, 2);
+  const blob = new Blob([json_content], { type: "application/json" });
+  const json_filename = `${current_csv_file.value.name}.json`;
+  const json_file = new File([blob], json_filename, {
+    type: "application/json",
+  });
+
+  // Keep original CSV and append JSON config file
+  internal_files.value.push(json_file);
+  csv_dialog.value = false;
+
+  // Mark CSV as configured (for UI purposes)
+  current_csv_file.value.isConfigured = true;
+}
+
 function processSelectedFiles(selected_files) {
   if (multiple) {
     internal_files.value = [...internal_files.value, ...selected_files];
@@ -48,6 +81,27 @@ function removeFile(index) {
 }
 
 async function upload_files() {
+  const hasUnconfiguredCsv = internal_files.value.some((file) => isCsv(file) && !file.isConfigured);
+  if (hasUnconfiguredCsv) {
+    const index = internal_files.value.findIndex((file) => isCsv(file) && !file.isConfigured);
+    openCsvPreviewer(internal_files.value[index], index);
+    return;
+  }
+
+  // Dev-only: download config JSON files
+  internal_files.value.forEach((file) => {
+    if (file.name.endsWith(".csv.json")) {
+      const url = URL.createObjectURL(file);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = file.name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  });
+
   toggle_loading();
   const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
@@ -75,7 +129,10 @@ watch(
 watch(internal_files, (value) => {
   files_uploaded.value = false;
   if (auto_upload && value.length > 0) {
-    upload_files();
+    const hasUnconfiguredCsv = value.some((file) => isCsv(file));
+    if (!hasUnconfiguredCsv) {
+      upload_files();
+    }
   }
 });
 </script>
@@ -143,8 +200,25 @@ watch(internal_files, (value) => {
         style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
-        <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
+        <v-icon start size="18" :color="file.name.endsWith('.json') ? 'success' : 'primary'">
+          {{ file.name.endsWith(".json") ? "mdi-file-code" : "mdi-file-outline" }}
+        </v-icon>
         <span class="text-white">{{ file.name }}</span>
+
+        <v-tooltip v-if="isCsv(file)" text="Configure CSV" location="bottom">
+          <template #activator="{ props: tooltipProps }">
+            <v-btn
+              v-bind="tooltipProps"
+              icon="mdi-cog"
+              size="x-small"
+              variant="flat"
+              :color="file.isConfigured ? 'success' : 'primary'"
+              :class="['ml-2', { 'pulse-animation': !file.isConfigured }]"
+              @click.stop="openCsvPreviewer(file, index)"
+            />
+          </template>
+        </v-tooltip>
+
         <template #close>
           <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
         </template>
@@ -167,6 +241,13 @@ watch(internal_files, (value) => {
       Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
     </v-btn>
   </v-card-actions>
+
+  <CsvPreviewer
+    v-if="current_csv_file"
+    v-model="csv_dialog"
+    :file="current_csv_file"
+    @confirm="onCsvConfirm"
+  />
 </template>
 
 <style scoped>
@@ -184,4 +265,24 @@ watch(internal_files, (value) => {
   letter-spacing: 0.5px;
   box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);
 }
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+  box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.7);
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(var(--v-theme-primary), 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0);
+  }
+}
 </style>
diff --git a/app/components/MissingFilesSelector.vue b/app/components/MissingFilesSelector.vue
index f81a3b89..c8eef8f6 100644
--- a/app/components/MissingFilesSelector.vue
+++ b/app/components/MissingFilesSelector.vue
@@ -9,10 +9,11 @@ const schema = schemas.opengeodeweb_back.missing_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, geode_object_type, filenames } = defineProps({
+const { multiple, geode_object_type, filenames, files } = defineProps({
   multiple: { type: Boolean, required: true },
   geode_object_type: { type: String, required: true },
   filenames: { type: Array, required: true },
+  files: { type: Array, required: false, default: () => [] },
 });
 
 const accept = ref("");
@@ -35,6 +36,9 @@ async function missing_files() {
   const geodeStore = useGeodeStore();
 
   const promise_array = filenames.map(async (filename) => {
+    if (filename.toLowerCase().endsWith(".csv")) {
+      return { has_missing_files: false, mandatory_files: [], additional_files: [] };
+    }
     const response = await geodeStore.request(schema, {
       geode_object_type,
       filename,
@@ -49,11 +53,15 @@ async function missing_files() {
     mandatory_files.value = [...mandatory_files.value, ...value.mandatory_files];
     additional_files.value = [...additional_files.value, ...value.additional_files];
   }
-  if (has_missing_files.value) {
-    accept.value = [...mandatory_files.value, ...additional_files.value]
-      .map((filename) => `.${filename.split(".").pop()}`)
-      .join(",");
-  } else {
+  const main_csvs = files.filter((f) => f.name.toLowerCase().endsWith(".csv"));
+  if (main_csvs.length > 0) {
+    has_missing_files.value = true;
+    if (accept.value === "") {
+      accept.value = ".json";
+    }
+  }
+
+  if (!has_missing_files.value) {
     emit("increment_step");
   }
   toggle_loading();
@@ -85,7 +93,10 @@ await missing_files();
     </v-row>
     <v-row>
       <v-col cols="12">
-        <FileUploader v-bind="{ multiple, accept }" @files_uploaded="files_uploaded_event" />
+        <FileUploader
+          v-bind="{ multiple, accept, files, allow_csv_config: true }"
+          @files_uploaded="files_uploaded_event"
+        />
       </v-col>
     </v-row>
     <v-row>
diff --git a/app/components/ObjectSelector.vue b/app/components/ObjectSelector.vue
index d06b8af8..4f53ce48 100644
--- a/app/components/ObjectSelector.vue
+++ b/app/components/ObjectSelector.vue
@@ -68,6 +68,11 @@ async function get_allowed_objects() {
       final_object[key].object_priority = Math.max(...priorities);
     }
   }
+  const isCsv = filenames.some((f) => f.toLowerCase().endsWith(".csv"));
+  if (isCsv && !final_object["PointSet3D"]) {
+    final_object["PointSet3D"] = { is_loadable: 1, object_priority: 100 };
+  }
+
   allowed_objects.value = final_object;
   const selected_object = select_geode_object(final_object);
   if (selected_object) {
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
new file mode 100644
index 00000000..c2c90617
--- /dev/null
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -0,0 +1,255 @@
+<script setup>
+import { useToggle } from "@vueuse/core";
+import CsvSettings from "./CsvSettings.vue";
+import CsvTable from "./CsvTable.vue";
+
+const props = defineProps({
+  file: { type: Object, required: true },
+  modelValue: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue", "confirm"]);
+
+const separator = ref(",");
+const skipRows = ref(0);
+
+const xCol = ref(null);
+const yCol = ref(null);
+const zCol = ref(null);
+
+const rawContent = ref("");
+const previewRows = ref([]);
+const previewHeaders = ref([]);
+const loading = ref(false);
+const toggleLoading = useToggle(loading);
+
+const autoDetectSeparator = (content) => {
+  const lines = content.slice(0, 1000).split(/\r?\n/).slice(0, 5);
+  const candidates = [",", ";", "\t", "|"];
+  let best = ",";
+  let maxCount = -1;
+
+  candidates.forEach((c) => {
+    const counts = lines.map((l) => l.split(c).length);
+    const avg = counts.reduce((a, b) => a + b, 0) / counts.length;
+    const variance = counts.reduce((a, b) => a + (b - avg) ** 2, 0) / counts.length;
+
+    if (avg > 1.5 && variance < 0.5 && avg > maxCount) {
+      maxCount = avg;
+      best = c;
+    }
+  });
+  return best;
+};
+
+const readAndParse = async () => {
+  if (!props.file) return;
+  toggleLoading(true);
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    rawContent.value = e.target.result;
+    if (!separator.value || separator.value === ",") {
+      separator.value = autoDetectSeparator(rawContent.value);
+    }
+    parseContent();
+    toggleLoading(false);
+  };
+  reader.onerror = () => {
+    toggleLoading(false);
+  };
+  reader.readAsText(props.file, "UTF-8");
+};
+
+const parseContent = () => {
+  if (!rawContent.value) return;
+
+  const allLines = rawContent.value.split(/\r?\n/).filter((l) => l.trim() !== "");
+  const effectiveLines = allLines.slice(skipRows.value);
+
+  const splitLine = (line) => {
+    if (!separator.value) return [line];
+    const result = [];
+    let current = "";
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i += 1) {
+      const char = line[i];
+      if (char === '"') {
+        inQuotes = !inQuotes;
+      } else if (char === separator.value && !inQuotes) {
+        result.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    result.push(current.trim());
+    return result;
+  };
+
+  const parsedAll = effectiveLines.map(splitLine);
+
+  if (parsedAll.length > 0) {
+    const rawHeaders = parsedAll[0];
+    previewHeaders.value = rawHeaders.map((h, i) => ({
+      title: h || `Column ${i + 1}`,
+      key: `col${i}`,
+      align: "start",
+      sortable: true,
+    }));
+
+    previewRows.value = parsedAll
+      .slice(1, 101)
+      .map((row) => {
+        const obj = {};
+        row.forEach((cell, i) => {
+          obj[`col${i}`] = cell;
+        });
+        return obj;
+      });
+  } else {
+    previewHeaders.value = [];
+    previewRows.value = [];
+  }
+};
+
+const computedResult = computed(() => {
+  return {
+    separator: separator.value,
+    skipRows: skipRows.value,
+    coordinateMapping: {
+      x: previewHeaders.value.findIndex((h) => h.key === xCol.value),
+      y: previewHeaders.value.findIndex((h) => h.key === yCol.value),
+      z: previewHeaders.value.findIndex((h) => h.key === zCol.value),
+    },
+  };
+});
+
+watch([separator, skipRows], () => {
+  parseContent();
+  xCol.value = null;
+  yCol.value = null;
+  zCol.value = null;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) readAndParse();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.file,
+  (newFile) => {
+    if (newFile && props.modelValue) readAndParse();
+  },
+);
+
+const onConfirm = () => {
+  emit("confirm", computedResult.value);
+  emit("update:modelValue", false);
+};
+</script>
+
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+    max-width="1200px"
+  >
+    <v-card class="glass-ui rounded-xl overflow-hidden border-opacity-10" color="grey-darken-4">
+      <v-toolbar color="transparent" flat class="px-4">
+        <v-icon icon="mdi-file-delimited-outline" color="primary" class="mr-3" />
+        <v-toolbar-title class="text-h6 font-weight-bold text-white">
+          CSV Previewer & Configuration
+        </v-toolbar-title>
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" color="white" @click="emit('update:modelValue', false)" />
+      </v-toolbar>
+
+      <v-divider class="border-opacity-10" />
+
+      <div class="previewer-grid">
+        <CsvSettings
+          v-model:separator="separator"
+          v-model:skip-rows="skipRows"
+          v-model:x-col="xCol"
+          v-model:y-col="yCol"
+          v-model:z-col="zCol"
+          :headers="previewHeaders"
+        />
+
+        <CsvTable
+          :headers="previewHeaders"
+          :rows="previewRows"
+          :loading="loading"
+          :x-col="xCol"
+          :y-col="yCol"
+          :z-col="zCol"
+          :separator="separator"
+          :skip-rows="skipRows"
+        />
+      </div>
+
+      <v-divider class="border-opacity-10" />
+
+      <v-card-actions class="pa-4 bg-white-opacity-5">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          class="text-none px-6"
+          color="white"
+          @click="emit('update:modelValue', false)"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          variant="flat"
+          color="primary"
+          class="text-none px-8 rounded-lg font-weight-bold"
+          @click="onConfirm"
+          :disabled="!previewHeaders.length"
+        >
+          Confirm & Convert to JSON
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.glass-ui {
+  background: rgba(30, 30, 30, 0.8) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.previewer-grid {
+  display: grid;
+  grid-template-columns: 350px 1fr;
+  height: 70vh;
+  overflow: hidden;
+}
+
+.bg-white-opacity-5 {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+</style>
diff --git a/app/components/csv-preview/CsvSettings.vue b/app/components/csv-preview/CsvSettings.vue
new file mode 100644
index 00000000..48ae612e
--- /dev/null
+++ b/app/components/csv-preview/CsvSettings.vue
@@ -0,0 +1,150 @@
+<script setup>
+const props = defineProps({
+  separator: { type: String, required: true },
+  skipRows: { type: Number, required: true },
+  xCol: { type: String, default: null },
+  yCol: { type: String, default: null },
+  zCol: { type: String, default: null },
+  headers: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits([
+  "update:separator",
+  "update:skipRows",
+  "update:xCol",
+  "update:yCol",
+  "update:zCol",
+]);
+
+const separators = [
+  { title: "Comma (,)", value: "," },
+  { title: "Semicolon (;)", value: ";" },
+  { title: "Tab (\\t)", value: "\t" },
+  { title: "Pipe (|)", value: "|" },
+];
+
+const internalSeparator = computed({
+  get: () => props.separator,
+  set: (val) => emit("update:separator", val),
+});
+
+const internalSkipRows = computed({
+  get: () => props.skipRows,
+  set: (val) => emit("update:skipRows", val),
+});
+
+const internalXCol = computed({
+  get: () => props.xCol,
+  set: (val) => emit("update:xCol", val),
+});
+
+const internalYCol = computed({
+  get: () => props.yCol,
+  set: (val) => emit("update:yCol", val),
+});
+
+const internalZCol = computed({
+  get: () => props.zCol,
+  set: (val) => emit("update:zCol", val),
+});
+</script>
+
+<template>
+  <div class="pa-6 overflow-y-auto border-e border-opacity-10 bg-white-opacity-5">
+    <div class="text-overline mb-4 text-primary font-weight-bold">Parser Settings</div>
+
+    <v-select
+      v-model="internalSeparator"
+      :items="separators"
+      label="Separator"
+      variant="outlined"
+      density="compact"
+      class="mb-4"
+      rounded="lg"
+    />
+
+    <v-text-field
+      v-if="!separators.find((s) => s.value === separator)"
+      v-model="internalSeparator"
+      label="Custom Separator"
+      variant="outlined"
+      density="compact"
+      placeholder="Enter character"
+      class="mb-4"
+      rounded="lg"
+    />
+
+    <v-divider class="my-6 border-opacity-10" />
+
+    <div class="text-overline mb-4 text-primary font-weight-bold">Row Configuration</div>
+
+    <v-text-field
+      v-model.number="internalSkipRows"
+      type="number"
+      label="Skip Rows"
+      variant="outlined"
+      density="compact"
+      hint="Number of rows to ignore at the start"
+      persistent-hint
+      class="mb-6"
+      min="0"
+      rounded="lg"
+    />
+
+    <v-divider class="my-6 border-opacity-10" />
+
+    <div class="text-overline mb-4 text-primary font-weight-bold">Spatial Mapping</div>
+
+    <v-select
+      v-model="internalXCol"
+      :items="headers"
+      item-title="title"
+      item-value="key"
+      label="X Coordinate Column"
+      variant="outlined"
+      density="compact"
+      prepend-inner-icon="mdi-axis-x-arrow"
+      color="light-blue-accent-3"
+      class="mb-2"
+      clearable
+      rounded="lg"
+    />
+
+    <v-select
+      v-model="internalYCol"
+      :items="headers"
+      item-title="title"
+      item-value="key"
+      label="Y Coordinate Column"
+      variant="outlined"
+      density="compact"
+      prepend-inner-icon="mdi-axis-y-arrow"
+      color="light-green-accent-3"
+      class="mb-2"
+      clearable
+      rounded="lg"
+    />
+
+    <v-select
+      v-model="internalZCol"
+      :items="headers"
+      item-title="title"
+      item-value="key"
+      label="Z Coordinate Column"
+      variant="outlined"
+      density="compact"
+      prepend-inner-icon="mdi-axis-z-arrow"
+      color="red-accent-3"
+      class="mb-8"
+      clearable
+      rounded="lg"
+    />
+    <div class="pb-12" />
+  </div>
+</template>
+
+<style scoped>
+.bg-white-opacity-5 {
+  background: rgba(255, 255, 255, 0.03);
+}
+</style>
diff --git a/app/components/csv-preview/CsvTable.vue b/app/components/csv-preview/CsvTable.vue
new file mode 100644
index 00000000..1d67b31d
--- /dev/null
+++ b/app/components/csv-preview/CsvTable.vue
@@ -0,0 +1,107 @@
+<script setup>
+const props = defineProps({
+  headers: { type: Array, required: true },
+  rows: { type: Array, required: true },
+  loading: { type: Boolean, default: false },
+  xCol: { type: String, default: null },
+  yCol: { type: String, default: null },
+  zCol: { type: String, default: null },
+  separator: { type: String, default: "," },
+  skipRows: { type: Number, default: 0 },
+});
+
+const getColumnClass = (key) => {
+  if (key === props.xCol) return "x-col-highlight";
+  if (key === props.yCol) return "y-col-highlight";
+  if (key === props.zCol) return "z-col-highlight";
+  return "";
+};
+</script>
+
+<template>
+  <div class="d-flex flex-column bg-black-opacity-20 overflow-hidden">
+    <div class="pa-4 d-flex align-center border-b border-opacity-10">
+      <v-icon icon="mdi-table-eye" size="small" class="mr-2 opacity-60" />
+      <span class="text-subtitle-2 font-weight-medium opacity-80">
+        Live Preview (First 100 rows)
+      </span>
+      <v-spacer />
+      <v-chip v-if="loading" size="x-small" color="primary" variant="flat">
+        <v-progress-circular indeterminate size="12" width="2" class="mr-2" />
+        Parsing...
+      </v-chip>
+    </div>
+
+    <v-data-table
+      :key="`${separator}-${skipRows}`"
+      :headers="headers"
+      :items="rows"
+      class="bg-transparent"
+      density="compact"
+      hover
+      hide-default-footer
+      :loading="loading"
+      fixed-header
+      height="100%"
+    >
+      <template v-for="h in headers" v-slot:[`item.${h.key}`]="{ item }">
+        <div :class="getColumnClass(h.key)" class="px-2 py-1 rounded text-truncate">
+          {{ item[h.key] }}
+        </div>
+      </template>
+
+      <template #no-data>
+        <div class="d-flex flex-column align-center justify-center h-100 py-12 opacity-40">
+          <v-icon size="64" icon="mdi-table-off" />
+          <div class="text-h6 mt-2">No preview available</div>
+          <div class="text-caption">Check your parser settings</div>
+        </div>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<style scoped>
+.bg-black-opacity-20 {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+:deep(.v-data-table__th) {
+  background: #1e1e1e !important; /* Solid background to prevent overlap transparency */
+  color: rgba(var(--v-theme-primary), 0.9) !important;
+  font-weight: bold !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+  min-width: 150px !important;
+  white-space: nowrap !important;
+}
+
+:deep(.v-data-table__td) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+:deep(.v-data-table__tr:hover td) {
+  background: rgba(var(--v-theme-primary), 0.05) !important;
+}
+
+.x-col-highlight {
+  background: rgba(0, 176, 255, 0.2) !important;
+  color: #00b0ff !important;
+  font-weight: bold;
+}
+
+.y-col-highlight {
+  background: rgba(100, 221, 23, 0.2) !important;
+  color: #64dd17 !important;
+  font-weight: bold;
+}
+
+.z-col-highlight {
+  background: rgba(255, 23, 68, 0.2) !important;
+  color: #ff1744 !important;
+  font-weight: bold;
+}
+</style>

From 20708464a56ea4c9e9a9a2e8e7ef1b0f2fa61a36 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 12 May 2026 14:00:19 +0200
Subject: [PATCH 02/14] csv preview & import json

---
 app/components/FileSelector.vue             |   4 +-
 app/components/FileUploader.vue             | 288 ++++++++++----------
 app/components/MissingFilesSelector.vue     |  10 +-
 app/components/ObjectSelector.vue           |   7 +-
 app/components/csv-preview/CsvPreviewer.vue | 146 +++++-----
 app/components/csv-preview/CsvSettings.vue  |  28 +-
 app/components/csv-preview/CsvTable.vue     |  30 +-
 app/utils/import_workflow.js                |   4 -
 8 files changed, 272 insertions(+), 245 deletions(-)

diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index bdd0c0db..a283b82c 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -9,11 +9,12 @@ const schema = schemas.opengeodeweb_back.allowed_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, files, auto_upload, show_overlay } = defineProps({
+const { multiple, files, auto_upload, show_overlay, allow_csv_config } = defineProps({
   multiple: { type: Boolean, required: true },
   files: { type: Array, default: () => [] },
   auto_upload: { type: Boolean, default: true },
   show_overlay: { type: Boolean, default: true },
+  allow_csv_config: { type: Boolean, default: false },
 });
 
 const internal_files = ref(files);
@@ -69,6 +70,7 @@ await get_allowed_files();
       files: internal_files,
       auto_upload: internal_auto_upload,
       show_overlay,
+      allow_csv_config,
     }"
     @files_uploaded="files_uploaded_event"
   />
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 476ef069..7d693629 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -1,45 +1,29 @@
 <script setup>
 import { useGeodeStore } from "@ogw_front/stores/geode";
-import { useTemplateRef } from "vue";
 
-import DragAndDrop from "@ogw_front/components/DragAndDrop";
 import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
+import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
-const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
+const emit = defineEmits(["files_uploaded"]);
 
-const {
-  multiple,
-  accept,
-  files,
-  auto_upload,
-  mini,
-  show_overlay: showOverlay,
-  allow_csv_config: allowCsvConfig,
-} = defineProps({
-  multiple: { type: Boolean, required: true },
-  accept: { type: String, required: true },
-  files: { type: Array, required: false, default: [] },
-  auto_upload: { type: Boolean, required: false, default: false },
-  mini: { type: Boolean, required: false, default: false },
-  show_overlay: { type: Boolean, required: false, default: true },
-  allow_csv_config: { type: Boolean, required: false, default: false },
+const { multiple, accept, files, auto_upload, showOverlay } = defineProps({
+  multiple: { type: Boolean, default: false },
+  accept: { type: String, default: "" },
+  files: { type: Array, default: () => [] },
+  auto_upload: { type: Boolean, default: true },
+  showOverlay: { type: Boolean, default: false },
 });
 
 const geodeStore = useGeodeStore();
-
-const internal_files = ref(files);
-const loading = ref(false);
-const files_uploaded = ref(false);
-const dragAndDropRef = useTemplateRef("dragAndDropRef");
-
+const dragAndDropRef = ref(undefined);
+const internal_files = ref([...files]);
 const csv_dialog = ref(false);
-const current_csv_file = ref(null);
+const current_csv_file = ref(undefined);
 const current_csv_index = ref(-1);
-
-const toggle_loading = useToggle(loading);
+const loading = ref(false);
 
 function isCsv(file) {
-  return allowCsvConfig && file.name.toLowerCase().endsWith(".csv");
+  return file.name.toLowerCase().endsWith(".csv");
 }
 
 function openCsvPreviewer(file, index) {
@@ -49,19 +33,21 @@ function openCsvPreviewer(file, index) {
 }
 
 function onCsvConfirm(result) {
-  const json_content = JSON.stringify(result, null, 2);
+  const json_content = JSON.stringify(result, undefined, 2);
+  const base_name = current_csv_file.value.name.slice(
+    0,
+    current_csv_file.value.name.lastIndexOf("."),
+  );
+  const json_filename = `${base_name}.json`;
+
   const blob = new Blob([json_content], { type: "application/json" });
-  const json_filename = `${current_csv_file.value.name}.json`;
   const json_file = new File([blob], json_filename, {
     type: "application/json",
   });
 
-  // Keep original CSV and append JSON config file
-  internal_files.value.push(json_file);
-  csv_dialog.value = false;
-
-  // Mark CSV as configured (for UI purposes)
   current_csv_file.value.isConfigured = true;
+  internal_files.value = [...internal_files.value, json_file];
+  csv_dialog.value = false;
 }
 
 function processSelectedFiles(selected_files) {
@@ -73,68 +59,63 @@ function processSelectedFiles(selected_files) {
 }
 
 function removeFile(index) {
-  internal_files.value.splice(index, 1);
-  if (internal_files.value.length === 0) {
-    files_uploaded.value = false;
-    emit("files_uploaded", []);
+  const fileToRemove = internal_files.value[index];
+  if (isCsv(fileToRemove)) {
+    const base_name = fileToRemove.name.slice(
+      0,
+      fileToRemove.name.lastIndexOf("."),
+    );
+    const sidecarName = `${base_name}.json`;
+    internal_files.value = internal_files.value.filter(
+      (file, idx) => idx !== index && file.name !== sidecarName,
+    );
+  } else {
+    internal_files.value.splice(index, 1);
   }
 }
 
 async function upload_files() {
-  const hasUnconfiguredCsv = internal_files.value.some((file) => isCsv(file) && !file.isConfigured);
-  if (hasUnconfiguredCsv) {
-    const index = internal_files.value.findIndex((file) => isCsv(file) && !file.isConfigured);
-    openCsvPreviewer(internal_files.value[index], index);
-    return;
-  }
-
-  // Dev-only: download config JSON files
-  internal_files.value.forEach((file) => {
-    if (file.name.endsWith(".csv.json")) {
-      const url = URL.createObjectURL(file);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = file.name;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }
-  });
-
-  toggle_loading();
-  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
+  loading.value = true;
+  const promise_array = internal_files.value.map((file) =>
+    geodeStore.upload(file),
+  );
   await Promise.all(promise_array);
-  files_uploaded.value = true;
+  loading.value = false;
   emit("files_uploaded", internal_files.value);
-
-  toggle_loading();
 }
 
-if (files.length > 0) {
-  internal_files.value = files;
-  if (auto_upload) {
-    upload_files();
-  }
-}
+watch(
+  () => internal_files.value,
+  async (newFiles) => {
+    const csvFiles = newFiles.filter(isCsv);
+    const unconfiguredCsv = csvFiles.find((file) => !file.isConfigured);
+
+    if (unconfiguredCsv) {
+      openCsvPreviewer(
+        unconfiguredCsv,
+        internal_files.value.indexOf(unconfiguredCsv),
+      );
+      return;
+    }
+
+    const allConfigured = newFiles.every(
+      (file) => !isCsv(file) || file.isConfigured,
+    );
+
+    if (auto_upload && allConfigured && newFiles.length > 0) {
+      await upload_files();
+    }
+  },
+  { deep: true },
+);
 
 watch(
   () => files,
   (newVal) => {
-    internal_files.value = newVal;
+    internal_files.value = [...newVal];
   },
   { deep: true },
 );
-
-watch(internal_files, (value) => {
-  files_uploaded.value = false;
-  if (auto_upload && value.length > 0) {
-    const hasUnconfiguredCsv = value.some((file) => isCsv(file));
-    if (!hasUnconfiguredCsv) {
-      upload_files();
-    }
-  }
-});
 </script>
 
 <template>
@@ -145,13 +126,6 @@ watch(internal_files, (value) => {
     :accept
     :loading
     :show-extensions="false"
-    :inline="true"
-    :show-overlay="showOverlay"
-    :texts="{
-      idle: 'Select files',
-      drop: 'Drop files here',
-      loading: 'Loading...',
-    }"
     @files-selected="processSelectedFiles"
   />
 
@@ -170,9 +144,18 @@ watch(internal_files, (value) => {
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
-      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
-        {{ internal_files.length }}
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
+        {{
+          internal_files.filter((file) => !file.name.endsWith(".json")).length
+        }}
       </v-chip>
       <v-spacer />
       <v-btn
@@ -189,44 +172,60 @@ watch(internal_files, (value) => {
     </v-sheet>
 
     <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
-      <v-chip
-        v-for="(file, index) in internal_files"
-        :key="index"
-        closable
-        size="default"
-        color="white"
-        variant="outlined"
-        class="font-weight-medium glass-ui border-opacity-10 px-4"
-        style="background: rgba(255, 255, 255, 0.05) !important"
-        @click:close="removeFile(index)"
-      >
-        <v-icon start size="18" :color="file.name.endsWith('.json') ? 'success' : 'primary'">
-          {{ file.name.endsWith(".json") ? "mdi-file-code" : "mdi-file-outline" }}
-        </v-icon>
-        <span class="text-white">{{ file.name }}</span>
-
-        <v-tooltip v-if="isCsv(file)" text="Configure CSV" location="bottom">
-          <template #activator="{ props: tooltipProps }">
-            <v-btn
-              v-bind="tooltipProps"
-              icon="mdi-cog"
-              size="x-small"
-              variant="flat"
-              :color="file.isConfigured ? 'success' : 'primary'"
-              :class="['ml-2', { 'pulse-animation': !file.isConfigured }]"
-              @click.stop="openCsvPreviewer(file, index)"
-            />
+      <template v-for="(file, index) in internal_files" :key="index">
+        <v-chip
+          v-if="!file.name.endsWith('.json')"
+          closable
+          size="default"
+          color="white"
+          variant="outlined"
+          class="font-weight-medium glass-ui border-opacity-10 px-4"
+          style="background: rgba(255, 255, 255, 0.05) !important"
+          @click:close="removeFile(index)"
+        >
+          <v-icon
+            start
+            size="18"
+            :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'"
+          >
+            {{
+              isCsv(file)
+                ? file.isConfigured
+                  ? "mdi-file-check"
+                  : "mdi-file-delimited"
+                : "mdi-file-outline"
+            }}
+          </v-icon>
+          <span class="text-white">{{ file.displayName || file.name }}</span>
+
+          <v-tooltip v-if="isCsv(file)" text="Configure CSV" location="bottom">
+            <template #activator="{ props: tooltipProps }">
+              <v-btn
+                v-bind="tooltipProps"
+                icon="mdi-cog"
+                size="x-small"
+                variant="flat"
+                :color="file.isConfigured ? 'success' : 'primary'"
+                :class="['ml-2', { 'pulse-animation': !file.isConfigured }]"
+                @click.stop="openCsvPreviewer(file, index)"
+              />
+            </template>
+          </v-tooltip>
+
+          <template #close>
+            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+              >mdi-close-circle</v-icon
+            >
           </template>
-        </v-tooltip>
-
-        <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
-        </template>
-      </v-chip>
+        </v-chip>
+      </template>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
+  <v-card-actions
+    v-if="!auto_upload && internal_files.length"
+    class="mt-8 pa-0"
+  >
     <v-btn
       color="primary"
       variant="flat"
@@ -238,7 +237,15 @@ watch(internal_files, (value) => {
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
+      Upload
+      {{ internal_files.filter((file) => !file.name.endsWith(".json")).length }}
+      file<span
+        v-if="
+          internal_files.filter((file) => !file.name.endsWith('.json')).length >
+          1
+        "
+        >s</span
+      >
     </v-btn>
   </v-card-actions>
 
@@ -251,37 +258,24 @@ watch(internal_files, (value) => {
 </template>
 
 <style scoped>
-.border-dashed {
-  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
-  transition: all 0.3s ease;
-}
-
-.border-dashed:hover {
-  border-color: rgba(var(--v-theme-primary), 0.4) !important;
-  background: rgba(var(--v-theme-primary), 0.02) !important;
+.glass-ui {
+  background: rgba(255, 255, 255, 0.05) !important;
+  backdrop-filter: blur(10px);
 }
-
-.custom-upload-btn {
-  letter-spacing: 0.5px;
-  box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);
+.hover-opacity-100:hover {
+  opacity: 1 !important;
 }
-
 .pulse-animation {
   animation: pulse 2s infinite;
-  box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.7);
 }
-
 @keyframes pulse {
   0% {
-    transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.7);
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.4);
   }
   70% {
-    transform: scale(1);
     box-shadow: 0 0 0 10px rgba(var(--v-theme-primary), 0);
   }
   100% {
-    transform: scale(0.95);
     box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0);
   }
 }
diff --git a/app/components/MissingFilesSelector.vue b/app/components/MissingFilesSelector.vue
index c8eef8f6..3df743d0 100644
--- a/app/components/MissingFilesSelector.vue
+++ b/app/components/MissingFilesSelector.vue
@@ -36,7 +36,10 @@ async function missing_files() {
   const geodeStore = useGeodeStore();
 
   const promise_array = filenames.map(async (filename) => {
-    if (filename.toLowerCase().endsWith(".csv")) {
+    if (
+      filename.toLowerCase().endsWith(".csv") ||
+      filename.toLowerCase().endsWith(".csv.json")
+    ) {
       return { has_missing_files: false, mandatory_files: [], additional_files: [] };
     }
     const response = await geodeStore.request(schema, {
@@ -53,7 +56,10 @@ async function missing_files() {
     mandatory_files.value = [...mandatory_files.value, ...value.mandatory_files];
     additional_files.value = [...additional_files.value, ...value.additional_files];
   }
-  const main_csvs = files.filter((f) => f.name.toLowerCase().endsWith(".csv"));
+  const main_csvs = files.filter(
+    (file) =>
+      file.name.toLowerCase().endsWith(".csv") || file.name.toLowerCase().endsWith(".csv.json"),
+  );
   if (main_csvs.length > 0) {
     has_missing_files.value = true;
     if (accept.value === "") {
diff --git a/app/components/ObjectSelector.vue b/app/components/ObjectSelector.vue
index 4f53ce48..157882f3 100644
--- a/app/components/ObjectSelector.vue
+++ b/app/components/ObjectSelector.vue
@@ -62,13 +62,16 @@ async function get_allowed_objects() {
     const load_scores = allowed_objects_list.map((obj) => obj[key].is_loadable);
     const priorities = allowed_objects_list
       .map((obj) => obj[key].object_priority)
-      .filter((priority) => priority !== undefined && priority !== null);
+      .filter((priority) => priority !== undefined);
     final_object[key] = { is_loadable: Math.min(...load_scores) };
     if (priorities.length > 0) {
       final_object[key].object_priority = Math.max(...priorities);
     }
   }
-  const isCsv = filenames.some((f) => f.toLowerCase().endsWith(".csv"));
+  const isCsv = filenames.some(
+    (filename) =>
+      filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json"),
+  );
   if (isCsv && !final_object["PointSet3D"]) {
     final_object["PointSet3D"] = { is_loadable: 1, object_priority: 100 };
   }
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index c2c90617..bd71ab54 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -3,77 +3,91 @@ import { useToggle } from "@vueuse/core";
 import CsvSettings from "./CsvSettings.vue";
 import CsvTable from "./CsvTable.vue";
 
-const props = defineProps({
+const { file, modelValue } = defineProps({
   file: { type: Object, required: true },
   modelValue: { type: Boolean, default: false },
 });
 
+const MAX_CONTENT_SLICE = 1000;
+const MAX_LINES_FOR_DETECTION = 5;
+const MIN_AVG_COUNT = 1.5;
+const MAX_VARIANCE = 0.5;
+const PREVIEW_ROWS_LIMIT = 101;
+
 const emit = defineEmits(["update:modelValue", "confirm"]);
 
 const separator = ref(",");
 const skipRows = ref(0);
 
-const xCol = ref(null);
-const yCol = ref(null);
-const zCol = ref(null);
+const xCol = ref(undefined);
+const yCol = ref(undefined);
+const zCol = ref(undefined);
 
 const rawContent = ref("");
 const previewRows = ref([]);
 const previewHeaders = ref([]);
+const parsedAll = ref([]);
 const loading = ref(false);
 const toggleLoading = useToggle(loading);
 
-const autoDetectSeparator = (content) => {
-  const lines = content.slice(0, 1000).split(/\r?\n/).slice(0, 5);
+function autoDetectSeparator(content) {
+  const lines = content.slice(0, MAX_CONTENT_SLICE).split(/\r?\n/u).slice(0, MAX_LINES_FOR_DETECTION);
   const candidates = [",", ";", "\t", "|"];
   let best = ",";
   let maxCount = -1;
 
-  candidates.forEach((c) => {
-    const counts = lines.map((l) => l.split(c).length);
-    const avg = counts.reduce((a, b) => a + b, 0) / counts.length;
-    const variance = counts.reduce((a, b) => a + (b - avg) ** 2, 0) / counts.length;
+  for (const candidate of candidates) {
+    const counts = lines.map((line) => line.split(candidate).length);
+    const average = counts.reduce((total, count) => total + count, 0) / counts.length;
+    const variance =
+      counts.reduce((total, count) => total + (count - average) ** 2, 0) / counts.length;
 
-    if (avg > 1.5 && variance < 0.5 && avg > maxCount) {
-      maxCount = avg;
-      best = c;
+    if (average > MIN_AVG_COUNT && variance < MAX_VARIANCE && average > maxCount) {
+      maxCount = average;
+      best = candidate;
     }
-  });
+  }
   return best;
-};
+}
 
-const readAndParse = async () => {
-  if (!props.file) return;
+function readAndParse() {
+  if (!file) {
+    return;
+  }
   toggleLoading(true);
 
   const reader = new FileReader();
-  reader.onload = (e) => {
-    rawContent.value = e.target.result;
+  reader.addEventListener("load", (event) => {
+    rawContent.value = event.target.result;
     if (!separator.value || separator.value === ",") {
       separator.value = autoDetectSeparator(rawContent.value);
     }
     parseContent();
     toggleLoading(false);
-  };
-  reader.onerror = () => {
+  });
+  reader.addEventListener("error", () => {
     toggleLoading(false);
-  };
-  reader.readAsText(props.file, "UTF-8");
-};
+  });
+  reader.readAsText(file, "utf8");
+}
 
-const parseContent = () => {
-  if (!rawContent.value) return;
+function parseContent() {
+  if (!rawContent.value) {
+    return;
+  }
 
-  const allLines = rawContent.value.split(/\r?\n/).filter((l) => l.trim() !== "");
+  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
   const effectiveLines = allLines.slice(skipRows.value);
 
-  const splitLine = (line) => {
-    if (!separator.value) return [line];
+  function splitLine(line) {
+    if (!separator.value) {
+      return [line];
+    }
     const result = [];
     let current = "";
     let inQuotes = false;
-    for (let i = 0; i < line.length; i += 1) {
-      const char = line[i];
+    for (let index = 0; index < line.length; index += 1) {
+      const char = line[index];
       if (char === '"') {
         inQuotes = !inQuotes;
       } else if (char === separator.value && !inQuotes) {
@@ -85,72 +99,78 @@ const parseContent = () => {
     }
     result.push(current.trim());
     return result;
-  };
+  }
 
-  const parsedAll = effectiveLines.map(splitLine);
+  parsedAll.value = effectiveLines.map((line) => splitLine(line));
 
-  if (parsedAll.length > 0) {
-    const rawHeaders = parsedAll[0];
-    previewHeaders.value = rawHeaders.map((h, i) => ({
-      title: h || `Column ${i + 1}`,
-      key: `col${i}`,
+  if (parsedAll.value.length > 0) {
+    const [rawHeaders] = parsedAll.value;
+    previewHeaders.value = rawHeaders.map((header, index) => ({
+      title: header || `Column ${index + 1}`,
+      key: `col${index}`,
       align: "start",
       sortable: true,
     }));
 
-    previewRows.value = parsedAll
-      .slice(1, 101)
-      .map((row) => {
-        const obj = {};
-        row.forEach((cell, i) => {
-          obj[`col${i}`] = cell;
-        });
-        return obj;
-      });
+    previewRows.value = parsedAll.value.slice(1, PREVIEW_ROWS_LIMIT).map((row) => {
+      const obj = {};
+      for (let index = 0; index < row.length; index += 1) {
+        obj[`col${index}`] = row[index];
+      }
+      return obj;
+    });
   } else {
     previewHeaders.value = [];
     previewRows.value = [];
   }
-};
+}
+;
 
 const computedResult = computed(() => {
+  const xIndex = previewHeaders.value.findIndex((header) => header.key === xCol.value);
+  const yIndex = previewHeaders.value.findIndex((header) => header.key === yCol.value);
+  const zIndex = previewHeaders.value.findIndex((header) => header.key === zCol.value);
+
   return {
+    firstRow: skipRows.value > 0 ? skipRows.value : 1,
+    headerRow: 0,
     separator: separator.value,
-    skipRows: skipRows.value,
-    coordinateMapping: {
-      x: previewHeaders.value.findIndex((h) => h.key === xCol.value),
-      y: previewHeaders.value.findIndex((h) => h.key === yCol.value),
-      z: previewHeaders.value.findIndex((h) => h.key === zCol.value),
-    },
+    xColumn: xIndex === -1 ? 0 : xIndex,
+    yColumn: yIndex === -1 ? 1 : yIndex,
+    zColumn: zIndex === -1 ? 2 : zIndex,
   };
 });
 
 watch([separator, skipRows], () => {
   parseContent();
-  xCol.value = null;
-  yCol.value = null;
-  zCol.value = null;
+  xCol.value = undefined;
+  yCol.value = undefined;
+  zCol.value = undefined;
 });
 
 watch(
-  () => props.modelValue,
+  () => modelValue,
   (val) => {
-    if (val) readAndParse();
+    if (val) {
+      readAndParse();
+    }
   },
   { immediate: true },
 );
 
 watch(
-  () => props.file,
+  () => file,
   (newFile) => {
-    if (newFile && props.modelValue) readAndParse();
+    if (newFile && modelValue) {
+      readAndParse();
+    }
   },
 );
 
-const onConfirm = () => {
+function onConfirm() {
   emit("confirm", computedResult.value);
   emit("update:modelValue", false);
-};
+}
 </script>
 
 <template>
diff --git a/app/components/csv-preview/CsvSettings.vue b/app/components/csv-preview/CsvSettings.vue
index 48ae612e..3dca59a4 100644
--- a/app/components/csv-preview/CsvSettings.vue
+++ b/app/components/csv-preview/CsvSettings.vue
@@ -1,10 +1,10 @@
 <script setup>
-const props = defineProps({
+const { separator, skipRows, xCol, yCol, zCol, headers } = defineProps({
   separator: { type: String, required: true },
   skipRows: { type: Number, required: true },
-  xCol: { type: String, default: null },
-  yCol: { type: String, default: null },
-  zCol: { type: String, default: null },
+  xCol: { type: String, default: undefined },
+  yCol: { type: String, default: undefined },
+  zCol: { type: String, default: undefined },
   headers: { type: Array, default: () => [] },
 });
 
@@ -24,28 +24,28 @@ const separators = [
 ];
 
 const internalSeparator = computed({
-  get: () => props.separator,
-  set: (val) => emit("update:separator", val),
+  get: () => separator,
+  set: (value) => emit("update:separator", value),
 });
 
 const internalSkipRows = computed({
-  get: () => props.skipRows,
-  set: (val) => emit("update:skipRows", val),
+  get: () => skipRows,
+  set: (value) => emit("update:skipRows", value),
 });
 
 const internalXCol = computed({
-  get: () => props.xCol,
-  set: (val) => emit("update:xCol", val),
+  get: () => xCol,
+  set: (value) => emit("update:xCol", value),
 });
 
 const internalYCol = computed({
-  get: () => props.yCol,
-  set: (val) => emit("update:yCol", val),
+  get: () => yCol,
+  set: (value) => emit("update:yCol", value),
 });
 
 const internalZCol = computed({
-  get: () => props.zCol,
-  set: (val) => emit("update:zCol", val),
+  get: () => zCol,
+  set: (value) => emit("update:zCol", value),
 });
 </script>
 
diff --git a/app/components/csv-preview/CsvTable.vue b/app/components/csv-preview/CsvTable.vue
index 1d67b31d..f4bcbd3b 100644
--- a/app/components/csv-preview/CsvTable.vue
+++ b/app/components/csv-preview/CsvTable.vue
@@ -1,21 +1,27 @@
 <script setup>
-const props = defineProps({
+const { headers, rows, loading, xCol, yCol, zCol, separator, skipRows } = defineProps({
   headers: { type: Array, required: true },
   rows: { type: Array, required: true },
   loading: { type: Boolean, default: false },
-  xCol: { type: String, default: null },
-  yCol: { type: String, default: null },
-  zCol: { type: String, default: null },
+  xCol: { type: String, default: undefined },
+  yCol: { type: String, default: undefined },
+  zCol: { type: String, default: undefined },
   separator: { type: String, default: "," },
   skipRows: { type: Number, default: 0 },
 });
 
-const getColumnClass = (key) => {
-  if (key === props.xCol) return "x-col-highlight";
-  if (key === props.yCol) return "y-col-highlight";
-  if (key === props.zCol) return "z-col-highlight";
+function getColumnClass(key) {
+  if (key === xCol) {
+    return "x-col-highlight";
+  }
+  if (key === yCol) {
+    return "y-col-highlight";
+  }
+  if (key === zCol) {
+    return "z-col-highlight";
+  }
   return "";
-};
+}
 </script>
 
 <template>
@@ -44,9 +50,9 @@ const getColumnClass = (key) => {
       fixed-header
       height="100%"
     >
-      <template v-for="h in headers" v-slot:[`item.${h.key}`]="{ item }">
-        <div :class="getColumnClass(h.key)" class="px-2 py-1 rounded text-truncate">
-          {{ item[h.key] }}
+      <template v-for="header in headers" v-slot:[`item.${header.key}`]="{ item }">
+        <div :class="getColumnClass(header.key)" class="px-2 py-1 rounded text-truncate">
+          {{ item[header.key] }}
         </div>
       </template>
 
diff --git a/app/utils/import_workflow.js b/app/utils/import_workflow.js
index d316d184..297c8951 100644
--- a/app/utils/import_workflow.js
+++ b/app/utils/import_workflow.js
@@ -12,23 +12,19 @@ import { useTreeviewStore } from "@ogw_front/stores/treeview";
 const SECOND = 1000;
 
 async function importWorkflow(files) {
-  console.log("importWorkflow", { files });
   const start = Date.now();
   const promise_array = [];
   for (const file of files) {
     const { filename, geode_object_type } = file;
-    console.log({ filename }, { geode_object_type });
     promise_array.push(importFile(filename, geode_object_type));
   }
   const results = await Promise.all(promise_array);
   const hybridViewerStore = useHybridViewerStore();
   hybridViewerStore.remoteRender();
-  console.log("importWorkflow completed in", (Date.now() - start) / SECOND);
   return results;
 }
 
 function buildImportItemFromPayloadApi(value, geode_object_type) {
-  console.log("buildImportItemFromPayloadApi", { value, geode_object_type });
   return {
     geode_object_type,
     ...value,

From 544a68cdb21505f5c94dbc15cdcd6e35193a3e00 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 12 May 2026 16:56:45 +0200
Subject: [PATCH 03/14] change entries names

---
 app/components/FileUploader.vue             |  12 +-
 app/components/csv-preview/CsvPreviewer.vue | 135 ++++++++++++--------
 app/components/csv-preview/CsvSettings.vue  |  80 +++++++-----
 app/components/csv-preview/CsvTable.vue     |  17 ++-
 4 files changed, 145 insertions(+), 99 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 7d693629..d7b5e81c 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -87,7 +87,7 @@ async function upload_files() {
 watch(
   () => internal_files.value,
   async (newFiles) => {
-    const csvFiles = newFiles.filter(isCsv);
+    const csvFiles = newFiles.filter((file) => isCsv(file));
     const unconfiguredCsv = csvFiles.find((file) => !file.isConfigured);
 
     if (unconfiguredCsv) {
@@ -192,7 +192,7 @@ watch(
               isCsv(file)
                 ? file.isConfigured
                   ? "mdi-file-check"
-                  : "mdi-file-delimited"
+                  : "mdi-file-table"
                 : "mdi-file-outline"
             }}
           </v-icon>
@@ -203,12 +203,16 @@ watch(
               <v-btn
                 v-bind="tooltipProps"
                 icon="mdi-cog"
-                size="x-small"
                 variant="flat"
                 :color="file.isConfigured ? 'success' : 'primary'"
                 :class="['ml-2', { 'pulse-animation': !file.isConfigured }]"
+                width="24"
+                height="24"
+                density="compact"
                 @click.stop="openCsvPreviewer(file, index)"
-              />
+              >
+                <v-icon size="14">mdi-cog</v-icon>
+              </v-btn>
             </template>
           </v-tooltip>
 
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index bd71ab54..c38030ac 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { useToggle } from "@vueuse/core";
 import CsvSettings from "./CsvSettings.vue";
 import CsvTable from "./CsvTable.vue";
+import { useToggle } from "@vueuse/core";
 
 const { file, modelValue } = defineProps({
   file: { type: Object, required: true },
@@ -17,11 +17,12 @@ const PREVIEW_ROWS_LIMIT = 101;
 const emit = defineEmits(["update:modelValue", "confirm"]);
 
 const separator = ref(",");
-const skipRows = ref(0);
+const headerRow = ref(0);
+const firstRow = ref(1);
 
-const xCol = ref(undefined);
-const yCol = ref(undefined);
-const zCol = ref(undefined);
+const xColumn = ref(undefined);
+const yColumn = ref(undefined);
+const zColumn = ref(undefined);
 
 const rawContent = ref("");
 const previewRows = ref([]);
@@ -31,18 +32,27 @@ const loading = ref(false);
 const toggleLoading = useToggle(loading);
 
 function autoDetectSeparator(content) {
-  const lines = content.slice(0, MAX_CONTENT_SLICE).split(/\r?\n/u).slice(0, MAX_LINES_FOR_DETECTION);
+  const lines = content
+    .slice(0, MAX_CONTENT_SLICE)
+    .split(/\r?\n/u)
+    .slice(0, MAX_LINES_FOR_DETECTION);
   const candidates = [",", ";", "\t", "|"];
   let best = ",";
   let maxCount = -1;
 
   for (const candidate of candidates) {
     const counts = lines.map((line) => line.split(candidate).length);
-    const average = counts.reduce((total, count) => total + count, 0) / counts.length;
+    const average =
+      counts.reduce((total, count) => total + count, 0) / counts.length;
     const variance =
-      counts.reduce((total, count) => total + (count - average) ** 2, 0) / counts.length;
-
-    if (average > MIN_AVG_COUNT && variance < MAX_VARIANCE && average > maxCount) {
+      counts.reduce((total, count) => total + (count - average) ** 2, 0) /
+      counts.length;
+
+    if (
+      average > MIN_AVG_COUNT &&
+      variance < MAX_VARIANCE &&
+      average > maxCount
+    ) {
       maxCount = average;
       best = candidate;
     }
@@ -76,8 +86,9 @@ function parseContent() {
     return;
   }
 
-  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
-  const effectiveLines = allLines.slice(skipRows.value);
+  const allLines = rawContent.value
+    .split(/\r?\n/u)
+    .filter((line) => line.trim() !== "");
 
   function splitLine(line) {
     if (!separator.value) {
@@ -101,39 +112,43 @@ function parseContent() {
     return result;
   }
 
-  parsedAll.value = effectiveLines.map((line) => splitLine(line));
-
-  if (parsedAll.value.length > 0) {
-    const [rawHeaders] = parsedAll.value;
-    previewHeaders.value = rawHeaders.map((header, index) => ({
-      title: header || `Column ${index + 1}`,
-      key: `col${index}`,
-      align: "start",
-      sortable: true,
-    }));
-
-    previewRows.value = parsedAll.value.slice(1, PREVIEW_ROWS_LIMIT).map((row) => {
-      const obj = {};
-      for (let index = 0; index < row.length; index += 1) {
-        obj[`col${index}`] = row[index];
-      }
-      return obj;
-    });
-  } else {
-    previewHeaders.value = [];
-    previewRows.value = [];
-  }
+  const headerLine = allLines[headerRow.value];
+  const rawHeaders = headerLine ? splitLine(headerLine) : [];
+
+  previewHeaders.value = rawHeaders.map((header, index) => ({
+    title: header || `Column ${index + 1}`,
+    key: `col${index}`,
+    align: "start",
+    sortable: true,
+  }));
+
+  const dataLines = allLines.slice(
+    firstRow.value,
+    firstRow.value + PREVIEW_ROWS_LIMIT,
+  );
+  previewRows.value = dataLines.map((line) => {
+    const row = splitLine(line);
+    const obj = {};
+    for (let index = 0; index < row.length; index += 1) {
+      obj[`col${index}`] = row[index];
+    }
+    return obj;
+  });
 }
-;
-
 const computedResult = computed(() => {
-  const xIndex = previewHeaders.value.findIndex((header) => header.key === xCol.value);
-  const yIndex = previewHeaders.value.findIndex((header) => header.key === yCol.value);
-  const zIndex = previewHeaders.value.findIndex((header) => header.key === zCol.value);
+  const xIndex = previewHeaders.value.findIndex(
+    (header) => header.key === xColumn.value,
+  );
+  const yIndex = previewHeaders.value.findIndex(
+    (header) => header.key === yColumn.value,
+  );
+  const zIndex = previewHeaders.value.findIndex(
+    (header) => header.key === zColumn.value,
+  );
 
   return {
-    firstRow: skipRows.value > 0 ? skipRows.value : 1,
-    headerRow: 0,
+    firstRow: firstRow.value,
+    headerRow: headerRow.value,
     separator: separator.value,
     xColumn: xIndex === -1 ? 0 : xIndex,
     yColumn: yIndex === -1 ? 1 : yIndex,
@@ -141,11 +156,11 @@ const computedResult = computed(() => {
   };
 });
 
-watch([separator, skipRows], () => {
+watch([separator, headerRow, firstRow], () => {
   parseContent();
-  xCol.value = undefined;
-  yCol.value = undefined;
-  zCol.value = undefined;
+  xColumn.value = undefined;
+  yColumn.value = undefined;
+  zColumn.value = undefined;
 });
 
 watch(
@@ -179,14 +194,22 @@ function onConfirm() {
     @update:model-value="emit('update:modelValue', $event)"
     max-width="1200px"
   >
-    <v-card class="glass-ui rounded-xl overflow-hidden border-opacity-10" color="grey-darken-4">
+    <v-card
+      class="glass-ui rounded-xl overflow-hidden border-opacity-10"
+      color="grey-darken-4"
+    >
       <v-toolbar color="transparent" flat class="px-4">
-        <v-icon icon="mdi-file-delimited-outline" color="primary" class="mr-3" />
+        <v-icon icon="mdi-file-table" size="32" color="primary" class="ml-1" />
         <v-toolbar-title class="text-h6 font-weight-bold text-white">
           CSV Previewer & Configuration
         </v-toolbar-title>
         <v-spacer />
-        <v-btn icon="mdi-close" variant="text" color="white" @click="emit('update:modelValue', false)" />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          color="white"
+          @click="emit('update:modelValue', false)"
+        />
       </v-toolbar>
 
       <v-divider class="border-opacity-10" />
@@ -194,10 +217,11 @@ function onConfirm() {
       <div class="previewer-grid">
         <CsvSettings
           v-model:separator="separator"
-          v-model:skip-rows="skipRows"
-          v-model:x-col="xCol"
-          v-model:y-col="yCol"
-          v-model:z-col="zCol"
+          v-model:header-row="headerRow"
+          v-model:first-row="firstRow"
+          v-model:x-column="xColumn"
+          v-model:y-column="yColumn"
+          v-model:z-column="zColumn"
           :headers="previewHeaders"
         />
 
@@ -205,11 +229,10 @@ function onConfirm() {
           :headers="previewHeaders"
           :rows="previewRows"
           :loading="loading"
-          :x-col="xCol"
-          :y-col="yCol"
-          :z-col="zCol"
+          :coordinates="{ x: xColumn, y: yColumn, z: zColumn }"
           :separator="separator"
-          :skip-rows="skipRows"
+          :header-row="headerRow"
+          :first-row="firstRow"
         />
       </div>
 
diff --git a/app/components/csv-preview/CsvSettings.vue b/app/components/csv-preview/CsvSettings.vue
index 3dca59a4..f20485c1 100644
--- a/app/components/csv-preview/CsvSettings.vue
+++ b/app/components/csv-preview/CsvSettings.vue
@@ -1,19 +1,21 @@
 <script setup>
-const { separator, skipRows, xCol, yCol, zCol, headers } = defineProps({
+const { separator, headerRow, firstRow, xColumn, yColumn, zColumn, headers } = defineProps({
   separator: { type: String, required: true },
-  skipRows: { type: Number, required: true },
-  xCol: { type: String, default: undefined },
-  yCol: { type: String, default: undefined },
-  zCol: { type: String, default: undefined },
+  headerRow: { type: Number, required: true },
+  firstRow: { type: Number, required: true },
+  xColumn: { type: String, default: undefined },
+  yColumn: { type: String, default: undefined },
+  zColumn: { type: String, default: undefined },
   headers: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits([
   "update:separator",
-  "update:skipRows",
-  "update:xCol",
-  "update:yCol",
-  "update:zCol",
+  "update:headerRow",
+  "update:firstRow",
+  "update:xColumn",
+  "update:yColumn",
+  "update:zColumn",
 ]);
 
 const separators = [
@@ -28,24 +30,29 @@ const internalSeparator = computed({
   set: (value) => emit("update:separator", value),
 });
 
-const internalSkipRows = computed({
-  get: () => skipRows,
-  set: (value) => emit("update:skipRows", value),
+const internalHeaderRow = computed({
+  get: () => headerRow,
+  set: (value) => emit("update:headerRow", value),
 });
 
-const internalXCol = computed({
-  get: () => xCol,
-  set: (value) => emit("update:xCol", value),
+const internalFirstRow = computed({
+  get: () => firstRow,
+  set: (value) => emit("update:firstRow", value),
 });
 
-const internalYCol = computed({
-  get: () => yCol,
-  set: (value) => emit("update:yCol", value),
+const internalXColumn = computed({
+  get: () => xColumn,
+  set: (value) => emit("update:xColumn", value),
 });
 
-const internalZCol = computed({
-  get: () => zCol,
-  set: (value) => emit("update:zCol", value),
+const internalYColumn = computed({
+  get: () => yColumn,
+  set: (value) => emit("update:yColumn", value),
+});
+
+const internalZColumn = computed({
+  get: () => zColumn,
+  set: (value) => emit("update:zColumn", value),
 });
 </script>
 
@@ -79,12 +86,25 @@ const internalZCol = computed({
     <div class="text-overline mb-4 text-primary font-weight-bold">Row Configuration</div>
 
     <v-text-field
-      v-model.number="internalSkipRows"
+      v-model.number="internalHeaderRow"
+      type="number"
+      label="Header Row"
+      variant="outlined"
+      density="compact"
+      hint="Index of the row containing headers"
+      persistent-hint
+      class="mb-4"
+      min="0"
+      rounded="lg"
+    />
+
+    <v-text-field
+      v-model.number="internalFirstRow"
       type="number"
-      label="Skip Rows"
+      label="First Data Row"
       variant="outlined"
       density="compact"
-      hint="Number of rows to ignore at the start"
+      hint="Index of the first row containing data"
       persistent-hint
       class="mb-6"
       min="0"
@@ -96,11 +116,11 @@ const internalZCol = computed({
     <div class="text-overline mb-4 text-primary font-weight-bold">Spatial Mapping</div>
 
     <v-select
-      v-model="internalXCol"
+      v-model="internalXColumn"
       :items="headers"
       item-title="title"
       item-value="key"
-      label="X Coordinate Column"
+      label="X Column"
       variant="outlined"
       density="compact"
       prepend-inner-icon="mdi-axis-x-arrow"
@@ -111,11 +131,11 @@ const internalZCol = computed({
     />
 
     <v-select
-      v-model="internalYCol"
+      v-model="internalYColumn"
       :items="headers"
       item-title="title"
       item-value="key"
-      label="Y Coordinate Column"
+      label="Y Column"
       variant="outlined"
       density="compact"
       prepend-inner-icon="mdi-axis-y-arrow"
@@ -126,11 +146,11 @@ const internalZCol = computed({
     />
 
     <v-select
-      v-model="internalZCol"
+      v-model="internalZColumn"
       :items="headers"
       item-title="title"
       item-value="key"
-      label="Z Coordinate Column"
+      label="Z Column"
       variant="outlined"
       density="compact"
       prepend-inner-icon="mdi-axis-z-arrow"
diff --git a/app/components/csv-preview/CsvTable.vue b/app/components/csv-preview/CsvTable.vue
index f4bcbd3b..4a6c3c53 100644
--- a/app/components/csv-preview/CsvTable.vue
+++ b/app/components/csv-preview/CsvTable.vue
@@ -1,23 +1,22 @@
 <script setup>
-const { headers, rows, loading, xCol, yCol, zCol, separator, skipRows } = defineProps({
+const { headers, rows, loading, coordinates, separator, headerRow, firstRow } = defineProps({
   headers: { type: Array, required: true },
   rows: { type: Array, required: true },
   loading: { type: Boolean, default: false },
-  xCol: { type: String, default: undefined },
-  yCol: { type: String, default: undefined },
-  zCol: { type: String, default: undefined },
+  coordinates: { type: Object, default: () => ({ x: undefined, y: undefined, z: undefined }) },
   separator: { type: String, default: "," },
-  skipRows: { type: Number, default: 0 },
+  headerRow: { type: Number, default: 0 },
+  firstRow: { type: Number, default: 1 },
 });
 
 function getColumnClass(key) {
-  if (key === xCol) {
+  if (key === coordinates.x) {
     return "x-col-highlight";
   }
-  if (key === yCol) {
+  if (key === coordinates.y) {
     return "y-col-highlight";
   }
-  if (key === zCol) {
+  if (key === coordinates.z) {
     return "z-col-highlight";
   }
   return "";
@@ -39,7 +38,7 @@ function getColumnClass(key) {
     </div>
 
     <v-data-table
-      :key="`${separator}-${skipRows}`"
+      :key="`${separator}-${headerRow}-${firstRow}`"
       :headers="headers"
       :items="rows"
       class="bg-transparent"

From 3f01a6b8b3ee4893c278150cdd2a26ab93045835 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 12 May 2026 14:58:38 +0000
Subject: [PATCH 04/14] Apply prepare changes

---
 app/components/FileUploader.vue             | 54 +++++----------------
 app/components/MissingFilesSelector.vue     |  5 +-
 app/components/csv-preview/CsvPreviewer.vue | 40 ++++-----------
 3 files changed, 22 insertions(+), 77 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index d7b5e81c..d8213acd 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -61,10 +61,7 @@ function processSelectedFiles(selected_files) {
 function removeFile(index) {
   const fileToRemove = internal_files.value[index];
   if (isCsv(fileToRemove)) {
-    const base_name = fileToRemove.name.slice(
-      0,
-      fileToRemove.name.lastIndexOf("."),
-    );
+    const base_name = fileToRemove.name.slice(0, fileToRemove.name.lastIndexOf("."));
     const sidecarName = `${base_name}.json`;
     internal_files.value = internal_files.value.filter(
       (file, idx) => idx !== index && file.name !== sidecarName,
@@ -76,9 +73,7 @@ function removeFile(index) {
 
 async function upload_files() {
   loading.value = true;
-  const promise_array = internal_files.value.map((file) =>
-    geodeStore.upload(file),
-  );
+  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
   loading.value = false;
   emit("files_uploaded", internal_files.value);
@@ -91,16 +86,11 @@ watch(
     const unconfiguredCsv = csvFiles.find((file) => !file.isConfigured);
 
     if (unconfiguredCsv) {
-      openCsvPreviewer(
-        unconfiguredCsv,
-        internal_files.value.indexOf(unconfiguredCsv),
-      );
+      openCsvPreviewer(unconfiguredCsv, internal_files.value.indexOf(unconfiguredCsv));
       return;
     }
 
-    const allConfigured = newFiles.every(
-      (file) => !isCsv(file) || file.isConfigured,
-    );
+    const allConfigured = newFiles.every((file) => !isCsv(file) || file.isConfigured);
 
     if (auto_upload && allConfigured && newFiles.length > 0) {
       await upload_files();
@@ -144,18 +134,9 @@ watch(
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white">
-        Selected files
-      </span>
-      <v-chip
-        size="small"
-        class="ml-3 bg-white-opacity-10"
-        color="white"
-        variant="flat"
-      >
-        {{
-          internal_files.filter((file) => !file.name.endsWith(".json")).length
-        }}
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
+      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
+        {{ internal_files.filter((file) => !file.name.endsWith(".json")).length }}
       </v-chip>
       <v-spacer />
       <v-btn
@@ -183,11 +164,7 @@ watch(
           style="background: rgba(255, 255, 255, 0.05) !important"
           @click:close="removeFile(index)"
         >
-          <v-icon
-            start
-            size="18"
-            :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'"
-          >
+          <v-icon start size="18" :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'">
             {{
               isCsv(file)
                 ? file.isConfigured
@@ -217,19 +194,14 @@ watch(
           </v-tooltip>
 
           <template #close>
-            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
-              >mdi-close-circle</v-icon
-            >
+            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
           </template>
         </v-chip>
       </template>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions
-    v-if="!auto_upload && internal_files.length"
-    class="mt-8 pa-0"
-  >
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
     <v-btn
       color="primary"
       variant="flat"
@@ -243,11 +215,7 @@ watch(
       <v-icon start size="22">mdi-cloud-upload</v-icon>
       Upload
       {{ internal_files.filter((file) => !file.name.endsWith(".json")).length }}
-      file<span
-        v-if="
-          internal_files.filter((file) => !file.name.endsWith('.json')).length >
-          1
-        "
+      file<span v-if="internal_files.filter((file) => !file.name.endsWith('.json')).length > 1"
         >s</span
       >
     </v-btn>
diff --git a/app/components/MissingFilesSelector.vue b/app/components/MissingFilesSelector.vue
index 3df743d0..64a04a1c 100644
--- a/app/components/MissingFilesSelector.vue
+++ b/app/components/MissingFilesSelector.vue
@@ -36,10 +36,7 @@ async function missing_files() {
   const geodeStore = useGeodeStore();
 
   const promise_array = filenames.map(async (filename) => {
-    if (
-      filename.toLowerCase().endsWith(".csv") ||
-      filename.toLowerCase().endsWith(".csv.json")
-    ) {
+    if (filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json")) {
       return { has_missing_files: false, mandatory_files: [], additional_files: [] };
     }
     const response = await geodeStore.request(schema, {
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index c38030ac..6f1c6af7 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -42,17 +42,11 @@ function autoDetectSeparator(content) {
 
   for (const candidate of candidates) {
     const counts = lines.map((line) => line.split(candidate).length);
-    const average =
-      counts.reduce((total, count) => total + count, 0) / counts.length;
+    const average = counts.reduce((total, count) => total + count, 0) / counts.length;
     const variance =
-      counts.reduce((total, count) => total + (count - average) ** 2, 0) /
-      counts.length;
-
-    if (
-      average > MIN_AVG_COUNT &&
-      variance < MAX_VARIANCE &&
-      average > maxCount
-    ) {
+      counts.reduce((total, count) => total + (count - average) ** 2, 0) / counts.length;
+
+    if (average > MIN_AVG_COUNT && variance < MAX_VARIANCE && average > maxCount) {
       maxCount = average;
       best = candidate;
     }
@@ -86,9 +80,7 @@ function parseContent() {
     return;
   }
 
-  const allLines = rawContent.value
-    .split(/\r?\n/u)
-    .filter((line) => line.trim() !== "");
+  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
 
   function splitLine(line) {
     if (!separator.value) {
@@ -122,10 +114,7 @@ function parseContent() {
     sortable: true,
   }));
 
-  const dataLines = allLines.slice(
-    firstRow.value,
-    firstRow.value + PREVIEW_ROWS_LIMIT,
-  );
+  const dataLines = allLines.slice(firstRow.value, firstRow.value + PREVIEW_ROWS_LIMIT);
   previewRows.value = dataLines.map((line) => {
     const row = splitLine(line);
     const obj = {};
@@ -136,15 +125,9 @@ function parseContent() {
   });
 }
 const computedResult = computed(() => {
-  const xIndex = previewHeaders.value.findIndex(
-    (header) => header.key === xColumn.value,
-  );
-  const yIndex = previewHeaders.value.findIndex(
-    (header) => header.key === yColumn.value,
-  );
-  const zIndex = previewHeaders.value.findIndex(
-    (header) => header.key === zColumn.value,
-  );
+  const xIndex = previewHeaders.value.findIndex((header) => header.key === xColumn.value);
+  const yIndex = previewHeaders.value.findIndex((header) => header.key === yColumn.value);
+  const zIndex = previewHeaders.value.findIndex((header) => header.key === zColumn.value);
 
   return {
     firstRow: firstRow.value,
@@ -194,10 +177,7 @@ function onConfirm() {
     @update:model-value="emit('update:modelValue', $event)"
     max-width="1200px"
   >
-    <v-card
-      class="glass-ui rounded-xl overflow-hidden border-opacity-10"
-      color="grey-darken-4"
-    >
+    <v-card class="glass-ui rounded-xl overflow-hidden border-opacity-10" color="grey-darken-4">
       <v-toolbar color="transparent" flat class="px-4">
         <v-icon icon="mdi-file-table" size="32" color="primary" class="ml-1" />
         <v-toolbar-title class="text-h6 font-weight-bold text-white">

From 5c4a031f99646d1b2ad734c7a2729f091d9da968 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 12 May 2026 17:07:44 +0200
Subject: [PATCH 05/14] oxlint

---
 app/utils/import_workflow.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/utils/import_workflow.js b/app/utils/import_workflow.js
index 297c8951..41dab83f 100644
--- a/app/utils/import_workflow.js
+++ b/app/utils/import_workflow.js
@@ -9,10 +9,8 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const SECOND = 1000;
 
 async function importWorkflow(files) {
-  const start = Date.now();
   const promise_array = [];
   for (const file of files) {
     const { filename, geode_object_type } = file;

From a1d4179ae32c57da812ce276bc6badc5f8d70ba4 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 12 May 2026 15:09:25 +0000
Subject: [PATCH 06/14] Apply prepare changes

---
 app/utils/import_workflow.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/utils/import_workflow.js b/app/utils/import_workflow.js
index 41dab83f..fcbfdc8b 100644
--- a/app/utils/import_workflow.js
+++ b/app/utils/import_workflow.js
@@ -9,7 +9,6 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-
 async function importWorkflow(files) {
   const promise_array = [];
   for (const file of files) {

From 58682b42c2aeb08a180e77a643803141686fa761 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 12 May 2026 17:29:33 +0200
Subject: [PATCH 07/14] update base url fix test

---
 .oxlintrc.json                                       | 12 ++++++------
 app/components/FileUploader.vue                      |  2 +-
 app/components/MissingFilesSelector.vue              |  2 +-
 tests/unit/components/CrsSelector.nuxt.test.js       |  2 +-
 tests/unit/components/ExtensionSelector.nuxt.test.js |  2 +-
 tests/unit/components/FileSelector.nuxt.test.js      |  3 ++-
 tests/unit/components/FileUploader.nuxt.test.js      |  5 +++--
 .../Inspector/InspectionButton.nuxt.test.js          |  2 +-
 .../components/MissingFilesSelector.nuxt.test.js     |  3 ++-
 tests/unit/components/ObjectSelector.nuxt.test.js    |  2 +-
 tests/unit/components/PackagesVersions.nuxt.test.js  |  2 +-
 11 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index e7d7249e..b895962c 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -21,7 +21,7 @@
     "unicorn/prefer-ternary": "off",
     "oxc/no-async-await": "off",
     "oxc/no-rest-spread-properties": "off", // Enable if older browser support is needed
-    "eslint/max-statements": ["warn", 20],
+    "eslint/max-statements": ["off", 20],
     "eslint/id-length": [
       "error",
       {
@@ -29,7 +29,7 @@
         "min": 3
       }
     ],
-    "eslint/no-console": "warn", // Disable for debugging. Disable later to not have browser logs
+    "eslint/no-console": "off", // Disable for debugging. Disable later to not have browser logs
     "sort-imports": [
       "error",
       {
@@ -46,13 +46,13 @@
       }
     ],
     "import/max-dependencies": [
-      "warn",
+      "off",
       {
         "max": 10
       }
     ],
     "max-lines-per-function": [
-      "warn",
+      "off",
       {
         "max": 50,
         "skipBlankLines": true,
@@ -80,7 +80,7 @@
     "vitest/require-hook": "off",
     "import/unambiguous": "off",
     "max-params": [
-      "warn",
+      "off",
       {
         "max": 4
       }
@@ -129,7 +129,7 @@
         "max-statements": "off",
         "vitest/prefer-to-be-truthy": "off",
         "vitest/prefer-to-be-falsy": "off",
-        "vitest/require-test-timeout": "warn",
+        "vitest/require-test-timeout": "off",
         "vitest/prefer-importing-vitest-globals": "off",
         "jest/consistent-test-it": "off",
         "vitest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index d8213acd..d5fe02d5 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -96,7 +96,7 @@ watch(
       await upload_files();
     }
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
 watch(
diff --git a/app/components/MissingFilesSelector.vue b/app/components/MissingFilesSelector.vue
index 64a04a1c..f371b61d 100644
--- a/app/components/MissingFilesSelector.vue
+++ b/app/components/MissingFilesSelector.vue
@@ -97,7 +97,7 @@ await missing_files();
     <v-row>
       <v-col cols="12">
         <FileUploader
-          v-bind="{ multiple, accept, files, allow_csv_config: true }"
+          v-bind="{ multiple, accept, files, auto_upload: false, allow_csv_config: true }"
           @files_uploaded="files_uploaded_event"
         />
       </v-col>
diff --git a/tests/unit/components/CrsSelector.nuxt.test.js b/tests/unit/components/CrsSelector.nuxt.test.js
index 158fa651..9a0fec18 100644
--- a/tests/unit/components/CrsSelector.nuxt.test.js
+++ b/tests/unit/components/CrsSelector.nuxt.test.js
@@ -17,7 +17,7 @@ describe("crs selector", () => {
   beforeEach(() => {
     pinia = setupActivePinia();
     geodeStore = useGeodeStore();
-    geodeStore.base_url = "";
+    geodeStore.base_url = "/";
   });
 
   test("default behavior", async () => {
diff --git a/tests/unit/components/ExtensionSelector.nuxt.test.js b/tests/unit/components/ExtensionSelector.nuxt.test.js
index 4bb32e5f..6f60fb41 100644
--- a/tests/unit/components/ExtensionSelector.nuxt.test.js
+++ b/tests/unit/components/ExtensionSelector.nuxt.test.js
@@ -21,7 +21,7 @@ const geodeStore = useGeodeStore();
 
 describe("extension selector", () => {
   beforeEach(() => {
-    geodeStore.base_url = "";
+    geodeStore.base_url = "/";
 
     geodeStore.request = vi.fn(() => {
       const response = {
diff --git a/tests/unit/components/FileSelector.nuxt.test.js b/tests/unit/components/FileSelector.nuxt.test.js
index 83f01dab..f22131fe 100644
--- a/tests/unit/components/FileSelector.nuxt.test.js
+++ b/tests/unit/components/FileSelector.nuxt.test.js
@@ -21,7 +21,7 @@ const upload_file_schema = schemas.opengeodeweb_back.upload_file;
 describe("file selector", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("select file", async () => {
     registerEndpoint(allowed_files_schema.$id, {
@@ -52,6 +52,7 @@ describe("file selector", () => {
       writable: true,
     });
     await v_file_input.trigger("change");
+    await flushPromises();
     const v_btn = wrapper.findComponent(components.VBtn);
     await v_btn.trigger("click");
     await flushPromises();
diff --git a/tests/unit/components/FileUploader.nuxt.test.js b/tests/unit/components/FileUploader.nuxt.test.js
index a80baa4a..4d1b7edf 100644
--- a/tests/unit/components/FileUploader.nuxt.test.js
+++ b/tests/unit/components/FileUploader.nuxt.test.js
@@ -18,7 +18,7 @@ const upload_file_schema = schemas.opengeodeweb_back.upload_file;
 describe("file uploader", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   registerEndpoint(upload_file_schema.$id, {
     method: upload_file_schema.methods[FIRST_INDEX],
@@ -37,7 +37,7 @@ describe("file uploader", () => {
         global: {
           plugins: [vuetify, pinia],
         },
-        props: { multiple: false, accept: "*.txt" },
+        props: { multiple: false, accept: "*.txt", auto_upload: false },
       });
 
       const v_file_input = wrapper.find('input[type="file"]');
@@ -46,6 +46,7 @@ describe("file uploader", () => {
         writable: true,
       });
       await v_file_input.trigger("change");
+      await flushPromises();
       const v_btn = wrapper.findComponent(components.VBtn);
 
       await v_btn.trigger("click");
diff --git a/tests/unit/components/Inspector/InspectionButton.nuxt.test.js b/tests/unit/components/Inspector/InspectionButton.nuxt.test.js
index b4d2db82..57d5666f 100644
--- a/tests/unit/components/Inspector/InspectionButton.nuxt.test.js
+++ b/tests/unit/components/Inspector/InspectionButton.nuxt.test.js
@@ -12,7 +12,7 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 describe("inspector inspection button", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("with issues", async () => {
     const inspection_result = {
diff --git a/tests/unit/components/MissingFilesSelector.nuxt.test.js b/tests/unit/components/MissingFilesSelector.nuxt.test.js
index 68f80c81..8350e536 100644
--- a/tests/unit/components/MissingFilesSelector.nuxt.test.js
+++ b/tests/unit/components/MissingFilesSelector.nuxt.test.js
@@ -20,7 +20,7 @@ const upload_file_schema = schemas.opengeodeweb_back.upload_file;
 describe("missing files selector", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("select file", async () => {
     geodeStore.request = vi.fn((schema, params, callbacks) => {
@@ -57,6 +57,7 @@ describe("missing files selector", () => {
       writable: true,
     });
     await v_file_input.trigger("change");
+    await flushPromises();
     const v_btn = file_uploader.findComponent(components.VBtn);
 
     registerEndpoint(upload_file_schema.$id, {
diff --git a/tests/unit/components/ObjectSelector.nuxt.test.js b/tests/unit/components/ObjectSelector.nuxt.test.js
index f1ef682b..1c9ae120 100644
--- a/tests/unit/components/ObjectSelector.nuxt.test.js
+++ b/tests/unit/components/ObjectSelector.nuxt.test.js
@@ -19,7 +19,7 @@ const { allowed_objects } = schemas.opengeodeweb_back;
 describe("object selector", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("loadable with one class", async () => {
     const response = {
diff --git a/tests/unit/components/PackagesVersions.nuxt.test.js b/tests/unit/components/PackagesVersions.nuxt.test.js
index 362168b2..de2785b2 100644
--- a/tests/unit/components/PackagesVersions.nuxt.test.js
+++ b/tests/unit/components/PackagesVersions.nuxt.test.js
@@ -11,7 +11,7 @@ describe("packages versions", () => {
   test("mount", async () => {
     const pinia = setupActivePinia();
     const geodeStore = useGeodeStore();
-    geodeStore.base_url = "";
+    geodeStore.base_url = "/";
 
     const schema = {
       $id: "/versions",

From f6a7c885aa9b7ba5bc90a53ef2e73eaf0a0f6387 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 12 May 2026 15:30:30 +0000
Subject: [PATCH 08/14] Apply prepare changes

---
 .oxlintrc.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index b895962c..e7d7249e 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -21,7 +21,7 @@
     "unicorn/prefer-ternary": "off",
     "oxc/no-async-await": "off",
     "oxc/no-rest-spread-properties": "off", // Enable if older browser support is needed
-    "eslint/max-statements": ["off", 20],
+    "eslint/max-statements": ["warn", 20],
     "eslint/id-length": [
       "error",
       {
@@ -29,7 +29,7 @@
         "min": 3
       }
     ],
-    "eslint/no-console": "off", // Disable for debugging. Disable later to not have browser logs
+    "eslint/no-console": "warn", // Disable for debugging. Disable later to not have browser logs
     "sort-imports": [
       "error",
       {
@@ -46,13 +46,13 @@
       }
     ],
     "import/max-dependencies": [
-      "off",
+      "warn",
       {
         "max": 10
       }
     ],
     "max-lines-per-function": [
-      "off",
+      "warn",
       {
         "max": 50,
         "skipBlankLines": true,
@@ -80,7 +80,7 @@
     "vitest/require-hook": "off",
     "import/unambiguous": "off",
     "max-params": [
-      "off",
+      "warn",
       {
         "max": 4
       }
@@ -129,7 +129,7 @@
         "max-statements": "off",
         "vitest/prefer-to-be-truthy": "off",
         "vitest/prefer-to-be-falsy": "off",
-        "vitest/require-test-timeout": "off",
+        "vitest/require-test-timeout": "warn",
         "vitest/prefer-importing-vitest-globals": "off",
         "jest/consistent-test-it": "off",
         "vitest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],

From 3f477c096384a4c6fb779787668a6a0ed86aaea2 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 10:22:32 +0200
Subject: [PATCH 09/14] update comportement

---
 app/components/FileSelector.vue             |  4 +--
 app/components/FileUploader.vue             | 25 ++++++-------------
 app/components/MissingFilesSelector.vue     | 27 ++++++++++++---------
 app/components/csv-preview/CsvPreviewer.vue |  1 -
 app/utils/import_workflow.js                |  9 +++----
 5 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index a283b82c..bdd0c0db 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -9,12 +9,11 @@ const schema = schemas.opengeodeweb_back.allowed_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, files, auto_upload, show_overlay, allow_csv_config } = defineProps({
+const { multiple, files, auto_upload, show_overlay } = defineProps({
   multiple: { type: Boolean, required: true },
   files: { type: Array, default: () => [] },
   auto_upload: { type: Boolean, default: true },
   show_overlay: { type: Boolean, default: true },
-  allow_csv_config: { type: Boolean, default: false },
 });
 
 const internal_files = ref(files);
@@ -70,7 +69,6 @@ await get_allowed_files();
       files: internal_files,
       auto_upload: internal_auto_upload,
       show_overlay,
-      allow_csv_config,
     }"
     @files_uploaded="files_uploaded_event"
   />
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index d5fe02d5..b430cf47 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -32,7 +32,7 @@ function openCsvPreviewer(file, index) {
   csv_dialog.value = true;
 }
 
-function onCsvConfirm(result) {
+async function onCsvConfirm(result) {
   const json_content = JSON.stringify(result, undefined, 2);
   const base_name = current_csv_file.value.name.slice(
     0,
@@ -46,7 +46,8 @@ function onCsvConfirm(result) {
   });
 
   current_csv_file.value.isConfigured = true;
-  internal_files.value = [...internal_files.value, json_file];
+  await geodeStore.upload(json_file);
+  internal_files.value = [...internal_files.value];
   csv_dialog.value = false;
 }
 
@@ -59,16 +60,7 @@ function processSelectedFiles(selected_files) {
 }
 
 function removeFile(index) {
-  const fileToRemove = internal_files.value[index];
-  if (isCsv(fileToRemove)) {
-    const base_name = fileToRemove.name.slice(0, fileToRemove.name.lastIndexOf("."));
-    const sidecarName = `${base_name}.json`;
-    internal_files.value = internal_files.value.filter(
-      (file, idx) => idx !== index && file.name !== sidecarName,
-    );
-  } else {
-    internal_files.value.splice(index, 1);
-  }
+  internal_files.value.splice(index, 1);
 }
 
 async function upload_files() {
@@ -136,7 +128,7 @@ watch(
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
       <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
       <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
-        {{ internal_files.filter((file) => !file.name.endsWith(".json")).length }}
+        {{ internal_files.length }}
       </v-chip>
       <v-spacer />
       <v-btn
@@ -155,7 +147,6 @@ watch(
     <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
       <template v-for="(file, index) in internal_files" :key="index">
         <v-chip
-          v-if="!file.name.endsWith('.json')"
           closable
           size="default"
           color="white"
@@ -214,10 +205,8 @@ watch(
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
       Upload
-      {{ internal_files.filter((file) => !file.name.endsWith(".json")).length }}
-      file<span v-if="internal_files.filter((file) => !file.name.endsWith('.json')).length > 1"
-        >s</span
-      >
+      {{ internal_files.length }}
+      file<span v-if="internal_files.length > 1">s</span>
     </v-btn>
   </v-card-actions>
 
diff --git a/app/components/MissingFilesSelector.vue b/app/components/MissingFilesSelector.vue
index f371b61d..55776c7f 100644
--- a/app/components/MissingFilesSelector.vue
+++ b/app/components/MissingFilesSelector.vue
@@ -35,15 +35,17 @@ async function missing_files() {
   additional_files.value = [];
   const geodeStore = useGeodeStore();
 
-  const promise_array = filenames.map(async (filename) => {
-    if (filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json")) {
-      return { has_missing_files: false, mandatory_files: [], additional_files: [] };
+  const promise_array = filenames.map((filename) => {
+    const isCsvFile =
+      filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json");
+    if (isCsvFile) {
+      return Promise.resolve({
+        has_missing_files: false,
+        mandatory_files: [],
+        additional_files: [],
+      });
     }
-    const response = await geodeStore.request(schema, {
-      geode_object_type,
-      filename,
-    });
-    return response;
+    return geodeStore.request(schema, { geode_object_type, filename });
   });
   const values = await Promise.all(promise_array);
   for (const value of values) {
@@ -53,11 +55,12 @@ async function missing_files() {
     mandatory_files.value = [...mandatory_files.value, ...value.mandatory_files];
     additional_files.value = [...additional_files.value, ...value.additional_files];
   }
-  const main_csvs = files.filter(
+  const unconfigured_csvs = files.filter(
     (file) =>
-      file.name.toLowerCase().endsWith(".csv") || file.name.toLowerCase().endsWith(".csv.json"),
+      (file.name.toLowerCase().endsWith(".csv") || file.name.toLowerCase().endsWith(".csv.json")) &&
+      !file.isConfigured,
   );
-  if (main_csvs.length > 0) {
+  if (unconfigured_csvs.length > 0) {
     has_missing_files.value = true;
     if (accept.value === "") {
       accept.value = ".json";
@@ -97,7 +100,7 @@ await missing_files();
     <v-row>
       <v-col cols="12">
         <FileUploader
-          v-bind="{ multiple, accept, files, auto_upload: false, allow_csv_config: true }"
+          v-bind="{ multiple, accept, files, auto_upload: false }"
           @files_uploaded="files_uploaded_event"
         />
       </v-col>
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index 6f1c6af7..f3ea99d0 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -27,7 +27,6 @@ const zColumn = ref(undefined);
 const rawContent = ref("");
 const previewRows = ref([]);
 const previewHeaders = ref([]);
-const parsedAll = ref([]);
 const loading = ref(false);
 const toggleLoading = useToggle(loading);
 
diff --git a/app/utils/import_workflow.js b/app/utils/import_workflow.js
index fcbfdc8b..5f656faa 100644
--- a/app/utils/import_workflow.js
+++ b/app/utils/import_workflow.js
@@ -10,12 +10,9 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 async function importWorkflow(files) {
-  const promise_array = [];
-  for (const file of files) {
-    const { filename, geode_object_type } = file;
-    promise_array.push(importFile(filename, geode_object_type));
-  }
-  const results = await Promise.all(promise_array);
+  const results = await Promise.all(
+    files.map(({ filename, geode_object_type }) => importFile(filename, geode_object_type)),
+  );
   const hybridViewerStore = useHybridViewerStore();
   hybridViewerStore.remoteRender();
   return results;

From 8a6da04882abeb48de16e18e7f12da6f438af857 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 12:17:05 +0200
Subject: [PATCH 10/14] correct comments

---
 app/components/FileSelector.vue |  6 +--
 app/components/FileUploader.vue | 82 ++++++++++++++++++++++-----------
 2 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index bdd0c0db..bbbf593a 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -48,11 +48,7 @@ async function get_allowed_files() {
   toggle_loading();
   const geodeStore = useGeodeStore();
   const response = await geodeStore.request(schema, {});
-  const extensions = response.extensions.map((extension) => `.${extension}`);
-  if (!extensions.includes(".csv")) {
-    extensions.push(".csv");
-  }
-  accept.value = extensions.join(",");
+  accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
   toggle_loading();
 }
 
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index b430cf47..0b69a14c 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -6,12 +6,13 @@ import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
 const emit = defineEmits(["files_uploaded"]);
 
-const { multiple, accept, files, auto_upload, showOverlay } = defineProps({
+const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps({
   multiple: { type: Boolean, default: false },
   accept: { type: String, default: "" },
   files: { type: Array, default: () => [] },
   auto_upload: { type: Boolean, default: true },
   showOverlay: { type: Boolean, default: false },
+  mini: { type: Boolean, default: false },
 });
 
 const geodeStore = useGeodeStore();
@@ -21,6 +22,8 @@ const csv_dialog = ref(false);
 const current_csv_file = ref(undefined);
 const current_csv_index = ref(-1);
 const loading = ref(false);
+const files_uploaded = ref(false);
+const toggle_loading = useToggle(loading);
 
 function isCsv(file) {
   return file.name.toLowerCase().endsWith(".csv");
@@ -61,21 +64,28 @@ function processSelectedFiles(selected_files) {
 
 function removeFile(index) {
   internal_files.value.splice(index, 1);
+  if (internal_files.value.length === 0) {
+    files_uploaded.value = false;
+    emit("files_uploaded", []);
+  }
 }
 
 async function upload_files() {
-  loading.value = true;
+  toggle_loading();
   const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
-  loading.value = false;
+  files_uploaded.value = true;
+  toggle_loading();
   emit("files_uploaded", internal_files.value);
 }
 
 watch(
   () => internal_files.value,
   async (newFiles) => {
-    const csvFiles = newFiles.filter((file) => isCsv(file));
-    const unconfiguredCsv = csvFiles.find((file) => !file.isConfigured);
+    if (newFiles.length === 0) {
+      return;
+    }
+    const unconfiguredCsv = newFiles.find((file) => isCsv(file) && !file.isConfigured);
 
     if (unconfiguredCsv) {
       openCsvPreviewer(unconfiguredCsv, internal_files.value.indexOf(unconfiguredCsv));
@@ -84,7 +94,7 @@ watch(
 
     const allConfigured = newFiles.every((file) => !isCsv(file) || file.isConfigured);
 
-    if (auto_upload && allConfigured && newFiles.length > 0) {
+    if (auto_upload && allConfigured) {
       await upload_files();
     }
   },
@@ -101,27 +111,47 @@ watch(
 </script>
 
 <template>
-  <DragAndDrop
-    v-if="!internal_files.length"
-    ref="dragAndDropRef"
-    :multiple
-    :accept
-    :loading
-    :show-extensions="false"
-    @files-selected="processSelectedFiles"
-  />
+  <template v-if="mini">
+    <v-btn
+      icon="mdi-plus"
+      variant="text"
+      color="primary"
+      :loading="loading"
+      class="mt-2"
+      @click="dragAndDropRef?.triggerFileDialog"
+    />
+    <DragAndDrop
+      ref="dragAndDropRef"
+      class="d-none"
+      :multiple
+      :accept
+      @files-selected="processSelectedFiles"
+    />
+  </template>
 
-  <DragAndDrop
-    v-else
-    ref="dragAndDropRef"
-    :multiple
-    :accept
-    :loading
-    :show-extensions="false"
-    :inline="false"
-    :show-overlay="showOverlay"
-    @files-selected="processSelectedFiles"
-  />
+  <template v-else>
+    <DragAndDrop
+      v-if="!internal_files.length"
+      ref="dragAndDropRef"
+      :multiple
+      :accept
+      :loading
+      :show-extensions="false"
+      @files-selected="processSelectedFiles"
+    />
+
+    <DragAndDrop
+      v-else
+      ref="dragAndDropRef"
+      :multiple
+      :accept
+      :loading
+      :show-extensions="false"
+      :inline="false"
+      :show-overlay="showOverlay"
+      @files-selected="processSelectedFiles"
+    />
+  </template>
 
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">

From 11fb55400433f939c02eb35043f3b3b0a67de983 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 14:00:01 +0200
Subject: [PATCH 11/14] fix comments & change text button

---
 app/components/FileUploader.vue             | 13 +++++--
 app/components/csv-preview/CsvPreviewer.vue | 42 +++++++++++++++------
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 0b69a14c..17d5ec70 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -16,8 +16,8 @@ const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps(
 });
 
 const geodeStore = useGeodeStore();
+const internal_files = ref(files);
 const dragAndDropRef = ref(undefined);
-const internal_files = ref([...files]);
 const csv_dialog = ref(false);
 const current_csv_file = ref(undefined);
 const current_csv_index = ref(-1);
@@ -98,13 +98,20 @@ watch(
       await upload_files();
     }
   },
-  { deep: true, immediate: true },
+  { deep: true },
 );
 
+if (files.length > 0) {
+  internal_files.value = files;
+  if (auto_upload) {
+    upload_files();
+  }
+}
+
 watch(
   () => files,
   (newVal) => {
-    internal_files.value = [...newVal];
+    internal_files.value = newVal;
   },
   { deep: true },
 );
diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index f3ea99d0..ee5f1609 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -41,11 +41,17 @@ function autoDetectSeparator(content) {
 
   for (const candidate of candidates) {
     const counts = lines.map((line) => line.split(candidate).length);
-    const average = counts.reduce((total, count) => total + count, 0) / counts.length;
+    const average =
+      counts.reduce((total, count) => total + count, 0) / counts.length;
     const variance =
-      counts.reduce((total, count) => total + (count - average) ** 2, 0) / counts.length;
-
-    if (average > MIN_AVG_COUNT && variance < MAX_VARIANCE && average > maxCount) {
+      counts.reduce((total, count) => total + (count - average) ** 2, 0) /
+      counts.length;
+
+    if (
+      average > MIN_AVG_COUNT &&
+      variance < MAX_VARIANCE &&
+      average > maxCount
+    ) {
       maxCount = average;
       best = candidate;
     }
@@ -79,7 +85,9 @@ function parseContent() {
     return;
   }
 
-  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
+  const allLines = rawContent.value
+    .split(/\r?\n/u)
+    .filter((line) => line.trim() !== "");
 
   function splitLine(line) {
     if (!separator.value) {
@@ -113,7 +121,10 @@ function parseContent() {
     sortable: true,
   }));
 
-  const dataLines = allLines.slice(firstRow.value, firstRow.value + PREVIEW_ROWS_LIMIT);
+  const dataLines = allLines.slice(
+    firstRow.value,
+    firstRow.value + PREVIEW_ROWS_LIMIT,
+  );
   previewRows.value = dataLines.map((line) => {
     const row = splitLine(line);
     const obj = {};
@@ -124,9 +135,15 @@ function parseContent() {
   });
 }
 const computedResult = computed(() => {
-  const xIndex = previewHeaders.value.findIndex((header) => header.key === xColumn.value);
-  const yIndex = previewHeaders.value.findIndex((header) => header.key === yColumn.value);
-  const zIndex = previewHeaders.value.findIndex((header) => header.key === zColumn.value);
+  const xIndex = previewHeaders.value.findIndex(
+    (header) => header.key === xColumn.value,
+  );
+  const yIndex = previewHeaders.value.findIndex(
+    (header) => header.key === yColumn.value,
+  );
+  const zIndex = previewHeaders.value.findIndex(
+    (header) => header.key === zColumn.value,
+  );
 
   return {
     firstRow: firstRow.value,
@@ -176,7 +193,10 @@ function onConfirm() {
     @update:model-value="emit('update:modelValue', $event)"
     max-width="1200px"
   >
-    <v-card class="glass-ui rounded-xl overflow-hidden border-opacity-10" color="grey-darken-4">
+    <v-card
+      class="glass-ui rounded-xl overflow-hidden border-opacity-10"
+      color="grey-darken-4"
+    >
       <v-toolbar color="transparent" flat class="px-4">
         <v-icon icon="mdi-file-table" size="32" color="primary" class="ml-1" />
         <v-toolbar-title class="text-h6 font-weight-bold text-white">
@@ -234,7 +254,7 @@ function onConfirm() {
           @click="onConfirm"
           :disabled="!previewHeaders.length"
         >
-          Confirm & Convert to JSON
+          Confirm
         </v-btn>
       </v-card-actions>
     </v-card>

From e2620be40565e91b27b8abe92c87d2efeca12a8b Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 13 May 2026 12:00:54 +0000
Subject: [PATCH 12/14] Apply prepare changes

---
 app/components/csv-preview/CsvPreviewer.vue | 40 ++++++---------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/app/components/csv-preview/CsvPreviewer.vue b/app/components/csv-preview/CsvPreviewer.vue
index ee5f1609..66f6cd94 100644
--- a/app/components/csv-preview/CsvPreviewer.vue
+++ b/app/components/csv-preview/CsvPreviewer.vue
@@ -41,17 +41,11 @@ function autoDetectSeparator(content) {
 
   for (const candidate of candidates) {
     const counts = lines.map((line) => line.split(candidate).length);
-    const average =
-      counts.reduce((total, count) => total + count, 0) / counts.length;
+    const average = counts.reduce((total, count) => total + count, 0) / counts.length;
     const variance =
-      counts.reduce((total, count) => total + (count - average) ** 2, 0) /
-      counts.length;
-
-    if (
-      average > MIN_AVG_COUNT &&
-      variance < MAX_VARIANCE &&
-      average > maxCount
-    ) {
+      counts.reduce((total, count) => total + (count - average) ** 2, 0) / counts.length;
+
+    if (average > MIN_AVG_COUNT && variance < MAX_VARIANCE && average > maxCount) {
       maxCount = average;
       best = candidate;
     }
@@ -85,9 +79,7 @@ function parseContent() {
     return;
   }
 
-  const allLines = rawContent.value
-    .split(/\r?\n/u)
-    .filter((line) => line.trim() !== "");
+  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
 
   function splitLine(line) {
     if (!separator.value) {
@@ -121,10 +113,7 @@ function parseContent() {
     sortable: true,
   }));
 
-  const dataLines = allLines.slice(
-    firstRow.value,
-    firstRow.value + PREVIEW_ROWS_LIMIT,
-  );
+  const dataLines = allLines.slice(firstRow.value, firstRow.value + PREVIEW_ROWS_LIMIT);
   previewRows.value = dataLines.map((line) => {
     const row = splitLine(line);
     const obj = {};
@@ -135,15 +124,9 @@ function parseContent() {
   });
 }
 const computedResult = computed(() => {
-  const xIndex = previewHeaders.value.findIndex(
-    (header) => header.key === xColumn.value,
-  );
-  const yIndex = previewHeaders.value.findIndex(
-    (header) => header.key === yColumn.value,
-  );
-  const zIndex = previewHeaders.value.findIndex(
-    (header) => header.key === zColumn.value,
-  );
+  const xIndex = previewHeaders.value.findIndex((header) => header.key === xColumn.value);
+  const yIndex = previewHeaders.value.findIndex((header) => header.key === yColumn.value);
+  const zIndex = previewHeaders.value.findIndex((header) => header.key === zColumn.value);
 
   return {
     firstRow: firstRow.value,
@@ -193,10 +176,7 @@ function onConfirm() {
     @update:model-value="emit('update:modelValue', $event)"
     max-width="1200px"
   >
-    <v-card
-      class="glass-ui rounded-xl overflow-hidden border-opacity-10"
-      color="grey-darken-4"
-    >
+    <v-card class="glass-ui rounded-xl overflow-hidden border-opacity-10" color="grey-darken-4">
       <v-toolbar color="transparent" flat class="px-4">
         <v-icon icon="mdi-file-table" size="32" color="primary" class="ml-1" />
         <v-toolbar-title class="text-h6 font-weight-bold text-white">

From 9f2a1c93f3bcbbae56289ba15ce105d2ed372a30 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 14:51:52 +0200
Subject: [PATCH 13/14] correct last comments

---
 app/components/FileUploader.vue | 100 ++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 43 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 17d5ec70..41d89498 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -4,20 +4,22 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
 import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
-const emit = defineEmits(["files_uploaded"]);
+const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps({
-  multiple: { type: Boolean, default: false },
-  accept: { type: String, default: "" },
-  files: { type: Array, default: () => [] },
-  auto_upload: { type: Boolean, default: true },
-  showOverlay: { type: Boolean, default: false },
-  mini: { type: Boolean, default: false },
-});
+const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps(
+  {
+    multiple: { type: Boolean, default: false },
+    accept: { type: String, default: "" },
+    files: { type: Array, default: () => [] },
+    auto_upload: { type: Boolean, default: true },
+    showOverlay: { type: Boolean, default: false },
+    mini: { type: Boolean, default: false },
+  },
+);
 
 const geodeStore = useGeodeStore();
 const internal_files = ref(files);
-const dragAndDropRef = ref(undefined);
+const dragAndDropRef = useTemplateRef("dragAndDropRef");
 const csv_dialog = ref(false);
 const current_csv_file = ref(undefined);
 const current_csv_index = ref(-1);
@@ -72,7 +74,9 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
+  const promise_array = internal_files.value.map((file) =>
+    geodeStore.upload(file),
+  );
   await Promise.all(promise_array);
   files_uploaded.value = true;
   toggle_loading();
@@ -85,14 +89,21 @@ watch(
     if (newFiles.length === 0) {
       return;
     }
-    const unconfiguredCsv = newFiles.find((file) => isCsv(file) && !file.isConfigured);
+    const unconfiguredCsv = newFiles.find(
+      (file) => isCsv(file) && !file.isConfigured,
+    );
 
     if (unconfiguredCsv) {
-      openCsvPreviewer(unconfiguredCsv, internal_files.value.indexOf(unconfiguredCsv));
+      openCsvPreviewer(
+        unconfiguredCsv,
+        internal_files.value.indexOf(unconfiguredCsv),
+      );
       return;
     }
 
-    const allConfigured = newFiles.every((file) => !isCsv(file) || file.isConfigured);
+    const allConfigured = newFiles.every(
+      (file) => !isCsv(file) || file.isConfigured,
+    );
 
     if (auto_upload && allConfigured) {
       await upload_files();
@@ -135,36 +146,30 @@ watch(
       @files-selected="processSelectedFiles"
     />
   </template>
-
-  <template v-else>
-    <DragAndDrop
-      v-if="!internal_files.length"
-      ref="dragAndDropRef"
-      :multiple
-      :accept
-      :loading
-      :show-extensions="false"
-      @files-selected="processSelectedFiles"
-    />
-
-    <DragAndDrop
-      v-else
-      ref="dragAndDropRef"
-      :multiple
-      :accept
-      :loading
-      :show-extensions="false"
-      :inline="false"
-      :show-overlay="showOverlay"
-      @files-selected="processSelectedFiles"
-    />
-  </template>
+  <DragAndDrop
+    v-else
+    ref="dragAndDropRef"
+    :multiple
+    :accept
+    :loading
+    :show-extensions="false"
+    :inline="!internal_files.length"
+    :show-overlay="showOverlay"
+    @files-selected="processSelectedFiles"
+  />
 
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
-      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
       <v-spacer />
@@ -192,7 +197,11 @@ watch(
           style="background: rgba(255, 255, 255, 0.05) !important"
           @click:close="removeFile(index)"
         >
-          <v-icon start size="18" :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'">
+          <v-icon
+            start
+            size="18"
+            :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'"
+          >
             {{
               isCsv(file)
                 ? file.isConfigured
@@ -222,14 +231,19 @@ watch(
           </v-tooltip>
 
           <template #close>
-            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
+            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+              >mdi-close-circle</v-icon
+            >
           </template>
         </v-chip>
       </template>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
+  <v-card-actions
+    v-if="!auto_upload && internal_files.length"
+    class="mt-8 pa-0"
+  >
     <v-btn
       color="primary"
       variant="flat"

From f0a5350d9045d0a4631ca387fb2f4cb9893155c4 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 13 May 2026 12:52:39 +0000
Subject: [PATCH 14/14] Apply prepare changes

---
 app/components/FileUploader.vue | 61 +++++++++------------------------
 1 file changed, 17 insertions(+), 44 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 41d89498..757ddce4 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -6,16 +6,14 @@ import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps(
-  {
-    multiple: { type: Boolean, default: false },
-    accept: { type: String, default: "" },
-    files: { type: Array, default: () => [] },
-    auto_upload: { type: Boolean, default: true },
-    showOverlay: { type: Boolean, default: false },
-    mini: { type: Boolean, default: false },
-  },
-);
+const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps({
+  multiple: { type: Boolean, default: false },
+  accept: { type: String, default: "" },
+  files: { type: Array, default: () => [] },
+  auto_upload: { type: Boolean, default: true },
+  showOverlay: { type: Boolean, default: false },
+  mini: { type: Boolean, default: false },
+});
 
 const geodeStore = useGeodeStore();
 const internal_files = ref(files);
@@ -74,9 +72,7 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) =>
-    geodeStore.upload(file),
-  );
+  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
   files_uploaded.value = true;
   toggle_loading();
@@ -89,21 +85,14 @@ watch(
     if (newFiles.length === 0) {
       return;
     }
-    const unconfiguredCsv = newFiles.find(
-      (file) => isCsv(file) && !file.isConfigured,
-    );
+    const unconfiguredCsv = newFiles.find((file) => isCsv(file) && !file.isConfigured);
 
     if (unconfiguredCsv) {
-      openCsvPreviewer(
-        unconfiguredCsv,
-        internal_files.value.indexOf(unconfiguredCsv),
-      );
+      openCsvPreviewer(unconfiguredCsv, internal_files.value.indexOf(unconfiguredCsv));
       return;
     }
 
-    const allConfigured = newFiles.every(
-      (file) => !isCsv(file) || file.isConfigured,
-    );
+    const allConfigured = newFiles.every((file) => !isCsv(file) || file.isConfigured);
 
     if (auto_upload && allConfigured) {
       await upload_files();
@@ -161,15 +150,8 @@ watch(
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white">
-        Selected files
-      </span>
-      <v-chip
-        size="small"
-        class="ml-3 bg-white-opacity-10"
-        color="white"
-        variant="flat"
-      >
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
+      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
         {{ internal_files.length }}
       </v-chip>
       <v-spacer />
@@ -197,11 +179,7 @@ watch(
           style="background: rgba(255, 255, 255, 0.05) !important"
           @click:close="removeFile(index)"
         >
-          <v-icon
-            start
-            size="18"
-            :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'"
-          >
+          <v-icon start size="18" :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'">
             {{
               isCsv(file)
                 ? file.isConfigured
@@ -231,19 +209,14 @@ watch(
           </v-tooltip>
 
           <template #close>
-            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
-              >mdi-close-circle</v-icon
-            >
+            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
           </template>
         </v-chip>
       </template>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions
-    v-if="!auto_upload && internal_files.length"
-    class="mt-8 pa-0"
-  >
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
     <v-btn
       color="primary"
       variant="flat"