From 6a2f3c102443ea8d340d3c10d165f46843950a01 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 24 Sep 2025 18:30:14 +0530
Subject: [PATCH 1/4] feat: show CSV import error details with inline indicator
 and modal

---
 src/lib/components/csvImportBox.svelte | 69 ++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index ec7a2c9a3e..12b721e9f3 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -8,7 +8,9 @@
     import { getProjectId } from '$lib/helpers/project';
     import { writable, type Writable } from 'svelte/store';
     import { addNotification } from '$lib/stores/notifications';
-    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography, Icon } from '@appwrite.io/pink-svelte';
+    import { IconExclamationCircle } from '@appwrite.io/pink-icons-svelte';
+    import { Modal, Code } from '$lib/components';
     import { type Models, type Payload, Query } from '@appwrite.io/console';
 
     // re-render the key for sheet UI.
@@ -18,6 +20,7 @@
     type ImportItem = {
         status: string;
         table?: string;
+        errors?: string[];
     };
 
     type ImportItemsMap = Map<string, ImportItem>;
@@ -112,7 +115,10 @@
             if (shouldSkip) return items;
 
             const next = new Map(items);
-            next.set(importData.$id, { status, table: tableName ?? undefined });
+            const errors = Array.isArray((importData as Payload).errors)
+                ? ((importData as Payload).errors as string[])
+                : undefined;
+            next.set(importData.$id, { status, table: tableName ?? undefined, errors });
             return next;
         });
 
@@ -138,7 +144,7 @@
                 return 60;
             case 'completed':
             case 'failed':
-                return 100;
+                return 60;
             default:
                 return 30;
         }
@@ -149,7 +155,7 @@
         switch (status) {
             case 'completed':
             case 'failed':
-                return `Import to ${name} ${status}`;
+                return `Importing CSV file${name ? ` to ${name}` : ''}`;
             case 'processing':
                 return `Importing CSV file${name ? ` to ${name}` : ''}`;
             default:
@@ -179,6 +185,22 @@
 
     $: isOpen = true;
     $: showCsvImportBox = $importItems.size > 0;
+
+    let showDetails = false;
+    let selectedErrors: string[] = [];
+
+    function openDetails(errors: string[] | undefined) {
+        selectedErrors = errors ?? [];
+        showDetails = true;
+    }
+
+    $: parsedErrors = selectedErrors.map((err) => {
+        try {
+            return JSON.stringify(JSON.parse(err), null, 2);
+        } catch {
+            return err;
+        }
+    });
 </script>
 
 {#if showCsvImportBox}
@@ -222,6 +244,25 @@
                                         class:is-danger={value.status === 'failed'}
                                         style="--graph-size:{graphSize(value.status)}%">
                                     </div>
+                                    {#if value.status === 'failed'}
+                                        <Layout.Stack
+                                            direction="row"
+                                            gap="xs"
+                                            alignItems="center"
+                                            inline>
+                                            <Icon
+                                                icon={IconExclamationCircle}
+                                                color="--fgcolor-error"
+                                                size="s" />
+                                            <Typography.Text color="--fgcolor-error">
+                                                There was an import issue.
+                                                <button
+                                                    class="link-button"
+                                                    on:click={() => openDetails(value.errors)}
+                                                    >View details</button>
+                                            </Typography.Text>
+                                        </Layout.Stack>
+                                    {/if}
                                 </section>
                             </li>
                         </ul>
@@ -232,6 +273,14 @@
     </Layout.Stack>
 {/if}
 
+<Modal title="Import error" bind:show={showDetails} hideFooter>
+    <Layout.Stack gap="m">
+        <Layout.Stack>
+            <Code language="json" code={parsedErrors.join('\n\n')} withCopy allowScroll />
+        </Layout.Stack>
+    </Layout.Stack>
+</Modal>
+
 <style lang="scss">
     .upload-box {
         display: flex;
@@ -252,7 +301,7 @@
     }
 
     .upload-box-content {
-        width: 304px;
+        width: 324px;
     }
 
     .upload-box-button {
@@ -274,4 +323,14 @@
             background-color: var(--bgcolor-error);
         }
     }
+
+
+    .link-button {
+        background: none;
+        border: none;
+        padding: 0;
+        color: var(--fgcolor-error);
+        text-decoration: underline;
+        cursor: pointer;
+    }
 </style>

From 21940ef1dac5b3e31acf821f6bceaa048ac781f9 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 24 Sep 2025 18:40:49 +0530
Subject: [PATCH 2/4] lint issue

---
 src/lib/components/csvImportBox.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 12b721e9f3..f3b18e2ad9 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -324,7 +324,6 @@
         }
     }
 
