frappe-ui 0.1.226 → 0.1.228

package/frappe/DataImport/DataImport.vue

@@ -3,9 +3,11 @@
 		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
     >
       <Breadcrumbs :items="breadcrumbs" />
-      <ImportSteps class="flex-1" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+      <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
   </header>
   <div>
+      <ImportSteps class="flex-1 lg:hidden w-[90%] mx-auto mt-5" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+
     <DataImportList
       v-if="step === 'list'"
       :dataImports="dataImports"
@@ -24,7 +26,7 @@
     <MappingStep
       v-else-if="step === 'map'"
       :dataImports="dataImports"
-      :data="data"
+      :data="data as DataImport"
       :fields="fields"
       @updateStep="updateStep"
     />
@@ -32,9 +34,9 @@
     <PreviewStep
       v-else-if="step === 'preview'"
       :dataImports="dataImports"
-      :data="data"
+      :data="data as DataImport"
       :fields="fields"
-      :doctypeMap="doctypeMap"
+      :doctypeMap="doctypeMap as Record<string, { title: string; listRoute?: string; pageRoute?: string }>"
       @updateStep="updateStep"
     />
   </div>
@@ -52,7 +54,7 @@ import PreviewStep from './PreviewStep.vue'
 import UploadStep from './UploadStep.vue'
 
 const route = useRoute()
-const step = ref('list')
+const step = ref<'upload' | 'map' | 'list' | 'preview'>('list')
 const data = ref<DataImport | null>(null)
 
 const props = defineProps<Partial<DataImportProps>>()
