Remove remaining chakra-ui dependencies, clean up files, clean up build errors, move react-spreadsheet-import directory into main component structure

2025-03-19 12:56:56 -04:00
parent fc9ef2f0d7
commit 1496aa57b1
121 changed files with 526 additions and 27422 deletions
--- a/inventory/package-lock.json
+++ b/inventory/package-lock.json
--- a/inventory/package.json
+++ b/inventory/package.json
@@ -10,22 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@chakra-ui/button": "^2.1.0",
-    "@chakra-ui/checkbox": "^2.3.2",
-    "@chakra-ui/form-control": "^2.2.0",
-    "@chakra-ui/hooks": "^2.4.3",
-    "@chakra-ui/icons": "^2.2.4",
-    "@chakra-ui/input": "^2.1.2",
-    "@chakra-ui/layout": "^2.3.1",
-    "@chakra-ui/modal": "^2.3.1",
-    "@chakra-ui/popper": "^3.1.0",
-    "@chakra-ui/react": "^2.8.1",
-    "@chakra-ui/select": "^2.1.2",
-    "@chakra-ui/system": "^2.6.2",
-    "@chakra-ui/theme": "^3.4.7",
-    "@chakra-ui/theme-tools": "^2.2.7",
-    "@chakra-ui/utils": "^2.2.3",
-    "@dnd-kit/core": "^6.3.1",
+     "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emotion/react": "^11.14.0",
@@ -60,8 +45,6 @@
    "@types/js-levenshtein": "^1.1.3",
    "@types/uuid": "^10.0.0",
    "axios": "^1.8.1",
-    "chakra-react-select": "^4.7.5",
-    "chakra-ui-steps": "^2.0.4",
    "chart.js": "^4.4.7",
    "chartjs-adapter-date-fns": "^3.0.0",
    "class-variance-authority": "^0.7.1",
--- a/inventory/scripts/copyBuild.ts
+++ b/inventory/scripts/copyBuild.ts
@@ -1,25 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-
-async function copyBuild() {
-  const sourcePath = path.resolve(__dirname, '../build');
-  const targetPath = path.resolve(__dirname, '../../inventory-server/frontend/build');
-
-  try {
-    // Ensure the target directory exists
-    await fs.ensureDir(path.dirname(targetPath));
-    
-    // Remove old build if it exists
-    await fs.remove(targetPath);
-    
-    // Copy new build
-    await fs.copy(sourcePath, targetPath);
-    
-    console.log('Build files copied successfully to server directory!');
-  } catch (error) {
-    console.error('Error copying build files:', error);
-    process.exit(1);
-  }
-}
-
-copyBuild(); 
--- a/inventory/src/App.tsx
+++ b/inventory/src/App.tsx
@@ -16,7 +16,6 @@ import Forecasting from "@/pages/Forecasting";
 import { Vendors } from '@/pages/Vendors';
 import { Categories } from '@/pages/Categories';
 import { Import } from '@/pages/Import';
-import { ChakraProvider } from '@chakra-ui/react';
 import { AiValidationDebug } from "@/pages/AiValidationDebug"

 const queryClient = new QueryClient();
