bakery-ia/docs/BAKERY_SETTINGS_PAGE_CHANGES.md

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