bakery-ia/docs/FRONTEND_CHANGES_NEEDED.md

# Frontend Changes Needed for Notification Settings

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

### 1. Update imports (line 3)
```typescript
import { Store, MapPin, Clock, Settings as SettingsIcon, Save, X, AlertCircle, Loader, Bell } from 'lucide-react';
```

### 2. Add NotificationSettings to type imports (line 17)
```typescript
import type {
  ProcurementSettings,
  InventorySettings,
  ProductionSettings,
  SupplierSettings,
  POSSettings,
  OrderSettings,
  NotificationSettings,  // ADD THIS
} from '../../../../api/types/settings';
```

### 3. Import NotificationSettingsCard component (after line 24)
```typescript
import NotificationSettingsCard from '../../database/ajustes/cards/NotificationSettingsCard';
```

### 4. Add notification settings state (after line 100)
```typescript
const [notificationSettings, setNotificationSettings] = useState<NotificationSettings | null>(null);
```

### 5. Load notification settings in useEffect (line 140, add this line)
```typescript
setNotificationSettings(settings.notification_settings);
```

### 6. Add notifications tab trigger (after line 389, before closing </TabsList>)
```typescript
<TabsTrigger value="notifications" className="flex-1 sm:flex-none whitespace-nowrap">
  <Bell className="w-4 h-4 mr-2" />
  {t('bakery.tabs.notifications')}
</TabsTrigger>
```

### 7. Add notifications tab content (after line 691, before </Tabs>)
```typescript
{/* Tab 4: Notifications */}
<TabsContent value="notifications">
  <div className="space-y-6">
    {notificationSettings && (
      <NotificationSettingsCard
        settings={notificationSettings}
        onChange={(newSettings) => {
          setNotificationSettings(newSettings);
          handleOperationalSettingsChange();
        }}
        disabled={isLoading}
      />
    )}
  </div>
</TabsContent>
```

### 8. Update handleSaveOperationalSettings function (line 233)

Change from:
```typescript
if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
    !supplierSettings || !posSettings || !orderSettings) {
  return;
}
```

To:
```typescript
if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
    !supplierSettings || !posSettings || !orderSettings || !notificationSettings) {
  return;
}
```

### 9. Add notification_settings to mutation (line 250)

Add this line inside the mutation:
```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,  // ADD THIS
  },
});
```

### 10. Update handleDiscard function (line 316)

Add this line:
```typescript
setNotificationSettings(settings.notification_settings);
```

### 11. Update floating save button condition (line 717)

Change:
```typescript
onClick={activeTab === 'operations' ? handleSaveOperationalSettings : handleSaveConfig}
```

To:
```typescript
onClick={activeTab === 'operations' || activeTab === 'notifications' ? handleSaveOperationalSettings : handleSaveConfig}
```

## Summary

All translations have been added to:
- ✅ `/frontend/src/locales/es/ajustes.json`
- ✅ `/frontend/src/locales/eu/ajustes.json`
- ✅ `/frontend/src/locales/es/settings.json`
- ✅ `/frontend/src/locales/eu/settings.json`

The NotificationSettingsCard component has been created at:
- ✅ `/frontend/src/pages/app/database/ajustes/cards/NotificationSettingsCard.tsx`

You just need to apply the changes listed above to BakerySettingsPage.tsx to complete the frontend integration.