produdct creation implentataion

src/features/family/pages/NewFamily.tsx

@@ -25,8 +25,8 @@ import { Select } from "../../../components/customs/Select";
 import { notify } from '../../../services/toast';
 import { familyService } from '../services/family.service';
 import { generateCodeFromName } from '../../../utils/validators';
+import { DataTable } from '../../../components/customs/DataTable';
 import { CategoryTreeSelect } from '../../../components/customs/CategoryTreeSelect';
-import { VariantConfigurationStep } from '../components/VariantConfigurationStep';
 
 const TABS = [
   { id: 'basic', label: 'Basic Information', icon: FileText, step: 1 },

src/features/variants/pages/VariantList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState } from "react";
 import { Upload, Download, Package, CheckCircle, Edit3, XCircle } from "lucide-react";
 import { Button } from "../../../components/customs/Button";
 import { PageWrapper } from "../../../components/layouts/PageWrapper";
@@ -10,7 +10,6 @@ import { ProtectedRoute } from "../../../components/layouts/ProtectedRoute";
 import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
 import { StatsCard } from "../../../components/customs/StatsCard";
 import { ConfirmationModal } from "../../../components/modals/ConfirmationModal";
-import { VariantToolbar } from "../components/VariantToolbar";
 
 export default function VariantList() {
   const { variants, fetchVariants, deleteVariant } = useVariant();
@@ -18,8 +17,6 @@ export default function VariantList() {
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; id: string; name: string }>({ isOpen: false, id: "", name: "" });
   const [isDeleting, setIsDeleting] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState('');
 
   useEffect(() => {
     fetchVariants();
@@ -38,17 +35,6 @@ export default function VariantList() {
     }
   };
 
-  const filteredVariants = useMemo(() => {
-    return variants.filter(v => {
-      const matchSearch = !searchTerm ||
-        v.sku.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        v.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (v.parentProductName && v.parentProductName.toLowerCase().includes(searchTerm.toLowerCase()));
-      const matchStatus = !statusFilter || v.status === statusFilter;
-      return matchSearch && matchStatus;
-    });
-  }, [variants, searchTerm, statusFilter]);
-
   // Stats Calculations
   const total = variants.length;
   const draftCount = variants.filter(v => v.status === 'draft').length;
@@ -139,23 +125,11 @@ export default function VariantList() {
           />
         </div>
 
-        {/* Toolbar */}
-        <div className="mb-4">
-          <VariantToolbar
-            searchTerm={searchTerm}
-            onSearchChange={setSearchTerm}
-            selectedStatus={statusFilter}
-            onStatusChange={setStatusFilter}
-            selectedCount={selectedIds.size}
-            onBulkUpdate={() => alert(`Bulk updating ${selectedIds.size} variants`)}
-          />
-        </div>
-
         {/* Data Table */}
         <div className="mb-8">
           <DataTable
             columns={columns}
-            data={filteredVariants}
+            data={variants}
             selectable
             selectedIds={selectedIds}
             onSelectionChange={setSelectedIds}