Shadcn conversion + styling, match columns page

inventory/src/components/settings/DataManagement.tsx

@@ -27,7 +27,7 @@ import {
 import { Loader2, X, RefreshCw, AlertTriangle, RefreshCcw, Hourglass } from "lucide-react";
 import config from "../../config";
 import { toast } from "sonner";
-import { Table, TableBody, TableCell, TableRow, TableHeader, TableHead } from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
 interface ImportProgress {
   status: "running" | "error" | "complete" | "cancelled";

inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
-import { useToast } from "@chakra-ui/react"
 import { UserTableColumn } from "./components/UserTableColumn"
 import { useRsi } from "../../hooks/useRsi"
 import { TemplateColumn } from "./components/TemplateColumn"
@@ -11,6 +10,7 @@ import { normalizeTableData } from "./utils/normalizeTableData"
 import type { Field, RawData } from "../../types"
 import { getMatchedColumns } from "./utils/getMatchedColumns"
 import { findUnmatchedRequiredFields } from "./utils/findUnmatchedRequiredFields"
+import { toast } from "sonner"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -80,7 +80,6 @@ export const MatchColumnsStep = <T extends string>({
   onContinue,
   onBack,
 }: MatchColumnsProps<T>) => {
-  const toast = useToast()
   const dataExample = data.slice(0, 2)
   const { fields, autoMapHeaders, autoMapSelectValues, autoMapDistance, translations, allowInvalidSubmit } = useRsi<T>()
   const [isLoading, setIsLoading] = useState(false)
@@ -92,24 +91,24 @@ export const MatchColumnsStep = <T extends string>({
 
   const onChange = useCallback(
     (value: T, columnIndex: number) => {
-      const field = fields.find((field) => field.key === value) as unknown as Field<T>
+      const field = fields.find((field: Field<T>) => field.key === value)
+      if (!field) return
+
       const existingFieldIndex = columns.findIndex((column) => "value" in column && column.value === field.key)
+      
       setColumns(
         columns.map<Column<T>>((column, index) => {
-          columnIndex === index ? setColumn(column, field, data) : column
           if (columnIndex === index) {
+            // Set the new column value
             return setColumn(column, field, data, autoMapSelectValues)
           } else if (index === existingFieldIndex) {
-            toast({
-              status: "warning",
-              variant: "left-accent",
-              position: "bottom-left",
-              title: translations.matchColumnsStep.duplicateColumnWarningTitle,
+            // Clear the old column that had this field
+            toast.warning(translations.matchColumnsStep.duplicateColumnWarningTitle, {
               description: translations.matchColumnsStep.duplicateColumnWarningDescription,
-              isClosable: true,
             })
             return setColumn(column)
           } else {
+            // Leave other columns unchanged
             return column
           }
         }),
@@ -120,7 +119,6 @@ export const MatchColumnsStep = <T extends string>({
       columns,
       data,
       fields,
-      toast,
       translations.matchColumnsStep.duplicateColumnWarningDescription,
       translations.matchColumnsStep.duplicateColumnWarningTitle,
     ],

inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/ColumnGrid.tsx

@@ -1,10 +1,8 @@
 import type React from "react"
 import type { Column, Columns } from "../MatchColumnsStep"
-import { Box, Flex, Heading, ModalBody, Text, useStyleConfig } from "@chakra-ui/react"
-import { FadingWrapper } from "../../../components/FadingWrapper"
-import { ContinueButton } from "../../../components/ContinueButton"
 import { useRsi } from "../../../hooks/useRsi"
-import type { themeOverrides } from "../../../theme"
+import { Button } from "@/components/ui/button"
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 
 type ColumnGridProps<T extends string> = {
   columns: Columns<T>
@@ -15,8 +13,6 @@ type ColumnGridProps<T extends string> = {
   isLoading: boolean
 }
 
-export type Styles = (typeof themeOverrides)["components"]["MatchColumnsStep"]["baseStyle"]
-
 export const ColumnGrid = <T extends string>({
   columns,
   userColumn,
@@ -26,52 +22,82 @@ export const ColumnGrid = <T extends string>({
   isLoading,
 }: ColumnGridProps<T>) => {
   const { translations } = useRsi()
-  const styles = useStyleConfig("MatchColumnsStep") as Styles
+  const columnWidth = 250
+  const gap = 16
+  const totalWidth = columns.length * columnWidth + (columns.length - 1) * gap
 
   return (
-    <>
-      <ModalBody flexDir="column" p={8} overflow="auto">
-        <Heading sx={styles.heading}>{translations.matchColumnsStep.title}</Heading>
-        <Flex
-          flex={1}
-          display="grid"
-          gridTemplateRows="auto auto auto 1fr"
-          gridTemplateColumns={`0.75rem repeat(${columns.length}, minmax(18rem, auto)) 0.75rem`}
-        >
-          <Box gridColumn={`1/${columns.length + 3}`}>
-            <Text sx={styles.title}>{translations.matchColumnsStep.userTableTitle}</Text>
-          </Box>
-          {columns.map((column, index) => (
-            <Box gridRow="2/3" gridColumn={`${index + 2}/${index + 3}`} pt={3} key={column.header + index}>
-              {userColumn(column)}
-            </Box>
-          ))}
-          <FadingWrapper gridColumn={`1/${columns.length + 3}`} gridRow="2/3" />
-          <Box gridColumn={`1/${columns.length + 3}`} mt={7}>
-            <Text sx={styles.title}>{translations.matchColumnsStep.templateTitle}</Text>
-          </Box>
-          <FadingWrapper gridColumn={`1/${columns.length + 3}`} gridRow="4/5" />
-          {columns.map((column, index) => (
-            <Box
-              gridRow="4/5"
-              gridColumn={`${index + 2}/${index + 3}`}
-              key={column.header + index}
-              py="1.125rem"
-              pl={2}
-              pr={3}
-            >
-              {templateColumn(column)}
-            </Box>
-          ))}
-        </Flex>
-      </ModalBody>
-      <ContinueButton
-        isLoading={isLoading}
-        onContinue={onContinue}
-        onBack={onBack}
-        title={translations.matchColumnsStep.nextButtonTitle}
-        backTitle={translations.matchColumnsStep.backButtonTitle}
-      />
-    </>
+    <div className="flex h-[calc(100vh-9.5rem)] flex-col">
+      <div className="flex-1 overflow-hidden">
+        <div className="px-8 py-6">
+          <div className="mb-8">
+            <h2 className="text-3xl font-semibold text-foreground">
+              {translations.matchColumnsStep.title}
+            </h2>
+          </div>
+          <ScrollArea className="relative">
+            <div className="space-y-8" style={{ width: totalWidth }}>
+              {/* Your table section */}
+              <div>
+                <h3 className="mb-4 text-lg font-medium text-foreground">
+                  {translations.matchColumnsStep.userTableTitle}
+                </h3>
+                <div className="relative">
+                  <div 
+                    className="grid gap-4"
+                    style={{ 
+                      gridTemplateColumns: `repeat(${columns.length}, ${columnWidth}px)`,
+                    }}
+                  >
+                    {columns.map((column, index) => (
+                      <div key={column.header + index} className="relative">
+                        {userColumn(column)}
+                      </div>
+                    ))}
+                  </div>
+                  <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-background" />
+                </div>
+              </div>
+
+              {/* Will become section */}
+              <div>
+                <h3 className="mb-4 text-lg font-medium text-foreground">
+                  {translations.matchColumnsStep.templateTitle}
+                </h3>
+                <div 
+                  className="grid gap-4"
+                  style={{ 
+                    gridTemplateColumns: `repeat(${columns.length}, ${columnWidth}px)`,
+                  }}
+                >
+                  {columns.map((column, index) => (
+                    <div key={column.header + index}>
+                      {templateColumn(column)}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+      </div>
+      <div className="border-t bg-muted px-8 py-4">
+        <div className="flex items-center justify-between">
+          {onBack && (
+            <Button variant="outline" onClick={onBack}>
+              {translations.matchColumnsStep.backButtonTitle}
+            </Button>
+          )}
+          <Button 
+            className="ml-auto"
+            disabled={isLoading}
+            onClick={() => onContinue([])}
+          >
+            {translations.matchColumnsStep.nextButtonTitle}
+          </Button>
+        </div>
+      </div>
+    </div>
   )
 }

inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/TemplateColumn.tsx

@@ -1,96 +1,139 @@
-import {
-  Flex,
-  Text,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionIcon,
-  Box,
-  AccordionPanel,
-  useStyleConfig,
-} from "@chakra-ui/react"
 import { useRsi } from "../../../hooks/useRsi"
 import type { Column } from "../MatchColumnsStep"
 import { ColumnType } from "../MatchColumnsStep"
-import { MatchIcon } from "./MatchIcon"
-import type { Fields } from "../../../types"
-import type { Translations } from "../../../translationsRSIProps"
-import { MatchColumnSelect } from "../../../components/Selects/MatchColumnSelect"
-import { SubMatchingSelect } from "./SubMatchingSelect"
-import type { Styles } from "./ColumnGrid"
+import type { Fields, Field } from "../../../types"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
 
-const getAccordionTitle = <T extends string>(fields: Fields<T>, column: Column<T>, translations: Translations) => {
+type TemplateColumnProps<T extends string> = {
+  column: Column<T>
+  onChange: (value: T, columnIndex: number) => void
+  onSubChange: (value: string, columnIndex: number, entry: string) => void
+}
+
+const getAccordionTitle = <T extends string>(fields: Fields<T>, column: Column<T>, translations: any) => {
   const fieldLabel = fields.find((field) => "value" in column && field.key === column.value)!.label
   return `${translations.matchColumnsStep.matchDropdownTitle} ${fieldLabel} (${
     "matchedOptions" in column && column.matchedOptions.filter((option) => !option.value).length
   } ${translations.matchColumnsStep.unmatched})`
 }
 
-type TemplateColumnProps<T extends string> = {
-  onChange: (val: T, index: number) => void
-  onSubChange: (val: T, index: number, option: string) => void
-  column: Column<T>
-}
-
 export const TemplateColumn = <T extends string>({ column, onChange, onSubChange }: TemplateColumnProps<T>) => {
   const { translations, fields } = useRsi<T>()
-  const styles = useStyleConfig("MatchColumnsStep") as Styles
   const isIgnored = column.type === ColumnType.ignored
   const isChecked =
     column.type === ColumnType.matched ||
     column.type === ColumnType.matchedCheckbox ||
     column.type === ColumnType.matchedSelectOptions
   const isSelect = "matchedOptions" in column
-  const selectOptions = fields.map(({ label, key }) => ({ value: key, label }))
-  const selectValue = selectOptions.find(({ value }) => "value" in column && column.value === value)
+  const selectOptions = fields.map(({ label, key }: { label: string; key: string }) => ({ value: key, label }))
+  const selectValue = column.type === ColumnType.empty ? undefined : 
+    selectOptions.find(({ value }: { value: string }) => "value" in column && column.value === value)?.value
+
+  if (isIgnored) {
+    return (
+      <Card className="h-full opacity-50">
+        <CardHeader className="p-4">
+          <p className="text-sm text-muted-foreground">
+            {translations.matchColumnsStep.ignoredColumnText}
+          </p>
+        </CardHeader>
+      </Card>
+    )
+  }
 
   return (
-    <Flex minH={10} w="100%" flexDir="column" justifyContent="center">
-      {isIgnored ? (
-        <Text sx={styles.selectColumn.text}>{translations.matchColumnsStep.ignoredColumnText}</Text>
-      ) : (
-        <>
-          <Flex alignItems="center" minH={10} w="100%">
-            <Box flex={1}>
-              <MatchColumnSelect
-                placeholder={translations.matchColumnsStep.selectPlaceholder}
-                value={selectValue}
-                onChange={(value) => onChange(value?.value as T, column.index)}
-                options={selectOptions}
-                name={column.header}
-              />
-            </Box>
-            <MatchIcon isChecked={isChecked} />
-          </Flex>
-          {isSelect && (
-            <Flex width="100%">
-              <Accordion allowMultiple width="100%">
-                <AccordionItem border="none" py={1}>
-                  <AccordionButton
-                    _hover={{ bg: "transparent" }}
-                    _focus={{ boxShadow: "none" }}
-                    px={0}
-                    py={4}
-                    data-testid="accordion-button"
-                  >
-                    <AccordionIcon />
-                    <Box textAlign="left">
-                      <Text sx={styles.selectColumn.accordionLabel}>
-                        {getAccordionTitle<T>(fields, column, translations)}
-                      </Text>
-                    </Box>
-                  </AccordionButton>
-                  <AccordionPanel pb={4} pr={3} display="flex" flexDir="column">
-                    {column.matchedOptions.map((option) => (
-                      <SubMatchingSelect option={option} column={column} onSubChange={onSubChange} key={option.entry} />
-                    ))}
-                  </AccordionPanel>
-                </AccordionItem>
-              </Accordion>
-            </Flex>
-          )}
-        </>
+    <Card className="h-full">
+      <CardHeader className="flex flex-row items-center justify-between space-x-2 p-4">
+        <div className="flex-1">
+          <Select
+            key={`select-${column.index}-${("value" in column ? column.value : "empty")}`}
+            value={selectValue}
+            onValueChange={(value) => onChange(value as T, column.index)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={translations.matchColumnsStep.selectPlaceholder} />
+            </SelectTrigger>
+            <SelectContent 
+              side="bottom"
+              align="start"
+              className="z-[1500]"
+            >
+              {selectOptions.map((option: { value: string; label: string }) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        {isChecked && (
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+            <Check className="h-4 w-4 text-primary" />
+          </div>
+        )}
+      </CardHeader>
+      {isSelect && (
+        <CardContent className="p-4">
+          <Accordion type="multiple" className="w-full">
+            <AccordionItem value="options" className="border-none">
+              <AccordionTrigger className="py-2 text-sm hover:no-underline">
+                {getAccordionTitle<T>(fields, column, translations)}
+              </AccordionTrigger>
+              <AccordionContent>
+                <div className="space-y-2">
+                  {column.matchedOptions.map((option) => (
+                    <div key={option.entry} className="space-y-1">
+                      <p className="text-sm text-muted-foreground">
+                        {option.entry}
+                      </p>
+                      <Select
+                        value={option.value}
+                        onValueChange={(value) => onSubChange(value, column.index, option.entry!)}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={translations.matchColumnsStep.subSelectPlaceholder} />
+                        </SelectTrigger>
+                        <SelectContent 
+                          side="bottom"
+                          align="start"
+                          className="z-[1000]"
+                        >
+                          {fields
+                            .find((field: Field<T>) => "value" in column && field.key === column.value)
+                            ?.fieldType.options.map((option: { value: string; label: string }) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  ))}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
       )}
-    </Flex>
+    </Card>
   )
 }

inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/UserTableColumn.tsx

@@ -1,10 +1,10 @@
-import { Box, Flex, IconButton, Text, useStyleConfig } from "@chakra-ui/react"
-import { CgClose, CgUndo } from "react-icons/cg"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { X, Undo2 } from "lucide-react"
 import type { Column } from "../MatchColumnsStep"
 import { ColumnType } from "../MatchColumnsStep"
-import { dataAttr } from "@chakra-ui/utils"
-import type { Styles } from "./ColumnGrid"
 import type { RawData } from "../../../types"
+import { cn } from "@/lib/utils"
 
 type UserTableColumnProps<T extends string> = {
   column: Column<T>
@@ -14,7 +14,6 @@ type UserTableColumnProps<T extends string> = {
 }
 
 export const UserTableColumn = <T extends string>(props: UserTableColumnProps<T>) => {
-  const styles = useStyleConfig("MatchColumnsStep") as Styles
   const {
     column: { header, index, type },
     entries,
@@ -22,33 +21,38 @@ export const UserTableColumn = <T extends string>(props: UserTableColumnProps<T>
     onRevertIgnore,
   } = props
   const isIgnored = type === ColumnType.ignored
+
   return (
-    <Box>
-      <Flex px={6} justifyContent="space-between" alignItems="center" mb={4}>
-        <Text sx={styles.userTable.header} data-ignored={dataAttr(isIgnored)}>
+    <Card className={cn(
+      "h-full transition-opacity",
+      isIgnored && "opacity-50"
+    )}>
+      <CardHeader className="flex flex-row items-center justify-between space-x-2 p-4">
+        <h4 className="truncate font-medium leading-none">
           {header}
-        </Text>
-        {type === ColumnType.ignored ? (
-          <IconButton
-            aria-label="Ignore column"
-            icon={<CgUndo />}
-            onClick={() => onRevertIgnore(index)}
-            {...styles.userTable.ignoreButton}
-          />
-        ) : (
-          <IconButton
-            aria-label="Ignore column"
-            icon={<CgClose />}
-            onClick={() => onIgnore(index)}
-            {...styles.userTable.ignoreButton}
-          />
-        )}
-      </Flex>
-      {entries.map((entry, index) => (
-        <Text key={(entry || "") + index} sx={styles.userTable.cell} data-ignored={dataAttr(isIgnored)}>
-          {entry}
-        </Text>
-      ))}
-    </Box>
+        </h4>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => isIgnored ? onRevertIgnore(index) : onIgnore(index)}
+          className="h-8 w-8 shrink-0"
+        >
+          {isIgnored ? <Undo2 className="h-4 w-4" /> : <X className="h-4 w-4" />}
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-2 p-4">
+        {entries.slice(0, 3).map((entry, i) => (
+          <div 
+            key={`${entry || ""}-${i}`} 
+            className={cn(
+              "truncate px-3 py-2 text-sm",
+              isIgnored ? "text-muted-foreground" : "text-foreground"
+            )}
+          >
+            {entry || ""}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
   )
 }

inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx

@@ -44,8 +44,8 @@ export const Steps = () => {
 
   return (
     <>
-      <div className="hidden border-b bg-muted px-8 py-6 md:block lg:px-24 xl:px-36">
-        <nav className="mx-auto flex items-center justify-between" aria-label="Steps">
+      <div className="hidden border-b bg-muted px-4 py-6 md:block">
+        <nav className="mx-auto flex items-center justify-center gap-4 lg:gap-24" aria-label="Steps">
           {steps.map((key, index) => {
             const isActive = index === activeStep
             const isCompleted = index < activeStep
@@ -73,15 +73,13 @@ export const Steps = () => {
                       </span>
                     )}
                   </div>
-                  <span className={`ml-2 text-sm font-medium w-24 ${
+                  <span className={`ml-2 text-sm font-medium ${
                     isActive ? 'text-foreground' : 'text-muted-foreground'
                   }`}>
                     {translations[key].title}
                   </span>
                 </button>
-                {index < steps.length - 1 && (
-                  <Separator className="ml-2 mr-0 bg-muted-foreground/80" />
-                )}
+
               </div>
             )
           })}

inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/DropZone.tsx

@@ -57,13 +57,13 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
     <div
       {...getRootProps()}
       className={cn(
-        "flex h-full w-full flex-1 flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted p-12",
-        isDragActive && "border-primary bg-muted/50"
+        "flex h-full w-full flex-1 flex-col items-center justify-center rounded-lg border-2 border-dashed border-secondary-foreground/30 bg-muted/90 p-12",
+        isDragActive && "border-primary bg-muted"
       )}
     >
       <input {...getInputProps()} data-testid="rsi-dropzone" />
       {isDragActive ? (
-        <p className="text-lg text-muted-foreground">
+        <p className="text-lg text-muted-foreground mb-1 py-6">
           {translations.uploadStep.dropzone.activeDropzoneTitle}
         </p>
       ) : loading || isLoading ? (
@@ -75,7 +75,7 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
           <p className="mb-4 text-lg text-muted-foreground">
             {translations.uploadStep.dropzone.title}
           </p>
-          <Button onClick={open} variant="secondary">
+          <Button onClick={open} variant="default">
             {translations.uploadStep.dropzone.buttonTitle}
           </Button>
         </>

inventory/src/lib/react-spreadsheet-import/src/theme.ts

@@ -311,7 +311,7 @@ export const themeOverrides = {
     Modal: {
       baseStyle: {
         dialog: {
-          borderRadius: "lg",
+          borderRadius: "md",
           bg: "background",
           fontSize: "lg",
           color: "textColor",
@@ -360,7 +360,7 @@ export const themeOverrides = {
             minH: "calc(var(--chakra-vh) - 4rem)",
             maxW: "calc(var(--chakra-vw) - 4rem)",
             my: "2rem",
-            borderRadius: "3xl",
+            borderRadius: "lg",
             overflow: "hidden",
           },
         },

inventory/src/pages/import/Import.tsx

@@ -1,99 +1,128 @@
-import { ReactSpreadsheetImport } from "@/lib/react-spreadsheet-import/src";
 import { useState } from "react";
+import { ReactSpreadsheetImport } from "@/lib/react-spreadsheet-import/src";
 import { Button } from "@/components/ui/button";
-import { Box, Card, ScrollArea } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
+import { toast } from "sonner";
+import { motion } from "framer-motion";
+
+const IMPORT_FIELDS = [
+  {
+    label: "Name",
+    key: "name",
+    alternateMatches: ["product", "product name", "item name"],
+    fieldType: {
+      type: "input",
+    },
+    example: "Widget X",
+    validations: [
+      {
+        rule: "required",
+        errorMessage: "Name is required",
+        level: "error",
+      },
+    ],
+  },
+  {
+    label: "SKU",
+    key: "sku",
+    alternateMatches: ["item number", "product code"],
+    fieldType: {
+      type: "input",
+    },
+    example: "WX-123",
+    validations: [
+      {
+        rule: "required",
+        errorMessage: "SKU is required",
+        level: "error",
+      },
+    ],
+  },
+  {
+    label: "Quantity",
+    key: "quantity",
+    alternateMatches: ["qty", "stock", "amount"],
+    fieldType: {
+      type: "input",
+    },
+    example: "100",
+    validations: [
+      {
+        rule: "required",
+        errorMessage: "Quantity is required",
+        level: "error",
+      },
+    ],
+  },
+];
 
 export function Import() {
   const [isOpen, setIsOpen] = useState(false);
   const [importedData, setImportedData] = useState<any[] | null>(null);
 
-  const fields = [
-    {
-      label: "Name",
-      key: "name",
-      alternateMatches: ["product", "product name", "item name"],
-      fieldType: {
-        type: "input",
-      },
-      example: "Widget X",
-      validations: [
-        {
-          rule: "required",
-          errorMessage: "Name is required",
-          level: "error",
-        },
-      ],
-    },
-    {
-      label: "SKU",
-      key: "sku",
-      alternateMatches: ["item number", "product code"],
-      fieldType: {
-        type: "input",
-      },
-      example: "WX-123",
-      validations: [
-        {
-          rule: "required",
-          errorMessage: "SKU is required",
-          level: "error",
-        },
-      ],
-    },
-    {
-      label: "Quantity",
-      key: "quantity",
-      alternateMatches: ["qty", "stock", "amount"],
-      fieldType: {
-        type: "input",
-      },
-      example: "100",
-      validations: [
-        {
-          rule: "required",
-          errorMessage: "Quantity is required",
-          level: "error",
-        },
-      ],
-    },
-  ];
-
   const handleData = async (data: any, file: File) => {
-    console.log("Imported Data:", data);
-    console.log("File:", file);
-    setImportedData(data);
-    setIsOpen(false);
+    try {
+      console.log("Imported Data:", data);
+      console.log("File:", file);
+      setImportedData(data);
+      setIsOpen(false);
+      toast.success("Data imported successfully");
+    } catch (error) {
+      toast.error("Failed to import data");
+      console.error("Import error:", error);
+    }
   };
 
   return (
-    <div className="container mx-auto p-4">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">Import Data</h1>
-        <Button onClick={() => setIsOpen(true)}>
-          Import Spreadsheet
-        </Button>
-      </div>
+    <motion.div 
+      layout
+      transition={{ 
+        layout: { 
+          duration: 0.15,
+          ease: [0.4, 0, 0.2, 1]
+        }
+      }}
+      className="container mx-auto py-6 space-y-4"
+    >
+      <motion.div 
+        layout="position"
+        transition={{ duration: 0.15 }}
+        className="flex items-center justify-between"
+      >
+        <h1 className="text-3xl font-bold tracking-tight">Add New Products</h1>
+      </motion.div>
+
+      <Card className="max-w-[400px]">
+        <CardHeader>
+          <CardTitle>Import Data</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Button onClick={() => setIsOpen(true)} className="w-full">
+            Upload Spreadsheet
+          </Button>
+        </CardContent>
+      </Card>
 
       {importedData && (
-        <div className="mt-6">
-          <h2 className="text-xl font-semibold mb-4">Imported Data</h2>
-          <Card>
-            <ScrollArea className="h-[500px] w-full rounded-md border p-4">
-              <Code>
-                {JSON.stringify(importedData, null, 2)}
-              </Code>
-            </ScrollArea>
-          </Card>
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Preview Imported Data</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Code className="p-4 w-full rounded-md border">
+              {JSON.stringify(importedData, null, 2)}
+            </Code>
+          </CardContent>
+        </Card>
       )}
 
       <ReactSpreadsheetImport
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
         onSubmit={handleData}
-        fields={fields}
+        fields={IMPORT_FIELDS}
       />
-    </div>
+    </motion.div>
   );
 }