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:
Claude
2025-11-09 21:51:57 +00:00
parent 3bf799618b
commit 8626cd47c9
2 changed files with 39 additions and 3 deletions

View File

@@ -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>
); );
}; };

View File

@@ -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>
); );
}; };