Files
bakery-ia/docs/archive/implementation-summaries/bakery-settings-page-changes.md
Urtzi Alfaro 3c3d3ce042 Fix Purchase Order modal and reorganize documentation
Frontend Changes:
- Fix runtime error: Remove undefined handleModify reference from ActionQueueCard in DashboardPage
- Migrate PurchaseOrderDetailsModal to use correct PurchaseOrderItem type from purchase_orders service
- Fix item display: Parse unit_price as string (Decimal) instead of number
- Use correct field names: item_notes instead of notes
- Remove deprecated PurchaseOrder types from suppliers.ts to prevent type conflicts
- Update CreatePurchaseOrderModal to use unified types
- Clean up API exports: Remove old PO hooks re-exported from suppliers
- Add comprehensive translations for PO modal (en, es, eu)

Documentation Reorganization:
- Move WhatsApp implementation docs to docs/03-features/notifications/whatsapp/
- Move forecast validation docs to docs/03-features/forecasting/
- Move specification docs to docs/03-features/specifications/
- Move deployment docs (Colima, K8s, VPS sizing) to docs/05-deployment/
- Archive completed implementation summaries to docs/archive/implementation-summaries/
- Delete obsolete FRONTEND_CHANGES_NEEDED.md
- Standardize filenames to lowercase with hyphens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 11:59:23 +01:00

7.9 KiB

BakerySettingsPage.tsx - Exact Code Changes

File Location

frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx


Change 1: Update imports (Line 3)

Find:

import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader } from 'lucide-react';

Replace with:

import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader, Bell } from 'lucide-react';

Change 2: Add NotificationSettings to type imports (Line 17)

Find:

import type {
  ProcurementSettings,
  InventorySettings,
  ProductionSettings,
  SupplierSettings,
  POSSettings,
  OrderSettings,
} from '../../../../api/types/settings';

Replace with:

import type {
  ProcurementSettings,
  InventorySettings,
  ProductionSettings,
  SupplierSettings,
  POSSettings,
  OrderSettings,
  NotificationSettings,
} from '../../../../api/types/settings';

Change 3: Import NotificationSettingsCard (After line 24)

Find:

import OrderSettingsCard from '../../database/ajustes/cards/OrderSettingsCard';

Add after it:

import NotificationSettingsCard from '../../database/ajustes/cards/NotificationSettingsCard';

Change 4: Add notification settings state (After line 100)

Find:

  const [orderSettings, setOrderSettings] = useState<OrderSettings | null>(null);

  const [errors, setErrors] = useState<Record<string, string>>({});

Change to:

  const [orderSettings, setOrderSettings] = useState<OrderSettings | null>(null);
  const [notificationSettings, setNotificationSettings] = useState<NotificationSettings | null>(null);

  const [errors, setErrors] = useState<Record<string, string>>({});

Change 5: Load notification settings (Line 139)

Find:

  React.useEffect(() => {
    if (settings) {
      setProcurementSettings(settings.procurement_settings);
      setInventorySettings(settings.inventory_settings);
      setProductionSettings(settings.production_settings);
      setSupplierSettings(settings.supplier_settings);
      setPosSettings(settings.pos_settings);
      setOrderSettings(settings.order_settings);
    }
  }, [settings]);

Replace with:

  React.useEffect(() => {
    if (settings) {
      setProcurementSettings(settings.procurement_settings);
      setInventorySettings(settings.inventory_settings);
      setProductionSettings(settings.production_settings);
      setSupplierSettings(settings.supplier_settings);
      setPosSettings(settings.pos_settings);
      setOrderSettings(settings.order_settings);
      setNotificationSettings(settings.notification_settings);
    }
  }, [settings]);

Change 6: Update validation in handleSaveOperationalSettings (Line 234)

Find:

  const handleSaveOperationalSettings = async () => {
    if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
        !supplierSettings || !posSettings || !orderSettings) {
      return;
    }

