live update

src/features/nearle-admin/import/SheetImportPanel.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Badge } from '@astryxdesign/core/Badge';
 import { Button } from '@astryxdesign/core/Button';
 import { Card } from '@astryxdesign/core/Card';
-import { FileInput } from '@astryxdesign/core/FileInput';
 import { HStack } from '@astryxdesign/core/HStack';
 import { ProgressBar } from '@astryxdesign/core/ProgressBar';
 import { Table, type TableColumn } from '@astryxdesign/core/Table';
@@ -12,6 +11,7 @@ import { AlertTriangle, CheckCircle2, Download, FileSpreadsheet } from 'lucide-r
 import { importSheetProducts, type SheetImportResult, type SheetProductRow } from '@/api/products';
 import { errorMessage } from '@/api/client';
 import { SectionHeader } from '@/components/SectionHeader';
+import { SheetDropzone } from '@/components/SheetDropzone';
 import { downloadTemplate, parseProductSheet, type ParsedSheet } from './parseProductSheet';
 
 interface PreviewRow extends Record<string, unknown> {
@@ -148,7 +148,7 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
   if (result) {
     const isClean = result.failures.length === 0;
     return (
-      <Card padding={4} elevation="low">
+      <Card padding={4} variant="transparent">
         <VStack gap={3}>
           <HStack align="center" gap={1.5}>
             {isClean ? (
@@ -197,7 +197,7 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
 
   return (
     <VStack gap={2}>
-      <Card padding={0} elevation="low">
+      <Card padding={0} variant="transparent">
         <VStack gap={2} padding={3}>
           <SectionHeader
             title="Upload the tenant's product list"
@@ -212,17 +212,18 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
             }
           />
 
-          <FileInput
-            label="Product workbook"
-            value={file}
-            onChange={handleFile}
-            accept=".xlsx,.xls,.csv"
-            mode="dropzone"
-            placeholder="Drop an .xlsx or .csv here"
-            description="Required columns: productname, productsku, categoryid, retailprice, productcost. The catalogue's category names do not map to a tenant's own ids, so categoryid must be in the file."
-            isDisabled={!hasTarget}
+          <SheetDropzone
+            file={file}
+            onFile={handleFile}
+            blockedReason={hasTarget ? undefined : 'Pick a merchant and outlet first'}
           />
 
+          <Text type="body" size="sm" style={{ color: 'var(--color-ink-3)' }}>
+            Required columns: productname, productsku, categoryid, retailprice, productcost. The
+            catalogue's category names do not map to a tenant's own ids, so categoryid must be in
+            the file.
+          </Text>
+
           {parseError ? (
             <Text type="body" size="sm" style={{ color: 'var(--color-error, #d64545)' }}>
               {parseError}
@@ -232,7 +233,7 @@ export function SheetImportPanel({ tenantid, locationid }: SheetImportPanelProps
       </Card>
 
       {parsed ? (
-        <Card padding={0} elevation="low">
+        <Card padding={0} variant="transparent">
           <VStack gap={2} padding={3}>
             <SectionHeader
               title="What is in the file"

src/features/nearle-admin/pages/GlobalCataloguePage.tsx

@@ -120,7 +120,7 @@ export function GlobalCataloguePage() {
         <VStack gap={2}>
           {/* Only here. An upload is written against one merchant and one
               outlet, and the endpoint refuses a row without both. */}
-          <Card padding={0} elevation="low">
+          <Card padding={0} variant="transparent">
             <VStack gap={2} padding={2}>
               <SectionHeader
                 title="Uploading for"