132 lines
3.7 KiB
Markdown
132 lines
3.7 KiB
Markdown
# 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.
|