Connect with database for dropdowns, more validate data step fixes

inventory-server/src/routes/import.js

@@ -0,0 +1,270 @@
+const express = require('express');
+const router = express.Router();
+const { Client } = require('ssh2');
+const mysql = require('mysql2/promise');
+
+// Helper function to setup SSH tunnel
+async function setupSshTunnel() {
+  const sshConfig = {
+    host: process.env.PROD_SSH_HOST,
+    port: process.env.PROD_SSH_PORT || 22,
+    username: process.env.PROD_SSH_USER,
+    privateKey: process.env.PROD_SSH_KEY_PATH
+      ? require('fs').readFileSync(process.env.PROD_SSH_KEY_PATH)
+      : undefined,
+    compress: true
+  };
+
+  const dbConfig = {
+    host: process.env.PROD_DB_HOST || 'localhost',
+    user: process.env.PROD_DB_USER,
+    password: process.env.PROD_DB_PASSWORD,
+    database: process.env.PROD_DB_NAME,
+    port: process.env.PROD_DB_PORT || 3306,
+    timezone: 'Z'
+  };
+
+  return new Promise((resolve, reject) => {
+    const ssh = new Client();
+
+    ssh.on('error', (err) => {
+      console.error('SSH connection error:', err);
+      reject(err);
+    });
+
+    ssh.on('ready', () => {
+      ssh.forwardOut(
+        '127.0.0.1',
+        0,
+        dbConfig.host,
+        dbConfig.port,
+        (err, stream) => {
+          if (err) reject(err);
+          resolve({ ssh, stream, dbConfig });
+        }
+      );
+    }).connect(sshConfig);
+  });
+}
+
+// Get all options for import fields
+router.get('/field-options', async (req, res) => {
+    let ssh;
+    let connection;
+    
+    try {
+        // Setup SSH tunnel and get database connection
+        const tunnel = await setupSshTunnel();
+        ssh = tunnel.ssh;
+        
+        // Create MySQL connection over SSH tunnel
+        connection = await mysql.createConnection({
+            ...tunnel.dbConfig,
+            stream: tunnel.stream
+        });
+
+        // Fetch companies (type 1)
+        const [companies] = await connection.query(`
+            SELECT cat_id, name 
+            FROM product_categories 
+            WHERE type = 1 
+            ORDER BY name
+        `);
+
+        // Fetch artists (type 40)
+        const [artists] = await connection.query(`
+            SELECT cat_id, name 
+            FROM product_categories 
+            WHERE type = 40 
+            ORDER BY name
+        `);
+
+        // Fetch sizes (type 50)
+        const [sizes] = await connection.query(`
+            SELECT cat_id, name 
+            FROM product_categories 
+            WHERE type = 50 
+            ORDER BY name
+        `);
+
+        // Fetch themes with subthemes
+        const [themes] = await connection.query(`
+            SELECT t.cat_id, t.name AS display_name, t.type, t.name AS sort_theme, 
+                   '' AS sort_subtheme, 1 AS level_order 
+            FROM product_categories t 
+            WHERE t.type = 20 
+            UNION ALL 
+            SELECT ts.cat_id, CONCAT(t.name,' - ',ts.name) AS display_name, ts.type,
+                   t.name AS sort_theme, ts.name AS sort_subtheme, 2 AS level_order 
+            FROM product_categories ts 
+            JOIN product_categories t ON ts.master_cat_id = t.cat_id 
+            WHERE ts.type = 21 AND t.type = 20 
+            ORDER BY sort_theme, sort_subtheme
+        `);
+
+        // Fetch categories with all levels
+        const [categories] = await connection.query(`
+            SELECT s.cat_id, s.name AS display_name, s.type, s.name AS sort_section,
+                   '' AS sort_category, '' AS sort_subcategory, '' AS sort_subsubcategory,
+                   1 AS level_order 
+            FROM product_categories s 
+            WHERE s.type = 10 
+            UNION ALL 
+            SELECT c.cat_id, CONCAT(s.name,' - ',c.name) AS display_name, c.type,
+                   s.name AS sort_section, c.name AS sort_category, '' AS sort_subcategory,
+                   '' AS sort_subsubcategory, 2 AS level_order 
+            FROM product_categories c 
+            JOIN product_categories s ON c.master_cat_id = s.cat_id 
+            WHERE c.type = 11 AND s.type = 10 
+            UNION ALL 
+            SELECT sc.cat_id, CONCAT(s.name,' - ',c.name,' - ',sc.name) AS display_name,
+                   sc.type, s.name AS sort_section, c.name AS sort_category,
+                   sc.name AS sort_subcategory, '' AS sort_subsubcategory, 3 AS level_order 
+            FROM product_categories sc 
+            JOIN product_categories c ON sc.master_cat_id = c.cat_id 
+            JOIN product_categories s ON c.master_cat_id = s.cat_id 
+            WHERE sc.type = 12 AND c.type = 11 AND s.type = 10 
+            UNION ALL 
+            SELECT ssc.cat_id, CONCAT(s.name,' - ',c.name,' - ',sc.name,' - ',ssc.name) AS display_name,
+                   ssc.type, s.name AS sort_section, c.name AS sort_category,
+                   sc.name AS sort_subcategory, ssc.name AS sort_subsubcategory, 4 AS level_order 
+            FROM product_categories ssc 
+            JOIN product_categories sc ON ssc.master_cat_id = sc.cat_id 
+            JOIN product_categories c ON sc.master_cat_id = c.cat_id 
+            JOIN product_categories s ON c.master_cat_id = s.cat_id 
+            WHERE ssc.type = 13 AND sc.type = 12 AND c.type = 11 AND s.type = 10 
+            ORDER BY sort_section, sort_category, sort_subcategory, sort_subsubcategory
+        `);
+
+        // Fetch colors
+        const [colors] = await connection.query(`
+            SELECT color, name, hex_color 
+            FROM product_color_list 
+            ORDER BY \`order\`
+        `);
+
+        // Fetch suppliers
+        const [suppliers] = await connection.query(`
+            SELECT supplierid as value, companyname as label 
+            FROM suppliers 
+            WHERE companyname <> '' 
+            ORDER BY companyname
+        `);
+
+        // Fetch tax categories
+        const [taxCategories] = await connection.query(`
+            SELECT tax_code_id as value, name as label 
+            FROM product_tax_codes 
+            ORDER BY tax_code_id = 0 DESC, name
+        `);
+
+        res.json({
+            companies: companies.map(c => ({ label: c.name, value: c.cat_id.toString() })),
+            artists: artists.map(a => ({ label: a.name, value: a.cat_id.toString() })),
+            sizes: sizes.map(s => ({ label: s.name, value: s.cat_id.toString() })),
+            themes: themes.map(t => ({ 
+                label: t.display_name, 
+                value: t.cat_id.toString(),
+                type: t.type,
+                level: t.level_order
+            })),
+            categories: categories.map(c => ({ 
+                label: c.display_name, 
+                value: c.cat_id.toString(),
+                type: c.type,
+                level: c.level_order
+            })),
+            colors: colors.map(c => ({ 
+                label: c.name, 
+                value: c.color,
+                hexColor: c.hex_color 
+            })),
+            suppliers: suppliers,
+            taxCategories: taxCategories,
+            shippingRestrictions: [
+                { label: "None", value: "0" },
+                { label: "US Only", value: "1" },
+                { label: "Limited Quantity", value: "2" },
+                { label: "US/CA Only", value: "3" },
+                { label: "No FedEx 2 Day", value: "4" },
+                { label: "North America Only", value: "5" }
+            ]
+        });
+    } catch (error) {
+        console.error('Error fetching import field options:', error);
+        res.status(500).json({ error: 'Failed to fetch import field options' });
+    } finally {
+        if (connection) await connection.end();
+        if (ssh) ssh.end();
+    }
+});
+
+// Get product lines for a specific company
+router.get('/product-lines/:companyId', async (req, res) => {
+    let ssh;
+    let connection;
+    
+    try {
+        // Setup SSH tunnel and get database connection
+        const tunnel = await setupSshTunnel();
+        ssh = tunnel.ssh;
+        
+        // Create MySQL connection over SSH tunnel
+        connection = await mysql.createConnection({
+            ...tunnel.dbConfig,
+            stream: tunnel.stream
+        });
+
+        const [lines] = await connection.query(`
+            SELECT cat_id as value, name as label 
+            FROM product_categories 
+            WHERE type = 2 
+            AND master_cat_id = ? 
+            ORDER BY name
+        `, [req.params.companyId]);
+
+        res.json(lines.map(l => ({ label: l.label, value: l.value.toString() })));
+    } catch (error) {
+        console.error('Error fetching product lines:', error);
+        res.status(500).json({ error: 'Failed to fetch product lines' });
+    } finally {
+        if (connection) await connection.end();
+        if (ssh) ssh.end();
+    }
+});
+
+// Get sublines for a specific product line
+router.get('/sublines/:lineId', async (req, res) => {
+    let ssh;
+    let connection;
+    
+    try {
+        // Setup SSH tunnel and get database connection
+        const tunnel = await setupSshTunnel();
+        ssh = tunnel.ssh;
+        
+        // Create MySQL connection over SSH tunnel
+        connection = await mysql.createConnection({
+            ...tunnel.dbConfig,
+            stream: tunnel.stream
+        });
+
+        const [sublines] = await connection.query(`
+            SELECT cat_id as value, name as label 
+            FROM product_categories 
+            WHERE type = 3 
+            AND master_cat_id = ? 
+            ORDER BY name
+        `, [req.params.lineId]);
+
+        res.json(sublines.map(s => ({ label: s.label, value: s.value.toString() })));
+    } catch (error) {
+        console.error('Error fetching sublines:', error);
+        res.status(500).json({ error: 'Failed to fetch sublines' });
+    } finally {
+        if (connection) await connection.end();
+        if (ssh) ssh.end();
+    }
+});
+
+module.exports = router; 

