From 441a2c74adade420e3fb85138e43803cc6e6e8df Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Mon, 24 Feb 2025 00:02:27 -0500
Subject: [PATCH] Add remaining templates elements

---
 inventory-server/package.json                 |    2 -
 inventory-server/src/routes/ai-validation.js  |    1 -
 inventory-server/src/routes/templates.js      |   41 +-
 inventory-server/src/server.js                |   12 +-
 inventory-server/src/utils/db.js              |   78 +-
 .../settings/TemplateManagement.tsx           | 1161 +++++++++++++----
 inventory/src/components/ui/textarea.tsx      |   22 +
 inventory/src/index.css                       |   11 +
 .../steps/ValidationStep/ValidationStep.tsx   |  447 ++++++-
 inventory/src/pages/Settings.tsx              |    2 +-
 10 files changed, 1446 insertions(+), 331 deletions(-)
 create mode 100644 inventory/src/components/ui/textarea.tsx

diff --git a/inventory-server/package.json b/inventory-server/package.json
index 05aa4c6..5f74ad6 100755
--- a/inventory-server/package.json
+++ b/inventory-server/package.json
@@ -32,8 +32,6 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/pg": "^8.11.2",
     "nodemon": "^3.0.2"
   }
 }
diff --git a/inventory-server/src/routes/ai-validation.js b/inventory-server/src/routes/ai-validation.js
index fd627e4..d128e97 100644
--- a/inventory-server/src/routes/ai-validation.js
+++ b/inventory-server/src/routes/ai-validation.js
@@ -8,7 +8,6 @@ const dotenv = require('dotenv');
 // Ensure environment variables are loaded
 dotenv.config({ path: path.join(__dirname, '../../.env') });
 
-// Initialize OpenAI client
 const openai = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY
 });
diff --git a/inventory-server/src/routes/templates.js b/inventory-server/src/routes/templates.js
index 6deb3cf..999f960 100644
--- a/inventory-server/src/routes/templates.js
+++ b/inventory-server/src/routes/templates.js
@@ -1,5 +1,5 @@
 const express = require('express');
-const { Pool } = require('pg');
+const { getPool } = require('../utils/db');
 const dotenv = require('dotenv');
 const path = require('path');
 
@@ -7,23 +7,14 @@ dotenv.config({ path: path.join(__dirname, "../../.env") });
 
 const router = express.Router();
 
