# BakerySettingsPage.tsx - Exact Code Changes

## File Location
`frontend/src/pages/app/settings/bakery/BakerySettingsPage.tsx`

---

## Change 1: Update imports (Line 3)

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

**Replace with:**
```typescript
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:**
```typescript
import type {
  ProcurementSettings,
  InventorySettings,
  ProductionSettings,
  SupplierSettings,
  POSSettings,
  OrderSettings,
} from '../../../../api/types/settings';
```

**Replace with:**
```typescript
import type {
  ProcurementSettings,
  InventorySettings,
  ProductionSettings,
  SupplierSettings,
  POSSettings,
  OrderSettings,
  NotificationSettings,
} from '../../../../api/types/settings';
```

---

## Change 3: Import NotificationSettingsCard (After line 24)

**Find:**
```typescript
import OrderSettingsCard from '../../database/ajustes/cards/OrderSettingsCard';
```

**Add after it:**
```typescript
import NotificationSettingsCard from '../../database/ajustes/cards/NotificationSettingsCard';
```

---

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

**Find:**
```typescript
  const [orderSettings, setOrderSettings] = useState<OrderSettings | null>(null);

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

**Change to:**
```typescript
  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:**
```typescript
  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:**
```typescript
  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:**
```typescript
  const handleSaveOperationalSettings = async () => {
    if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
        !supplierSettings || !posSettings || !orderSettings) {
      return;
    }
```

**Replace with:**
```typescript
  const handleSaveOperationalSettings = async () => {
    if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
        !supplierSettings || !posSettings || !orderSettings || !notificationSettings) {
      return;
    }
```

---

## Change 7: Add notification_settings to mutation (Line 244)

**Find:**
```typescript
      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:**
```typescript
      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:**
```typescript
    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:**
```typescript
    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:**
```typescript
          <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:**
```typescript
          <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 </Tabs>)

**Find:**
```typescript
          </div>
        </TabsContent>
      </Tabs>

      {/* Floating Save Button */}
```

**Replace with:**
```typescript
          </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:**
```typescript
                <Button
                  variant="primary"
                  size="sm"
                  onClick={activeTab === 'operations' ? handleSaveOperationalSettings : handleSaveConfig}
                  isLoading={isLoading}
                  loadingText={t('common.saving')}
                  className="flex-1 sm:flex-none"
                >
```

**Replace with:**
```typescript
                <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