inventory-server/src/server.js

@@ -17,6 +17,7 @@ const metricsRouter = require('./routes/metrics');
 const vendorsRouter = require('./routes/vendors');
 const categoriesRouter = require('./routes/categories');
 const testConnectionRouter = require('./routes/test-connection');
+const importRouter = require('./routes/import');
 
 // Get the absolute path to the .env file
 const envPath = path.resolve(process.cwd(), '.env');
@@ -65,58 +66,68 @@ app.use(corsMiddleware);
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
-// Initialize database pool
-const pool = initPool({
-  host: process.env.DB_HOST,
-  user: process.env.DB_USER,
-  password: process.env.DB_PASSWORD,
-  database: process.env.DB_NAME,
-  waitForConnections: true,
-  connectionLimit: process.env.NODE_ENV === 'production' ? 20 : 10,
-  queueLimit: 0,
-  enableKeepAlive: true,
-  keepAliveInitialDelay: 0
-});
+// Initialize database pool and start server
+async function startServer() {
+  try {
+    // Initialize database pool
+    const pool = await initPool({
+      waitForConnections: true,
+      connectionLimit: process.env.NODE_ENV === 'production' ? 20 : 10,
+      queueLimit: 0,
+      enableKeepAlive: true,
+      keepAliveInitialDelay: 0
+    });
 
-// Make pool available to routes
-app.locals.pool = pool;
+    // Make pool available to routes
+    app.locals.pool = pool;
 
-// Routes
-app.use('/api/products', productsRouter);
-app.use('/api/dashboard', dashboardRouter);
-app.use('/api/orders', ordersRouter);
-app.use('/api/csv', csvRouter);
-app.use('/api/analytics', analyticsRouter);
-app.use('/api/purchase-orders', purchaseOrdersRouter);
-app.use('/api/config', configRouter);
-app.use('/api/metrics', metricsRouter);
-app.use('/api/vendors', vendorsRouter);
-app.use('/api/categories', categoriesRouter);
-app.use('/api', testConnectionRouter);
+    // Set up routes after pool is initialized
+    app.use('/api/products', productsRouter);
+    app.use('/api/dashboard', dashboardRouter);
+    app.use('/api/orders', ordersRouter);
+    app.use('/api/csv', csvRouter);
+    app.use('/api/analytics', analyticsRouter);
+    app.use('/api/purchase-orders', purchaseOrdersRouter);
+    app.use('/api/config', configRouter);
+    app.use('/api/metrics', metricsRouter);
+    app.use('/api/vendors', vendorsRouter);
+    app.use('/api/categories', categoriesRouter);
+    app.use('/api/import', importRouter);
+    app.use('/api', testConnectionRouter);
 
-// Basic health check route
-app.get('/health', (req, res) => {
-  res.json({ 
-    status: 'ok',
-    timestamp: new Date().toISOString(),
-    environment: process.env.NODE_ENV
-  });
-});
+    // Basic health check route
+    app.get('/health', (req, res) => {
+      res.json({ 
+        status: 'ok',
+        timestamp: new Date().toISOString(),
+        environment: process.env.NODE_ENV
+      });
+    });
 
-// CORS error handler - must be before other error handlers
-app.use(corsErrorHandler);
+    // CORS error handler - must be before other error handlers
+    app.use(corsErrorHandler);
 
-// Error handling middleware - MUST be after routes and CORS error handler
-app.use((err, req, res, next) => {
-  console.error(`[${new Date().toISOString()}] Error:`, err);
+    // Error handling middleware - MUST be after routes and CORS error handler
+    app.use((err, req, res, next) => {
+      console.error(`[${new Date().toISOString()}] Error:`, err);
       
-  // Send detailed error in development, generic in production
-  const error = process.env.NODE_ENV === 'production'
-    ? 'An internal server error occurred'
-    : err.message || err;
+      // Send detailed error in development, generic in production
+      const error = process.env.NODE_ENV === 'production'
+        ? 'An internal server error occurred'
+        : err.message || err;
         
-  res.status(err.status || 500).json({ error });
-});
+      res.status(err.status || 500).json({ error });
+    });
+
+    const PORT = process.env.PORT || 3000;
+    app.listen(PORT, () => {
+      console.log(`[Server] Running in ${process.env.NODE_ENV || 'development'} mode on port ${PORT}`);
+    });
+  } catch (error) {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  }
+}
 
 // Handle uncaught exceptions
 process.on('uncaughtException', (err) => {
@@ -128,17 +139,6 @@ process.on('unhandledRejection', (reason, promise) => {
   console.error(`[${new Date().toISOString()}] Unhandled Rejection at:`, promise, 'reason:', reason);
 });
 
-// Test database connection
-pool.getConnection()
-  .then(connection => {
-    console.log('[Database] Connected successfully');
-    connection.release();
-  })
-  .catch(err => {
-    console.error('[Database] Error connecting:', err);
-    process.exit(1);
-  });
-
 // Initialize client sets for SSE
 const importClients = new Set();
 const updateClients = new Set();
@@ -189,62 +189,5 @@ const setupSSE = (req, res) => {
   }
 };
 
-// Update the status endpoint to include reset-metrics
-app.get('/csv/status', (req, res) => {
-    res.json({
-        active: !!currentOperation,
-        type: currentOperation?.type || null,
-        progress: currentOperation ? {
-            status: currentOperation.status,
-            operation: currentOperation.operation,
-            current: currentOperation.current,
-            total: currentOperation.total,
-            percentage: currentOperation.percentage
-        } : null
-    });
-});
-
-// Update progress endpoint mapping
-app.get('/csv/:type/progress', (req, res) => {
-    const { type } = req.params;
-    if (!['import', 'update', 'reset', 'reset-metrics'].includes(type)) {
-        res.status(400).json({ error: 'Invalid operation type' });
-        return;
-    }
-
-    setupSSE(req, res);
-});
-
-// Update the cancel endpoint to handle reset-metrics
-app.post('/csv/cancel', (req, res) => {
-    const { operation } = req.query;
-    
-    if (!currentOperation) {
-        res.status(400).json({ error: 'No operation in progress' });
-        return;
-    }
-
-    if (operation && operation.toLowerCase() !== currentOperation.type) {
-        res.status(400).json({ error: 'Operation type mismatch' });
-        return;
-    }
-
-    try {
-        // Handle cancellation based on operation type
-        if (currentOperation.type === 'reset-metrics') {
-            // Reset metrics doesn't need special cleanup
-            currentOperation = null;
-            res.json({ message: 'Reset metrics cancelled' });
-        } else {
-            // ... existing cancellation logic for other operations ...
-        }
-    } catch (error) {
-        console.error('Error during cancellation:', error);
-        res.status(500).json({ error: 'Failed to cancel operation' });
-    }
-});
-
-const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => {
-  console.log(`[Server] Running in ${process.env.NODE_ENV || 'development'} mode on port ${PORT}`);
-}); 
+// Start the server
+startServer(); 