Replace with:

  const handleSaveOperationalSettings = async () => {
    if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
        !supplierSettings || !posSettings || !orderSettings || !notificationSettings) {
      return;
    }

Change 7: Add notification_settings to mutation (Line 244)

Find:

      await updateSettingsMutation.mutateAsync({
        tenantId,
        updates: {
          procurement_settings: procurementSettings,
          inventory_settings: inventorySettings,
          production_settings: productionSettings,
          supplier_settings: supplierSettings,
          pos_settings: posSettings,
          order_settings: orderSettings,
        },
      });

Replace with:

      await updateSettingsMutation.mutateAsync({
        tenantId,
        updates: {
          procurement_settings: procurementSettings,
          inventory_settings: inventorySettings,
          production_settings: productionSettings,
          supplier_settings: supplierSettings,
          pos_settings: posSettings,
          order_settings: orderSettings,
          notification_settings: notificationSettings,
        },
      });

Change 8: Update handleDiscard function (Line 315)

Find:

    if (settings) {
      setProcurementSettings(settings.procurement_settings);
      setInventorySettings(settings.inventory_settings);
      setProductionSettings(settings.production_settings);
      setSupplierSettings(settings.supplier_settings);
      setPosSettings(settings.pos_settings);
      setOrderSettings(settings.order_settings);
    }

Replace with:

    if (settings) {
      setProcurementSettings(settings.procurement_settings);
      setInventorySettings(settings.inventory_settings);
      setProductionSettings(settings.production_settings);
      setSupplierSettings(settings.supplier_settings);
      setPosSettings(settings.pos_settings);
      setOrderSettings(settings.order_settings);
      setNotificationSettings(settings.notification_settings);
    }

Change 9: Add notifications tab trigger (After line 389)

Find:

          <TabsTrigger value="operations" className="flex-1 sm:flex-none whitespace-nowrap">
            <SettingsIcon className="w-4 h-4 mr-2" />
            {t('bakery.tabs.operations')}
          </TabsTrigger>
        </TabsList>

Replace with:

          <TabsTrigger value="operations" className="flex-1 sm:flex-none whitespace-nowrap">
            <SettingsIcon className="w-4 h-4 mr-2" />
            {t('bakery.tabs.operations')}
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex-1 sm:flex-none whitespace-nowrap">
            <Bell className="w-4 h-4 mr-2" />
            {t('bakery.tabs.notifications')}
          </TabsTrigger>
        </TabsList>

Change 10: Add notifications tab content (After line 691, before )

Find:

          </div>
        </TabsContent>
      </Tabs>

      {/* Floating Save Button */}

Replace with:

          </div>
        </TabsContent>

        {/* Tab 4: Notifications */}
        <TabsContent value="notifications">
          <div className="space-y-6">
            {notificationSettings && (
              <NotificationSettingsCard
                settings={notificationSettings}
                onChange={(newSettings) => {
                  setNotificationSettings(newSettings);
                  handleOperationalSettingsChange();
                }}
                disabled={isLoading}
              />
            )}
          </div>
        </TabsContent>
      </Tabs>

      {/* Floating Save Button */}

Change 11: Update floating save button onClick (Line 717)

Find:

                <Button
                  variant="primary"
                  size="sm"
                  onClick={activeTab === 'operations' ? handleSaveOperationalSettings : handleSaveConfig}
                  isLoading={isLoading}
                  loadingText={t('common.saving')}
                  className="flex-1 sm:flex-none"
                >

Replace with:

                <Button
                  variant="primary"
                  size="sm"
                  onClick={activeTab === 'operations' || activeTab === 'notifications' ? handleSaveOperationalSettings : handleSaveConfig}
                  isLoading={isLoading}
                  loadingText={t('common.saving')}
                  className="flex-1 sm:flex-none"
                >

Summary

Total changes: 11 modifications Estimated time: 10-15 minutes

After applying these changes:

  1. Save the file
  2. Restart your dev server
  3. Navigate to Settings → Bakery Settings
  4. Verify the "Notifications" tab appears and works correctly