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,
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user