@@ -76,7 +78,7 @@ const props = defineProps<Partial<DataImportProps>>()
 
 const fields = createResource({
   url: "frappe.desk.form.load.getdoctype",
-  makeParams: (values) => {
+  makeParams: (values: { doctype: string }) => {
     return {
       doctype: values.doctype,
       with_parent: 1,
@@ -86,7 +88,7 @@ const fields = createResource({
 })
 
 watch(
-  () => [props, dataImports.data],
+  () => [route.params, props, dataImports.data],
   () => {
     if (!dataImports.data?.length) return
     if (props.doctype) {
@@ -103,9 +105,11 @@ watch(
       } else {
         step.value = 'preview'
       }
-      fields.reload({
-        doctype: data.value?.reference_doctype,
-      })
+      if (data.value?.reference_doctype) {
+        fields.reload({
+          doctype: data.value?.reference_doctype,
+        })
+      }
     }
   },
   { immediate: true },
@@ -119,15 +123,10 @@ watch(() => route.query, () => {
 
 const updateData = () => {
   data.value = dataImports.data?.find(
-    (di) => di.name === props.importName,
+    (di: DataImport) => di.name === props.importName,
     ) || null
 }
 
-const doctypeTitle = computed(() => {
-  let doctype = props.doctype || data.value?.reference_doctype
-  return props.doctypeMap?.[doctype || '']?.title || doctype || ''
-})
-
 const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: DataImport) => {
   step.value = newStep
   if (newData) {
@@ -135,16 +134,22 @@ const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: Dat
   }
 }
 
+const doctypeTitle = computed(() => {
+  let doctype = props.doctype || data.value?.reference_doctype
+  return props.doctypeMap?.[doctype || '']?.title || doctype || ''
+})
+
 const breadcrumbs = computed(() => {
   let crumbs = [
     {
       label: 'Data Import',
       route: { 
-        name: 'DataImportList', query: {
-        step: 'list'
-      } 
+        name: 'DataImportList', 
+        query: {
+          step: 'list'
+        } 
+      },
     },
-    }
   ]
 
   if (step.value !== 'list') {

package/frappe/DataImport/DataImportList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-0 flex-col text-base py-5 w-[700px] mx-auto">
+    <div class="flex min-h-0 flex-col text-base py-5 w-[90%] lg:w-[700px] mx-auto">
 		<div class="flex items-center justify-between">
 			<div>
 				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
@@ -33,7 +33,7 @@
 
         <div v-if="dataImports.data?.length" class="overflow-y-scroll">
             <div class="divide-y">
-                <div class="grid grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1">
+                <div class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1">
                     <div>
                         Name
                     </div>
@@ -43,8 +43,8 @@
                 </div>
                 <div 
                     v-for="dataImport in dataImports.data" 
-                    @click="() => redirectToImport(dataImport.name)"
-                    class="grid grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
+                    @click="() => redirectToImport(dataImport.name!)"
+                    class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
                 >
                     <div class="space-y-1">
                         <div class="text-ink-gray-7">
@@ -100,11 +100,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import type { DataImports } from './types'
+import type { DataImports, DataImport } from './types'
 import { dayjs } from "../../src/utils/dayjs"
 import { getBadgeColor } from "./dataImport"
 import Badge from '../../src/components/Badge/Badge.vue'
 import type { BadgeProps } from '../../src/components/Badge/types'
+import { toast } from "../../src/components/Toast/index"
 import Button from '../../src/components/Button/Button.vue'
 import Dialog from '../../src/components/Dialog/Dialog.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
@@ -137,10 +138,12 @@ watch([search, importStatus], ([newSearch, newStatus]) => {
     props.dataImports.reload()
 })
 
-const createDataImport = (close) => {
+const createDataImport = (close: () => void) => {
     props.dataImports.insert.submit({
-        reference_doctype: doctypeForImport.value,
+        reference_doctype: doctypeForImport.value!,
         import_type: 'Insert New Records',
+        mute_emails: true,
+        status: 'Pending',
     }, {
         onSuccess(data: DataImport) {
             router.replace({
@@ -150,11 +153,20 @@ const createDataImport = (close) => {
                 },
             })
             close()
+        },
+        onError(error: any) {
+            console.error(error)
+            toast.error(error.messages?.[0] || error)
         }
     })
 }
 
 const redirectToImport = (importName: string) => {
-    window.location.href = `/data-import/${importName}`;
+    router.replace({
+        name: 'DataImport',
+        params: {
+            importName
+        },
+    })
 }
 </script>

package/frappe/DataImport/ImportSteps.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex items-center space-x-10">
-        <div class="flex items-center space-x-2 text-ink-gray-5 cursor-pointer" 
+    <div class="flex items-center space-x-3 lg:space-x-10 text-xs lg:text-base">
+        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5 cursor-pointer" 
         :class="{
             'text-ink-gray-9 font-semibold': onUploadStep
         }"
@@ -20,7 +20,7 @@
                 Upload File
             </div>
         </div>
-        <div class="flex items-center space-x-2 text-ink-gray-5" 
+        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
         :class="{
             'text-ink-gray-9 font-semibold': onMapStep,
             'cursor-pointer': uploadStepCompleted
@@ -38,10 +38,10 @@
                 </span>
             </div>
             <div>
-                Map File
+                Map Data
             </div>
         </div>
-        <div class="flex items-center space-x-2 text-ink-gray-5" 
+        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
         :class="{
             'text-ink-gray-9 font-semibold': onPreviewStep,
             'cursor-pointer': uploadStepCompleted
@@ -73,7 +73,7 @@ const emit = defineEmits(['updateStep'])
 
 const props = defineProps<{
     data: DataImport | null
-    step: 'list' | 'new' | 'map' | 'preview'
+    step: 'list' | 'upload' | 'map' | 'preview'
 }>()
 
 const onUploadStep = computed(() => {

package/frappe/DataImport/MappingStep.vue

@@ -1,17 +1,22 @@
 <template>
-    <div class="w-[700px] mx-auto pt-12 space-y-8">
-       <div class="flex items-center justify-between">
+    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8">
+       <div class="flex justify-between">
             <div class="space-y-2">
                 <div class="text-lg font-semibold text-ink-gray-9">
-                    Map Data
+                    <span>
+                        Map Data
+                    </span>
+                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+                        {{ data?.status }}
+                    </Badge>
                 </div>
-                <div>
+                <div class="leading-5">
                     Change the mapping of columns from your file to fields in the system
                 </div>
             </div>
             
-            <div class="space-x-2">
-                <Button label="Start Over" @click="startOver" />
+            <div class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0">
+                <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
                 <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
             </div>
        </div>
@@ -32,7 +37,7 @@
                         :model-value="columnMappings[columnsFromFile[i - 1]]"
                         :options="columnsFromSystem"
                         placeholder="Select field" 
-                        @update:model-value="(val) => updateColumnMappings(i, val)"
+                        @update:model-value="(val: any) => updateColumnMappings(i, val)"
                     />
                 </template>
             </div>
@@ -41,16 +46,17 @@
 </template>
 <script setup lang="ts">
 import type { DataImport, DataImports } from './types';
-import { fieldsToIgnore, getPreviewData } from './dataImport'
+import { fieldsToIgnore, getBadgeColor, getPreviewData } from './dataImport'
 import { computed, nextTick, onMounted, ref } from 'vue';
+import { toast } from "../../src/components/Toast/index"
 import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue';
+import Badge from '../../src/components/Badge/Badge.vue';
 import Button from '../../src/components/Button/Button.vue';
-import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import Link from "../Link/Link.vue"
 
 const previewData = ref<any>(null);
 const emit = defineEmits(['updateStep'])
 const columnMappings = ref<Record<string, string>>({});
+const mappingUpdated = ref(false);
 
 const props = defineProps<{
     dataImports: DataImports
@@ -59,7 +65,7 @@ const props = defineProps<{
 }>()
 
 onMounted(async () => {
-    previewData.value = await getPreviewData(props.data.name, props.data.import_file, props.data.google_sheets_url);
+    previewData.value = await getPreviewData(props.data.name!, props.data.import_file, props.data.google_sheets_url);
     initializeColumnMappings();
 });
 
@@ -69,6 +75,9 @@ const initializeColumnMappings = () => {
     if (props.data?.template_options)
         columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"];
 
+        if (Object.keys(columnToFieldMap).length > 0)
+            mappingUpdated.value = true;
+
         columnsFromFile.value.forEach((col: string, index: number) => {
         if (columnToFieldMap && columnToFieldMap[index])
             mappings[col] = getMappedColumnName(columnToFieldMap[index]);
@@ -88,13 +97,15 @@ const getMappedColumnName = (fieldname: string) => {
 
 const updateColumnMappings = (index: number, value: any) => {
     if (!value) return;
-    let columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"] || {};
+    mappingUpdated.value = true;
+    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
+    let columnToFieldMap = templateOptions["column_to_field_map"] || {};
     columnToFieldMap[index - 1] = value.value;
 
     props.dataImports.setValue.submit({
         ...props.data,
         template_options: JSON.stringify({
-            ...JSON.parse(props.data?.template_options),
+            ...templateOptions,
             column_to_field_map: columnToFieldMap
         })
     }, {
@@ -103,6 +114,10 @@ const updateColumnMappings = (index: number, value: any) => {
             nextTick(() => {
                 initializeColumnMappings()
             })
+        },
+        onError: (error: any) => {
+            toast.error(error.messages?.[0] || error)
+            console.error("Error updating column mappings:", error);
         }
     })
 }
@@ -117,7 +132,7 @@ const columnsFromFile = computed(() => {
 })
 
 const columnsFromSystem = computed(() => {
-  const parent = props.data.reference_doctype
+  const parent = props.data!.reference_doctype
   const docs = props.fields.data?.docs || []
 
   return docs
@@ -141,11 +156,12 @@ const columnsFromSystem = computed(() => {
     .flat()
 })
 
-const startOver = () => {
+const resetMapping = () => {
+    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
     props.dataImports.setValue.submit({
         ...props.data,
         template_options: JSON.stringify({
-            ...JSON.parse(props.data?.template_options),
+            ...templateOptions,
             column_to_field_map: {}
         })
     }, {
@@ -154,6 +170,10 @@ const startOver = () => {
             nextTick(() => {
                 initializeColumnMappings()
             })
+        },
+        onError: (error: any) => {
+            toast.error(error.messages?.[0] || error)
+            console.error("Error resetting column mappings:", error);
         }
     })
 }

package/frappe/DataImport/PreviewStep.vue

@@ -1,24 +1,25 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[700px] mx-auto py-12 space-y-10">
-        <div class="flex items-center justify-between">
-            <div class="space-y-2 text-ink-gray-7">
-                <div class="text-lg font-semibold text-ink-gray-9">
-                    Review and Import
-                </div>
-                <div>
-                    Verify the data before starting the import process
+    <div class="text-base h-full flex flex-col w-[90%] lg:w-[700px] mx-auto py-12 space-y-10">
+        <div class="flex flex-col space-y-1">
+            <div class="flex items-center justify-between text-ink-gray-7">
+                <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
+                    <span>
+                        Review and Import
+                    </span>
+
+                    <Badge :theme="getBadgeColor(data.status)">
+                        {{ data.status }}
+                    </Badge>
                 </div>
-            </div>
-            <div class="space-x-2">
-                <Badge :theme="statusTheme">
-                    {{ data.status }}
-                </Badge>
                 <Button 
                     v-if="data.status != 'Success'" 
                     :label="data.status != 'Pending' ? 'Retry' : 'Import'" 
                     variant="solid" @click="startImport" />
                 <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
             </div>
+            <div class="leading-5">
+                Verify the data before starting the import process
+            </div>
         </div>
 
         <div v-if="mapping.length" class="space-y-2">
@@ -26,7 +27,7 @@
                 Column Mapping
             </div>
             <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm">
-                <div v-for="map in mapping" class="grid grid-cols-3 space-x-3">
+                <div v-for="map in mapping" class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center">
                     <div class="">
                         {{ map[0] }}
                     </div>
@@ -85,7 +86,7 @@
             </div>
 
             <div class="rounded-md p-2" :class="importBannerClass">
-                {{ importSuccessCount }} rows imported successfully, {{ importErrorCount }} rows failed.
+                {{ importSuccessCount }} {{ importSuccessCount == 1 ? 'row' : 'rows' }} imported successfully, {{ importErrorCount }} {{ importErrorCount == 1 ? 'row' : 'rows' }} failed.
             </div>
 
             <TabButtons :buttons="tabButtons" v-model="activeTab" class="w-fit" />
@@ -152,16 +153,15 @@
     </div>
 </template>
 <script setup lang="ts">
-import { getPreviewData } from './dataImport'
+import { getPreviewData, getBadgeColor } from './dataImport'
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import type { DataImport, DataImports } from './types';
 import Badge from '../../src/components/Badge/Badge.vue';
 import Button from '../../src/components/Button/Button.vue';
 import call from '../../src/utils/call';
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import initSocket from "../../src/utils/socketio";
-import Tooltip from "../../src/components/Tooltip/Tooltip.vue"
 import Popover from "../../src/components/Popover/Popover.vue"
-import Switch from '../../src/components/Switch/Switch.vue';
 import TabButtons from '../../src/components/TabButtons/TabButtons.vue';
 
 const preview = ref<any>(null);
@@ -174,15 +174,16 @@ const props = defineProps<{
     dataImports: DataImports
     data: DataImport
     fields: any
-    doctypeMap: Record<string, { title: string; route: string }>
+    doctypeMap: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
 }>()
 
 onMounted(async () => {
     let socket = initSocket();
-    socket.on("data_import_refresh", (data) => {
+    socket.on("data_import_refresh", (data: { data_import: string }) => {
         reloadPreviewData(data.data_import);
     })
 
+    if (!props.data?.name) return;
     preview.value = await getPreviewData(
         props.data.name, props.data.import_file, props.data.google_sheets_url
     );
@@ -227,9 +228,9 @@ const previewColumns = computed(() => {
 })
 
 const previewData = computed(() => {
-    const data = []
+    const data: Record<string, any>[] = [];
     preview.value?.data.forEach((row: any) => {
-        const dataMap = {};
+        const dataMap: Record<string, any> = {};
         Object.keys(row).forEach((key: any, index: number) => {
             let columnLabel = getColumnLabel(index)
             let mappedFieldIndex = getMappedColumnName(index);
@@ -308,7 +309,7 @@ const importBannerClass = computed(() => {
 })
 
 const mapping = computed(() => {
-    let warningMap = []
+    let warningMap: string[][] = [];
     if (!preview.value?.warnings?.length) return [];
     preview.value.warnings.forEach((warning: any) => {
         const regex = /<strong>(.*?)<\/strong>/g;
@@ -335,7 +336,7 @@ const pageRoute = computed(() => {
     return props.doctypeMap[props.data.reference_doctype]?.pageRoute
 })
 
-const redirectToPage = (docname) => {
+const redirectToPage = (docname: string) => {
     if (!pageRoute.value) return;
     window.location.href = pageRoute.value.replace('docname', docname);
 }
@@ -348,13 +349,7 @@ const tabButtons = computed(() => {
     ]
 })
 
-const statusTheme = computed(() => {
-    if (props.data?.status == 'Success') return 'green'
-    else if (props.data?.status == 'Error') return 'red'
-    else return 'orange'
-})
-
-const rowMessage = (row) => {
+const rowMessage = (row: any) => {
     return JSON.parse(row.messages)?.[0]?.message
 }
 </script>

package/frappe/DataImport/TemplateModal.vue

@@ -12,12 +12,6 @@
                         :options="['Excel', 'CSV']"
                         type="select"
                     />
-                    <FormControl
-                        label="Export Type"
-                        v-model="exportType"
-                        :options="['All Records', '5 Records', 'Blank Template']"
-                        type="select"
-                    />
                 </div>
                 <div class="border-t">
                     <p class="mt-2 text-ink-gray-5">
@@ -35,14 +29,13 @@
                             </div>
                             <div class="grid grid-cols-2 gap-5">
                                 <div v-for="field in fields.data[doctype]" :key="field.fieldname" class="flex items-center space-x-2">
-                                    <FormControl
-                                        type="checkbox"
-                                        v-model="fieldSelection[doctype][field.fieldname]"
-                                        :id="`checkbox-${field.fieldname}`"
-                                        :disabled="field.disabled"
-                                    />
+                                    <Checkbox
+                                        :id="`checkbox-${doctype}-${field.fieldname}`"
+                                        :checked="fieldSelection[doctype][field.fieldname]"
+                                        @change="(e: Event) => fieldSelection[doctype][field.fieldname] = (e.target as HTMLInputElement).checked"
+                                        />
                                     <label
-                                        :for="`checkbox-${field.fieldname}`"
+                                        :for="`checkbox-${doctype}-${field.fieldname}`"
                                         :class="{
                                             'text-ink-red-3': field.reqd
                                         }">
@@ -65,10 +58,11 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { DataImport, DocField } from './types'
+import type { DocField } from './types'
 import { createResource } from '../../src/resources'
 import { fieldsToIgnore, getChildTableName } from './dataImport'
 import Button from "../../src/components/Button/Button.vue"
+import Checkbox from "../../src/components/Checkbox/Checkbox.vue"
 import Dialog from "../../src/components/Dialog/Dialog.vue"
 import FormControl from "../../src/components/FormControl/FormControl.vue"
 
@@ -114,7 +108,7 @@ const prepareDoctypeMap = (docs: any[], doctypeMap: Record<string, { fieldname:
                 fieldname: field.fieldname,
                 label: field.label,
                 reqd: field.reqd,
-                disabled: doc.name == props.doctype && field.reqd
+                disabled: doc.name == props.doctype && field.reqd ? true : false,
             }
         })
     })

package/frappe/DataImport/UploadStep.vue

@@ -1,18 +1,15 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[700px] mx-auto pt-12 space-y-8">
-        <div class="flex items-center justify-between">
-            <div class="flex flex-col space-y-2 text-ink-gray-7">
-                <div class="text-xl font-semibold text-ink-gray-9">
-                    Choose Import
+    <div class="text-base h-full flex flex-col w-[85%] lg:w-[700px] mx-auto pt-12 space-y-8">
+        <div class="flex flex-col space-y-1 text-ink-gray-7">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-2 text-xl font-semibold text-ink-gray-9">
+                    <span>
+                        Choose Import
+                    </span>
+                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+                        {{ data?.status }}
+                    </Badge>
                 </div>
-                <div>
-                    Import data into your system using CSV files or Google Sheets.
-                </div>
-            </div>
-            <div class="space-x-2">
-                <Badge v-if="data?.status" :theme="statusTheme" size="lg">
-                    {{ data?.status }}
-                </Badge>
                 <Button 
                     variant="solid" 
                     @click="saveImport"
@@ -21,6 +18,9 @@
                     Continue
                 </Button>
             </div>
+            <div class="leading-5">
+                Import data into your system using CSV files or Google Sheets.
+            </div>
         </div>
 
         <div class="space-y-4">
@@ -29,7 +29,7 @@
                 @dragover.prevent
                 @drop.prevent="(e) =>  uploadFile(e)" 
                 class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div v-if="showFileSelector && !uploading" class="w-2/5 text-center">
+                <div v-if="showFileSelector && !uploading" class="w-4/5 lg:w-2/5 text-center">
                     <FeatherIcon name="upload-cloud" class="size-6 stroke-1.5 text-ink-gray-6 mx-auto mb-2.5" />
                     <input
                         ref="fileInput"
@@ -40,16 +40,14 @@
                     />
                     <div class="leading-5">
                         Drag and drop a CSV file, or upload from your 
-                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">
-                            Device
-                        </span> 
+                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span> 
                         or 
                         <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline"> 
                             Google Sheet 
                         </span>
                     </div>
                 </div>
-                <div v-else-if="showFileSelector && uploading" class="w-2/5 bg-surface-white border rounded-md p-2">
+                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
                     <div class="space-y-2">
                         <div class="font-medium">
                             {{ uploadingdFile.name }}
@@ -67,9 +65,9 @@
                 </div>
             </div>
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
+                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
-                        <div class="font-medium">
+                        <div class="font-medium leading-5">
                             {{ importFile.file_name || importFile.split("/").pop() }}
                         </div>
                         <div v-if="importFile.file_size" class="text-ink-gray-6">
@@ -79,7 +77,7 @@
                     <FeatherIcon 
                         name="trash-2" 
                         class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
-                        @click="importFile = null"
+                        @click="deleteFile"
                     />
                 </div>
             </div>
@@ -91,7 +89,7 @@
                         Google Sheet
                     </div>
                 </div>
-                <div class="flex-1 flex flex-col items-center justify-center w-[400px] mx-auto space-y-3">
+                <div class="flex-1 flex flex-col items-center justify-center w-[95%] lg:w-[400px] mx-auto space-y-3">
                     <input
                         v-model="googleSheet"
                         type="text"
@@ -108,19 +106,19 @@
                 <Dropdown
                     :options="[
                         {
-                            label: __('Mandatory Fields'),
+                            label: 'Mandatory Fields',
                             onClick() {
                                 exportTemplate('mandatory')
                             },
                         },
                         {
-                            label: __('All Field'),
+                            label: 'All Fields',
                             onClick() {
                                 exportTemplate('all')
                             },
                         },
                         {
-                            label: __('Custom Template'),
+                            label: 'Custom Template',
                             onClick() {
                                 showTemplateModal = true
                             },
@@ -146,32 +144,30 @@
         </div>
 
         <TemplateModal
+            v-if="props.doctype || props.data?.reference_doctype"
             v-model="showTemplateModal"
-            :doctype="props.doctype || props.data?.reference_doctype"
+            :doctype="props.doctype || props.data?.reference_doctype as string"
         />
     </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import type { DataImports, DataImport } from './types'
+import type { DataImports, DataImport, DocField } from './types'
 import { toast } from "../../src/components/Toast/index"
-import { transformFields } from './dataImport'
-import { fieldsToIgnore, getChildTableName } from './dataImport'
+import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
 import Badge from '../../src/components/Badge/Badge.vue'
 import Button from '../../src/components/Button/Button.vue'
-import call from '../../src/utils/call';
 import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import FileUploadHandler from '../../src/utils/fileUploadHandler';
-import FormControl from '../../src/components/FormControl/FormControl.vue'
 import TemplateModal from './TemplateModal.vue'
 
 const emit = defineEmits(['updateStep'])
-const importFile = ref<File | null>(null)
+const importFile = ref<any | null>(null)
 const googleSheet = ref<string>('')
 const uploading = ref(false)
-const uploadingdFile = ref<File | null>(null)
+const uploadingdFile = ref<any | null>(null)
 const uploaded = ref(0)
 const total = ref(0)
 const showTemplateModal = ref(false)
@@ -185,7 +181,7 @@ const props = defineProps<{
     dataImports: DataImports
     doctype?: string
     fields: any
-    data?: DataImport
+    data: DataImport | null
 }>()
 
 const uploadProgress = computed(() => {
@@ -248,12 +244,12 @@ const saveImport = () => {
 
 const createImport = () => {
     props.dataImports.insert.submit({
-        reference_doctype: props.doctype,
+        reference_doctype: props.doctype!,
         import_type: "Insert New Records",
-        mute_emails: 1,
+        mute_emails: true,
         status: 'Pending',
         google_sheets_url: googleSheet.value.trim(),
-        import_file: importFile.value,
+        import_file: importFile.value?.file_url,
     }, {
         onSuccess(data: DataImport) {
             router.replace({
@@ -267,23 +263,30 @@ const createImport = () => {
             })
         },
         onError(error: any) {
-            toast.error(error)
+            toast.error(error.messages?.[0] || error)
             console.error('Error creating data import:', error)
         }
     })
 }
 
 const updateImport = () => {
+    if (!props.data) return;
     props.dataImports.setValue.submit({
         ...props.data,
         google_sheets_url: googleSheet.value.trim(),
-        import_file: importFile.value,
+        import_file: importFile.value ? importFile.value.file_url : '',
     }, {
         onSuccess(data: DataImport) {
-            emit('updateStep', 'map', data)
+            nextTick(() => {
+                if (importFile.value || googleSheet.value.trim().length) {
+                    emit('updateStep', 'map', data)
+                } else {
+                    emit('updateStep', 'upload', data)
+                }
+            })
         },
         onError(error: any) {
-            toast.error(error)
+            toast.error(error.messages?.[0] || error, { duration: 1000 })
             console.error('Error updating data import:', error)
         }
     })
@@ -304,10 +307,11 @@ const exportTemplate = async (type: 'mandatory' | 'all') => {
 }
 
 const getExportURL = (type: 'mandatory' | 'all') => {
+    if (!props.doctype && !props.data?.reference_doctype) return ''
     let exportFields = getExportFields(type)
     
     return `/api/method/frappe.core.doctype.data_import.data_import.download_template
-        ?doctype=${encodeURIComponent(props.doctype)}
+        ?doctype=${encodeURIComponent(props.doctype || props.data?.reference_doctype as string)}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}
         &export_records=blank_template
         &file_type=CSV`
@@ -329,7 +333,7 @@ const getMandatoryFields = () => {
     }).map((field: DocField) => field.fieldname)
     exportableFields.unshift('name')
     return {
-        [props.doctype]: exportableFields
+        [props.doctype || props.data?.reference_doctype as string]: exportableFields
     }
 }
 
@@ -341,7 +345,7 @@ const getAllFields = () => {
             return !fieldsToIgnore.includes(field.fieldtype)
         }).map((field: DocField) => field.fieldname)
         exportableFields.unshift('name')
-        let doctypeName = doc.name == props.doctype ? doc.name : getChildTableName(doc.name, props.doctype, docs)
+        let doctypeName = doc.name == props.doctype ? doc.name : getChildTableName(doc.name, props.doctype || props.data?.reference_doctype as string, docs)
         doctypeMap[doctypeName] = exportableFields
     })
     return doctypeMap
@@ -378,17 +382,17 @@ watch(() => props.data, () => {
     }
 }, { immediate: true })
 
-const convertToMB = (bytes: number) => {
-    return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
-}  
+watch([importFile, googleSheet], () => {
+    if (!importFile.value || !googleSheet.value.trim().length) {
+        updateImport()
+    }
+})
+
+const deleteFile = () => {
+    importFile.value = null
+}
 
 const convertToKB = (bytes: number) => {
     return (bytes / 1024).toFixed(2) + ' KB'
 }
-
-const statusTheme = computed(() => {
-    if (props.data?.status == 'Success') return 'green'
-    else if (props.data?.status == 'Error') return 'red'
-    else return 'orange'
-})
 </script>

package/frappe/DataImport/dataImport.ts

@@ -3,17 +3,16 @@ import type { DataImportStatus } from './types'
 import call from '../../src/utils/call';
 
 export const getBadgeColor = (status: DataImportStatus) => {
-    const colorMap: Record<DataImportStatus, string> = {
+    const colorMap = {
         "Pending": "orange",
         "Success": "green",
         "Partial Success": "orange",
         "Error": "red",
         "Timed Out": "orange"
-    }
+    } as const;
     return colorMap[status as DataImportStatus] || "gray"
 }
 
-
 export const fieldsToIgnore = [
     "Section Break",
     "Column Break",
@@ -41,13 +40,13 @@ export const getChildTableName = (doctype: string, parentDocType: string, docs:
     return childTableName
 }
 
-export const getPreviewData = (importName: string, file: string | undefined, sheet: string) => {
+export const getPreviewData = (importName: string, file: string | undefined, sheet: string | undefined) => {
     return call("frappe.core.doctype.data_import.data_import.get_preview_from_template", {
         data_import: importName,
         import_file: file,
         google_sheets_url: sheet
     }).catch((error: any) => {
-        toast.error(error)
+        toast.error(error.messages?.[0] || error)
         console.error("Error fetching preview data:", error)
     })
 }

package/frappe/DataImport/types.ts

@@ -3,7 +3,7 @@ export interface DataImportProps {
   description?: string
   doctype?: string | null
   importName?: string | null
-  doctypeMap?: Record<string, { title: string; route: string }>
+  doctypeMap?: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
 }
 
 export interface DataImport {
@@ -15,14 +15,17 @@ export interface DataImport {
   mute_emails: boolean
   import_file?: string
   google_sheets_url?: string
+  template_options?: string
 }
 
 export interface DataImports {
   data: DataImport[]
   update: (args: { filters: any[] }) => void
-  insert: { submit: (params: DataImport, options: { validate: () => boolean; onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
+  insert: { submit: (params: DataImport, options: { validate?: () => boolean; onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
   setValue: { submit: (params: DataImport, options: { onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
   reload: () => void
+  hasNextPage: () => boolean
+  next: () => Promise<void>
 }
 
 export type DataImportStatus = "Pending" | "Success" | "Partial Success" | "Error" | "Timed Out"

package/frappe/Link/types.ts

@@ -5,7 +5,7 @@ export interface LinkProps {
   variant?: ComboboxVariant
   label?: string
   placeholder?: string
-  filters?: Record<string, string | [string, string]>
+  filters?: Record<string, string | [string, string] | boolean | number>
   required?: boolean
   allowCreate?: boolean
 }

package/frappe/index.d.ts

@@ -51,3 +51,6 @@ declare module 'frappe-ui/frappe' {
   export const Link: Component
   export type { LinkProps } from './Link/types'
 }
+
+// Data Import
+export const DataImport: Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.226",
+  "version": "0.1.228",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Tabs/Tabs.vue

@@ -12,7 +12,7 @@ import { h } from 'vue'
 
 const props = defineProps<TabProps>()
 
-const indicatorXCss = `left-0 bottom-0 h-[1px] w-[--reka-tabs-indicator-size] transition-[width,transform] 
+const indicatorXCss = `left-0 bottom-0 h-[2px] w-[--reka-tabs-indicator-size] transition-[width,transform] 
                           translate-x-[--reka-tabs-indicator-position] translate-y-[1px]`
 
 const indicatorYCss = `right-0 w-[1px] h-[--reka-tabs-indicator-size] transition-[height,transform]
@@ -26,12 +26,13 @@ const Btn = h('button')
 <template>
   <TabsRoot
     :as="props.as"
-    class="data-[orientation=vertical]:flex"
+    class="flex flex-1 overflow-hidden flex-col data-[orientation=vertical]:flex-row [&_[role='tabpanel']:not([hidden])]:flex [&_[role='tabpanel']:not([hidden])]:grow"
     :orientation="props.vertical ? 'vertical' : 'horizontal'"
     :default-value="props.tabs[0].label"
   >
     <TabsList
-      class="relative flex data-[orientation=vertical]:flex-col p-1 border-b  data-[orientation=vertical]:border-r"
+      class="relative flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-r"
+      :class="{ 'overflow-auto': !props.vertical }"
     >
       <TabsIndicator
         class="absolute rounded-full duration-300"
@@ -46,7 +47,7 @@ const Btn = h('button')
             :is="tab.route ? 'router-link' : Btn"
             :to="tab.route"
             class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9 p-2.5 data-[state=active]:text-ink-gray-9"
-            :class="{ 'py-2.5': props.vertical,  }"
+            :class="{ 'py-2.5': props.vertical }"
           >
             <component v-if="tab.icon" :is="tab.icon" class="size-4">
             </component>
@@ -58,7 +59,9 @@ const Btn = h('button')
     </TabsList>
 
     <TabsContent v-for="(tab, i) in props.tabs" :value="i">
-      <slot name="tab-panel" v-bind="{ tab }"> </slot>
+      <div class="flex flex-col flex-1 grow">
+        <slot name="tab-panel" v-bind="{ tab }" />
+      </div>
     </TabsContent>
   </TabsRoot>
 </template>

package/frappe/components/Link/Link.vue

@@ -1,162 +0,0 @@
-<template>
-	<div class="space-y-1.5">
-		<label v-if="attrs.label" class="block text-xs text-ink-gray-5">
-			{{ attrs.label }}
-			<span class="text-ink-red-3" v-if="attrs.required">*</span>
-		</label>
-		<Autocomplete
-			ref="autocomplete"
-			:options="options.data"
-			v-model="value"
-			:size="attrs.size || 'sm'"
-			:variant="attrs.variant"
-			:placeholder="attrs.placeholder"
-			:filterable="false"
-			:readonly="attrs.readonly"
-		>
-			<template #target="{ open, togglePopover }">
-				<slot name="target" v-bind="{ open, togglePopover }" />
-			</template>
-
-			<template #prefix>
-				<slot name="prefix" />
-			</template>
-
-			<template #item-prefix="{ active, selected, option }">
-				<slot name="item-prefix" v-bind="{ active, selected, option }" />
-			</template>
-
-			<template #item-label="{ active, selected, option }">
-				<slot name="item-label" v-bind="{ active, selected, option }" />
-			</template>
-
-			<template #footer="{ value, close }">
-				<div v-if="attrs.onCreate">
-					<Button
-						variant="ghost"
-						class="w-full !justify-start"
-                        label="Create New"
-						@click="(attrs as any).onCreate(value, close)"
-					>
-						<template #prefix>
-							<Plus class="h-4 w-4 stroke-1.5" />
-						</template>
-					</Button>
-				</div>
-				<div>
-					<Button
-						variant="ghost"
-						class="w-full !justify-start"
-                        label="Clear"
-						@click="() => clearValue(close)"
-					>
-						<template #prefix>
-							<X class="h-4 w-4 stroke-1.5" />
-						</template>
-					</Button>
-				</div>
-			</template>
-		</Autocomplete>
-		<p v-if="description" class="text-sm text-ink-gray-5">
-            {{ description }}
-        </p>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { watchDebounced } from '@vueuse/core'
-import { useAttrs, computed, ref } from 'vue'
-import { Plus, X } from 'lucide-vue-next'
-import { createResource } from "../../../src/resources"
-import Autocomplete from "../../../src/components/Autocomplete/Autocomplete.vue"
-import Button from "../../../src/components/Button/Button.vue"
-
-const props = defineProps({
-	doctype: {
-		type: String,
-		required: true,
-	},
-	filters: {
-		type: Object,
-		default: () => ({}),
-	},
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	description: {
-		type: String,
-		default: '',
-	},
-})
-
-const emit = defineEmits(['update:modelValue', 'change'])
-const attrs = useAttrs()
-const valuePropPassed = computed(() => 'value' in attrs)
-const autocomplete = ref<{ query: string } | null>(null)
-const text = ref('')
-
-const value = computed({
-	get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
-	set: (val: { value: string }) => {
-		return (
-			val?.value &&
-			emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
-		)
-	},
-})
-
-watchDebounced(
-	() => autocomplete.value?.query,
-	(val) => {
-		val = val || ''
-		if (text.value === val) return
-		text.value = val
-		reload(val)
-	},
-	{ debounce: 300, immediate: true }
-)
-
-watchDebounced(
-	() => props.doctype,
-	() => reload(''),
-	{ debounce: 300, immediate: true }
-)
-
-const options = createResource({
-	url: 'frappe.desk.search.search_link',
-	cache: [props.doctype, text.value],
-	method: 'POST',
-	auto: true,
-	params: {
-		txt: text.value,
-		doctype: props.doctype,
-		filters: props.filters,
-	},
-	transform: (data: { label: string; value: string; description: string }[]) => {
-		return data.map((option) => {
-			return {
-				label: option.label || option.value,
-				value: option.value,
-				description: option.description,
-			}
-		})
-	},
-})
-
-const reload = (val: string) => {
-	options.update({
-		params: {
-			txt: val,
-			doctype: props.doctype,
-			filters: props.filters,
-		},
-	})
-	options.reload()
-}
-
-const clearValue = (close: () => void) => {
-	emit(valuePropPassed.value ? 'change' : 'update:modelValue', '')
-	close()
-}
-</script>