inventory-server/src/utils/db.js

@@ -1,10 +1,66 @@
 const mysql = require('mysql2/promise');
+const { Client } = require('ssh2');
 
 let pool;
 
-function initPool(config) {
-  pool = mysql.createPool(config);
-  return pool;
+async function setupSshTunnel() {
+  const sshConfig = {
+    host: process.env.PROD_SSH_HOST,
+    port: process.env.PROD_SSH_PORT || 22,
+    username: process.env.PROD_SSH_USER,
+    privateKey: process.env.PROD_SSH_KEY_PATH
+      ? require('fs').readFileSync(process.env.PROD_SSH_KEY_PATH)
+      : undefined,
+    compress: true
+  };
+
+  return new Promise((resolve, reject) => {
+    const ssh = new Client();
+
+    ssh.on('error', (err) => {
+      console.error('SSH connection error:', err);
+      reject(err);
+    });
+
+    ssh.on('ready', () => {
+      ssh.forwardOut(
+        '127.0.0.1',
+        0,
+        process.env.PROD_DB_HOST || 'localhost',
+        process.env.PROD_DB_PORT || 3306,
+        (err, stream) => {
+          if (err) reject(err);
+          resolve({ ssh, stream });
+        }
+      );
+    }).connect(sshConfig);
+  });
+}
+
+async function initPool(config) {
+  try {
+    const tunnel = await setupSshTunnel();
+    
+    pool = mysql.createPool({
+      ...config,
+      stream: tunnel.stream,
+      host: process.env.PROD_DB_HOST || 'localhost',
+      user: process.env.PROD_DB_USER,
+      password: process.env.PROD_DB_PASSWORD,
+      database: process.env.PROD_DB_NAME,
+      port: process.env.PROD_DB_PORT || 3306
+    });
+
+    // Test the connection
+    const connection = await pool.getConnection();
+    console.log('[Database] Connected successfully through SSH tunnel');
+    connection.release();
+
+    return pool;
+  } catch (error) {
+    console.error('[Database] Error initializing pool:', error);
+    throw error;
+  }
 }
 
 async function getConnection() {

inventory/package-lock.json

@@ -33,10 +33,10 @@
         "@radix-ui/react-avatar": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-collapsible": "^1.1.2",
-        "@radix-ui/react-dialog": "^1.1.4",
+        "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.4",
         "@radix-ui/react-label": "^2.1.1",
-        "@radix-ui/react-popover": "^1.1.4",
+        "@radix-ui/react-popover": "^1.1.6",
         "@radix-ui/react-progress": "^1.1.1",
         "@radix-ui/react-radio-group": "^1.2.3",
         "@radix-ui/react-scroll-area": "^1.2.2",
@@ -5720,19 +5720,435 @@
       }
     },
     "node_modules/cmdk": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz",
-      "integrity": "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-dialog": "^1.1.2",
-        "@radix-ui/react-id": "^1.1.0",
-        "@radix-ui/react-primitive": "^2.0.0",
-        "use-sync-external-store": "^1.2.2"
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/codepage": {
@@ -9240,15 +9656,6 @@
         }
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
-      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

inventory/package.json

@@ -35,10 +35,10 @@
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-scroll-area": "^1.2.2",

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

@@ -38,6 +38,8 @@ export enum ColumnType {
   matchedCheckbox,
   matchedSelect,
   matchedSelectOptions,
+  matchedMultiInput,
+  matchedMultiSelect,
 }
 
 export type MatchedOptions<T> = {
@@ -63,6 +65,19 @@ export type MatchedSelectOptionsColumn<T> = {
   value: T
   matchedOptions: MatchedOptions<T>[]
 }
+export type MatchedMultiInputColumn<T> = {
+  type: ColumnType.matchedMultiInput
+  index: number
+  header: string
+  value: T
+}
+export type MatchedMultiSelectColumn<T> = {
+  type: ColumnType.matchedMultiSelect
+  index: number
+  header: string
+  value: T
+  matchedOptions: MatchedOptions<T>[]
+}
 
 export type Column<T extends string> =
   | EmptyColumn
@@ -71,6 +86,8 @@ export type Column<T extends string> =
   | MatchedSwitchColumn<T>
   | MatchedSelectColumn<T>
   | MatchedSelectOptionsColumn<T>
+  | MatchedMultiInputColumn<T>
+  | MatchedMultiSelectColumn<T>
 
 export type Columns<T extends string> = Column<T>[]
 

inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeTableData.ts

@@ -25,12 +25,37 @@ export const normalizeTableData = <T extends string>(columns: Columns<T>, data:
           acc[column.value] = curr === "" ? undefined : curr
           return acc
         }
+        case ColumnType.matchedMultiInput: {
+          const field = fields.find((field) => field.key === column.value)!
+          if (curr) {
+            const separator = field.fieldType.type === "multi-input" ? field.fieldType.separator || "," : ","
+            acc[column.value] = curr.split(separator).map(v => v.trim()).filter(Boolean)
+          } else {
+            acc[column.value] = undefined
+          }
+          return acc
+        }
         case ColumnType.matchedSelect:
         case ColumnType.matchedSelectOptions: {
           const matchedOption = column.matchedOptions.find(({ entry, value }) => entry === curr)
           acc[column.value] = matchedOption?.value || undefined
           return acc
         }
+        case ColumnType.matchedMultiSelect: {
+          const field = fields.find((field) => field.key === column.value)!
+          if (curr) {
+            const separator = field.fieldType.type === "multi-select" ? field.fieldType.separator || "," : ","
+            const entries = curr.split(separator).map(v => v.trim()).filter(Boolean)
+            const values = entries.map(entry => {
+              const matchedOption = column.matchedOptions.find(({ entry: optEntry }) => optEntry === entry)
+              return matchedOption?.value
+            }).filter(Boolean) as string[]
+            acc[column.value] = values.length ? values : undefined
+          } else {
+            acc[column.value] = undefined
+          }
+          return acc
+        }
         case ColumnType.empty:
         case ColumnType.ignored: {
           return acc

inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setColumn.ts

@@ -1,4 +1,4 @@
-import type { Field } from "../../../types"
+import type { Field, MultiSelect } from "../../../types"
 import { Column, ColumnType, MatchColumnsProps, MatchedOptions } from "../MatchColumnsStep"
 import { uniqueEntries } from "./uniqueEntries"
 
@@ -28,10 +28,37 @@ export const setColumn = <T extends string>(
         value: field.key,
         matchedOptions,
       }
+    case "multi-select":
+      const multiSelectFieldType = field.fieldType as MultiSelect
+      const multiSelectFieldOptions = multiSelectFieldType.options
+      const multiSelectUniqueData = uniqueEntries(data || [], oldColumn.index) as MatchedOptions<T>[]
+      const multiSelectMatchedOptions = autoMapSelectValues
+        ? multiSelectUniqueData.map((record) => {
+            // Split the entry by the separator (default to comma)
+            const entries = record.entry.split(multiSelectFieldType.separator || ",").map(e => e.trim())
+            // Try to match each entry to an option
+            const values = entries.map(entry => {
+              const value = multiSelectFieldOptions.find(
+                (fieldOption) => fieldOption.value === entry || fieldOption.label === entry,
+              )?.value
+              return value
+            }).filter(Boolean) as T[]
+            return { ...record, value: values.length ? values[0] : undefined } as MatchedOptions<T>
+          })
+        : multiSelectUniqueData
+
+      return {
+        ...oldColumn,
+        type: ColumnType.matchedMultiSelect,
+        value: field.key,
+        matchedOptions: multiSelectMatchedOptions,
+      }
     case "checkbox":
       return { index: oldColumn.index, type: ColumnType.matchedCheckbox, value: field.key, header: oldColumn.header }
     case "input":
       return { index: oldColumn.index, type: ColumnType.matched, value: field.key, header: oldColumn.header }
+    case "multi-input":
+      return { index: oldColumn.index, type: ColumnType.matchedMultiInput, value: field.key, header: oldColumn.header }
     default:
       return { index: oldColumn.index, header: oldColumn.header, type: ColumnType.empty }
   }

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

@@ -1,8 +1,23 @@
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useMemo, useState, useEffect } from "react"
 import { useRsi } from "../../hooks/useRsi"
 import type { Meta } from "./types"
 import { addErrorsAndRunHooks } from "./utils/dataMutations"