-
     .link-button {
         background: none;
         border: none;

From e9730d42074106c9ebe8f3ad5243cf8d45f16f0e Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 24 Sep 2025 19:03:55 +0530
Subject: [PATCH 3/4] removed button and using Link

---
 src/lib/components/csvImportBox.svelte | 16 ++++------------
 src/lib/elements/link.svelte           | 12 +++++++++++-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index f3b18e2ad9..e736e606c5 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -16,6 +16,7 @@
     // re-render the key for sheet UI.
     import { hash } from '$lib/helpers/string';
     import { spreadsheetRenderKey } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store';
+    import Link from '$lib/elements/link.svelte';
 
     type ImportItem = {
         status: string;
@@ -256,10 +257,10 @@
                                                 size="s" />
                                             <Typography.Text color="--fgcolor-error">
                                                 There was an import issue.
-                                                <button
-                                                    class="link-button"
+                                                <Link
+                                                    style="color: inherit"
                                                     on:click={() => openDetails(value.errors)}
-                                                    >View details</button>
+                                                    >View details</Link>
                                             </Typography.Text>
                                         </Layout.Stack>
                                     {/if}
@@ -323,13 +324,4 @@
             background-color: var(--bgcolor-error);
         }
     }
-
-    .link-button {
-        background: none;
-        border: none;
-        padding: 0;
-        color: var(--fgcolor-error);
-        text-decoration: underline;
-        cursor: pointer;
-    }
 </style>
diff --git a/src/lib/elements/link.svelte b/src/lib/elements/link.svelte
index 6e75e98a5c..444a94d186 100644
--- a/src/lib/elements/link.svelte
+++ b/src/lib/elements/link.svelte
@@ -29,6 +29,7 @@
 
 {#if href}
     <Link.Anchor
+        {...$$restProps}
         on:click
         on:mousedown
         on:click={track}
@@ -42,7 +43,16 @@
         <slot />
     </Link.Anchor>
 {:else}
-    <Link.Button on:click on:mousedown on:click={track} {type} {disabled} {variant} {size} {icon}>
+    <Link.Button
+        {...$$restProps}
+        on:click
+        on:mousedown
+        on:click={track}
+        {type}
+        {disabled}
+        {variant}
+        {size}
+        {icon}>
         <slot />
     </Link.Button>
 {/if}

From ae43a4d044eddb5c9e2b84dd2847d745db781c7d Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 24 Sep 2025 19:17:21 +0530
Subject: [PATCH 4/4] remove reactive

---
 src/lib/components/csvImportBox.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index e736e606c5..8c0cd9f6ba 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -189,19 +189,19 @@
 
     let showDetails = false;
     let selectedErrors: string[] = [];
+    let parsedErrors: string[] = [];
 
     function openDetails(errors: string[] | undefined) {
         selectedErrors = errors ?? [];
+        parsedErrors = selectedErrors.map((err) => {
+            try {
+                return JSON.stringify(JSON.parse(err), null, 2);
+            } catch {
+                return err;
+            }
+        });
         showDetails = true;
     }
-
-    $: parsedErrors = selectedErrors.map((err) => {
-        try {
-            return JSON.stringify(JSON.parse(err), null, 2);
-        } catch {
-            return err;
-        }
-    });
 </script>
 
 {#if showCsvImportBox}