@@ -53,30 +52,28 @@ function App() {

  return (
    <QueryClientProvider client={queryClient}>
-      <ChakraProvider>
-        <Toaster richColors position="top-center" />
-        <Routes>
-          <Route path="/login" element={<Login />} />
-          <Route element={
-            <RequireAuth>
-              <MainLayout />
-            </RequireAuth>
-          }>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/products" element={<Products />} />
-            <Route path="/import" element={<Import />} />
-            <Route path="/categories" element={<Categories />} />
-            <Route path="/vendors" element={<Vendors />} />
-            <Route path="/orders" element={<Orders />} />
-            <Route path="/purchase-orders" element={<PurchaseOrders />} />
-            <Route path="/analytics" element={<Analytics />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="/forecasting" element={<Forecasting />} />
-            <Route path="/ai-validation/debug" element={<AiValidationDebug />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Route>
-        </Routes>
-      </ChakraProvider>
+      <Toaster richColors position="top-center" />
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route element={
+          <RequireAuth>
+            <MainLayout />
+          </RequireAuth>
+        }>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/products" element={<Products />} />
+          <Route path="/import" element={<Import />} />
+          <Route path="/categories" element={<Categories />} />
+          <Route path="/vendors" element={<Vendors />} />
+          <Route path="/orders" element={<Orders />} />
+          <Route path="/purchase-orders" element={<PurchaseOrders />} />
+          <Route path="/analytics" element={<Analytics />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/forecasting" element={<Forecasting />} />
+          <Route path="/ai-validation/debug" element={<AiValidationDebug />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Route>
+      </Routes>
    </QueryClientProvider>
  );
 }
--- a/inventory/src/components/analytics/CategoryPerformance.tsx
+++ b/inventory/src/components/analytics/CategoryPerformance.tsx
@@ -99,7 +99,7 @@ export function CategoryPerformance() {
                  ))}
                </Pie>
                <Tooltip 
-                  formatter={(value: number, name: string, props: any) => [
+                  formatter={(value: number, _: string, props: any) => [
                    `$${value.toLocaleString()}`,
                    <div key="tooltip">
                      <div className="font-medium">Category Path:</div>
@@ -143,7 +143,7 @@ export function CategoryPerformance() {
                />
                <YAxis tickFormatter={(value) => `${value}%`} />
                <Tooltip 
-                  formatter={(value: number, name: string, props: any) => [
+                  formatter={(value: number, _: string, props: any) => [
                    `${value.toFixed(1)}%`,
                    <div key="tooltip">
                      <div className="font-medium">Category Path:</div>
--- a/inventory/src/components/analytics/ProfitAnalysis.tsx
+++ b/inventory/src/components/analytics/ProfitAnalysis.tsx
@@ -96,7 +96,7 @@ export function ProfitAnalysis() {
                />
                <YAxis tickFormatter={(value) => `${value}%`} />
                <Tooltip 
-                  formatter={(value: number, name: string, props: any) => [
+                  formatter={(value: number, _: string, props: any) => [
                    `${value.toFixed(1)}%`,
                    <div key="tooltip">
                      <div className="font-medium">Category Path:</div>
--- a/inventory/src/components/dashboard/BestSellers.tsx
+++ b/inventory/src/components/dashboard/BestSellers.tsx
@@ -33,15 +33,6 @@ interface BestSellerBrand {
  growth_rate: string
 }

-interface BestSellerCategory {
-  cat_id: number;
-  name: string;
-  units_sold: number;
-  revenue: string;
-  profit: string;
-  growth_rate: string;
-}
-
 interface BestSellersData {
  products: Product[]
  brands: BestSellerBrand[]
--- a/inventory/src/components/dashboard/LowStockAlerts.tsx
+++ b/inventory/src/components/dashboard/LowStockAlerts.tsx
@@ -9,8 +9,8 @@ import {
  TableRow,
 } from "@/components/ui/table"
 import { Badge } from "@/components/ui/badge"
-import { AlertCircle, AlertTriangle } from "lucide-react"
 import config from "@/config"
+import { format } from "date-fns"

 interface Product {
  pid: number;
@@ -24,6 +24,24 @@ interface Product {
  lead_time_status: string;
 }

+// Helper functions
+const formatDate = (dateString: string) => {
+  return format(new Date(dateString), 'MMM dd, yyyy')
+}
+
+const getLeadTimeVariant = (status: string) => {
+  switch (status.toLowerCase()) {
+    case 'critical':
+      return 'destructive'
+    case 'warning':
+      return 'secondary'
+    case 'good':
+      return 'secondary'
+    default:
+      return 'secondary'
+  }
+}
+
 export function LowStockAlerts() {
  const { data: products } = useQuery<Product[]>({
    queryKey: ["low-stock"],
--- a/inventory/src/components/dashboard/PurchaseMetrics.tsx
+++ b/inventory/src/components/dashboard/PurchaseMetrics.tsx
@@ -5,7 +5,6 @@ import config from "@/config"
 import { formatCurrency } from "@/lib/utils"
 import { ClipboardList, AlertCircle, Layers, DollarSign, ShoppingCart } from "lucide-react" // Importing icons
 import { useState } from "react"
-import { PurchaseOrderStatus, ReceivingStatus } from "@/types/status-codes"

 interface PurchaseMetricsData {
  activePurchaseOrders: number  // Orders that are not canceled, done, or fully received
--- a/inventory/src/components/dashboard/TrendingProducts.tsx
+++ b/inventory/src/components/dashboard/TrendingProducts.tsx
@@ -41,14 +41,6 @@ export function TrendingProducts() {
      signDisplay: "exceptZero",
    }).format(value / 100)

-  const formatCurrency = (value: number) =>
-    new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(value)
-
  return (
    <>
      <CardHeader>
--- a/inventory/src/components/forecasting/columns.tsx
+++ b/inventory/src/components/forecasting/columns.tsx
@@ -169,7 +169,7 @@ export const renderSubComponent = ({ row }: { row: any }) => {
          </TableRow>
        </TableHeader>
        <TableBody>
-          {products.map((product) => (
+          {products.map((product: Product) => (
            <TableRow key={product.pid}>
              <TableCell>
                <a
--- a/inventory/src/lib/react-spreadsheet-import/src/ReactSpreadsheetImport.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/ReactSpreadsheetImport.tsx
@@ -1,13 +1,13 @@
 import merge from "lodash/merge"

 import { Steps } from "./steps/Steps"
-import { rtlThemeSupport, themeOverrides } from "./theme"
 import { Providers } from "./components/Providers"
 import type { RsiProps } from "./types"
 import { ModalWrapper } from "./components/ModalWrapper"
 import { translations } from "./translationsRSIProps"

-export const defaultTheme = themeOverrides
+// Simple empty theme placeholder
+export const defaultTheme = {}

 export const defaultRSIProps: Partial<RsiProps<any>> = {
  autoMapHeaders: true,
@@ -27,12 +27,9 @@ export const ReactSpreadsheetImport = <T extends string>(propsWithoutDefaults: R
  const props = merge({}, defaultRSIProps, propsWithoutDefaults)
  const mergedTranslations =
    props.translations !== translations ? merge(translations, props.translations) : translations
-  const mergedThemes = props.rtl
-    ? merge(defaultTheme, rtlThemeSupport, props.customTheme)
-    : merge(defaultTheme, props.customTheme)

  return (
-    <Providers theme={mergedThemes} rsiValues={{ ...props, translations: mergedTranslations }}>
+    <Providers rsiValues={{ ...props, translations: mergedTranslations }}>
      <ModalWrapper isOpen={props.isOpen} onClose={props.onClose}>
        <Steps />
      </ModalWrapper>
--- a/inventory/src/lib/react-spreadsheet-import/src/components/ModalWrapper.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/ModalWrapper.tsx
--- a/inventory/src/components/product-import/components/Providers.tsx
+++ b/inventory/src/components/product-import/components/Providers.tsx
@@ -0,0 +1,24 @@
+import { createContext } from "react"
+import type { RsiProps } from "../types"
+
+export const RsiContext = createContext({} as any)
+
+type ProvidersProps<T extends string> = {
+  children: React.ReactNode
+  rsiValues: RsiProps<T>
+}
+
+// No need for a root ID as we're not using Chakra anymore
+export const rootId = "rsi-modal-root"
+
+export const Providers = <T extends string>({ children, rsiValues }: ProvidersProps<T>) => {
+  if (!rsiValues.fields) {
+    throw new Error("Fields must be provided to react-spreadsheet-import")
+  }
+
+  return (
+    <RsiContext.Provider value={{ ...rsiValues }}>
+      {children}
+    </RsiContext.Provider>
+  )
+}
--- a/inventory/src/lib/react-spreadsheet-import/src/components/Table.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Table.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/hooks/useRsi.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/hooks/useRsi.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/index.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/index.ts
@@ -1,2 +1,3 @@
 export { StepType } from "./steps/UploadFlow"
 export { ReactSpreadsheetImport } from "./ReactSpreadsheetImport"
+export * from "./types"
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/ImageUploadStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/ImageUploadStep.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/DroppableContainer.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/DroppableContainer.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/GenericDropzone.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/GenericDropzone.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/CopyButton.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/CopyButton.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/ImageDropzone.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/ImageDropzone.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/ProductCard.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/ProductCard.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/SortableImage.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/ProductCard/SortableImage.tsx
@@ -4,8 +4,34 @@ import { CSS } from "@dnd-kit/utilities";
 import { Loader2, Trash2, Maximize2, GripVertical, X } from "lucide-react";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import config from "@/config";
-import { ProductImageSortable } from "../types";
+
+// Define the ProductImage interface
+interface ProductImage {
+  id: string;
+  url?: string;
+  imageUrl?: string;
+  fileName?: string;
+  loading?: boolean;
+  isLoading?: boolean;
+  // Optional fields from the full ProductImage type
+  productIndex?: number;
+  pid?: number;
+  iid?: number;
+  type?: number;
+  order?: number;
+  width?: number;
+  height?: number;
+  hidden?: number;
+}
+
+// Define the SortableImageProps interface
+interface SortableImageProps {
+  image: ProductImage;
+  productIndex: number;
+  imgIndex: number;
+  productName?: string; // Make this optional
+  removeImage: (id: string) => void; // Changed to match ProductCard
+}

 // Function to ensure URLs are properly formatted with absolute paths
 const getFullImageUrl = (url: string): string => {
@@ -89,7 +115,7 @@ export const SortableImage = ({
      ) : (
        <>
          <img 
-            src={getFullImageUrl(image.imageUrl)} 
+            src={getFullImageUrl(image.url || image.imageUrl || '')} 
            alt={`${displayName} - Image ${imgIndex + 1}`}
            className="h-full w-full object-cover select-none no-native-drag"
            draggable={false}
@@ -154,7 +180,7 @@ export const SortableImage = ({
                </Button>
                <div className="overflow-hidden rounded-md border border-border shadow-md bg-white dark:bg-black">
                  <img 
-                    src={getFullImageUrl(image.imageUrl)} 
+                    src={getFullImageUrl(image.url || image.imageUrl || '')} 
                    alt={`${displayName} - Image ${imgIndex + 1}`}
                    className="max-h-[70vh] max-w-full object-contain"
                  />
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/UnassignedImagesSection.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/UnassignedImagesSection.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/UnassignedImagesSection/UnassignedImageItem.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/components/UnassignedImagesSection/UnassignedImageItem.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useBulkImageUpload.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useBulkImageUpload.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { toast } from "sonner";
-import { UnassignedImage, Product, ProductImageSortable } from "../types";
+import { UnassignedImage, Product } from "../types";

 type HandleImageUploadFn = (files: FileList | File[], productIndex: number) => Promise<void>;

--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useDragAndDrop.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useDragAndDrop.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useProductImageOperations.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useProductImageOperations.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useProductImagesInit.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useProductImagesInit.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useUrlImageUpload.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/hooks/useUrlImageUpload.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/types.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ImageUploadStep/types.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
--- a/inventory/src/components/product-import/steps/MatchColumnsStep/components/MatchIcon.tsx
+++ b/inventory/src/components/product-import/steps/MatchColumnsStep/components/MatchIcon.tsx
@@ -0,0 +1,31 @@
+import { motion } from "framer-motion"
+import { CgCheck } from "react-icons/cg"
+
+const animationConfig = {
+  transition: {
+    duration: 0.1,
+  },
+  exit: { scale: 0.5, opacity: 0 },
+  initial: { scale: 0.5, opacity: 0 },
+  animate: { scale: 1, opacity: 1 },
+}
+
+type MatchIconProps = {
+  isChecked: boolean
+}
+
+export const MatchIcon = ({ isChecked }: MatchIconProps) => {
+  return (
+    <div
+      className="flex items-center justify-center rounded-full border-2 border-yellow-500 bg-background text-background transition-colors duration-100 min-w-6 min-h-6 w-6 h-6 ml-3.5 mr-3 data-[highlighted=true]:bg-green-500 data-[highlighted=true]:border-green-500"
+      data-highlighted={isChecked}
+      data-testid="column-checkmark"
+    >
+      {isChecked && (
+        <motion.div {...animationConfig}>
+          <CgCheck size="24px" />
+        </motion.div>
+      )}
+    </div>
+  )
+}
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/TemplateColumn.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/TemplateColumn.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findMatch.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findMatch.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findUnmatchedRequiredFields.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findUnmatchedRequiredFields.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getFieldOptions.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getFieldOptions.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getMatchedColumns.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getMatchedColumns.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeCheckboxValue.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeCheckboxValue.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeTableData.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeTableData.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setColumn.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setColumn.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setIgnoreColumn.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setIgnoreColumn.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setSubColumn.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setSubColumn.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/uniqueEntries.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/uniqueEntries.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/SelectHeaderStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/SelectHeaderStep.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/SelectHeaderTable.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/SelectHeaderTable.tsx
@@ -4,8 +4,6 @@ import {
  Table,
  TableBody,
  TableCell,
-  TableHead,
-  TableHeader,
  TableRow,
 } from "@/components/ui/table"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/columns.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/columns.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/SelectSheetStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/SelectSheetStep.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadFlow.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadFlow.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/UploadStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/UploadStep.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/DropZone.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/DropZone.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/columns.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/columns.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/readFilesAsync.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/readFilesAsync.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx
--- a/inventory/src/components/product-import/steps/ValidationStepNew/components/BaseCellContent.tsx
+++ b/inventory/src/components/product-import/steps/ValidationStepNew/components/BaseCellContent.tsx
@@ -0,0 +1,42 @@
+// Define MultiSelectCell component to fix the import issue
+type MultiSelectCellProps = {
+  field: string;
+  value: any;
+  onChange: (value: any) => void;
+  options: any[];
+  hasErrors: boolean;
+  className?: string;
+};
+
+// Using _ to indicate intentionally unused parameters
+const MultiSelectCell = (_: MultiSelectCellProps) => {
+  // This is a placeholder implementation
+  return null;
+};
+
+const BaseCellContent = ({ fieldType, field, value, onChange, options, hasErrors, className }: {
+  fieldType: string;
+  field: string;
+  value: any;
+  onChange: (value: any) => void;
+  options: any[];
+  hasErrors: boolean;
+  className?: string;
+}) => {
+  if (fieldType === 'multi-select' || fieldType === 'multi-input') {
+    return (
+      <MultiSelectCell
+        field={field}
+        value={value}
+        onChange={onChange}
+        options={options}
+        hasErrors={hasErrors}
+        className={className}
+      />
+    );
+  }
+
+  return null;
+};
+
+export default BaseCellContent; 
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/UpcValidationTableAdapter.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/UpcValidationTableAdapter.tsx
@@ -2,18 +2,19 @@ import React, { useMemo } from 'react'
 import ValidationTable from './ValidationTable'
 import { RowSelectionState } from '@tanstack/react-table'
 import { Fields } from '../../../types'
+import { Template } from '../hooks/useValidationState'

 interface UpcValidationTableAdapterProps<T extends string> {
  data: any[]
  fields: Fields<string>
  validationErrors: Map<number, Record<string, any[]>>
  rowSelection: RowSelectionState
-  setRowSelection: (value: RowSelectionState) => void
+  setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>
  updateRow: (rowIndex: number, key: T, value: any) => void
  filters: any
-  templates: any[]
+  templates: Template[]
  applyTemplate: (templateId: string, rowIndexes: number[]) => void
-  getTemplateDisplayText: (templateId: string) => string
+  getTemplateDisplayText: (templateId: string | null) => string
  isValidatingUpc: (rowIndex: number) => boolean
  validatingUpcRows: number[]
  copyDown: (rowIndex: number, fieldKey: string, endRowIndex?: number) => void
@@ -93,6 +94,17 @@ function UpcValidationTableAdapter<T extends string>({
      return row;
    });
    
+    // Create a Map for upcValidationResults with the same structure expected by ValidationTable
+    const upcValidationResultsMap = new Map<number, { itemNumber: string }>();
+    
+    // Populate with any item numbers we have from validation
+    data.forEach((_, index) => {
+      const itemNumber = upcValidation.getItemNumber(index);
+      if (itemNumber) {
+        upcValidationResultsMap.set(index, { itemNumber });
+      }
+    });
+    
    return (
      <ValidationTable
        {...props}
@@ -105,6 +117,7 @@ function UpcValidationTableAdapter<T extends string>({
        rowSublines={rowSublines}
        isLoadingLines={isLoadingLines}
        isLoadingSublines={isLoadingSublines}
+        upcValidationResults={upcValidationResultsMap}
      />
    );
  }), [upcValidation.validatingRows, upcValidation.getItemNumber, isLoadingTemplates, copyDown, externalValidatingCells, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines]);
@@ -128,7 +141,7 @@ function UpcValidationTableAdapter<T extends string>({
      itemNumbers={new Map()}
      isLoadingTemplates={isLoadingTemplates}
      copyDown={copyDown}
-      upcValidationResults={new Map()}
+      upcValidationResults={new Map<number, { itemNumber: string }>()}
      rowProductLines={rowProductLines}
      rowSublines={rowSublines}
      isLoadingLines={isLoadingLines}
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
@@ -394,9 +394,12 @@ const ValidationContainer = <T extends string>({
  // This function is defined for potential future use but not currently used
  // eslint-disable-next-line @typescript-eslint/no-unused-vars

-  const handleRowSelectionChange = useCallback((newSelection: RowSelectionState) => {
-    setRowSelection(newSelection);
-  }, [setRowSelection]);
+  const handleRowSelectionChange = useCallback(
+    (value: React.SetStateAction<RowSelectionState>) => {
+      setRowSelection(value);
+    },
+    [setRowSelection]
+  );

  // Add scroll container ref at the container level
  const scrollContainerRef = useRef<HTMLDivElement>(null);
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
@@ -185,7 +185,10 @@ const ValidationTable = <T extends string>({
  rowProductLines = {},
  rowSublines = {},
  isLoadingLines = {},
-  isLoadingSublines = {}
+  isLoadingSublines = {},
+  isValidatingUpc,
+  validatingUpcRows = [],
+  upcValidationResults
 }: ValidationTableProps<T>) => {
  const { translations } = useRsi<T>();

@@ -328,6 +331,16 @@ const ValidationTable = <T extends string>({
    copyDown(rowIndex, fieldKey, endRowIndex);
  }, [copyDown]);

+  // Use validatingUpcRows for calculation
+  const isRowValidatingUpc = useCallback((rowIndex: number) => {
+    return isValidatingUpc?.(rowIndex) || validatingUpcRows.includes(rowIndex);
+  }, [isValidatingUpc, validatingUpcRows]);
+
+  // Use upcValidationResults for display
+  const getRowUpcResult = useCallback((rowIndex: number) => {
+    return upcValidationResults?.get(rowIndex)?.itemNumber;
+  }, [upcValidationResults]);
+
  // Memoize field columns with stable handlers
  const fieldColumns = useMemo(() => fields.map((field): ColumnDef<RowData<T>, any> | null => {
    // Don't filter out disabled fields, just pass the disabled state to the cell component
@@ -368,6 +381,10 @@ const ValidationTable = <T extends string>({
        if (validatingCells.has(cellLoadingKey)) {
          isLoading = true;
        }
+        // Check if UPC is validating for this row and field is item_number
+        else if (fieldKey === 'item_number' && isRowValidatingUpc(row.index)) {
+          isLoading = true;
+        }
        // Add loading state for line/subline fields
        else if (fieldKey === 'line' && rowId && isLoadingLines[rowId]) {
          isLoading = true;
@@ -405,6 +422,12 @@ const ValidationTable = <T extends string>({
          });
        }
        
+        // Get item number from UPC validation results if available
+        let itemNumber = itemNumbers.get(row.index);
+        if (!itemNumber && fieldKey === 'item_number') {
+          itemNumber = getRowUpcResult(row.index);
+        }
+        
        return (
          <MemoizedCell
            field={fieldWithType as Field<string>}
@@ -414,7 +437,7 @@ const ValidationTable = <T extends string>({
            isValidating={isLoading}
            fieldKey={fieldKey}
            options={options}
-            itemNumber={itemNumbers.get(row.index)}
+            itemNumber={itemNumber}
            width={fieldWidth}
            rowIndex={row.index}
            copyDown={(endRowIndex?: number) => handleCopyDown(row.index, field.key as string, endRowIndex)}
@@ -424,7 +447,9 @@ const ValidationTable = <T extends string>({
      }
    };
  }).filter((col): col is ColumnDef<RowData<T>, any> => col !== null), 
-  [fields, validationErrors, validatingCells, itemNumbers, handleFieldUpdate, handleCopyDown, optionsCache, data.length, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines]);
+  [fields, validationErrors, validatingCells, itemNumbers, handleFieldUpdate, handleCopyDown, optionsCache, 
+   data.length, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines, 
+   isRowValidatingUpc, getRowUpcResult]);

  // Combine columns
  const columns = useMemo(() => [selectionColumn, templateColumn, ...fieldColumns], [selectionColumn, templateColumn, fieldColumns]);
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useDeferredValue, useTransition, useRef, useEffect, useMemo } from 'react'
+import React, { useState, useCallback, useTransition, useRef, useEffect, useMemo } from 'react'
 import { Field } from '../../../../types'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
@@ -46,7 +46,6 @@ const InputCell = <T extends string>({
  const [isEditing, setIsEditing] = useState(false);
  const [editValue, setEditValue] = useState('');
  const [isPending, startTransition] = useTransition();
-  const deferredEditValue = useDeferredValue(editValue);
  
  // Use a ref to track if we need to process the value
  const needsProcessingRef = useRef(false);
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { toast } from 'sonner';
 import { getApiUrl, RowData } from './useValidationState';
-import { Fields, InfoWithSource, ErrorSources, ErrorType } from '../../../types';
+import { Fields } from '../../../types';
 import { Meta } from '../types';
 import { addErrorsAndRunHooks } from '../utils/dataMutations';
 import * as Diff from 'diff';
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useProductLinesFetching.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useProductLinesFetching.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx
@@ -21,30 +21,22 @@ const isEmpty = (value: any): boolean =>
  (Array.isArray(value) && value.length === 0) ||
  (typeof value === 'object' && !Array.isArray(value) && Object.keys(value).length === 0);

-// Cache validation results to avoid running expensive validations repeatedly
-const validationResultCache = new Map<string, ValidationError[]>();
-
-// Add debounce to prevent rapid successive validations
-let validateDataTimeoutId: ReturnType<typeof setTimeout> | null = null;
+// Create a cache for validation results to avoid repeated validation of the same data
+const validationResultCache = new Map();
+const validationCache: Record<string, any> = {};

 // Add a function to clear cache for a specific field value
-export const clearValidationCacheForField = (fieldKey: string, value: any) => {
-  // Create a pattern to match cache keys for this field
-  const pattern = new RegExp(`^${fieldKey}-`);
-  
-  // Find and clear matching cache entries
-  validationResultCache.forEach((_, key) => {
-    if (pattern.test(key)) {
-      validationResultCache.delete(key);
-    }
-  });
+export const clearValidationCacheForField = (fieldKey: string) => {
+  // Clear cache
+  const cacheKey = `field_${fieldKey}`;
+  delete validationCache[cacheKey];
 };

 // Add a special function to clear all uniqueness validation caches
 export const clearAllUniquenessCaches = () => {
  // Clear cache for common unique fields
  ['item_number', 'upc', 'barcode', 'supplier_no', 'notions_no'].forEach(fieldKey => {
-    clearValidationCacheForField(fieldKey, null);
+    clearValidationCacheForField(fieldKey);
  });
  
  // Also clear any cache entries that might involve uniqueness validation
@@ -359,12 +351,12 @@ export const useValidation = <T extends string>(
      // Force cache clearing for uniqueness-validated fields to ensure fresh validation
      if (isUniqueField) {
        console.log(`Clearing validation cache for uniqueness field: ${fieldKey}`);
-        clearValidationCacheForField(fieldKey, null);
+        clearValidationCacheForField(fieldKey);
        
        // If a field that might affect item_number, also clear item_number cache
        if (triggersItemNumberValidation) {
          console.log('Also clearing item_number validation cache');
-          clearValidationCacheForField('item_number', null);
+          clearValidationCacheForField('item_number');
        }
      }
      
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts
@@ -9,7 +9,8 @@ export const convertToError = (error: any): ErrorType => {
  return {
    message: typeof error.message === 'string' ? error.message : String(error.message || ''),
    level: error.level || 'error',
-    source: error.source || 'row'
+    source: error.source || 'row',
+    type: error.type || 'custom'
  }
 }

--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts
@@ -1,5 +1,5 @@
 import { Field, Data, ErrorSources, ErrorType as ValidationErrorType } from '../../../types'
-import { ErrorType } from '../types'
+import { ErrorType } from '../types/index'

 /**
 * Formats a price value to a consistent format
--- a/inventory/src/lib/react-spreadsheet-import/src/translationsRSIProps.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/translationsRSIProps.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/types.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/types.ts
@@ -31,8 +31,6 @@ export type RsiProps<T extends string> = {
  isNavigationEnabled?: boolean
  // Translations for each text
  translations?: TranslationsRSIProps
-  // Theme configuration passed to underlying Chakra-UI
-  customTheme?: object
  // Specifies maximum number of rows for a single import
  maxRecords?: number
  // Maximum upload filesize (in bytes)
@@ -75,7 +73,7 @@ export type Field<T extends string> = {
  // Alternate labels used for fields' auto-matching, e.g. "fname" -> "firstName"
  alternateMatches?: string[]
  // Validations used for field entries
-  validations?: ValidationConfig[]
+  validations?: Validation[]
  // Field entry component
  fieldType: FieldType
  // UI-facing values shown to user as field examples pre-upload phase
--- a/inventory/src/components/product-import/utils/exceedsMaxRecords.ts
+++ b/inventory/src/components/product-import/utils/exceedsMaxRecords.ts
@@ -0,0 +1,6 @@
+import type { WorkSheet } from "xlsx"
+
+export const exceedsMaxRecords = (workSheet: WorkSheet, maxRecords: number) => {
+  const [top, bottom] = workSheet["!ref"]?.split(":").map((position: string) => parseInt(position.replace(/\D/g, ""), 10)) || []
+  return bottom - top > maxRecords
+}
--- a/inventory/src/lib/react-spreadsheet-import/src/utils/mapData.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/utils/mapData.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/utils/mapWorkbook.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/utils/mapWorkbook.ts
--- a/inventory/src/lib/react-spreadsheet-import/src/utils/steps.ts
+++ b/inventory/src/lib/react-spreadsheet-import/src/utils/steps.ts
--- a/inventory/src/components/products/ProductDetail.tsx
+++ b/inventory/src/components/products/ProductDetail.tsx
@@ -259,7 +259,7 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                        <dt className="text-sm text-muted-foreground">Categories</dt>
                        <dd className="flex flex-col gap-2">
                          {product?.category_paths ? 
-                            Object.entries(product.category_paths).map(([key, fullPath], index) => {
+                            Object.entries(product.category_paths).map(([key, fullPath]) => {
                              const [, leafCategory] = key.split(':');
                              return (
                                <div key={key} className="flex flex-col">
@@ -315,11 +315,11 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Status</dt>
-                        <dd>{product?.stock_status || "N/A"}</dd>
+                        <dd>{product?.metrics?.stock_status || "N/A"}</dd>
                      </div>
                      <div>
-                        <dt className="text-sm text-muted-foreground">Days of Stock</dt>
-                        <dd>{product?.days_of_inventory || 0} days</dd>
+                        <dt className="text-sm text-muted-foreground">Days of Inventory</dt>
+                        <dd>{product?.metrics?.days_of_inventory || 0} days</dd>
                      </div>
                    </dl>
                  </Card>
@@ -329,15 +329,15 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                    <dl className="space-y-2">
                      <div>
                        <dt className="text-sm text-muted-foreground">Daily Sales</dt>
-                        <dd>{product?.daily_sales_avg?.toFixed(1) || "0.0"} units</dd>
+                        <dd>{product?.metrics?.daily_sales_avg?.toFixed(1) || "0.0"} units</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Weekly Sales</dt>
-                        <dd>{product?.weekly_sales_avg?.toFixed(1) || "0.0"} units</dd>
+                        <dd>{product?.metrics?.weekly_sales_avg?.toFixed(1) || "0.0"} units</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Monthly Sales</dt>
-                        <dd>{product?.monthly_sales_avg?.toFixed(1) || "0.0"} units</dd>
+                        <dd>{product?.metrics?.monthly_sales_avg?.toFixed(1) || "0.0"} units</dd>
                      </div>
                    </dl>
                  </Card>
@@ -363,20 +363,24 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                    <h3 className="font-semibold mb-2">Financial Metrics</h3>
                    <dl className="space-y-2">
                      <div>
-                        <dt className="text-sm text-muted-foreground">Total Revenue</dt>
-                        <dd>${formatPrice(product?.total_revenue)}</dd>
+                        <dt className="text-sm text-muted-foreground">Revenue</dt>
+                        <dd>${formatPrice(product?.metrics?.total_revenue)}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Gross Profit</dt>
-                        <dd>${formatPrice(product?.gross_profit)}</dd>
+                        <dd>${formatPrice(product?.metrics?.gross_profit)}</dd>
+                      </div>
+                      <div>
+                        <dt className="text-sm text-muted-foreground">Cost of Goods Sold</dt>
+                        <dd>${formatPrice(product?.metrics?.cost_of_goods_sold)}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Margin</dt>
-                        <dd>{product?.avg_margin_percent?.toFixed(2) || "0.00"}%</dd>
+                        <dd>{product?.metrics?.avg_margin_percent?.toFixed(2) || "0.00"}%</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">GMROI</dt>
-                        <dd>{product?.gmroi?.toFixed(2) || "0.00"}</dd>
+                        <dd>{product?.metrics?.gmroi?.toFixed(2) || "0.00"}</dd>
                      </div>
                    </dl>
                  </Card>
@@ -386,15 +390,15 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                    <dl className="space-y-2">
                      <div>
                        <dt className="text-sm text-muted-foreground">Current Lead Time</dt>
-                        <dd>{product?.current_lead_time || "N/A"}</dd>
+                        <dd>{product?.metrics?.current_lead_time || "N/A"}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Target Lead Time</dt>
-                        <dd>{product?.target_lead_time || "N/A"}</dd>
+                        <dd>{product?.metrics?.target_lead_time || "N/A"}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Lead Time Status</dt>
-                        <dd>{product?.lead_time_status || "N/A"}</dd>
+                        <dd>{product?.metrics?.lead_time_status || "N/A"}</dd>
                      </div>
                    </dl>
                  </Card>
@@ -415,12 +419,12 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                        <dd className="text-2xl font-semibold">{product?.stock_quantity}</dd>
                      </div>
                      <div>
-                        <dt className="text-sm text-muted-foreground">Days of Inventory</dt>
-                        <dd className="text-2xl font-semibold">{product?.days_of_inventory || 0}</dd>
+                        <dt className="text-sm text-muted-foreground">Status</dt>
+                        <dd className="text-2xl font-semibold">{product?.metrics?.stock_status || "N/A"}</dd>
                      </div>
                      <div>
-                        <dt className="text-sm text-muted-foreground">Status</dt>
-                        <dd className="text-2xl font-semibold">{product?.stock_status || "N/A"}</dd>
+                        <dt className="text-sm text-muted-foreground">Days of Inventory</dt>
+                        <dd className="text-2xl font-semibold">{product?.metrics?.days_of_inventory || 0}</dd>
                      </div>
                    </dl>
                  </Card>
@@ -430,15 +434,15 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                    <dl className="grid grid-cols-3 gap-4">
                      <div>
                        <dt className="text-sm text-muted-foreground">Reorder Point</dt>
-                        <dd>{product?.reorder_point || 0}</dd>
+                        <dd>{product?.metrics?.reorder_point || 0}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Safety Stock</dt>
-                        <dd>{product?.safety_stock || 0}</dd>
+                        <dd>{product?.metrics?.safety_stock || 0}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">ABC Class</dt>
-                        <dd>{product?.abc_class || "N/A"}</dd>
+                        <dd>{product?.metrics?.abc_class || "N/A"}</dd>
                      </div>
                    </dl>
                  </Card>
@@ -559,15 +563,15 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                    <dl className="grid grid-cols-3 gap-4">
                      <div>
                        <dt className="text-sm text-muted-foreground">Gross Profit</dt>
-                        <dd className="text-2xl font-semibold">${formatPrice(product?.gross_profit)}</dd>
+                        <dd className="text-2xl font-semibold">${formatPrice(product?.metrics?.gross_profit)}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">GMROI</dt>
-                        <dd className="text-2xl font-semibold">{product?.gmroi?.toFixed(2) || "0.00"}</dd>
+                        <dd className="text-2xl font-semibold">{product?.metrics?.gmroi?.toFixed(2) || "0.00"}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Margin %</dt>
-                        <dd className="text-2xl font-semibold">{product?.avg_margin_percent?.toFixed(2) || "0.00"}%</dd>
+                        <dd className="text-2xl font-semibold">{product?.metrics?.avg_margin_percent?.toFixed(2) || "0.00"}%</dd>
                      </div>
                    </dl>
                  </Card>
@@ -577,7 +581,7 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) {
                    <dl className="grid grid-cols-2 gap-4">
                      <div>
                        <dt className="text-sm text-muted-foreground">Cost of Goods Sold</dt>
-                        <dd>${formatPrice(product?.cost_of_goods_sold)}</dd>
+                        <dd>${formatPrice(product?.metrics?.cost_of_goods_sold)}</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-muted-foreground">Landing Cost</dt>
--- a/inventory/src/components/products/ProductFilters.tsx
+++ b/inventory/src/components/products/ProductFilters.tsx
@@ -24,11 +24,12 @@ type FilterValue = string | number | boolean;
 type ComparisonOperator = "=" | ">" | ">=" | "<" | "<=" | "between";

 interface FilterValueWithOperator {
-  value: FilterValue | [string, string];
+  value: FilterValue | string[] | number[];
  operator: ComparisonOperator;
 }

-export type ActiveFilterValue = FilterValue | FilterValueWithOperator;
+// Support both simple values and complex ones with operators
+export type ActiveFilterValue = FilterValue | FilterValueWithOperator | [number, number];

 interface ActiveFilter {
  id: string;
@@ -317,25 +318,25 @@ export function ProductFilters({
    });
  }, []);

-  const handleApplyFilter = (value: FilterValue | [string, string]) => {
+  const handleApplyFilter = (value: FilterValue | [number, number]) => {
    if (!selectedFilter) return;

    let filterValue: ActiveFilterValue;

-    if (selectedFilter.type === "number") {
+    if (selectedOperator) {
      if (selectedOperator === "between" && Array.isArray(value)) {
        filterValue = {
-          value: [value[0].toString(), value[1].toString()],
+          value: value.map(v => v.toString()),
          operator: selectedOperator,
        };
      } else {
        filterValue = {
-          value: value.toString(),
+          value: typeof value === 'number' ? value : value.toString(),
          operator: selectedOperator,
        };
      }
    } else {
-      filterValue = value;
+      filterValue = Array.isArray(value) ? value : value;
    }

    onFilterChange({
--- a/inventory/src/components/settings/Configuration.tsx
+++ b/inventory/src/components/settings/Configuration.tsx
@@ -1,12 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import axios from "axios";
+import config from "@/config";
 import { toast } from "sonner";
-import config from '../../config';
-import { Table, TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table";

 interface StockThreshold {
  id: number;
@@ -132,7 +132,7 @@ export function Configuration() {
        setSafetyStockConfig(data.safetyStockConfig);
        setTurnoverConfig(data.turnoverConfig);
      } catch (error) {
-        toast.error(`Failed to load configuration: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        toast.error('Failed to load configuration');
      }
    };
    loadConfig();
@@ -140,29 +140,19 @@ export function Configuration() {

  const handleUpdateStockThresholds = async () => {
    try {
-      const response = await fetch(`${config.apiUrl}/config/stock-thresholds/1`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        credentials: 'include',
-        body: JSON.stringify(stockThresholds)
-      });
-
-      if (!response.ok) {
-        const data = await response.json().catch(() => ({}));
-        throw new Error(data.error || 'Failed to update stock thresholds');
+      const response = await axios.post(`${config.apiUrl}/settings/stock-thresholds`, stockThresholds);
+      if (response.status === 200) {
+        toast.success('Stock thresholds updated successfully');
      }
-
-      toast.success('Stock thresholds updated successfully');
    } catch (error) {
-      toast.error(`Failed to update thresholds: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      console.error("Error updating stock thresholds:", error);
+      toast.error('Failed to update stock thresholds');
    }
  };

  const handleUpdateLeadTimeThresholds = async () => {
    try {
-      const response = await fetch(`${config.apiUrl}/config/lead-time-thresholds/1`, {
+      const response = await fetch(`${config.apiUrl}/config/lead-time`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
@@ -178,6 +168,7 @@ export function Configuration() {

      toast.success('Lead time thresholds updated successfully');
    } catch (error) {
+      console.error("Error updating lead time thresholds:", error);
      toast.error(`Failed to update thresholds: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };
@@ -200,6 +191,7 @@ export function Configuration() {

      toast.success('Sales velocity configuration updated successfully');
    } catch (error) {
+      console.error("Error updating sales velocity configuration:", error);
      toast.error(`Failed to update configuration: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };
@@ -222,6 +214,7 @@ export function Configuration() {

      toast.success('ABC classification configuration updated successfully');
    } catch (error) {
+      console.error("Error updating ABC classification configuration:", error);
      toast.error(`Failed to update configuration: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };
@@ -244,6 +237,7 @@ export function Configuration() {

      toast.success('Safety stock configuration updated successfully');
    } catch (error) {
+      console.error("Error updating safety stock configuration:", error);
      toast.error(`Failed to update configuration: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };
@@ -266,6 +260,7 @@ export function Configuration() {

      toast.success('Turnover configuration updated successfully');
    } catch (error) {
+      console.error("Error updating turnover configuration:", error);
      toast.error(`Failed to update configuration: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };
--- a/inventory/src/components/settings/TemplateManagement.tsx
+++ b/inventory/src/components/settings/TemplateManagement.tsx
@@ -1,6 +1,7 @@
 import { useState, useMemo } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
+import { TemplateForm } from "@/components/templates/TemplateForm";
 import {
  Table,
  TableBody,
@@ -9,19 +10,8 @@ import {
  TableHeader,
  TableRow,
 } from "@/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { toast } from "sonner";
+import { ArrowUpDown, Pencil, Trash2, Copy } from "lucide-react";
 import config from "@/config";
 import {
  useReactTable,
@@ -31,23 +21,6 @@ import {
  flexRender,
  type ColumnDef,
 } from "@tanstack/react-table";
-import { ArrowUpDown, Pencil, Trash2, Loader2, Copy } from "lucide-react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Textarea } from "@/components/ui/textarea";
 import {
  AlertDialog,
  AlertDialogAction,
@@ -59,7 +32,7 @@ import {
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { SearchProductTemplateDialog } from "@/components/templates/SearchProductTemplateDialog";
-import { TemplateForm } from "@/components/templates/TemplateForm";
+import { toast } from "sonner";

 interface FieldOption {
  label: string;
@@ -104,8 +77,6 @@ interface Template {
  updated_at: string;
 }

-interface TemplateFormData extends Omit<Template, 'id' | 'created_at' | 'updated_at'> {}
-
 export function TemplateManagement() {
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -360,10 +331,10 @@ export function TemplateManagement() {
          setEditingTemplate(null);
        }}
        onSuccess={handleTemplateSuccess}
-        initialData={editingTemplate || undefined}
+        initialData={editingTemplate || null}
        mode={editingTemplate ? (editingTemplate.id ? 'edit' : 'copy') : 'create'}
        templateId={editingTemplate?.id}
-        fieldOptions={fieldOptions}
+        fieldOptions={fieldOptions || null}
      />

      {/* Product Search Dialog */}
--- a/inventory/src/components/templates/SearchProductTemplateDialog.tsx
+++ b/inventory/src/components/templates/SearchProductTemplateDialog.tsx
@@ -878,9 +878,9 @@ export function SearchProductTemplateDialog({ isOpen, onClose, onTemplateCreated
                categories: selectedProduct.categories || [],
                tax_cat: selectedProduct.tax_code ? String(selectedProduct.tax_code) : undefined,
                size_cat: selectedProduct.size_cat ? String(selectedProduct.size_cat) : undefined,
-                ship_restrictions: selectedProduct.shipping_restrictions ? String(selectedProduct.shipping_restrictions) : undefined
+                ship_restrictions: selectedProduct.shipping_restrictions ? [String(selectedProduct.shipping_restrictions)] : undefined
              };
-            })() : undefined}
+            })() : null}
            mode="create"
            fieldOptions={fieldOptions}
          />
--- a/inventory/src/components/templates/TemplateForm.tsx
+++ b/inventory/src/components/templates/TemplateForm.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import axios from 'axios';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog';
 import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Loader2, ChevronsUpDown, Check } from 'lucide-react';
 import { toast } from 'sonner';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import axios from 'axios';
+import { Label } from '@/components/ui/label';

 interface FieldOption {
  label: string;
@@ -50,14 +49,14 @@ interface TemplateFormData {
  tax_cat?: string;
  size_cat?: string;
  categories?: string[];
-  ship_restrictions?: string;
+  ship_restrictions?: string[];
 }

 interface TemplateFormProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
-  initialData?: TemplateFormData;
+  initialData: TemplateFormData | null;
  mode: 'create' | 'edit' | 'copy';
  templateId?: number;
  fieldOptions: FieldOptions | null;
@@ -89,7 +88,7 @@ export function TemplateForm({
    tax_cat: "0",
    size_cat: undefined,
    categories: [],
-    ship_restrictions: "0"
+    ship_restrictions: ["0"]
  };

  const [formData, setFormData] = React.useState<TemplateFormData>(defaultFormData);
@@ -147,7 +146,11 @@ export function TemplateForm({
  };

  const handleSelectChange = (name: string, value: string, closePopover = true) => {
-    setFormData(prev => ({ ...prev, [name]: value }));
+    if (name === 'ship_restrictions') {
+      setFormData(prev => ({ ...prev, [name]: [value] }));
+    } else {
+      setFormData(prev => ({ ...prev, [name]: value }));
+    }
    if (closePopover) {
      // Close the popover by blurring the trigger button
      const button = document.activeElement as HTMLElement;
@@ -190,8 +193,13 @@ export function TemplateForm({
              acc[key] = value.length > 0 ? `{${value.join(',')}}` : '{}';
            }
          } else if (key === 'ship_restrictions') {
-            // Ensure ship_restrictions is always formatted as a PostgreSQL array
-            acc[key] = `{${value}}`;
+            // For ship_restrictions, it's already an array so we can format it directly
+            if (Array.isArray(value)) {
+              acc[key] = value.length > 0 ? `{${value.join(',')}}` : '{}';
+            } else {
+              // If for some reason it's not an array, convert it
+              acc[key] = `{${value}}`;
+            }
          } else if (key === 'tax_cat' || key === 'supplier') {
            // Convert these fields to numbers
            acc[key] = Number(value);
@@ -222,7 +230,7 @@ export function TemplateForm({

      console.log('Sending request to:', endpoint, 'with data:', cleanFormData);

-      const response = await axios[method](endpoint, cleanFormData);
+      await axios[method](endpoint, cleanFormData);

      toast.success(
        mode === 'edit' ? 'Template updated successfully' : 'Template created successfully'
@@ -297,57 +305,67 @@ export function TemplateForm({
  };

  // Update the CommandList components to include the wheel handler
-  const renderCommandList = (options: FieldOption[], selectedValue: string | undefined, name: string, closeOnSelect = true) => (
-    <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
-      <CommandEmpty>No options found.</CommandEmpty>
-      <CommandGroup>
-        {getSortedOptions(options, selectedValue).map((option) => (
-          <CommandItem
-            key={option.value}
-            value={option.label}
-            onSelect={() => {
-              if (name === 'categories') {
-                handleMultiSelectChange(name, option.value);
-              } else {
-                handleSelectChange(name, option.value, closeOnSelect);
-              }
-            }}
-          >
-            {name === 'categories' ? (
-              <div className="flex items-center w-full">
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4 flex-shrink-0",
-                    (formData.categories || []).some(cat => String(cat) === String(option.value))
-                      ? "opacity-100"
-                      : "opacity-0"
-                  )}
-                />
-                <span className={cn(
-                  "truncate",
-                  option.level === 1 && "font-bold"
-                )}>
+  const renderCommandList = (options: FieldOption[], selectedValue: string | string[] | undefined, name: string, closeOnSelect = true) => {
+    let displayValue: string | undefined;
+    
+    if (name === 'ship_restrictions' && Array.isArray(selectedValue)) {
+      displayValue = selectedValue.length > 0 ? selectedValue[0] : undefined;
+    } else {
+      displayValue = selectedValue as string;
+    }
+    
+    return (
+      <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
+        <CommandEmpty>No options found.</CommandEmpty>
+        <CommandGroup>
+          {getSortedOptions(options, selectedValue).map((option) => (
+            <CommandItem
+              key={option.value}
+              value={option.label}
+              onSelect={() => {
+                if (name === 'categories') {
+                  handleMultiSelectChange(name, option.value);
+                } else {
+                  handleSelectChange(name, option.value, closeOnSelect);
+                }
+              }}
+            >
+              {name === 'categories' ? (
+                <div className="flex items-center w-full">
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4 flex-shrink-0",
+                      (formData.categories || []).some(cat => String(cat) === String(option.value))
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                  <span className={cn(
+                    "truncate",
+                    option.level === 1 && "font-bold"
+                  )}>
+                    {option.label}
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      String(displayValue) === String(option.value)
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
                  {option.label}
-                </span>
-              </div>
-            ) : (
-              <>
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    String(selectedValue) === String(option.value)
-                      ? "opacity-100"
-                      : "opacity-0"
-                  )}
-                />
-                {option.label}
-              </>
-            )}
-          </CommandItem>
-        ))}
-      </CommandGroup>
-    </CommandList>
-  );
+                </>
+              )}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    );
+  };

  // Add logging to company display
  const getCompanyLabel = (companyId: string | number) => {
@@ -517,7 +535,7 @@ export function TemplateForm({
                      >
                        {formData.ship_restrictions
                          ? fieldOptions.shippingRestrictions.find(
-                              (r) => r.value === formData.ship_restrictions
+                              (r) => r.value === (Array.isArray(formData.ship_restrictions) ? formData.ship_restrictions[0] : formData.ship_restrictions)
                            )?.label
                          : "Select shipping restriction..."}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
--- a/inventory/src/lib/react-spreadsheet-import/LICENSE
+++ b/inventory/src/lib/react-spreadsheet-import/LICENSE
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 UGNIS,
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/inventory/src/lib/react-spreadsheet-import/README.md
+++ b/inventory/src/lib/react-spreadsheet-import/README.md
@@ -1,341 +0,0 @@
-<h1 align="center">RSI react-spreadsheet-import ⚡️</h1>
-
-<div align="center">
-  
-![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/UgnisSoftware/react-spreadsheet-import/test.yaml)
-![GitHub](https://img.shields.io/github/license/UgnisSoftware/react-spreadsheet-import) [![npm](https://img.shields.io/npm/v/react-spreadsheet-import)](https://www.npmjs.com/package/react-spreadsheet-import)
-  
-</div>
-<br />
-
-A component used for importing XLS / XLSX / CSV documents built with [**Chakra UI**](https://chakra-ui.com). Import flow combines:
-
- 📥 Uploader
- ⚙️ Parser
- 📊 File preview
- 🧪 UI for column mapping
- ✏ UI for validating and editing data
-
-✨ [**Demo**](https://ugnissoftware.github.io/react-spreadsheet-import/iframe.html?id=react-spreadsheet-import--basic&args=&viewMode=story) ✨
-<br />
-
-## Features
-
- Custom styles - edit Chakra UI theme to match your project's styles 🎨
- Custom validation rules - make sure valid data is being imported, easily spot and correct errors
- Hooks - alter raw data after upload or make adjustments on data changes
- Auto-mapping columns - automatically map most likely value to your template values, e.g. `name` -> `firstName`
-  <br />
-
-![rsi-preview](https://user-images.githubusercontent.com/45755753/159503528-90aacb69-128f-4ece-b45b-ab97d403a9d3.gif)
-
-## Figma
-
-We provide full figma designs. You can copy the designs
-[here](https://www.figma.com/community/file/1080776795891439629)
-
-## Getting started
-
-```sh
-npm i react-spreadsheet-import
-```
-
-Using the component: (it's up to you when the flow is open and what you do on submit with the imported data)
-
-```tsx
-import { ReactSpreadsheetImport } from "react-spreadsheet-import";
-
-<ReactSpreadsheetImport isOpen={isOpen} onClose={onClose} onSubmit={onSubmit} fields={fields} />
-```
-
-## Required Props
-
-```tsx
-  // Determines if modal is visible.
-  isOpen: Boolean
-  // Called when flow is closed without reaching submit.
-  onClose: () => void
-  // Called after user completes the flow. Provides data array, where data keys matches your field keys. 
-  onSubmit: (data, file) => void | Promise<any>
-```
-
-### Fields
-
-Fields describe what data you are trying to collect.
-
-```tsx
-const fields = [
-  {
-    // Visible in table header and when matching columns.
-    label: "Name",
-    // This is the key used for this field when we call onSubmit.
-    key: "name",
-    // Allows for better automatic column matching. Optional.
-    alternateMatches: ["first name", "first"],
-    // Used when editing and validating information.
-    fieldType: {
-      // There are 3 types - "input" / "checkbox" / "select".
-      type: "input",
-    },
-    // Used in the first step to provide an example of what data is expected in this field. Optional.
-    example: "Stephanie",
-    // Can have multiple validations that are visible in Validation Step table.
-    validations: [
-      {
-        // Can be "required" / "unique" / "regex"
-        rule: "required",
-        errorMessage: "Name is required",
-        // There can be "info" / "warning" / "error" levels. Optional. Default "error".
-        level: "error",
-      },
-    ],
-  },
-] as const
-```
-
-## Optional Props
-
-### Hooks
-
-You can transform and validate data with custom hooks. There are hooks after each step:
-
- **uploadStepHook** - runs only once after uploading the file.
- **selectHeaderStepHook** - runs only once after selecting the header row in spreadsheet.
- **matchColumnsStepHook** - runs only once after column matching. Operations on data that are expensive should be done here.
-
-The last step - validation step has 2 unique hooks that run only in that step with different performance tradeoffs:
-
- **tableHook** - runs at the start and on any change. Runs on all rows. Very expensive, but can change rows that depend on other rows.
- **rowHook** - runs at the start and on any row change. Runs only on the rows changed. Fastest, most validations and transformations should be done here.
-
-Example:
-
-```tsx
-<ReactSpreadsheetImport
-  rowHook={(data, addError) => {
-    // Validation
-    if (data.name === "John") {
-      addError("name", { message: "No Johns allowed", level: "info" })
-    }
-    // Transformation
-    return { ...data, name: "Not John" }
-    // Sorry John
-  }}
-/>
-```
-
-### Initial state
-
-In rare case when you need to skip the beginning of the flow, you can start the flow from any of the steps.
-
- **initialStepState** - initial state of component that will be rendered on load. 
-
-```tsx
-  initialStepState?: StepState
-  
-  type StepState =
-    | {
-        type: StepType.upload
-      }
-    | {
-        type: StepType.selectSheet
-        workbook: XLSX.WorkBook
-      }
-    | {
-        type: StepType.selectHeader
-        data: RawData[]
-      }
-    | {
-        type: StepType.matchColumns
-        data: RawData[]
-        headerValues: RawData
-      }
-    | {
-        type: StepType.validateData
-        data: any[]
-      }
-
-  type RawData = Array<string | undefined>
-
-  // XLSX.workbook type is native to SheetJS and can be viewed here: https://github.com/SheetJS/sheetjs/blob/83ddb4c1203f6bac052d8c1608b32fead02ea32f/types/index.d.ts#L269
-```
-
-Example:
-
-```tsx
-import { ReactSpreadsheetImport, StepType } from "react-spreadsheet-import";
-
-<ReactSpreadsheetImport
-  initialStepState={{
-    type: StepType.matchColumns,
-    data: [
-      ["Josh", "2"],
-      ["Charlie", "3"],
-      ["Lena", "50"],
-    ],
-    headerValues: ["name", "age"],
-  }}
-/>
-```
-
-### Dates and time
-
-Excel stores dates and times as numbers - offsets from an epoch. When reading xlsx files SheetJS provides date formatting helpers.
-**Default date import format** is `yyyy-mm-dd`. Date parsing with SheetJS sometimes yields unexpected results, therefore thorough date validations are recommended.
-
- **dateFormat** - sets SheetJS `dateNF` option. Can be used to format dates when importing sheet data.
- **parseRaw** - sets SheetJS `raw` option. If `true`, date formatting will be applied to XLSX date fields only. Default is `true`
-
-Common date-time formats can be viewed [here](https://docs.sheetjs.com/docs/csf/features/dates/#date-and-time-number-formats).
-
-### Other optional props
-
-```tsx
-  // Allows submitting with errors. Default: true
-  allowInvalidSubmit?: boolean
-  // Translations for each text. See customisation bellow
-  translations?: object
-  // Theme configuration passed to underlying Chakra-UI. See customisation bellow
-  customTheme?: object
-  // Specifies maximum number of rows for a single import
-  maxRecords?: number
-  // Maximum upload filesize (in bytes)
-  maxFileSize?: number
-  // Automatically map imported headers to specified fields if possible. Default: true
-  autoMapHeaders?: boolean
-  // When field type is "select", automatically match values if possible. Default: false
-  autoMapSelectValues?: boolean
-  // Headers matching accuracy: 1 for strict and up for more flexible matching. Default: 2
-  autoMapDistance?: number
-  // Enable navigation in stepper component and show back button. Default: false
-  isNavigationEnabled?: boolean
-```
-
-## Customisation
-
-### Customising styles (colors, fonts)
-
-You can see default theme we use [here](https://github.com/UgnisSoftware/react-spreadsheet-import/blob/master/src/theme.ts). Your override should match this object's structure.
-
-There are 3 ways you can style the component:
-
-1.) Change theme colors globally
-
-```jsx
-    <ReactSpreadsheetImport
-        {...mockRsiValues}
-        isOpen={isOpen}
-        onClose={onClose}
-        onSubmit={setData}
-        customTheme={{
-          colors: {
-            background: 'white',
-            ...
-            rsi: {
-              // your brand colors should go here
-              50: '...'
-              ...
-              500: 'teal',
-              ...
-              900: "...",
-            },
-          },
-        }}
-      />
-```
-
-<img width="1189" alt="Screenshot 2022-04-13 at 10 24 34" src="https://user-images.githubusercontent.com/5903616/163123718-15c05ad8-243b-4a81-8141-c47216047468.png">
-
-2.) Change all components of the same type, like all Buttons, at the same time
-
-```jsx
-<ReactSpreadsheetImport
-  {...mockRsiValues}
-  isOpen={isOpen}
-  onClose={onClose}
-  onSubmit={setData}
-  customTheme={{
-    components: {
-      Button: {
-        baseStyle: {
-          borderRadius: "none",
-        },
-        defaultProps: {
-          colorScheme: "yellow",
-        },
-      },
-    },
-  }}
-/>
-```
-
-<img width="1191" alt="Screenshot 2022-04-13 at 11 04 30" src="https://user-images.githubusercontent.com/5903616/163130213-82f955b4-5081-49e0-8f43-8857d480dacd.png">
- 
-3.) Change components specifically in each Step.
-```jsx
-    <ReactSpreadsheetImport
-        {...mockRsiValues}
-        isOpen={isOpen}
-        onClose={onClose}
-        onSubmit={setData}
-        customTheme={{
-          components: {
-            UploadStep: {
-              baseStyle: {
-                dropzoneButton: {
-                  bg: "red",
-                },
-              },
-            },
-          },
-        }}
-      />
-```
-<img width="1182" alt="Screenshot 2022-04-13 at 10 21 58" src="https://user-images.githubusercontent.com/5903616/163123694-5b79179e-037e-4f9d-b1a9-6078f758bb7e.png">
-
-Underneath we use Chakra-UI, you can send in a custom theme for us to apply. Read more about themes [here](https://chakra-ui.com/docs/styled-system/theming/theme)
-
-### Changing text (translations)
-
-You can change any text in the flow:
-
-```tsx
-<ReactSpreadsheetImport
-  translations={{
-    uploadStep: {
-      title: "Upload Employees",
-    },
-  }}
-/>
-```
-
-You can see all the translation keys [here](https://github.com/UgnisSoftware/react-spreadsheet-import/blob/master/src/translationsRSIProps.ts)
-
-## VS other libraries
-
-Flatfile vs react-spreadsheet-import and Dromo vs react-spreadsheet-import:
-
-|                                | RSI            | Flatfile    | Dromo       |
-| ------------------------------ | -------------- | ----------- | ----------- |
-| Licence                        | MIT            | Proprietary | Proprietary |
-| Price                          | Free           | Paid        | Paid        |
-| Support                        | Github Issues  | Enterprise  | Enterprise  |
-| Self-host                      | Yes            | Paid        | Paid        |
-| Hosted solution                | In development | Yes         | Yes         |
-| On-prem deployment             | N/A            | Yes         | Yes         |
-| Hooks                          | Yes            | Yes         | Yes         |
-| Automatic header matching      | Yes            | Yes         | Yes         |
-| Data validation                | Yes            | Yes         | Yes         |
-| Custom styling                 | Yes            | Yes         | Yes         |
-| Translations                   | Yes            | Yes         | Yes         |
-| Trademarked words `Data Hooks` | No             | Yes         | No          |
-
-React-spreadsheet-import can be used as a free and open-source alternative to Flatfile and Dromo.
-
-## Contributing
-
-Feel free to open issues if you have any questions or notice bugs. If you want different component behaviour, consider forking the project.
-
-## Credits
-
-Created by Ugnis. [Julita Kriauciunaite](https://github.com/JulitorK) and [Karolis Masiulis](https://github.com/masiulis). You can contact us at `info@ugnis.com`
--- a/inventory/src/lib/react-spreadsheet-import/package-lock.json
+++ b/inventory/src/lib/react-spreadsheet-import/package-lock.json
--- a/inventory/src/lib/react-spreadsheet-import/package.json
+++ b/inventory/src/lib/react-spreadsheet-import/package.json
@@ -1,174 +0,0 @@
-{
-  "name": "react-spreadsheet-import",
-  "version": "4.7.1",
-  "description": "React spreadsheet import for xlsx and csv files with column matching and validation",
-  "main": "./dist-commonjs/index.js",
-  "module": "./dist/index.js",
-  "types": "./types/index.d.ts",
-  "files": [
-    "dist-commonjs",
-    "dist",
-    "types"
-  ],
-  "scripts": {
-    "start": "storybook dev -p 6006",
-    "test:unit": "jest",
-    "test:e2e": "npx playwright test",
-    "test:chromatic": "npx chromatic ",
-    "ts": "tsc",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "prebuild": "npm run clean",
-    "build": "rollup -c rollup.config.ts",
-    "build-storybook": "storybook build -o docs-build",
-    "release:patch": "git checkout master && git pull && npm run test:unit && npm run ts && npm run build && npm version patch && git add -A && git push && git push --tags && npm publish",
-    "release:minor": "git checkout master && git pull && npm run test:unit && npm run ts && npm run build && npm version minor && git add -A && git push && git push --tags && npm publish",
-    "release:major": "git checkout master && git pull && npm run test:unit && npm run ts && npm run build && npm version major && git add -A && git push && git push --tags && npm publish",
-    "clean": "rimraf dist dist-commonjs types"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/UgnisSoftware/react-spreadsheet-import.git"
-  },
-  "keywords": [
-    "React",
-    "spreadsheet",
-    "import",
-    "upload",
-    "csv",
-    "xlsx",
-    "validate",
-    "automatic",
-    "match"
-  ],
-  "author": {
-    "name": "Ugnis"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/UgnisSoftware/react-spreadsheet-import/issues"
-  },
-  "homepage": "https://github.com/UgnisSoftware/react-spreadsheet-import#readme",
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "dependencies": {
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "chakra-react-select": "^4.7.5",
-    "chakra-ui-steps": "2.0.4",
-    "framer-motion": "^10.16.4",
-    "js-levenshtein": "1.1.6",
-    "lodash": "4.17.21",
-    "react-data-grid": "7.0.0-beta.13",
-    "react-dropzone": "14.2.3",
-    "react-icons": "4.11.0",
-    "uuid": "^9.0.1",
-    "xlsx-ugnis": "0.20.3"
-  },
-  "devDependencies": {
-    "@babel/core": "7.23.2",
-    "@babel/preset-env": "7.23.2",
-    "@babel/preset-react": "7.22.15",
-    "@babel/preset-typescript": "7.23.2",
-    "@emotion/jest": "11.11.0",
-    "@jest/types": "27.5.1",
-    "@playwright/test": "^1.39.0",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-interactions": "7.5.1",
-    "@storybook/addon-links": "7.5.1",
-    "@storybook/blocks": "7.5.1",
-    "@storybook/cli": "7.5.1",
-    "@storybook/react": "7.5.1",
-    "@storybook/react-webpack5": "7.5.1",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@testing-library/dom": "9.3.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "27.4.1",
-    "@types/js-levenshtein": "1.1.1",
-    "@types/node": "^20.8.7",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
-    "@types/styled-system": "5.1.16",
-    "@types/uuid": "9.0.1",
-    "@typescript-eslint/eslint-plugin": "5.59.7",
-    "@typescript-eslint/parser": "5.59.7",
-    "babel-loader": "9.1.3",
-    "chromatic": "^7.4.0",
-    "eslint": "8.41.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "jest": "27.5.1",
-    "jest-watch-typeahead": "1.0.0",
-    "lint-staged": "13.2.2",
-    "prettier": "2.8.8",
-    "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-select-event": "5.5.1",
-    "rollup": "2.70.1",
-    "rollup-plugin-typescript2": "0.31.2",
-    "storybook": "7.5.1",
-    "ts-essentials": "9.3.2",
-    "ts-jest": "27.1.4",
-    "ttypescript": "1.5.15",
-    "typescript": "4.9.5",
-    "typescript-transform-paths": "3.4.6"
-  },
-  "overrides": {
-    "semver": "^7.5.3"
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": "eslint",
-    "*.{js,ts,tsx,md,html,css,json}": "prettier --write"
-  },
-  "prettier": {
-    "tabWidth": 2,
-    "trailingComma": "all",
-    "semi": false,
-    "printWidth": 120
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "mjs"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx)?$": "ts-jest/dist",
-      "^.+\\.mjs$": "ts-jest/dist"
-    },
-    "moduleNameMapper": {
-      "~/(.*)": "<rootDir>/src/$1"
-    },
-    "modulePathIgnorePatterns": [
-      "<rootDir>/e2e/"
-    ],
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
-    ],
-    "setupFiles": [
-      "./src/tests/setup.ts"
-    ],
-    "globals": {
-      "ts-jest": {
-        "tsconfig": "tsconfig.json"
-      }
-    },
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ]
-  },
-  "readme": "ERROR: No README data found!"
-}
--- a/inventory/src/lib/react-spreadsheet-import/src/components/Providers.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Providers.tsx
@@ -1,33 +0,0 @@
-import { ChakraProvider, extendTheme } from "@chakra-ui/react"
-import { createContext } from "react"
-import type { RsiProps } from "../types"
-import type { CustomTheme } from "../theme"
-
-export const RsiContext = createContext({} as any)
-
-type ProvidersProps<T extends string> = {
-  children: React.ReactNode
-  theme: CustomTheme
-  rsiValues: RsiProps<T>
-}
-
-export const rootId = "chakra-modal-rsi"
-
-export const Providers = <T extends string>({ children, theme, rsiValues }: ProvidersProps<T>) => {
-  const mergedTheme = extendTheme(theme)
-
-  if (!rsiValues.fields) {
-    throw new Error("Fields must be provided to react-spreadsheet-import")
-  }
-
-  return (
-    <RsiContext.Provider value={rsiValues}>
-      <ChakraProvider>
-        {/* cssVarsRoot used to override RSI defaultTheme but not the rest of chakra defaultTheme */}
-        <ChakraProvider cssVarsRoot={`#${rootId}`} theme={mergedTheme}>
-          {children}
-        </ChakraProvider>
-      </ChakraProvider>
-    </RsiContext.Provider>
-  )
-}
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/MatchIcon.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/MatchIcon.tsx
@@ -1,42 +0,0 @@
-import { chakra, useStyleConfig, Flex } from "@chakra-ui/react"
-import { dataAttr } from "@chakra-ui/utils"
-import { motion } from "framer-motion"
-import { CgCheck } from "react-icons/cg"
-
-const MotionFlex = motion(Flex)
-
-const animationConfig = {
-  transition: {
-    duration: 0.1,
-  },
-  exit: { scale: 0.5, opacity: 0 },
-  initial: { scale: 0.5, opacity: 0 },
-  animate: { scale: 1, opacity: 1 },
-}
-type MatchIconProps = {
-  isChecked: boolean
-}
-
-export const MatchIcon = (props: MatchIconProps) => {
-  const style = useStyleConfig("MatchIcon", props)
-
-  return (
-    <chakra.div
-      __css={style}
-      minW={6}
-      minH={6}
-      w={6}
-      h={6}
-      ml="0.875rem"
-      mr={3}
-      data-highlighted={dataAttr(props.isChecked)}
-      data-testid="column-checkmark"
-    >
-      {props.isChecked && (
-        <MotionFlex {...animationConfig}>
-          <CgCheck size="24px" />
-        </MotionFlex>
-      )}
-    </chakra.div>
-  )
-}
--- a/Show More
+++ b/Show More