Fix column ordering/saving

inventory/src/components/products/ProductTable.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { ArrowUpDown, GripVertical } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -10,12 +9,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
 import {
   DndContext,
   DragEndEvent,
-  DragOverlay,
   DragStartEvent,
   MouseSensor,
   TouchSensor,
@@ -94,9 +91,10 @@ interface ProductTableProps {
   onSort: (column: keyof Product) => void;
   sortColumn: keyof Product;
   sortDirection: 'asc' | 'desc';
-  visibleColumns: Set<keyof Product>;
+  visibleColumns: Set<keyof Product | 'image'>;
   columnDefs: ColumnDef[];
-  onColumnOrderChange?: (columns: (keyof Product)[]) => void;
+  columnOrder: (keyof Product | 'image')[];
+  onColumnOrderChange?: (columns: (keyof Product | 'image')[]) => void;
 }
 
 interface SortableHeaderProps {
@@ -161,9 +159,10 @@ export function ProductTable({
   sortDirection,
   visibleColumns,
   columnDefs,
+  columnOrder,
   onColumnOrderChange,
 }: ProductTableProps) {
-  const [activeId, setActiveId] = React.useState<keyof Product | null>(null);
+  const [, setActiveId] = React.useState<keyof Product | null>(null);
   const sensors = useSensors(
     useSensor(MouseSensor, {
       activationConstraint: {
@@ -180,8 +179,8 @@ export function ProductTable({
 
   // Get ordered visible columns
   const orderedColumns = React.useMemo(() => {
-    return Array.from(visibleColumns);
+    return columnOrder.filter(col => visibleColumns.has(col));
-  }, [visibleColumns]);
+  }, [columnOrder, visibleColumns]);
 
   const handleDragStart = (event: DragStartEvent) => {
     setActiveId(event.active.id as keyof Product);
@@ -200,14 +199,6 @@ export function ProductTable({
     }
   };
 
-  const getSortIcon = (column: keyof Product) => {
-    if (sortColumn !== column) return <ArrowUpDown className="ml-2 h-4 w-4" />;
-    return (
-      <ArrowUpDown 
-        className={`ml-2 h-4 w-4 ${sortDirection === 'asc' ? 'rotate-180' : ''}`} 
-      />
-    );
-  };
 
   const getStockStatus = (status: string | undefined) => {
     if (!status) return null;

inventory/src/pages/Products.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import { ProductFilters } from '@/components/products/ProductFilters';
 import { ProductTable } from '@/components/products/ProductTable';
@@ -433,6 +433,7 @@ export function Products() {
               sortColumn={sortColumn}
               sortDirection={sortDirection}
               columnDefs={AVAILABLE_COLUMNS}
+              columnOrder={columnOrder}
               onSort={handleSort}
               onColumnOrderChange={handleColumnOrderChange}
             />