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,
DeleteIngredientModal
} 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 from '../../../../components/domain/inventory/AddStockModal';
@@ -35,6 +37,7 @@ const InventoryPage: React.FC = () => {
const [showBatches, setShowBatches] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [showAddBatch, setShowAddBatch] = useState(false);
const [isWizardOpen, setIsWizardOpen] = useState(false);
const tenantId = useTenantId();
const queryClient = useQueryClient();
@@ -339,7 +342,14 @@ const InventoryPage: React.FC = () => {
// Handle new item creation
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
@@ -818,6 +828,14 @@ const InventoryPage: React.FC = () => {
/>
</>
)}
{/* Unified Add Wizard */}
<UnifiedAddWizard
isOpen={isWizardOpen}
onClose={() => setIsWizardOpen(false)}
onComplete={handleWizardComplete}
initialItemType="inventory"
/>
</div>
);
};

View File

@@ -11,6 +11,8 @@ import { useTranslation } from 'react-i18next';
import { statusColors } from '../../../../styles/colors';
import { DeleteSupplierModal, SupplierPriceListViewModal, PriceListModal } from '../../../../components/domain/suppliers';
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 [activeTab] = useState('all');
@@ -27,6 +29,7 @@ const SuppliersPage: React.FC = () => {
const [showPriceListView, setShowPriceListView] = useState(false);
const [showAddPrice, setShowAddPrice] = useState(false);
const [priceListSupplier, setPriceListSupplier] = useState<any>(null);
const [isWizardOpen, setIsWizardOpen] = useState(false);
// Get tenant ID from tenant store (preferred) or auth user (fallback)
const currentTenant = useCurrentTenant();
@@ -77,6 +80,13 @@ const SuppliersPage: React.FC = () => {
const deletePriceListMutation = useDeleteSupplierPriceList();
// 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) => {
await softDeleteMutation.mutateAsync({ tenantId, supplierId });
};
@@ -229,7 +239,7 @@ const SuppliersPage: React.FC = () => {
label: "Nuevo Proveedor",
variant: "primary" as const,
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"
actionLabel="Nuevo Proveedor"
actionIcon={Plus}
onAction={() => setShowAddModal(true)}
onAction={() => setIsWizardOpen(true)}
/>
)}
@@ -1044,6 +1054,14 @@ const SuppliersPage: React.FC = () => {
onSaveComplete={handlePriceListSaveComplete}
/>
)}
{/* Unified Add Wizard */}
<UnifiedAddWizard
isOpen={isWizardOpen}
onClose={() => setIsWizardOpen(false)}
onComplete={handleWizardComplete}
initialItemType="supplier"
/>
</div>
);
};