-// Initialize PostgreSQL connection pool
-const pool = new Pool({
-  host: process.env.DB_HOST,
-  user: process.env.DB_USER,
-  password: process.env.DB_PASSWORD,
-  database: process.env.DB_NAME,
-  // Add SSL if needed (based on your environment)
-  ...(process.env.NODE_ENV === 'production' && {
-    ssl: {
-      rejectUnauthorized: false
-    }
-  })
-});
-
 // Get all templates
 router.get('/', async (req, res) => {
   try {
+    const pool = getPool();
+    if (!pool) {
+      throw new Error('Database pool not initialized');
+    }
+    
     const result = await pool.query(`
       SELECT * FROM templates 
       ORDER BY company ASC, product_type ASC
@@ -42,6 +33,11 @@ router.get('/', async (req, res) => {
 router.get('/:company/:productType', async (req, res) => {
   try {
     const { company, productType } = req.params;
+    const pool = getPool();
+    if (!pool) {
+      throw new Error('Database pool not initialized');
+    }
+    
     const result = await pool.query(`
       SELECT * FROM templates 
       WHERE company = $1 AND product_type = $2
@@ -89,6 +85,11 @@ router.post('/', async (req, res) => {
       return res.status(400).json({ error: 'Company and Product Type are required' });
     }
 
+    const pool = getPool();
+    if (!pool) {
+      throw new Error('Database pool not initialized');
+    }
+    
     const result = await pool.query(`
       INSERT INTO templates (
         company,
@@ -176,6 +177,11 @@ router.put('/:id', async (req, res) => {
       return res.status(400).json({ error: 'Company and Product Type are required' });
     }
 
+    const pool = getPool();
+    if (!pool) {
+      throw new Error('Database pool not initialized');
+    }
+    
     const result = await pool.query(`
       UPDATE templates 
       SET 
@@ -244,6 +250,11 @@ router.put('/:id', async (req, res) => {
 router.delete('/:id', async (req, res) => {
   try {
     const { id } = req.params;
+    const pool = getPool();
+    if (!pool) {
+      throw new Error('Database pool not initialized');
+    }
+    
     const result = await pool.query('DELETE FROM templates WHERE id = $1 RETURNING *', [id]);
 
     if (result.rows.length === 0) {
diff --git a/inventory-server/src/server.js b/inventory-server/src/server.js
index bf0c9e9..879dfa3 100755
--- a/inventory-server/src/server.js
+++ b/inventory-server/src/server.js
@@ -20,7 +20,7 @@ const aiValidationRouter = require('./routes/ai-validation');
 const templatesRouter = require('./routes/templates');
 
 // Get the absolute path to the .env file
-const envPath = path.join(__dirname, '..', '.env');
+const envPath = '/var/www/html/inventory/.env';
 console.log('Looking for .env file at:', envPath);
 console.log('.env file exists:', fs.existsSync(envPath));
 
@@ -35,8 +35,7 @@ try {
     DB_NAME: process.env.DB_NAME || 'not set',
     DB_PASSWORD: process.env.DB_PASSWORD ? '[password set]' : 'not set',
     DB_PORT: process.env.DB_PORT || 'not set',
-    DB_SSL: process.env.DB_SSL || 'not set',
-    OPENAI_API_KEY: process.env.OPENAI_API_KEY ? '[key set]' : 'not set'
+    DB_SSL: process.env.DB_SSL || 'not set'
   });
 } catch (error) {
   console.error('Error loading .env file:', error);
@@ -72,13 +71,13 @@ app.use(express.urlencoded({ extended: true, limit: '10mb' }));
 // Initialize database pool and start server
 async function startServer() {
   try {
-    // Initialize database pool with PostgreSQL configuration
+    // Initialize database pool
     const pool = await initPool({
       host: process.env.DB_HOST,
-      port: parseInt(process.env.DB_PORT || '5432', 10),
       user: process.env.DB_USER,
       password: process.env.DB_PASSWORD,
       database: process.env.DB_NAME,
+      port: process.env.DB_PORT || 5432,
       max: process.env.NODE_ENV === 'production' ? 20 : 10,
       idleTimeoutMillis: 30000,
       connectionTimeoutMillis: 2000,
@@ -110,8 +109,7 @@ async function startServer() {
       res.json({ 
         status: 'ok',
         timestamp: new Date().toISOString(),
-        environment: process.env.NODE_ENV,
-        database: 'connected'
+        environment: process.env.NODE_ENV
       });
     });
 
diff --git a/inventory-server/src/utils/db.js b/inventory-server/src/utils/db.js
index d2dd88f..c8bec35 100644
--- a/inventory-server/src/utils/db.js
+++ b/inventory-server/src/utils/db.js
@@ -1,41 +1,47 @@
-const { Pool } = require('pg');
+const { Pool, Client } = require('pg');
 const { Client: SSHClient } = require('ssh2');
 
 let pool;
 
-async function initPool(config) {
+function initPool(config) {
   // Log config without sensitive data
   const safeConfig = {
-    host: config.host,
-    user: config.user,
-    database: config.database,
-    port: config.port,
-    max: config.max,
-    idleTimeoutMillis: config.idleTimeoutMillis,
-    connectionTimeoutMillis: config.connectionTimeoutMillis,
-    ssl: config.ssl,
-    password: config.password ? '[password set]' : '[no password]'
+    host: config.host || process.env.DB_HOST,
+    user: config.user || process.env.DB_USER,
+    database: config.database || process.env.DB_NAME,
+    port: config.port || process.env.DB_PORT || 5432,
+    max: config.max || 10,
+    idleTimeoutMillis: config.idleTimeoutMillis || 30000,
+    connectionTimeoutMillis: config.connectionTimeoutMillis || 2000,
+    ssl: config.ssl || false,
+    password: (config.password || process.env.DB_PASSWORD) ? '[password set]' : '[no password]'
   };
   console.log('[Database] Initializing pool with config:', safeConfig);
   
-  try {
-    // Create the pool
-    pool = new Pool(config);
+  // Create the pool with the configuration
+  pool = new Pool({
+    host: config.host || process.env.DB_HOST,
+    user: config.user || process.env.DB_USER,
+    password: config.password || process.env.DB_PASSWORD,
+    database: config.database || process.env.DB_NAME,
+    port: config.port || process.env.DB_PORT || 5432,
+    max: config.max || 10,
+    idleTimeoutMillis: config.idleTimeoutMillis || 30000,
+    connectionTimeoutMillis: config.connectionTimeoutMillis || 2000,
+    ssl: config.ssl || false
+  });
 
-    // Test the connection
-    const client = await pool.connect();
-    try {
-      await client.query('SELECT NOW()');
-      console.log('[Database] Pool connection test successful');
-    } finally {
+  // Test the pool connection
+  return pool.connect()
+    .then(client => {
+      console.log('[Database] Pool connection successful');
       client.release();
-    }
-
-    return pool;
-  } catch (err) {
-    console.error('[Database] Connection failed:', err);
-    throw err;
-  }
+      return pool;
+    })
+    .catch(err => {
+      console.error('[Database] Connection failed:', err);
+      throw err;
+    });
 }
 
 async function getConnection() {
@@ -45,24 +51,8 @@ async function getConnection() {
   return pool.connect();
 }
 
-// Helper function to execute a query with error handling
-async function query(text, params = []) {
-  if (!pool) {
-    throw new Error('Database pool not initialized');
-  }
-  
-  try {
-    const result = await pool.query(text, params);
-    return result;
-  } catch (err) {
-    console.error('[Database] Query error:', err);
-    throw err;
-  }
-}
-
 module.exports = {
   initPool,
   getConnection,
-  getPool: () => pool,
-  query
+  getPool: () => pool
 }; 
\ No newline at end of file
diff --git a/inventory/src/components/settings/TemplateManagement.tsx b/inventory/src/components/settings/TemplateManagement.tsx
index 17144ab..a6a6ddc 100644
--- a/inventory/src/components/settings/TemplateManagement.tsx
+++ b/inventory/src/components/settings/TemplateManagement.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import {
@@ -23,6 +23,61 @@ import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { toast } from "sonner";
 import config from "@/config";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+  flexRender,
+  type ColumnDef,
+} from "@tanstack/react-table";
+import { ArrowUpDown, Pencil, Trash2, Loader2, Copy } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface FieldOption {
+  label: string;
+  value: string;
+  type?: number;
+  level?: number;
+  hexColor?: string;
+}
+
+interface FieldOptions {
+  companies: FieldOption[];
+  artists: FieldOption[];
+  sizes: FieldOption[];
+  themes: FieldOption[];
+  categories: FieldOption[];
+  colors: FieldOption[];
+  suppliers: FieldOption[];
+  taxCategories: FieldOption[];
+  shippingRestrictions: FieldOption[];
+}
 
 interface Template {
   id: number;
@@ -51,10 +106,16 @@ interface TemplateFormData extends Omit<Template, 'id' | 'created_at' | 'updated
 
 export function TemplateManagement() {
   const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [templateToDelete, setTemplateToDelete] = useState<Template | null>(null);
+  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
   const [formData, setFormData] = useState<TemplateFormData>({
     company: "",
     product_type: "",
   });
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [searchQuery, setSearchQuery] = useState("");
 
   const queryClient = useQueryClient();
 
@@ -69,6 +130,17 @@ export function TemplateManagement() {
     },
   });
 
+  const { data: fieldOptions } = useQuery<FieldOptions>({
+    queryKey: ["fieldOptions"],
+    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();
+    },
+  });
+
   const createMutation = useMutation({
     mutationFn: async (data: TemplateFormData) => {
       const response = await fetch(`${config.apiUrl}/templates`, {
@@ -94,6 +166,31 @@ export function TemplateManagement() {
     },
   });
 
+  const updateMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: number; data: TemplateFormData }) => {
+      const response = await fetch(`${config.apiUrl}/templates/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+      if (!response.ok) {
+        throw new Error("Failed to update template");
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["templates"] });
+      setIsEditOpen(false);
+      setEditingTemplate(null);
+      toast.success("Template updated successfully");
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to update template");
+    },
+  });
+
   const deleteMutation = useMutation({
     mutationFn: async (id: number) => {
       const response = await fetch(`${config.apiUrl}/templates/${id}`, {
@@ -114,7 +211,35 @@ export function TemplateManagement() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    createMutation.mutate(formData);
+    if (editingTemplate) {
+      updateMutation.mutate({ id: editingTemplate.id, data: formData });
+    } else {
+      createMutation.mutate(formData);
+    }
+  };
+
+  const handleEdit = (template: Template) => {
+    setEditingTemplate(template);
+    setFormData({
+      company: template.company,
+      product_type: template.product_type,
+      supplier: template.supplier,
+      msrp: template.msrp,
+      cost_each: template.cost_each,
+      qty_per_unit: template.qty_per_unit,
+      case_qty: template.case_qty,
+      hts_code: template.hts_code,
+      description: template.description,
+      weight: template.weight,
+      length: template.length,
+      width: template.width,
+      height: template.height,
+      tax_cat: template.tax_cat,
+      size_cat: template.size_cat,
+      categories: template.categories,
+      ship_restrictions: template.ship_restrictions,
+    });
+    setIsEditOpen(true);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -125,14 +250,31 @@ export function TemplateManagement() {
     }));
   };
 
-  const handleArrayInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
+  const handleSelectChange = (name: string, value: string) => {
     setFormData((prev) => ({
       ...prev,
-      [name]: value.split(",").map((item) => item.trim()),
+      [name]: value,
     }));
   };
 
+  const handleMultiSelectChange = (name: string, value: string) => {
+    setFormData((prev) => {
+      const currentValues = prev[name as keyof typeof prev] as string[] || [];
+      const valueSet = new Set(currentValues);
+
+      if (valueSet.has(value)) {
+        valueSet.delete(value);
+      } else {
+        valueSet.add(value);
+      }
+
+      return {
+        ...prev,
+        [name]: Array.from(valueSet),
+      };
+    });
+  };
+
   const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
@@ -141,6 +283,683 @@ export function TemplateManagement() {
     }));
   };
 
+  const handleWheel = (e: React.WheelEvent) => {
+    const commandList = e.currentTarget;
+    commandList.scrollTop += e.deltaY;
+    e.stopPropagation();
+  };
+
+  const handleSelect = (name: string, value: string, closeOnSelect = true) => {
+    handleSelectChange(name, value);
+    if (closeOnSelect) {
+      const button = document.activeElement as HTMLElement;
+      button?.blur();
+    }
+  };
+
+  const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleDeleteClick = (template: Template) => {
+    setTemplateToDelete(template);
+    setIsDeleteOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (templateToDelete) {
+      deleteMutation.mutate(templateToDelete.id);
+      setIsDeleteOpen(false);
+      setTemplateToDelete(null);
+    }
+  };
+
+  const handleCopy = (template: Template) => {
+    setFormData({
+      company: template.company,
+      product_type: template.product_type,
+      supplier: template.supplier,
+      msrp: template.msrp,
+      cost_each: template.cost_each,
+      qty_per_unit: template.qty_per_unit,
+      case_qty: template.case_qty,
+      hts_code: template.hts_code,
+      description: template.description,
+      weight: template.weight,
+      length: template.length,
+      width: template.width,
+      height: template.height,
+      tax_cat: template.tax_cat,
+      size_cat: template.size_cat,
+      categories: template.categories,
+      ship_restrictions: template.ship_restrictions,
+    });
+    setIsCreateOpen(true);
+  };
+
+  const columns = useMemo<ColumnDef<Template>[]>(() => [
+    {
+      accessorKey: "company",
+      header: ({ column }) => (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Company
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      ),
+      cell: ({ row }) => {
+        const companyId = row.getValue("company");
+        return fieldOptions?.companies.find(c => c.value === companyId)?.label || companyId;
+      },
+    },
+    {
+      accessorKey: "product_type",
+      header: ({ column }) => (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Product Type
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      ),
+    },
+    {
+      accessorKey: "updated_at",
+      header: ({ column }) => (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Last Updated
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      ),
+      cell: ({ row }) => new Date(row.getValue("updated_at")).toLocaleDateString(),
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => (
+        <div className="flex gap-2 justify-end pr-4">
+          <Button
+            variant="ghost"
+            onClick={() => handleEdit(row.original)}
+          >
+            <Pencil className="h-4 w-4" />
+            Edit
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => handleCopy(row.original)}
+          >
+            <Copy className="h-4 w-4" />
+            Copy
+          </Button>
+          <Button
+            variant="ghost"
+            className="text-destructive hover:text-destructive"
+            onClick={() => handleDeleteClick(row.original)}
+          >
+            <Trash2 className="h-4 w-4" />
+            Delete
+          </Button>
+        </div>
+      ),
+    },
+  ], [fieldOptions]);
+
+  const filteredData = useMemo(() => {
+    if (!templates) return [];
+    return templates.filter((template) => {
+      const searchString = searchQuery.toLowerCase();
+      return (
+        template.company.toLowerCase().includes(searchString) ||
+        template.product_type.toLowerCase().includes(searchString) ||
+        (template.supplier?.toLowerCase().includes(searchString) ?? false)
+      );
+    });
+  }, [templates, searchQuery]);
+
+  const table = useReactTable({
+    data: filteredData,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const renderFormFields = () => {
+    if (!fieldOptions) {
+      return (
+        <div className="flex items-center justify-center p-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      );
+    }
+
+    // Helper function to sort options with selected value at top
+    const getSortedOptions = (options: FieldOption[], selectedValue?: string | string[]) => {
+      return [...options].sort((a, b) => {
+        if (Array.isArray(selectedValue)) {
+          const aSelected = selectedValue.includes(a.value);
+          const bSelected = selectedValue.includes(b.value);
+          if (aSelected && !bSelected) return -1;
+          if (!aSelected && bSelected) return 1;
+          return 0;
+        }
+        if (a.value === selectedValue) return -1;
+        if (b.value === selectedValue) return 1;
+        return 0;
+      });
+    };
+
+    // Helper function to get selected category labels
+    const getSelectedCategoryLabels = () => {
+      if (!formData.categories?.length) return "";
+      const labels = formData.categories
+        .map(value => fieldOptions.categories.find(cat => cat.value === value)?.label)
+        .filter(Boolean);
+      return labels.join(", ");
+    };
+
+    // Sort categories with selected ones first and respect levels
+    const getSortedCategories = () => {
+      const selected = new Set(formData.categories || []);
+      return [...fieldOptions.categories].sort((a, b) => {
+        const aSelected = selected.has(a.value);
+        const bSelected = selected.has(b.value);
+        if (aSelected && !bSelected) return -1;
+        if (!aSelected && bSelected) return 1;
+        return 0;
+      });
+    };
+
+    return (
+      <div className="grid gap-4 py-4 px-1">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="company">Company*</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  className={cn(
+                    "w-full justify-between",
+                    !formData.company && "text-muted-foreground"
+                  )}
+                >
+                  {formData.company
+                    ? fieldOptions.companies.find(
+                        (company) => company.value === formData.company
+                      )?.label
+                    : "Select company..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                <Command>
+                  <CommandInput placeholder="Search companies..." />
+                  <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
+                    <CommandEmpty>No companies found.</CommandEmpty>
+                    <CommandGroup>
+                      {getSortedOptions(fieldOptions.companies, formData.company).map((company) => (
+                        <CommandItem
+                          key={company.value}
+                          value={company.label}
+                          onSelect={() => handleSelect("company", company.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              handleSelect("company", company.value);
+                            }
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              formData.company === company.value
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {company.label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="product_type">Product Type*</Label>
+            <Input
+              id="product_type"
+              name="product_type"
+              value={formData.product_type}
+              onChange={handleInputChange}
+              required
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="supplier">Supplier</Label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                className={cn(
+                  "w-full justify-between",
+                  !formData.supplier && "text-muted-foreground"
+                )}
+              >
+                {formData.supplier
+                  ? fieldOptions.suppliers.find(
+                      (supplier) => supplier.value === formData.supplier
+                    )?.label
+                  : "Select supplier..."}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+              <Command>
+                <CommandInput placeholder="Search suppliers..." />
+                <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
+                  <CommandEmpty>No suppliers found.</CommandEmpty>
+                  <CommandGroup>
+                    {getSortedOptions(fieldOptions.suppliers, formData.supplier).map((supplier) => (
+                      <CommandItem
+                        key={supplier.value}
+                        value={supplier.label}
+                        onSelect={() => handleSelect("supplier", supplier.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            handleSelect("supplier", supplier.value);
+                          }
+                        }}
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            formData.supplier === supplier.value
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
+                        />
+                        {supplier.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div className="grid grid-cols-4 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="msrp">MSRP</Label>
+            <Input
+              id="msrp"
+              name="msrp"
+              type="number"
+              step="0.01"
+              value={formData.msrp || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="cost_each">Cost Each</Label>
+            <Input
+              id="cost_each"
+              name="cost_each"
+              type="number"
+              step="0.01"
+              value={formData.cost_each || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="qty_per_unit">Quantity per Unit</Label>
+            <Input
+              id="qty_per_unit"
+              name="qty_per_unit"
+              type="number"
+              value={formData.qty_per_unit || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="case_qty">Case Quantity</Label>
+            <Input
+              id="case_qty"
+              name="case_qty"
+              type="number"
+              value={formData.case_qty || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="ship_restrictions">Shipping Restrictions</Label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                className={cn(
+                  "w-full justify-between",
+                  !formData.ship_restrictions?.[0] && "text-muted-foreground"
+                )}
+              >
+                {formData.ship_restrictions?.[0]
+                  ? fieldOptions.shippingRestrictions.find(
+                      (r) => r.value === formData.ship_restrictions?.[0]
+                    )?.label
+                  : "Select shipping restriction..."}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+              <Command>
+                <CommandInput placeholder="Search restrictions..." />
+                <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
+                  <CommandEmpty>No restrictions found.</CommandEmpty>
+                  <CommandGroup>
+                    {getSortedOptions(fieldOptions.shippingRestrictions, formData.ship_restrictions?.[0]).map((restriction) => (
+                      <CommandItem
+                        key={restriction.value}
+                        value={restriction.label}
+                        onSelect={(value) => {
+                          const foundRestriction = fieldOptions.shippingRestrictions.find(
+                            r => r.label === value
+                          );
+                          if (foundRestriction) {
+                            handleSelect("ship_restrictions", foundRestriction.value);
+                          }
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            const foundRestriction = fieldOptions.shippingRestrictions.find(
+                              r => r.label === restriction.label
+                            );
+                            if (foundRestriction) {
+                              handleSelect("ship_restrictions", foundRestriction.value);
+                            }
+                          }
+                        }}
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            formData.ship_restrictions?.[0] === restriction.value
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
+                        />
+                        {restriction.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="hts_code">HTS Code</Label>
+          <Input
+            id="hts_code"
+            name="hts_code"
+            value={formData.hts_code || ""}
+            onChange={handleInputChange}
+          />
+        </div>
+        </div>
+       
+
+        <div className="grid grid-cols-4 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="weight">Weight (oz)</Label>
+            <Input
+              id="weight"
+              name="weight"
+              type="number"
+              step="0.01"
+              value={formData.weight || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="length">Length (in)</Label>
+            <Input
+              id="length"
+              name="length"
+              type="number"
+              step="0.01"
+              value={formData.length || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+       
+          <div className="space-y-2">
+            <Label htmlFor="width">Width (in)</Label>
+            <Input
+              id="width"
+              name="width"
+              type="number"
+              step="0.01"
+              value={formData.width || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="height">Height (in)</Label>
+            <Input
+              id="height"
+              name="height"
+              type="number"
+              step="0.01"
+              value={formData.height || ""}
+              onChange={handleNumberInputChange}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="tax_cat">Tax Category</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  className={cn(
+                    "w-full justify-between",
+                    !formData.tax_cat && "text-muted-foreground"
+                  )}
+                >
+                  {formData.tax_cat !== undefined
+                    ? fieldOptions.taxCategories.find(
+                        (cat) => cat.value === formData.tax_cat
+                      )?.label
+                    : "Select tax category..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                <Command>
+                  <CommandInput placeholder="Search tax categories..." />
+                  <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
+                    <CommandEmpty>No tax categories found.</CommandEmpty>
+                    <CommandGroup>
+                      {getSortedOptions(fieldOptions.taxCategories, formData.tax_cat).map((category) => (
+                        <CommandItem
+                          key={category.value}
+                          value={category.value}
+                          onSelect={() => handleSelect("tax_cat", category.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              handleSelect("tax_cat", category.value);
+                            }
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              formData.tax_cat === category.value
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {category.label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="size_cat">Size Category</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  className={cn(
+                    "w-full justify-between",
+                    !formData.size_cat && "text-muted-foreground"
+                  )}
+                >
+                  {formData.size_cat
+                    ? fieldOptions.sizes.find(
+                        (size) => size.value === formData.size_cat
+                      )?.label
+                    : "Select size category..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+                <Command>
+                  <CommandInput placeholder="Search sizes..." />
+                  <CommandList className="max-h-[200px] overflow-y-auto" onWheel={handleWheel}>
+                    <CommandEmpty>No sizes found.</CommandEmpty>
+                    <CommandGroup>
+                      {getSortedOptions(fieldOptions.sizes, formData.size_cat).map((size) => (
+                        <CommandItem
+                          key={size.value}
+                          value={size.value}
+                          onSelect={() => handleSelect("size_cat", size.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              handleSelect("size_cat", size.value);
+                            }
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              formData.size_cat === size.value
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {size.label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="categories">Categories</Label>
+          <Popover modal={false}>
+            <PopoverTrigger asChild className="max-w-[calc(800px-3.5rem)]">
+              <Button
+                variant="outline"
+                role="combobox"
+                className="w-full justify-between"
+              >
+                <span className={cn(
+                  "truncate block flex-1 text-left",
+                  !formData.categories?.length && "text-muted-foreground"
+                )}>
+                  {formData.categories?.length
+                    ? getSelectedCategoryLabels()
+                    : "Select categories..."}
+                </span>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+              <Command className="max-h-[200px]">
+                <CommandInput placeholder="Search categories..." />
+                <CommandList onWheel={handleWheel}>
+                  <CommandEmpty>No categories found.</CommandEmpty>
+                  <CommandGroup>
+                    {getSortedCategories().map((category) => (
+                      <CommandItem
+                        key={category.value}
+                        value={category.label}
+                        onSelect={() => handleMultiSelectChange("categories", category.value)}
+                      >
+                        <div className="flex items-center w-full">
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4 flex-shrink-0",
+                              (formData.categories || []).includes(category.value)
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          <span className={cn(
+                            "truncate",
+                            category.level === 1 && "font-bold"
+                          )}>
+                            {category.label}
+                          </span>
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="description">Description</Label>
+          <Textarea
+            id="description"
+            name="description"
+            value={formData.description || ""}
+            onChange={handleTextAreaChange}
+          />
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -149,212 +968,20 @@ export function TemplateManagement() {
           <DialogTrigger asChild>
             <Button>Create Template</Button>
           </DialogTrigger>
-          <DialogContent className="max-w-2xl">
-            <DialogHeader>
+          <DialogContent className="max-w-2xl max-h-[95vh] flex flex-col p-6">
+            <DialogHeader className="px-0">
               <DialogTitle>Create Import Template</DialogTitle>
               <DialogDescription>
                 Create a new template for importing products. Company and Product Type combination must be unique.
               </DialogDescription>
             </DialogHeader>
-            <form onSubmit={handleSubmit}>
-              <ScrollArea className="h-[60vh]">
-                <div className="grid gap-4 py-4">
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="company">Company *</Label>
-                      <Input
-                        id="company"
-                        name="company"
-                        value={formData.company}
-                        onChange={handleInputChange}
-                        required
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="product_type">Product Type *</Label>
-                      <Input
-                        id="product_type"
-                        name="product_type"
-                        value={formData.product_type}
-                        onChange={handleInputChange}
-                        required
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="supplier">Supplier</Label>
-                    <Input
-                      id="supplier"
-                      name="supplier"
-                      value={formData.supplier || ""}
-                      onChange={handleInputChange}
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="msrp">MSRP</Label>
-                      <Input
-                        id="msrp"
-                        name="msrp"
-                        type="number"
-                        step="0.01"
-                        value={formData.msrp || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="cost_each">Cost Each</Label>
-                      <Input
-                        id="cost_each"
-                        name="cost_each"
-                        type="number"
-                        step="0.01"
-                        value={formData.cost_each || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="qty_per_unit">Quantity per Unit</Label>
-                      <Input
-                        id="qty_per_unit"
-                        name="qty_per_unit"
-                        type="number"
-                        value={formData.qty_per_unit || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="case_qty">Case Quantity</Label>
-                      <Input
-                        id="case_qty"
-                        name="case_qty"
-                        type="number"
-                        value={formData.case_qty || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="hts_code">HTS Code</Label>
-                    <Input
-                      id="hts_code"
-                      name="hts_code"
-                      value={formData.hts_code || ""}
-                      onChange={handleInputChange}
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="description">Description</Label>
-                    <Input
-                      id="description"
-                      name="description"
-                      value={formData.description || ""}
-                      onChange={handleInputChange}
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="weight">Weight</Label>
-                      <Input
-                        id="weight"
-                        name="weight"
-                        type="number"
-                        step="0.01"
-                        value={formData.weight || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="length">Length</Label>
-                      <Input
-                        id="length"
-                        name="length"
-                        type="number"
-                        step="0.01"
-                        value={formData.length || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="width">Width</Label>
-                      <Input
-                        id="width"
-                        name="width"
-                        type="number"
-                        step="0.01"
-                        value={formData.width || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="height">Height</Label>
-                      <Input
-                        id="height"
-                        name="height"
-                        type="number"
-                        step="0.01"
-                        value={formData.height || ""}
-                        onChange={handleNumberInputChange}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="tax_cat">Tax Category</Label>
-                      <Input
-                        id="tax_cat"
-                        name="tax_cat"
-                        value={formData.tax_cat || ""}
-                        onChange={handleInputChange}
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="size_cat">Size Category</Label>
-                      <Input
-                        id="size_cat"
-                        name="size_cat"
-                        value={formData.size_cat || ""}
-                        onChange={handleInputChange}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="categories">Categories (comma-separated)</Label>
-                    <Input
-                      id="categories"
-                      name="categories"
-                      value={formData.categories?.join(", ") || ""}
-                      onChange={handleArrayInputChange}
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="ship_restrictions">
-                      Shipping Restrictions (comma-separated)
-                    </Label>
-                    <Input
-                      id="ship_restrictions"
-                      name="ship_restrictions"
-                      value={formData.ship_restrictions?.join(", ") || ""}
-                      onChange={handleArrayInputChange}
-                    />
-                  </div>
+            <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
+              <ScrollArea className="flex-1 -mr-6 pr-6 overflow-y-auto">
+                <div className="pr-4">
+                  {renderFormFields()}
                 </div>
               </ScrollArea>
-              <DialogFooter>
+              <DialogFooter className="px-0 mt-6">
                 <Button type="submit" disabled={createMutation.isPending}>
                   {createMutation.isPending ? "Creating..." : "Create Template"}
                 </Button>
@@ -364,51 +991,50 @@ export function TemplateManagement() {
         </Dialog>
       </div>
 
+      <div className="flex items-center gap-4">
+        <Input
+          placeholder="Search templates..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="max-w-sm"
+        />
+      </div>
+
       {isLoading ? (
         <div>Loading templates...</div>
       ) : (
         <div className="border rounded-lg">
           <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Company</TableHead>
-                <TableHead>Product Type</TableHead>
-                <TableHead>Supplier</TableHead>
-                <TableHead>Last Updated</TableHead>
-                <TableHead className="w-[100px]">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {templates?.map((template) => (
-                <TableRow key={template.id}>
-                  <TableCell>{template.company}</TableCell>
-                  <TableCell>{template.product_type}</TableCell>
-                  <TableCell>{template.supplier || "-"}</TableCell>
-                  <TableCell>
-                    {new Date(template.updated_at).toLocaleDateString()}
-                  </TableCell>
-                  <TableCell>
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() => {
-                        if (
-                          window.confirm(
-                            "Are you sure you want to delete this template?"
-                          )
-                        ) {
-                          deleteMutation.mutate(template.id);
-                        }
-                      }}
-                    >
-                      Delete
-                    </Button>
-                  </TableCell>
+            <TableHeader className="bg-muted">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  ))}
                 </TableRow>
               ))}
-              {templates?.length === 0 && (
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id} className="hover:bg-gray-100">
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id} className="pl-6">
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
                 <TableRow>
-                  <TableCell colSpan={5} className="text-center">
+                  <TableCell colSpan={columns.length} className="text-center">
                     No templates found
                   </TableCell>
                 </TableRow>
@@ -417,6 +1043,57 @@ export function TemplateManagement() {
           </Table>
         </div>
       )}
+
+      <Dialog open={isEditOpen} onOpenChange={(open) => {
+        if (!open) {
+          setEditingTemplate(null);
+          setFormData({ company: "", product_type: "" });
+        }
+        setIsEditOpen(open);
+      }}>
+        <DialogContent className="max-w-2xl max-h-[95vh] flex flex-col p-6">
+          <DialogHeader className="px-0">
+            <DialogTitle>Edit Template</DialogTitle>
+            <DialogDescription>
+              Edit the template details. Company and Product Type combination must be unique.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
+            <ScrollArea className="flex-1 overflow-y-auto">
+              <div className="pr-4">
+                {renderFormFields()}
+              </div>
+            </ScrollArea>
+            <DialogFooter className="px-0 mt-4">
+              <Button type="submit" disabled={createMutation.isPending}>
+                {createMutation.isPending ? "Updating..." : "Update Template"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Template</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this template? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => {
+              setIsDeleteOpen(false);
+              setTemplateToDelete(null);
+            }}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConfirm}>
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/inventory/src/components/ui/textarea.tsx b/inventory/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/inventory/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/inventory/src/index.css b/inventory/src/index.css
index a1bcfde..a2fa817 100644
--- a/inventory/src/index.css
+++ b/inventory/src/index.css
@@ -99,3 +99,14 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx
index f6b0437..7bcb7db 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useMemo, useState, useEffect, memo } from "react"
 import { useRsi } from "../../hooks/useRsi"
-import type { Meta } from "./types"
+import type { Meta, Error } from "./types"
 import { addErrorsAndRunHooks } from "./utils/dataMutations"
-import type { Data, SelectOption } from "../../types"
+import type { Data, SelectOption, Result } from "../../types"
 import { Check, ChevronsUpDown, ArrowDown, AlertCircle, Loader2 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import {
@@ -63,12 +63,44 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  DialogFooter,
 } from "@/components/ui/dialog"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Code } from "@/components/ui/code"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+// Template interface
+interface Template {
+  id: number;
+  company: string;
+  product_type: string;
+  [key: string]: string | number | boolean | undefined;
+}
+
+// Extend Meta type with template
+type ExtendedMeta = Meta & {
+  __template?: string;
+}
+
+// Define a type for the row data that includes both Data and Meta
+type RowData<T extends string> = Data<T> & ExtendedMeta;
+
+// Define template-related types
+type TemplateState = {
+  selectedTemplateId: string | null;
+  showSaveTemplateDialog: boolean;
+  newTemplateName: string;
+  newTemplateType: string;
+}
 
 type Props<T extends string> = {
-  initialData: (Data<T> & Meta)[]
+  initialData: RowData<T>[]
   file: File
   onBack?: () => void
 }
@@ -618,7 +650,7 @@ const ColumnHeader = memo(({
   onCopyDown 
 }: { 
   field: Field<string>
-  data: (Data<string> & Meta)[]
+  data: (Data<string> & ExtendedMeta)[]
   onCopyDown: (key: string) => void 
 }) => {
   return (
@@ -704,11 +736,288 @@ type DeepReadonlyField<T extends string> = {
 type ReadonlyField<T extends string> = Readonly<Field<T>>;
 type ReadonlyFields<T extends string> = readonly ReadonlyField<T>[];
 
-export const ValidationStep = <T extends string>({ initialData, file, onBack }: Props<T>) => {
-  const { translations, fields, onClose, onSubmit, rowHook, tableHook, allowInvalidSubmit } = useRsi<T>()
-  const { toast } = useToast()
+// Hook for managing templates
+function useTemplates<T extends string>(
+  data: RowData<T>[],
+  setData: React.Dispatch<React.SetStateAction<RowData<T>[]>>,
+  toastFn: typeof useToast,
+  rowSelection: RowSelectionState
+) {
+  const { toast } = toastFn()
+  const [templates, setTemplates] = useState<Template[]>([])
+  const [state, setState] = useState<TemplateState>({
+    selectedTemplateId: null,
+    showSaveTemplateDialog: false,
+    newTemplateName: "",
+    newTemplateType: "",
+  })
 
-  const [data, setData] = useState<(Data<T> & Meta)[]>(initialData)
+  // Fetch templates
+  useEffect(() => {
+    const fetchTemplates = async () => {
+      try {
+        const response = await fetch(`${config.apiUrl}/templates`)
+        if (!response.ok) throw new Error('Failed to fetch templates')
+        const templateData = await response.json()
+        setTemplates(templateData)
+      } catch (error) {
+        console.error('Error fetching templates:', error)
+        toast({
+          title: "Error",
+          description: "Failed to load templates",
+          variant: "destructive",
+        })
+      }
+    }
+    fetchTemplates()
+  }, [toast])
+
+  const applyTemplate = useCallback(async (templateId: string, rowIndices?: number[]) => {
+    if (!templateId) return
+    
+    const template = templates?.find(t => t.id.toString() === templateId)
+    if (!template) return
+
+    setData((prevData: RowData<T>[]) => {
+      const newData = [...prevData]
+      const indicesToUpdate = rowIndices || newData.map((_, i) => i)
+      
+      indicesToUpdate.forEach(index => {
+        const row = newData[index]
+        if (!row) return
+
+        // Apply all template fields except id, company, product_type, created_at, and updated_at
+        Object.entries(template).forEach(([key, value]) => {
+          if (!['id', 'company', 'product_type', 'created_at', 'updated_at'].includes(key)) {
+            // Handle numeric values that might be stored as strings
+            if (typeof value === 'string' && /^\d+(\.\d+)?$/.test(value)) {
+              // If it's a price field, add the dollar sign
+              if (['msrp', 'cost_each'].includes(key)) {
+                row[key as keyof typeof row] = `$${value}` as any;
+              } else {
+                row[key as keyof typeof row] = value as any;
+              }
+            } 
+            // Handle array values
+            else if (Array.isArray(value)) {
+              row[key as keyof typeof row] = [...value] as any;
+            }
+            // Handle other values
+            else {
+              row[key as keyof typeof row] = value as any;
+            }
+          }
+        })
+
+        // Update the template reference
+        row.__template = templateId;
+      })
+
+      return newData
+    })
+
+    toast({
+      title: "Template Applied",
+      description: `Applied template to ${rowIndices?.length || data.length} row(s)`,
+    })
+  }, [templates, data.length, setData, toast])
+
+  const saveAsTemplate = useCallback(async () => {
+    const { newTemplateName, newTemplateType } = state
+    if (!newTemplateName || !newTemplateType) {
+      toast({
+        title: "Error",
+        description: "Company and Product Type are required",
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      // Get the selected row using rowSelection
+      const selectedRowIndex = Number(Object.keys(rowSelection)[0]);
+      const selectedRow = data[selectedRowIndex];
+      if (!selectedRow) throw new Error("No row selected");
+
+      const { __index, __errors, __template, ...templateData } = selectedRow;
+
+      // Clean numeric values and prepare template data
+      const cleanedData = Object.entries(templateData).reduce((acc, [key, value]) => {
+        // Handle numeric values with dollar signs
+        if (typeof value === 'string' && value.includes('$')) {
+          acc[key] = value.replace(/[$,\s]/g, '').trim();
+        } 
+        // Handle array values (like categories or ship_restrictions)
+        else if (Array.isArray(value)) {
+          acc[key] = value;
+        }
+        // Handle other values
+        else {
+          acc[key] = value;
+        }
+        return acc;
+      }, {} as Record<string, any>);
+
+      // Log the cleaned data before sending
+      console.log('Saving template with cleaned data:', {
+        ...cleanedData,
+        company: newTemplateName,
+        product_type: newTemplateType,
+      });
+
+      const response = await fetch(`${config.apiUrl}/templates`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ...cleanedData,
+          company: newTemplateName,
+          product_type: newTemplateType,
+        }),
+      });
+
+      // Log the raw response for debugging
+      console.log('Template save response status:', response.status);
+      const responseData = await response.json();
+      console.log('Template save response:', responseData);
+
+      if (!response.ok) {
+        throw new Error(responseData.error || responseData.details || "Failed to save template");
+      }
+
+      // Update the templates list with the new template
+      const newTemplate = responseData;
+      setTemplates(prev => [...prev, newTemplate]);
+
+      // Update the row to show it's using this template
+      setData(prev => {
+        const newData = [...prev];
+        newData[selectedRowIndex] = {
+          ...newData[selectedRowIndex],
+          __template: newTemplate.id.toString()
+        };
+        return newData;
+      });
+
+      toast({
+        title: "Success",
+        description: "Template saved successfully",
+      })
+
+      setState(prev => ({
+        ...prev,
+        showSaveTemplateDialog: false,
+        newTemplateName: "",
+        newTemplateType: "",
+      }))
+
+    } catch (error) {
+      console.error('Template save error:', error);
+      toast({
+        title: "Error",
+        description: error instanceof Error ? error.message : "Failed to save template",
+        variant: "destructive",
+      })
+    }
+  }, [state, data, rowSelection, toast, setTemplates, setState, setData]);
+
+  return {
+    templates,
+    selectedTemplateId: state.selectedTemplateId,
+    showSaveTemplateDialog: state.showSaveTemplateDialog,
+    setSelectedTemplateId: (id: string | null) => setState(prev => ({ ...prev, selectedTemplateId: id })),
+    setShowSaveTemplateDialog: (show: boolean) => setState(prev => ({ ...prev, showSaveTemplateDialog: show })),
+    setNewTemplateName: (name: string) => setState(prev => ({ ...prev, newTemplateName: name })),
+    setNewTemplateType: (type: string) => setState(prev => ({ ...prev, newTemplateType: type })),
+    newTemplateName: state.newTemplateName,
+    newTemplateType: state.newTemplateType,
+    applyTemplate,
+    saveAsTemplate,
+  }
+}
+
+// Add this component before the ValidationStep component
+const SaveTemplateDialog = memo(({ 
+  isOpen, 
+  onClose,
+  onSave,
+}: { 
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (company: string, productType: string) => void;
+}) => {
+  const [company, setCompany] = useState("");
+  const [productType, setProductType] = useState("");
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        onClose();
+        setCompany("");
+        setProductType("");
+      }
+    }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Save as Template</DialogTitle>
+          <DialogDescription>
+            Enter the company and product type for this template.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label htmlFor="company" className="text-sm font-medium">
+              Company
+            </label>
+            <Input
+              id="company"
+              value={company}
+              onChange={(e) => setCompany(e.target.value)}
+              placeholder="Enter company name"
+            />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="productType" className="text-sm font-medium">
+              Product Type
+            </label>
+            <Input
+              id="productType"
+              value={productType}
+              onChange={(e) => setProductType(e.target.value)}
+              placeholder="Enter product type"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave(company, productType);
+              onClose();
+              setCompany("");
+              setProductType("");
+            }}
+            disabled={!company || !productType}
+          >
+            Save Template
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+});
+
+export const ValidationStep = <T extends string>({ 
+  initialData,
+  file,
+  onBack}: Props<T>) => {
+  const { translations, fields, onClose, onSubmit, rowHook, tableHook, allowInvalidSubmit } = useRsi<T>();
+  const { toast } = useToast();
+
+  const [data, setData] = useState<(Data<T> & ExtendedMeta)[]>(initialData)
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [filterByErrors, setFilterByErrors] = useState(false)
   const [showSubmitAlert, setShowSubmitAlert] = useState(false)
@@ -745,6 +1054,17 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
     isLoading: false,
   });
   
+  const {
+    templates,
+    selectedTemplateId,
+    showSaveTemplateDialog,
+    setSelectedTemplateId,
+    setShowSaveTemplateDialog,
+    applyTemplate,
+    saveAsTemplate,
+    setNewTemplateName,
+    setNewTemplateType,
+  } = useTemplates(data, setData, useToast, rowSelection)
 
   // Memoize filtered data to prevent recalculation on every render
   const filteredData = useMemo(() => {
@@ -755,16 +1075,15 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
   }, [data, filterByErrors])
 
   const updateData = useCallback(
-    async (rows: typeof data, indexes?: number[]) => {
-      // Set the data immediately first
+    async (rows: (Data<T> & ExtendedMeta)[], indexes?: number[]) => {
       setData(rows);
       
-      // Then run the hooks if they exist
       if (rowHook?.constructor.name === "AsyncFunction" || tableHook?.constructor.name === "AsyncFunction") {
         const updatedData = await addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes);
-        setData(updatedData);
+        setData(updatedData as (Data<T> & ExtendedMeta)[]);
       } else {
-        addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes).then(setData);
+        const result = await addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes);
+        setData(result as (Data<T> & ExtendedMeta)[]);
       }
     },
     [rowHook, tableHook, fields],
@@ -813,8 +1132,9 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
     setCopyDownField(null)
   }, [data, updateData, copyDownField])
 
+  // Update columns definition to include template column
   const columns = useMemo(() => {
-    const baseColumns: ColumnDef<Data<T> & Meta>[] = [
+    const baseColumns: ColumnDef<Data<T> & ExtendedMeta>[] = [
       {
         id: "select",
         header: ({ table }) => (
@@ -839,7 +1159,37 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
         enableHiding: false,
         size: 50,
       },
-      ...(Array.from(fields as ReadonlyFields<T>).map((field): ColumnDef<Data<T> & Meta> => ({
+      {
+        id: "template",
+        header: "Template",
+        cell: ({ row }) => (
+          <Select
+            value={row.original.__template || ""}
+            onValueChange={(value) => {
+              const newData = [...data];
+              const index = newData.findIndex(r => r.__index === row.original.__index);
+              if (index !== -1) {
+                newData[index] = { ...newData[index], __template: value };
+                setData(newData);
+                applyTemplate(value, [index]);
+              }
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select template" />
+            </SelectTrigger>
+            <SelectContent>
+              {templates?.map((template) => (
+                <SelectItem key={template.id} value={template.id.toString()}>
+                  {template.company} - {template.product_type}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ),
+        size: 200,
+      },
+      ...(Array.from(fields as ReadonlyFields<T>).map((field): ColumnDef<Data<T> & ExtendedMeta> => ({
         accessorKey: field.key,
         header: () => (
           <div className="group">
@@ -872,7 +1222,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
       })))
     ]
     return baseColumns
-  }, [fields, updateRows, data, copyValueDown])
+  }, [fields, updateRows, data, copyValueDown, templates, applyTemplate])
 
   const table = useReactTable({
     data: filteredData,
@@ -974,9 +1324,9 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
   }, [])
 
   const submitData = useCallback(async () => {
-    const calculatedData = data.reduce(
+    const calculatedData: Result<T> = data.reduce(
       (acc, value) => {
-        const { __index, __errors, ...values } = value
+        const { __index, __errors, __template, ...values } = value
         
         const normalizedValues = Object.entries(values).reduce((obj, [key, val]) => {
           const field = Array.from(fields as ReadonlyFields<T>).find((f) => f.key === key)
@@ -1010,10 +1360,12 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
           onClose()
         })
         .catch((err: Error) => {
+          const defaultMessage = translations.alerts.submitError.defaultMessage
+          const errorMessage = typeof defaultMessage === 'string' ? defaultMessage : 'An error occurred'
           toast({
             variant: "destructive",
             title: translations.alerts.submitError.title,
-            description: err?.message || translations.alerts.submitError.defaultMessage,
+            description: String(err?.message || errorMessage),
           })
         })
         .finally(() => {
@@ -1346,6 +1698,15 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
           </ScrollArea>
         </DialogContent>
       </Dialog>
+      <SaveTemplateDialog
+        isOpen={showSaveTemplateDialog}
+        onClose={() => setShowSaveTemplateDialog(false)}
+        onSave={(company, productType) => {
+          setNewTemplateName(company);
+          setNewTemplateType(productType);
+          saveAsTemplate();
+        }}
+      />
       <div className="flex-1 overflow-hidden">
         <div className="h-full flex flex-col">
           <div className="px-8 pt-6">
@@ -1354,10 +1715,58 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
                 {translations.validationStep.title}
               </h2>
               <div className="flex flex-wrap items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <Select
+                    value={selectedTemplateId || ""}
+                    onValueChange={(value) => {
+                      setSelectedTemplateId(value);
+                      const selectedRows = Object.keys(rowSelection).map(Number);
+                      if (selectedRows.length === 0) {
+                        toast({
+                          title: "No rows selected",
+                          description: "Please select rows to apply the template to",
+                          variant: "destructive",
+                        });
+                        return;
+                      }
+                      applyTemplate(value, selectedRows);
+                    }}
+                  >
+                    <SelectTrigger className="w-[200px]">
+                      <SelectValue placeholder="Apply template to selected" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {templates?.map((template) => (
+                        <SelectItem key={template.id} value={template.id.toString()}>
+                          {template.company} - {template.product_type}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const selectedRows = Object.keys(rowSelection);
+                      if (selectedRows.length !== 1) {
+                        toast({
+                          title: "Invalid selection",
+                          description: "Please select exactly one row to save as a template",
+                          variant: "destructive",
+                        });
+                        return;
+                      }
+                      setShowSaveTemplateDialog(true);
+                    }}
+                  >
+                    Save Selected as Template
+                  </Button>
+                </div>
                 <Button 
                   variant="outline" 
                   size="sm" 
                   onClick={deleteSelectedRows}
+                  disabled={Object.keys(rowSelection).length === 0}
                 >
                   {translations.validationStep.discardButtonTitle}
                 </Button>
diff --git a/inventory/src/pages/Settings.tsx b/inventory/src/pages/Settings.tsx
index e3e3de9..d71432d 100644
--- a/inventory/src/pages/Settings.tsx
+++ b/inventory/src/pages/Settings.tsx
@@ -24,7 +24,7 @@ export function Settings() {
             Calculation Settings
           </TabsTrigger>
           <TabsTrigger value="templates">
-            Import Templates
+            Template Management
           </TabsTrigger>
         </TabsList>