-import type { Data, Field, SelectOption } from "../../types"
+import type { Data, Field, SelectOption, MultiInput } from "../../types"
+import { Check, ChevronsUpDown, ArrowDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
 import {
   Table,
   TableBody,
@@ -20,6 +35,9 @@ import {
 } from "@tanstack/react-table"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { useToast } from "@/hooks/use-toast"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -32,16 +50,6 @@ import {
   AlertDialogPortal,
   AlertDialogOverlay,
 } from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
-import { useToast } from "@/hooks/use-toast"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 
 type Props<T extends string> = {
   initialData: (Data<T> & Meta)[]
@@ -59,59 +67,212 @@ type CellProps = {
 const EditableCell = ({ value, onChange, error, field }: CellProps) => {
   const [isEditing, setIsEditing] = useState(false)
   const [inputValue, setInputValue] = useState(value ?? "")
+  const [validationError, setValidationError] = useState<{level: string, message: string} | undefined>(error)
+  
+  const validateRegex = (val: string) => {
+    const regexValidation = field.validations?.find(v => v.rule === "regex")
+    if (regexValidation && val) {
+      const regex = new RegExp(regexValidation.value, regexValidation.flags)
+      if (!regex.test(val)) {
+        return { level: regexValidation.level || "error", message: regexValidation.errorMessage }
+      }
+    }
+    return undefined
+  }
 
   const getDisplayValue = (value: any, fieldType: Field<string>["fieldType"]) => {
     if (fieldType.type === "select") {
       return fieldType.options.find((opt: SelectOption) => opt.value === value)?.label || value
     }
+    if (fieldType.type === "multi-select") {
+      if (Array.isArray(value)) {
+        return value.map(v => fieldType.options.find((opt: SelectOption) => opt.value === v)?.label || v).join(", ")
+      }
+      return value
+    }
     if (fieldType.type === "checkbox") {
       if (typeof value === "boolean") return value ? "Yes" : "No"
       return value
     }
+    if (fieldType.type === "multi-input" && Array.isArray(value)) {
+      return value.join(", ")
+    }
     return value
   }
 
-  const isRequiredAndEmpty = field.validations?.some(v => v.rule === "required") && !value
+  const isRequired = field.validations?.some(v => v.rule === "required")
 
-  // Show editing UI for:
-  // 1. Error cells
-  // 2. When actively editing
-  // 3. Required select fields that are empty
-  // 4. Checkbox fields (always show the checkbox)
-  const shouldShowEditUI = error?.level === "error" || 
-    isEditing || 
-    (field.fieldType.type === "select" && isRequiredAndEmpty) ||
-    field.fieldType.type === "checkbox"
+  // Determine the current validation state
+  const getValidationState = () => {
+    // Never show validation during editing
+    if (isEditing) return undefined
+    
+    // Only show validation errors if there's a value
+    if (value) {
+      if (error) return error
+      if (validationError) return validationError
+    } else if (isRequired && !isEditing) {
+      // Only show required validation when not editing and empty
+      return { level: "error", message: "Required" }
+    }
+    
+    return undefined
+  }
+
+  const currentError = getValidationState()
+
+  useEffect(() => {
+    // Update validation state when value changes externally (e.g. from copy down)
+    if (!isEditing) {
+      const newValidationError = value ? validateRegex(value) : undefined
+      setValidationError(newValidationError)
+    }
+  }, [value])
+
+  const validateAndCommit = (newValue: string) => {
+    const regexError = newValue ? validateRegex(newValue) : undefined
+    setValidationError(regexError)
+    
+    // Always commit the value
+    onChange(newValue)
+    
+    // Only exit edit mode if there are no errors (except required field errors)
+    if (!error && !regexError) {
+      setIsEditing(false)
+    }
+  }
+
+  // Handle blur for all input types
+  const handleBlur = () => {
+    validateAndCommit(inputValue)
+    setIsEditing(false)
+  }
+
+  // Show editing UI only when actually editing
+  const shouldShowEditUI = isEditing
 
   if (shouldShowEditUI) {
     switch (field.fieldType.type) {
       case "select":
         return (
-          <Select
-            defaultOpen={isEditing}
-            value={value as string || ""}
-            onValueChange={(newValue) => {
-              onChange(newValue)
-              setIsEditing(false)
-            }}
-          >
-            <SelectTrigger 
-              className={`w-full ${
-                (error?.level === "error" || isRequiredAndEmpty)
-                  ? "border-destructive text-destructive" 
-                  : ""
-              }`}
-            >
-              <SelectValue placeholder="Select..." />
-            </SelectTrigger>
-            <SelectContent>
-              {field.fieldType.options.map((option: SelectOption) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="space-y-1">
+            <Popover open={isEditing} onOpenChange={(open) => {
+              if (!open) handleBlur()
+              setIsEditing(open)
+            }}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={isEditing}
+                  className={cn(
+                    "w-full justify-between",
+                    currentError ? "border-destructive text-destructive" : "border-input"
+                  )}
+                  disabled={field.disabled}
+                >
+                  {value
+                    ? field.fieldType.options.find((option) => option.value === value)?.label
+                    : "Select..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-full p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="Search options..." className="h-9" />
+                  <CommandList>
+                    <CommandEmpty>No options found.</CommandEmpty>
+                    <CommandGroup>
+                      {field.fieldType.options.map((option) => (
+                        <CommandItem
+                          key={option.value}
+                          value={option.value}
+                          onSelect={(currentValue) => {
+                            onChange(currentValue)
+                            if (field.onChange) {
+                              field.onChange(currentValue)
+                            }
+                            setIsEditing(false)
+                          }}
+                        >
+                          {option.label}
+                          <Check
+                            className={cn(
+                              "ml-auto h-4 w-4",
+                              value === option.value ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            {currentError && (
+              <p className="text-xs text-destructive">{currentError.message}</p>
+            )}
+          </div>
+        )
+      case "multi-select":
+        const selectedValues = Array.isArray(value) ? value : value ? [value] : []
+        return (
+          <Popover open={isEditing} onOpenChange={(open) => {
+            if (!open) handleBlur()
+            setIsEditing(open)
+          }}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={isEditing}
+                className={cn(
+                  "w-full justify-between",
+                  currentError ? "border-destructive text-destructive" : "border-input"
+                )}
+              >
+                {selectedValues.length > 0
+                  ? `${selectedValues.length} selected`
+                  : "Select multiple..."}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0" align="start">
+              <Command>
+                <CommandInput placeholder="Search options..." className="h-9" />
+                <CommandList>
+                  <CommandEmpty>No options found.</CommandEmpty>
+                  <CommandGroup>
+                    {field.fieldType.options.map((option) => (
+                      <CommandItem
+                        key={option.value}
+                        value={option.value}
+                        onSelect={(currentValue) => {
+                          const valueIndex = selectedValues.indexOf(currentValue)
+                          let newValues
+                          if (valueIndex === -1) {
+                            newValues = [...selectedValues, currentValue]
+                          } else {
+                            newValues = selectedValues.filter((_, i) => i !== valueIndex)
+                          }
+                          onChange(newValues)
+                          // Don't close on selection for multi-select
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Checkbox
+                            checked={selectedValues.includes(option.value)}
+                            className="pointer-events-none"
+                          />
+                          {option.label}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
         )
       case "checkbox":
         return (
@@ -124,33 +285,52 @@ const EditableCell = ({ value, onChange, error, field }: CellProps) => {
             />
           </div>
         )
-      default:
+      case "multi-input":
         return (
           <Input
             value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
+            onChange={(e) => {
+              setInputValue(e.target.value)
+            }}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
-                onChange(inputValue)
-                if (!error?.level) {
-                  setIsEditing(false)
-                }
+                handleBlur()
               }
             }}
-            onBlur={() => {
-              onChange(inputValue)
-              if (!error?.level) {
-                setIsEditing(false)
-              }
-            }}
-            className={`w-full bg-transparent ${
-              error?.level === "error" 
-                ? "border-destructive text-destructive" 
-                : ""
-            }`}
-            autoFocus={!error?.level}
+            onBlur={handleBlur}
+            className={cn(
+              "w-full bg-transparent",
+              currentError ? "border-destructive text-destructive" : ""
+            )}
+            autoFocus={!error}
+            placeholder={`Enter values separated by ${(field.fieldType as MultiInput).separator || ","}`}
           />
         )
+      default:
+        return (
+          <div className="space-y-1">
+            <Input
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value)
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleBlur()
+                }
+              }}
+              onBlur={handleBlur}
+              className={cn(
+                "w-full bg-transparent",
+                currentError ? "border-destructive text-destructive" : ""
+              )}
+              autoFocus={!error}
+            />
+            {currentError && (
+              <p className="text-xs text-destructive">{currentError.message}</p>
+            )}
+          </div>
+        )
     }
   }
 
@@ -158,20 +338,108 @@ const EditableCell = ({ value, onChange, error, field }: CellProps) => {
   return (
     <div 
       onClick={() => {
-        if (field.fieldType.type !== "checkbox") {
+        if (field.fieldType.type !== "checkbox" && !field.disabled) {
           setIsEditing(true)
-          setInputValue(value ?? "")
+          setInputValue(Array.isArray(value) ? value.join(", ") : value ?? "")
         }
       }}
-      className={`cursor-text py-2 ${
-        error?.level === "error" ? "text-destructive" : ""
-      }`}
+      className={cn(
+        "min-h-[36px] cursor-text p-2 rounded-md border bg-background",
+        currentError ? "border-destructive" : "border-input",
+        field.fieldType.type === "checkbox" ? "flex items-center" : "flex items-center justify-between",
+        field.disabled && "opacity-50 cursor-not-allowed bg-muted"
+      )}
     >
-      {getDisplayValue(value, field.fieldType)}
+      <div className={cn(!value && "text-muted-foreground")}>
+        {value ? getDisplayValue(value, field.fieldType) : ""}
+      </div>
+      {(field.fieldType.type === "select" || field.fieldType.type === "multi-select") && (
+        <ChevronsUpDown className={cn("h-4 w-4 shrink-0", field.disabled ? "opacity-30" : "opacity-50")} />
+      )}
+      {currentError && (
+        <div className="absolute left-0 -bottom-5 text-xs text-destructive">
+          {currentError.message}
+        </div>
+      )}
     </div>
   )
 }
 
+// Add this component for the column header with copy down functionality
+const ColumnHeader = <T extends string>({ 
+  field, 
+  data, 
+  onCopyDown 
+}: { 
+  field: Field<T>, 
+  data: (Data<T> & Meta)[], 
+  onCopyDown: (key: T) => void 
+}) => {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1 overflow-hidden text-ellipsis">
+        {field.label}
+      </div>
+      {data.length > 1 && !field.disabled && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-4 w-4 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={(e) => {
+            e.stopPropagation()
+            onCopyDown(field.key as T)
+          }}
+          title="Copy first row's value down"
+        >
+          <ArrowDown className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
+  )
+}
+
+// Add this component for the copy down confirmation dialog
+const CopyDownDialog = ({ 
+  isOpen, 
+  onClose, 
+  onConfirm, 
+  fieldLabel 
+}: { 
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  fieldLabel: string 
+}) => {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogPortal>
+        <AlertDialogOverlay className="z-[1400]" />
+        <AlertDialogContent className="z-[1500]">
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Confirm Copy Down
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to copy the value from the first row's "{fieldLabel}" to all rows below? This will overwrite any existing values.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={onClose}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={() => {
+              onConfirm()
+              onClose()
+            }}>
+              Copy Down
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogPortal>
+    </AlertDialog>
+  )
+}
+
 export const ValidationStep = <T extends string>({ initialData, file, onBack }: Props<T>) => {
   const { translations, fields, onClose, onSubmit, rowHook, tableHook, allowInvalidSubmit } = useRsi<T>()
   const { toast } = useToast()
@@ -181,6 +449,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
   const [filterByErrors, setFilterByErrors] = useState(false)
   const [showSubmitAlert, setShowSubmitAlert] = useState(false)
   const [isSubmitting, setSubmitting] = useState(false)
+  const [copyDownField, setCopyDownField] = useState<{key: T, label: string} | null>(null)
 
   // Memoize filtered data to prevent recalculation on every render
   const filteredData = useMemo(() => {
@@ -220,6 +489,25 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
     [data, filteredData, updateData],
   )
 
+  const copyValueDown = useCallback((key: T, label: string) => {
+    setCopyDownField({ key, label })
+  }, [])
+
+  const executeCopyDown = useCallback(() => {
+    if (!copyDownField || data.length <= 1) return
+
+    const firstRowValue = data[0][copyDownField.key]
+    const newData = data.map((row, index) => {
+      if (index === 0) return row
+      return {
+        ...row,
+        [copyDownField.key]: firstRowValue
+      }
+    })
+    updateData(newData)
+    setCopyDownField(null)
+  }, [data, updateData, copyDownField])
+
   const columns = useMemo<ColumnDef<Data<T> & Meta>[]>(() => {
     const baseColumns: ColumnDef<Data<T> & Meta>[] = [
       {
@@ -244,7 +532,15 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
       },
       ...fields.map((field: Field<T>): ColumnDef<Data<T> & Meta> => ({
         accessorKey: field.key,
-        header: field.label,
+        header: () => (
+          <div className="group">
+            <ColumnHeader 
+              field={field} 
+              data={data}
+              onCopyDown={(key) => copyValueDown(key, field.label)}
+            />
+          </div>
+        ),
         cell: ({ row, column }) => {
           const value = row.getValue(column.id)
           const error = row.original.__errors?.[column.id]
@@ -259,7 +555,6 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
             />
           )
         },
-        // Use configured width or fallback to sensible defaults
         size: (field as any).width || (
           field.fieldType.type === "checkbox" ? 80 :
           field.fieldType.type === "select" ? 150 : 
@@ -268,7 +563,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
       })),
     ]
     return baseColumns
-  }, [fields, updateRows])
+  }, [fields, updateRows, data, copyValueDown])
 
   const table = useReactTable({
     data: filteredData,
@@ -383,6 +678,12 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
 
   return (
     <div className="flex h-[calc(100vh-9.5rem)] flex-col">
+      <CopyDownDialog 
+        isOpen={!!copyDownField}
+        onClose={() => setCopyDownField(null)}
+        onConfirm={executeCopyDown}
+        fieldLabel={copyDownField?.label || ""}
+      />
       <AlertDialog open={showSubmitAlert} onOpenChange={setShowSubmitAlert}>
         <AlertDialogPortal>
           <AlertDialogOverlay className="z-[1400]" />
@@ -411,93 +712,97 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
         </AlertDialogPortal>
       </AlertDialog>
       <div className="flex-1 overflow-hidden">
-        <div className="px-8 py-6">
-          <div className="mb-8 flex flex-wrap items-center justify-between gap-2">
-            <h2 className="text-3xl font-semibold text-foreground">
-              {translations.validationStep.title}
-            </h2>
-            <div className="flex flex-wrap items-center gap-4">
-              <Button 
-                variant="outline" 
-                size="sm" 
-                onClick={deleteSelectedRows}
-              >
-                {translations.validationStep.discardButtonTitle}
-              </Button>
-              <div className="flex items-center gap-2">
-                <Switch
-                  checked={filterByErrors}
-                  onCheckedChange={setFilterByErrors}
-                  id="filter-errors"
-                />
-                <label htmlFor="filter-errors" className="text-sm text-muted-foreground">
-                  {translations.validationStep.filterSwitchTitle}
-                </label>
+        <div className="h-full flex flex-col">
+          <div className="px-8 pt-6">
+            <div className="mb-6 flex flex-wrap items-center justify-between gap-2">
+              <h2 className="text-3xl font-semibold text-foreground">
+                {translations.validationStep.title}
+              </h2>
+              <div className="flex flex-wrap items-center gap-4">
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={deleteSelectedRows}
+                >
+                  {translations.validationStep.discardButtonTitle}
+                </Button>
+                <div className="flex items-center gap-2">
+                  <Switch
+                    checked={filterByErrors}
+                    onCheckedChange={setFilterByErrors}
+                    id="filter-errors"
+                  />
+                  <label htmlFor="filter-errors" className="text-sm text-muted-foreground">
+                    {translations.validationStep.filterSwitchTitle}
+                  </label>
+                </div>
               </div>
             </div>
           </div>
-          <div className="rounded-md border overflow-hidden">
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead 
-                          key={header.id}
-                          style={{
-                            width: header.getSize(),
-                            minWidth: header.getSize(),
-                          }}
-                        >
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {table.getRowModel().rows?.length ? (
-                    table.getRowModel().rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        data-state={row.getIsSelected() && "selected"}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCell 
-                            key={cell.id} 
-                            className="p-2"
+          <div className="px-8 pb-6 flex-1 min-h-0">
+            <div className="rounded-md border h-full flex flex-col overflow-hidden">
+              <div className="flex-1 overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 bg-muted z-10">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHead 
+                            key={header.id}
                             style={{
-                              width: cell.column.getSize(),
-                              minWidth: cell.column.getSize(),
+                              width: header.getSize(),
+                              minWidth: header.getSize(),
                             }}
                           >
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </TableCell>
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                )}
+                          </TableHead>
                         ))}
                       </TableRow>
-                    ))
-                  ) : (
-                    <TableRow>
-                      <TableCell colSpan={columns.length} className="h-24 text-center">
-                        {filterByErrors
-                          ? translations.validationStep.noRowsMessageWhenFiltered
-                          : translations.validationStep.noRowsMessage}
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
+                    ))}
+                  </TableHeader>
+                  <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                      table.getRowModel().rows.map((row) => (
+                        <TableRow
+                          key={row.id}
+                          data-state={row.getIsSelected() && "selected"}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell 
+                              key={cell.id} 
+                              className="p-2"
+                              style={{
+                                width: cell.column.getSize(),
+                                minWidth: cell.column.getSize(),
+                              }}
+                            >
+                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell colSpan={columns.length} className="h-24 text-center">
+                          {filterByErrors
+                            ? translations.validationStep.noRowsMessageWhenFiltered
+                            : translations.validationStep.noRowsMessage}
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div className="border-t bg-muted px-8 py-4 mt-5">
+      <div className="border-t bg-muted px-8 py-4">
         <div className="flex items-center justify-between">
           {onBack && (
             <Button variant="outline" onClick={onBack}>

inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/components/columns.tsx

@@ -1,191 +0,0 @@
-import type { Column as RDGColumn, RenderEditCellProps, FormatterProps } from "react-data-grid"
-import { useRowSelection } from "react-data-grid"
-import { Checkbox, Input, Switch } from "@chakra-ui/react"
-import type { Data, Fields, Field, SelectOption } from "../../../types"
-import type { ChangeEvent } from "react"
-import type { Meta } from "../types"
-import { CgInfo } from "react-icons/cg"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const SELECT_COLUMN_KEY = "select-row"
-
-function autoFocusAndSelect(input: HTMLInputElement | null) {
-  input?.focus()
-  input?.select()
-}
-
-type RowType<T extends string> = Data<T> & Meta
-
-export const generateColumns = <T extends string>(fields: Fields<T>): RDGColumn<RowType<T>>[] => [
-  {
-    key: SELECT_COLUMN_KEY,
-    name: "",
-    width: 35,
-    minWidth: 35,
-    maxWidth: 35,
-    resizable: false,
-    sortable: false,
-    frozen: true,
-    cellClass: "rdg-checkbox",
-    formatter: (props: FormatterProps<RowType<T>>) => {
-      // eslint-disable-next-line  react-hooks/rules-of-hooks
-      const [isRowSelected, onRowSelectionChange] = useRowSelection()
-      return (
-        <Checkbox
-          bg="white"
-          aria-label="Select"
-          isChecked={isRowSelected}
-          onChange={(event) => {
-            onRowSelectionChange({
-              row: props.row,
-              checked: Boolean(event.target.checked),
-              isShiftClick: (event.nativeEvent as MouseEvent).shiftKey,
-            })
-          }}
-        />
-      )
-    },
-  },
-  ...fields.map(
-    (column: Field<T>): RDGColumn<RowType<T>> => ({
-      key: column.key,
-      name: column.label,
-      minWidth: 150,
-      resizable: true,
-      headerRenderer: () => (
-        <div className="flex gap-1 items-center relative">
-          <div className="flex-1 overflow-hidden text-ellipsis">
-            {column.label}
-          </div>
-          {column.description && (
-            <div className="flex-none">
-              <CgInfo className="h-4 w-4" />
-            </div>
-          )}
-        </div>
-      ),
-      editable: column.fieldType.type !== "checkbox",
-      editor: ({ row, onRowChange, onClose }: RenderEditCellProps<RowType<T>>) => {
-        let component
-
-        switch (column.fieldType.type) {
-          case "select":
-            component = (
-              <Select
-                defaultOpen
-                value={row[column.key] as string}
-                onValueChange={(value) => {
-                  onRowChange({ ...row, [column.key]: value }, true)
-                }}
-              >
-                <SelectTrigger className="w-full border-0 focus:ring-0">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent 
-                  position="popper"
-                  className="z-[1000]"
-                  align="start"
-                  side="bottom"
-                >
-                  {column.fieldType.options.map((option: SelectOption) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )
-            break
-          default:
-            component = (
-              <div className="pl-2">
-                <Input
-                  ref={autoFocusAndSelect}
-                  variant="unstyled"
-                  autoFocus
-                  size="small"
-                  value={row[column.key] as string}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                    onRowChange({ ...row, [column.key]: event.target.value })
-                  }}
-                  onBlur={() => onClose(true)}
-                />
-              </div>
-            )
-        }
-
-        return component
-      },
-      editorOptions: {
-        editOnClick: true,
-      },
-      formatter: ({ row, onRowChange }: FormatterProps<RowType<T>>) => {
-        let component
-
-        switch (column.fieldType.type) {
-          case "checkbox":
-            component = (
-              <div
-                className="flex items-center h-full"
-                onClick={(event) => {
-                  event.stopPropagation()
-                }}
-              >
-                <Switch
-                  isChecked={row[column.key] as boolean}
-                  onChange={() => {
-                    onRowChange({ ...row, [column.key]: !row[column.key as T] })
-                  }}
-                />
-              </div>
-            )
-            break
-          case "select":
-            component = (
-              <div className="min-w-full min-h-full overflow-hidden text-ellipsis">
-                {column.fieldType.options.find((option: SelectOption) => option.value === row[column.key as T])?.label || null}
-              </div>
-            )
-            break
-          default:
-            component = (
-              <div className="min-w-full min-h-full overflow-hidden text-ellipsis">
-                {row[column.key as T]}
-              </div>
-            )
-        }
-
-        if (row.__errors?.[column.key]) {
-          return (
-            <div className="relative group">
-              {component}
-              <div className="absolute left-0 -top-8 z-50 hidden group-hover:block bg-popover text-popover-foreground text-sm p-2 rounded shadow">
-                {row.__errors?.[column.key]?.message}
-              </div>
-            </div>
-          )
-        }
-
-        return component
-      },
-      cellClass: (row: Meta) => {
-        switch (row.__errors?.[column.key]?.level) {
-          case "error":
-            return "rdg-cell-error"
-          case "warning":
-            return "rdg-cell-warning"
-          case "info":
-            return "rdg-cell-info"
-          default:
-            return ""
-        }
-      },
-    }),
-  ),
-]

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

@@ -58,7 +58,7 @@ export type Data<T extends string> = { [key in T]: string | boolean | undefined
 // Data model RSI uses for spreadsheet imports
 export type Fields<T extends string> = DeepReadonly<Field<T>[]>
 
-export type Field<T extends string> = {
+export type Field<T extends string = string> = {
   // UI-facing field label
   label: string
   // Field's unique identifier
@@ -69,10 +69,13 @@ export type Field<T extends string> = {
   alternateMatches?: string[]
   // Validations used for field entries
   validations?: Validation[]
-  // Field entry component, default: Input
-  fieldType: Checkbox | Select | Input
+  // Field entry component
+  fieldType: Checkbox | Select | Input | MultiInput | MultiSelect
   // UI-facing values shown to user as field examples pre-upload phase
   example?: string
+  width?: number
+  disabled?: boolean
+  onChange?: (value: string) => void
 }
 
 export type Checkbox = {
@@ -98,6 +101,17 @@ export type Input = {
   type: "input"
 }
 
+export type MultiInput = {
+  type: "multi-input"
+  separator?: string // Optional separator for parsing multiple values, defaults to comma
+}
+
+export type MultiSelect = {
+  type: "multi-select"
+  options: SelectOption[]
+  separator?: string // Optional separator for parsing multiple values, defaults to comma
+}
+
 export type Validation = RequiredValidation | UniqueValidation | RegexValidation
 
 export type RequiredValidation = {

inventory/src/pages/import/Import.tsx

@@ -1,186 +1,506 @@
 import { useState } from "react";
 import { ReactSpreadsheetImport } from "@/lib/react-spreadsheet-import/src";
+import type { Field, Fields, Validation, ErrorLevel } from "@/lib/react-spreadsheet-import/src/types";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { toast } from "sonner";
 import { motion } from "framer-motion";
+import { useQuery } from "@tanstack/react-query";
+import config from "@/config";
+import { StepType } from "@/lib/react-spreadsheet-import/src/steps/UploadFlow";
 
-const IMPORT_FIELDS = [
+// Define base fields without dynamic options
+const BASE_IMPORT_FIELDS = [
+  {
+    label: "Supplier",
+    key: "supplier",
+    description: "Primary supplier/manufacturer of the product",
+    fieldType: {
+      type: "select" as const,
+      options: [], // Will be populated from API
+    },
+    width: 200,
+    validations: [{ rule: "required" as const, errorMessage: "Required", level: "error" as ErrorLevel }],
+  },
+  {
+    label: "UPC",
+    key: "upc",
+    description: "Universal Product Code/Barcode",
+    alternateMatches: ["barcode", "bar code", "JAN", "EAN"],
+    fieldType: { type: "input" },
+    width: 150,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "unique", errorMessage: "Must be unique", level: "error" },
+      { rule: "regex", value: "^[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Supplier #",
+    key: "supplier_no",
+    description: "Supplier's product identifier",
+    alternateMatches: ["sku", "item#", "mfg item #", "item"],
+    fieldType: { type: "input" },
+    width: 120,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "unique", errorMessage: "Must be unique", level: "error" },
+    ],
+  },
+  {
+    label: "Notions #",
+    key: "notions_no",
+    description: "Internal notions number",
+    fieldType: { type: "input" },
+    width: 120,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "unique", errorMessage: "Must be unique", level: "error" },
+      { rule: "regex", value: "^[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
   {
     label: "Name",
     key: "name",
-    alternateMatches: ["product", "product name", "item name", "title"],
-    fieldType: {
-      type: "input",
-    },
-    example: "Widget X",
-    description: "The name or title of the product",
+    description: "Product name/title",
+    alternateMatches: ["sku description"],
+    fieldType: { type: "input" },
     width: 300,
     validations: [
-      {
-        rule: "required",
-        errorMessage: "Name is required",
-        level: "error",
-      },
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "unique", errorMessage: "Must be unique", level: "error" },
     ],
   },
   {
-    label: "SKU",
-    key: "sku",
-    alternateMatches: ["item number", "product code", "product id", "item id"],
-    fieldType: {
-      type: "input",
-    },
-    example: "WX-123",
-    description: "Unique product identifier",
+    label: "Item Number",
+    key: "item_number",
+    description: "Internal item reference number",
+    fieldType: { type: "input" },
     width: 120,
     validations: [
-      {
-        rule: "required",
-        errorMessage: "SKU is required",
-        level: "error",
-      },
-      {
-        rule: "unique",
-        errorMessage: "SKU must be unique",
-        level: "error",
-      },
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "unique", errorMessage: "Must be unique", level: "error" },
     ],
   },
   {
-    label: "Category",
-    key: "category",
-    alternateMatches: ["product category", "type", "product type"],
+    label: "Image URL",
+    key: "image_url",
+    description: "Product image URL(s)",
+    fieldType: { type: "multi-input" },
+    width: 250,
+  },
+  {
+    label: "MSRP",
+    key: "msrp",
+    description: "Manufacturer's Suggested Retail Price",
+    alternateMatches: ["retail", "retail price", "sugg retail", "price", "sugg. Retail"],
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]*.?[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Qty Per Unit",
+    key: "qty_per_unit",
+    description: "Quantity of items per individual unit",
+    alternateMatches: ["inner pack", "inner", "min qty", "unit qty", "min. order qty"],
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Cost Each",
+    key: "cost_each",
+    description: "Wholesale cost per unit",
+    alternateMatches: ["wholesale", "wholesale price"],
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]*.?[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Case Pack",
+    key: "case_qty",
+    description: "Number of units per case",
+    alternateMatches: ["mc qty"],
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "regex", value: "^[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Tax Category",
+    key: "tax_cat",
+    description: "Product tax category",
     fieldType: {
-      type: "select",
-      options: [
-        { label: "Electronics", value: "electronics" },
-        { label: "Clothing", value: "clothing" },
-        { label: "Food & Beverage", value: "food_beverage" },
-        { label: "Office Supplies", value: "office_supplies" },
-        { label: "Other", value: "other" },
-      ],
+      type: "multi-select",
+      options: [], // Will be populated from API
     },
     width: 150,
-    validations: [
-      {
-        rule: "required",
-        errorMessage: "Category is required",
-        level: "error",
-      },
-    ],
-    example: "Electronics",
-    description: "Product category",
+    validations: [{ rule: "required", errorMessage: "Required", level: "error" }],
   },
   {
-    label: "Quantity",
-    key: "quantity",
-    alternateMatches: ["qty", "stock", "amount", "inventory", "stock level"],
-    fieldType: {
-      type: "input",
-    },
-    example: "100",
-    description: "Current stock quantity",
-    width: 100,
-    validations: [
-      {
-        rule: "required",
-        errorMessage: "Quantity is required",
-        level: "error",
-      },
-      {
-        rule: "regex",
-        value: "^[0-9]+$",
-        errorMessage: "Quantity must be a positive number",
-        level: "error",
-      },
-    ],
-  },
-  {
-    label: "Price",
-    key: "price",
-    alternateMatches: ["unit price", "cost", "selling price", "retail price"],
-    fieldType: {
-      type: "input",
-    },
-    example: "29.99",
-    description: "Selling price per unit",
-    width: 100,
-    validations: [
-      {
-        rule: "required",
-        errorMessage: "Price is required",
-        level: "error",
-      },
-      {
-        rule: "regex",
-        value: "^\\d*\\.?\\d+$",
-        errorMessage: "Price must be a valid number",
-        level: "error",
-      },
-    ],
-  },
-  {
-    label: "In Stock",
-    key: "inStock",
-    alternateMatches: ["available", "active", "status"],
-    fieldType: {
-      type: "checkbox",
-      booleanMatches: {
-        yes: true,
-        no: false,
-        "in stock": true,
-        "out of stock": false,
-        available: true,
-        unavailable: false,
-      },
-    },
-    width: 80,
-    example: "Yes",
-    description: "Whether the item is currently in stock",
-  },
-  {
-    label: "Minimum Stock",
-    key: "minStock",
-    alternateMatches: ["min qty", "reorder point", "low stock level"],
-    fieldType: {
-      type: "input",
-    },
-    example: "10",
-    description: "Minimum stock level before reorder",
-    width: 100,
-    validations: [
-      {
-        rule: "regex",
-        value: "^[0-9]+$",
-        errorMessage: "Minimum stock must be a positive number",
-        level: "error",
-      },
-    ],
-  },
-  {
-    label: "Location",
-    key: "location",
-    alternateMatches: ["storage location", "warehouse", "shelf", "bin"],
+    label: "Company",
+    key: "company",
+    description: "Company/Brand name",
     fieldType: {
       type: "select",
-      options: [
-        { label: "Warehouse A", value: "warehouse_a" },
-        { label: "Warehouse B", value: "warehouse_b" },
-        { label: "Store Front", value: "store_front" },
-        { label: "External Storage", value: "external" },
-      ],
+      options: [], // Will be populated from API
+    },
+    width: 200,
+    validations: [{ rule: "required", errorMessage: "Required", level: "error" }],
+  },
+  {
+    label: "Line",
+    key: "line",
+    description: "Product line",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated dynamically based on company selection
     },
     width: 150,
-    example: "Warehouse A",
-    description: "Storage location of the product",
+    validations: [{ rule: "required", errorMessage: "Required", level: "error" }],
   },
-];
+  {
+    label: "Sub Line",
+    key: "subline",
+    description: "Product sub-line",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated dynamically based on line selection
+    },
+    width: 150,
+  },
+  {
+    label: "Artist",
+    key: "artist",
+    description: "Artist/Designer name",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated from API
+    },
+    width: 200,
+  },
+  {
+    label: "ETA Date",
+    key: "eta",
+    description: "Estimated arrival date",
+    alternateMatches: ["shipping month"],
+    fieldType: { type: "input" },
+    width: 120,
+  },
+  {
+    label: "Weight",
+    key: "weight",
+    description: "Product weight (in lbs)",
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]*.?[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Length",
+    key: "length",
+    description: "Product length (in inches)",
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]*.?[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Width",
+    key: "width",
+    description: "Product width (in inches)",
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]*.?[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Height",
+    key: "height",
+    description: "Product height (in inches)",
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "required", errorMessage: "Required", level: "error" },
+      { rule: "regex", value: "^[0-9]*.?[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Shipping Restrictions",
+    key: "ship_restrictions",
+    description: "Product shipping restrictions",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated from API
+    },
+    width: 150,
+    validations: [{ rule: "required", errorMessage: "Required", level: "error" }],
+  },
+  {
+    label: "Country Of Origin",
+    key: "coo",
+    description: "2-letter country code (ISO)",
+    alternateMatches: ["coo"],
+    fieldType: { type: "input" },
+    width: 100,
+    validations: [
+      { rule: "regex", value: "^[A-Z]{2}$", errorMessage: "Must be 2 letters", level: "error" },
+    ],
+  },
+  {
+    label: "HTS Code",
+    key: "hts_code",
+    description: "Harmonized Tariff Schedule code",
+    alternateMatches: ["taric"],
+    fieldType: { type: "input" },
+    width: 120,
+    validations: [
+      { rule: "regex", value: "^[0-9]+$", errorMessage: "Must be a number", level: "error" },
+    ],
+  },
+  {
+    label: "Size Category",
+    key: "size_cat",
+    description: "Product size category",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated from API
+    },
+    width: 150,
+  },
+  {
+    label: "Description",
+    key: "description",
+    description: "Detailed product description",
+    fieldType: { type: "input" },
+    width: 400,
+    validations: [{ rule: "required", errorMessage: "Required", level: "error" }],
+  },
+  {
+    label: "Private Notes",
+    key: "priv_notes",
+    description: "Internal notes about the product",
+    fieldType: { type: "input" },
+    width: 300,
+  },
+  {
+    label: "Categories",
+    key: "categories",
+    description: "Product categories",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated from API
+    },
+    width: 200,
+    validations: [{ rule: "required", errorMessage: "Required", level: "error" }],
+  },
+  {
+    label: "Themes",
+    key: "themes",
+    description: "Product themes/styles",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated from API
+    },
+    width: 200,
+  },
+  {
+    label: "Colors",
+    key: "colors",
+    description: "Product colors",
+    fieldType: {
+      type: "select",
+      options: [], // Will be populated from API
+    },
+    width: 150,
+  },
+] as const;
+
+type ImportField = typeof BASE_IMPORT_FIELDS[number];
+type ImportFieldKey = ImportField["key"];
 
 export function Import() {
   const [isOpen, setIsOpen] = useState(false);
   const [importedData, setImportedData] = useState<any[] | null>(null);
+  const [selectedCompany, setSelectedCompany] = useState<string | null>(null);
+  const [selectedLine, setSelectedLine] = useState<string | null>(null);
+  const [startFromScratch, setStartFromScratch] = useState(false);
+
+  // Fetch initial field options from the API
+  const { data: fieldOptions, isLoading: isLoadingOptions } = useQuery({
+    queryKey: ["import-field-options"],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/import/field-options`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch field options");
+      }
+      return response.json();
+    },
+  });
+
+  // Fetch product lines when company is selected
+  const { data: productLines } = useQuery({
+    queryKey: ["product-lines", selectedCompany],
+    queryFn: async () => {
+      if (!selectedCompany) return [];
+      const response = await fetch(`${config.apiUrl}/import/product-lines/${selectedCompany}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch product lines");
+      }
+      return response.json();
+    },
+    enabled: !!selectedCompany,
+  });
+
+  // Fetch sublines when line is selected
+  const { data: sublines } = useQuery({
+    queryKey: ["sublines", selectedLine],
+    queryFn: async () => {
+      if (!selectedLine) return [];
+      const response = await fetch(`${config.apiUrl}/import/sublines/${selectedLine}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch sublines");
+      }
+      return response.json();
+    },
+    enabled: !!selectedLine,
+  });
+
+  // Handle field value changes
+  const handleFieldChange = (field: string, value: any) => {
+    console.log('Field change:', field, value);
+    if (field === "company") {
+      setSelectedCompany(value);
+      setSelectedLine(null); // Reset line when company changes
+    } else if (field === "line") {
+      setSelectedLine(value);
+    }
+  };
+
+  // Merge base fields with dynamic options
+  const importFields = BASE_IMPORT_FIELDS.map(field => {
+    if (!fieldOptions) return field;
+
+    switch (field.key) {
+      case "company":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.companies || [],
+          },
+          onChange: (value: string) => {
+            console.log('Company selected:', value);
+            handleFieldChange("company", value);
+          },
+        };
+      case "line":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: productLines || [],
+          },
+          onChange: (value: string) => {
+            console.log('Line selected:', value);
+            handleFieldChange("line", value);
+          },
+          disabled: !selectedCompany,
+        };
+      case "subline":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: sublines || [],
+          },
+          disabled: !selectedLine,
+        };
+      case "colors":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.colors || [],
+          },
+        };
+      case "tax_cat":
+        return {
+          ...field,
+          fieldType: {
+            type: "multi-select" as const,
+            options: fieldOptions.taxCategories || [],
+          },
+        };
+      case "ship_restrictions":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.shippingRestrictions || [],
+          },
+        };
+      case "supplier":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.suppliers || [],
+          },
+        };
+      case "artist":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.artists || [],
+          },
+        };
+      case "categories":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.categories || [],
+          },
+        };
+      case "themes":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.themes || [],
+          },
+        };
+      case "size_cat":
+        return {
+          ...field,
+          fieldType: {
+            type: "select" as const,
+            options: fieldOptions.sizes || [],
+          },
+        };
+      default:
+        return field;
+    }
+  });
 
   const handleData = async (data: any, file: File) => {
     try {
@@ -195,6 +515,14 @@ export function Import() {
     }
   };
 
+  if (isLoadingOptions) {
+    return (
+      <div className="container mx-auto py-6">
+        <h1 className="text-3xl font-bold tracking-tight">Loading import options...</h1>
+      </div>
+    );
+  }
+
   return (
     <motion.div 
       layout
@@ -218,10 +546,20 @@ export function Import() {
         <CardHeader>
           <CardTitle>Import Data</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-4">
           <Button onClick={() => setIsOpen(true)} className="w-full">
             Upload Spreadsheet
           </Button>
+          <Button 
+            onClick={() => {
+              setStartFromScratch(true);
+              setIsOpen(true);
+            }} 
+            variant="outline" 
+            className="w-full"
+          >
+            Start From Scratch
+          </Button>
         </CardContent>
       </Card>
 
@@ -240,9 +578,13 @@ export function Import() {
 
       <ReactSpreadsheetImport
         isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
+        onClose={() => {
+          setIsOpen(false);
+          setStartFromScratch(false);
+        }}
         onSubmit={handleData}
-        fields={IMPORT_FIELDS}
+        fields={importFields}
+        initialStepState={startFromScratch ? { type: StepType.validateData, data: [{}] } : undefined}
       />
     </motion.div>
   );

package-lock.json

@@ -4,9 +4,11 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "inventory",
       "dependencies": {
         "shadcn": "^1.0.0"
+      },
+      "devDependencies": {
+        "ts-essentials": "^10.0.4"
       }
     },
     "node_modules/shadcn": {
@@ -14,6 +16,21 @@
       "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-1.0.0.tgz",
       "integrity": "sha512-kCxBIBiPS83WxrWkOQHamWpr9XlLtOtOlJM6QX90h9A5xZCBMhxu4ibcNT2ZnzZLdexkYbQrnijfPKdOsZxOpA==",
       "license": "ISC"
+    },
+    "node_modules/ts-essentials": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-10.0.4.tgz",
+      "integrity": "sha512-lwYdz28+S4nicm+jFi6V58LaAIpxzhg9rLdgNC1VsdP/xiFBseGhF1M/shwCk6zMmwahBZdXcl34LVHrEang3A==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">=4.5.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
     "shadcn": "^1.0.0"
+  },
+  "devDependencies": {
+    "ts-essentials": "^10.0.4"
   }
 }