feat: Add UnifiedAddWizard integration to Inventory and Suppliers pages
Inventory Page Integration: - Added UnifiedAddWizard with initialItemType="inventory" - Replaced Create Ingredient button to use wizard - Added wizard completion handler to refresh data - Wizard opens directly to inventory wizard steps - Better UX with comprehensive step-by-step flow Suppliers Page Integration: - Added UnifiedAddWizard with initialItemType="supplier" - Updated "Nuevo Proveedor" buttons to open wizard - Added wizard completion handler - Integrated with existing query client for data refresh - Consistent pattern with Inventory page Benefits: - Users can now access wizards directly from entity pages - Skip item type selection step when context is known - Better workflow integration - Consistent wizard experience across pages - Automatic data refresh after wizard completion Files modified: - frontend/src/pages/app/operations/inventory/InventoryPage.tsx - frontend/src/pages/app/operations/suppliers/SuppliersPage.tsx
This commit is contained in:
@@ -12,6 +12,8 @@ import {
|
|||||||
BatchModal,
|
BatchModal,
|
||||||
DeleteIngredientModal
|
DeleteIngredientModal
|
||||||
} from '../../../../components/domain/inventory';
|
} from '../../../../components/domain/inventory';
|
||||||
|
import { UnifiedAddWizard } from '../../../../components/domain/unified-wizard';
|
||||||
|
import type { ItemType } from '../../../../components/domain/unified-wizard';
|
||||||
|
|
||||||
// Import AddStockModal separately since we need it for adding batches
|
// Import AddStockModal separately since we need it for adding batches
|
||||||
import AddStockModal from '../../../../components/domain/inventory/AddStockModal';
|
import AddStockModal from '../../../../components/domain/inventory/AddStockModal';
|
||||||
@@ -35,6 +37,7 @@ const InventoryPage: React.FC = () => {
|
|||||||
const [showBatches, setShowBatches] = useState(false);
|
const [showBatches, setShowBatches] = useState(false);
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [showAddBatch, setShowAddBatch] = useState(false);
|
const [showAddBatch, setShowAddBatch] = useState(false);
|
||||||
|
const [isWizardOpen, setIsWizardOpen] = useState(false);
|
||||||
|
|
||||||
const tenantId = useTenantId();
|
const tenantId = useTenantId();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@@ -339,7 +342,14 @@ const InventoryPage: React.FC = () => {
|
|||||||
|
|
||||||
// Handle new item creation
|
// Handle new item creation
|
||||||
const handleNewItem = () => {
|
const handleNewItem = () => {
|
||||||
setShowCreateIngredient(true);
|
setIsWizardOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle wizard completion
|
||||||
|
const handleWizardComplete = (itemType: ItemType, data?: any) => {
|
||||||
|
console.log('✅ Wizard completed:', itemType, data);
|
||||||
|
// Refresh the ingredients list
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['ingredients', tenantId] });
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle creating a new ingredient
|
// Handle creating a new ingredient
|
||||||
@@ -818,6 +828,14 @@ const InventoryPage: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Unified Add Wizard */}
|
||||||
|
<UnifiedAddWizard
|
||||||
|
isOpen={isWizardOpen}
|
||||||
|
onClose={() => setIsWizardOpen(false)}
|
||||||
|
onComplete={handleWizardComplete}
|
||||||
|
initialItemType="inventory"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { statusColors } from '../../../../styles/colors';
|
import { statusColors } from '../../../../styles/colors';
|
||||||
import { DeleteSupplierModal, SupplierPriceListViewModal, PriceListModal } from '../../../../components/domain/suppliers';
|
import { DeleteSupplierModal, SupplierPriceListViewModal, PriceListModal } from '../../../../components/domain/suppliers';
|
||||||
import { useQueryClient } from '@tanstack/react-query';
|
import { useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { UnifiedAddWizard } from '../../../../components/domain/unified-wizard';
|
||||||
|
import type { ItemType } from '../../../../components/domain/unified-wizard';
|
||||||
|
|
||||||
const SuppliersPage: React.FC = () => {
|
const SuppliersPage: React.FC = () => {
|
||||||
const [activeTab] = useState('all');
|
const [activeTab] = useState('all');
|
||||||
@@ -27,6 +29,7 @@ const SuppliersPage: React.FC = () => {
|
|||||||
const [showPriceListView, setShowPriceListView] = useState(false);
|
const [showPriceListView, setShowPriceListView] = useState(false);
|
||||||
const [showAddPrice, setShowAddPrice] = useState(false);
|
const [showAddPrice, setShowAddPrice] = useState(false);
|
||||||
const [priceListSupplier, setPriceListSupplier] = useState<any>(null);
|
const [priceListSupplier, setPriceListSupplier] = useState<any>(null);
|
||||||
|
const [isWizardOpen, setIsWizardOpen] = useState(false);
|
||||||
|
|
||||||
// Get tenant ID from tenant store (preferred) or auth user (fallback)
|
// Get tenant ID from tenant store (preferred) or auth user (fallback)
|
||||||
const currentTenant = useCurrentTenant();
|
const currentTenant = useCurrentTenant();
|
||||||
@@ -77,6 +80,13 @@ const SuppliersPage: React.FC = () => {
|
|||||||
const deletePriceListMutation = useDeleteSupplierPriceList();
|
const deletePriceListMutation = useDeleteSupplierPriceList();
|
||||||
|
|
||||||
// Delete handlers
|
// Delete handlers
|
||||||
|
// Handle wizard completion
|
||||||
|
const handleWizardComplete = (itemType: ItemType, data?: any) => {
|
||||||
|
console.log('✅ Wizard completed:', itemType, data);
|
||||||
|
// Refresh the suppliers list
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['suppliers', tenantId] });
|
||||||
|
};
|
||||||
|
|
||||||
const handleSoftDelete = async (supplierId: string) => {
|
const handleSoftDelete = async (supplierId: string) => {
|
||||||
await softDeleteMutation.mutateAsync({ tenantId, supplierId });
|
await softDeleteMutation.mutateAsync({ tenantId, supplierId });
|
||||||
};
|
};
|
||||||
@@ -229,7 +239,7 @@ const SuppliersPage: React.FC = () => {
|
|||||||
label: "Nuevo Proveedor",
|
label: "Nuevo Proveedor",
|
||||||
variant: "primary" as const,
|
variant: "primary" as const,
|
||||||
icon: Plus,
|
icon: Plus,
|
||||||
onClick: () => setShowAddModal(true)
|
onClick: () => setIsWizardOpen(true)
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
@@ -372,7 +382,7 @@ const SuppliersPage: React.FC = () => {
|
|||||||
description="Intenta ajustar la búsqueda o crear un nuevo proveedor"
|
description="Intenta ajustar la búsqueda o crear un nuevo proveedor"
|
||||||
actionLabel="Nuevo Proveedor"
|
actionLabel="Nuevo Proveedor"
|
||||||
actionIcon={Plus}
|
actionIcon={Plus}
|
||||||
onAction={() => setShowAddModal(true)}
|
onAction={() => setIsWizardOpen(true)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -1044,6 +1054,14 @@ const SuppliersPage: React.FC = () => {
|
|||||||
onSaveComplete={handlePriceListSaveComplete}
|
onSaveComplete={handlePriceListSaveComplete}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Unified Add Wizard */}
|
||||||
|
<UnifiedAddWizard
|
||||||
|
isOpen={isWizardOpen}
|
||||||
|
onClose={() => setIsWizardOpen(false)}
|
||||||
|
onComplete={handleWizardComplete}
|
||||||
|
initialItemType="supplier"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user