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)

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

2. Add NotificationSettings to type imports (line 17)

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

3. Import NotificationSettingsCard component (after line 24)

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

4. Add notification settings state (after line 100)

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

5. Load notification settings in useEffect (line 140, add this line)

setNotificationSettings(settings.notification_settings);

6. Add notifications tab trigger (after line 389, before closing )

<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 )

{/* 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:

if (!tenantId || !procurementSettings || !inventorySettings || !productionSettings ||
    !supplierSettings || !posSettings || !orderSettings) {
  return;
}

To:

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

9. Add notification_settings to mutation (line 250)

Add this line inside the mutation:

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:

setNotificationSettings(settings.notification_settings);

11. Update floating save button condition (line 717)

Change:

onClick={activeTab === 'operations' ? handleSaveOperationalSettings : handleSaveConfig}

To:

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.