Add alerts ssytems to the frontend
This commit is contained in:
Urtzi Alfaro
@@ -1,7 +1,8 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardHeader, CardBody } from '../../ui/Card';
|
||||
import { StatusCard } from '../../ui/StatusCard/StatusCard';
|
||||
import { Badge } from '../../ui/Badge';
|
||||
import { Button } from '../../ui/Button';
|
||||
import { useNotifications } from '../../../hooks/useNotifications';
|
||||
import {
|
||||
AlertTriangle,
|
||||
AlertCircle,
|
||||
@@ -11,140 +12,93 @@ import {
|
||||
X,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Bell
|
||||
Bell,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Check,
|
||||
Trash2
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface Alert {
|
||||
id: string;
|
||||
type: 'critical' | 'warning' | 'info' | 'success';
|
||||
item_type: 'alert' | 'recommendation';
|
||||
type: string;
|
||||
severity: 'urgent' | 'high' | 'medium' | 'low';
|
||||
title: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
source: string;
|
||||
actionRequired?: boolean;
|
||||
resolved?: boolean;
|
||||
actions?: string[];
|
||||
metadata?: any;
|
||||
status?: 'active' | 'resolved' | 'acknowledged';
|
||||
}
|
||||
|
||||
export interface RealTimeAlertsProps {
|
||||
className?: string;
|
||||
maxAlerts?: number;
|
||||
enableSSE?: boolean;
|
||||
sseEndpoint?: string;
|
||||
}
|
||||
|
||||
const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
|
||||
className,
|
||||
maxAlerts = 10,
|
||||
enableSSE = true,
|
||||
sseEndpoint = '/api/alerts/stream'
|
||||
maxAlerts = 10
|
||||
}) => {
|
||||
const [alerts, setAlerts] = useState<Alert[]>([
|
||||
{
|
||||
id: '1',
|
||||
type: 'critical',
|
||||
title: 'Stock Crítico',
|
||||
message: 'Levadura fresca: Solo quedan 2 unidades (mínimo: 5)',
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'Inventario',
|
||||
actionRequired: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'warning',
|
||||
title: 'Temperatura Horno',
|
||||
message: 'Horno principal: Temperatura fuera del rango óptimo (185°C)',
|
||||
timestamp: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
|
||||
source: 'Producción',
|
||||
actionRequired: true
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'info',
|
||||
title: 'Nueva Orden',
|
||||
message: 'Orden #1247: 50 croissants para las 14:00',
|
||||
timestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
|
||||
source: 'Ventas'
|
||||
}
|
||||
]);
|
||||
const [expandedAlert, setExpandedAlert] = useState<string | null>(null);
|
||||
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const { notifications, isConnected, markAsRead, removeNotification } = useNotifications();
|
||||
|
||||
useEffect(() => {
|
||||
let eventSource: EventSource | null = null;
|
||||
// Convert notifications to alerts format and limit them
|
||||
const alerts = notifications.slice(0, maxAlerts).map(notification => ({
|
||||
id: notification.id,
|
||||
item_type: notification.item_type,
|
||||
type: notification.item_type, // Use item_type as type
|
||||
severity: notification.severity,
|
||||
title: notification.title,
|
||||
message: notification.message,
|
||||
timestamp: notification.timestamp,
|
||||
status: notification.read ? 'acknowledged' as const : 'active' as const,
|
||||
}));
|
||||
|
||||
if (enableSSE) {
|
||||
eventSource = new EventSource(sseEndpoint);
|
||||
|
||||
eventSource.onopen = () => {
|
||||
setIsConnected(true);
|
||||
};
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const newAlert: Alert = JSON.parse(event.data);
|
||||
setAlerts(prev => {
|
||||
const updated = [newAlert, ...prev];
|
||||
return updated.slice(0, maxAlerts);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error parsing alert data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = () => {
|
||||
setIsConnected(false);
|
||||
};
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
};
|
||||
}, [enableSSE, sseEndpoint, maxAlerts]);
|
||||
|
||||
const getAlertStatusConfig = (alert: Alert) => {
|
||||
const baseConfig = {
|
||||
isCritical: alert.type === 'critical',
|
||||
isHighlight: alert.type === 'warning' || alert.actionRequired,
|
||||
};
|
||||
|
||||
switch (alert.type) {
|
||||
case 'critical':
|
||||
return {
|
||||
...baseConfig,
|
||||
color: 'var(--color-error)',
|
||||
text: 'Crítico',
|
||||
icon: AlertTriangle
|
||||
};
|
||||
case 'warning':
|
||||
return {
|
||||
...baseConfig,
|
||||
color: 'var(--color-warning)',
|
||||
text: 'Advertencia',
|
||||
icon: AlertCircle
|
||||
};
|
||||
case 'info':
|
||||
return {
|
||||
...baseConfig,
|
||||
color: 'var(--color-info)',
|
||||
text: 'Información',
|
||||
icon: Info
|
||||
};
|
||||
case 'success':
|
||||
return {
|
||||
...baseConfig,
|
||||
color: 'var(--color-success)',
|
||||
text: 'Éxito',
|
||||
icon: CheckCircle
|
||||
};
|
||||
const getSeverityIcon = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'urgent':
|
||||
return AlertTriangle;
|
||||
case 'high':
|
||||
return AlertCircle;
|
||||
case 'medium':
|
||||
return Info;
|
||||
case 'low':
|
||||
return CheckCircle;
|
||||
default:
|
||||
return {
|
||||
...baseConfig,
|
||||
color: 'var(--color-info)',
|
||||
text: 'Información',
|
||||
icon: Info
|
||||
};
|
||||
return Info;
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverityColor = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'urgent':
|
||||
return 'var(--color-error)';
|
||||
case 'high':
|
||||
return 'var(--color-warning)';
|
||||
case 'medium':
|
||||
return 'var(--color-info)';
|
||||
case 'low':
|
||||
return 'var(--color-success)';
|
||||
default:
|
||||
return 'var(--color-info)';
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverityBadge = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'urgent':
|
||||
return 'error';
|
||||
case 'high':
|
||||
return 'warning';
|
||||
case 'medium':
|
||||
return 'info';
|
||||
case 'low':
|
||||
return 'success';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -155,68 +109,68 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
|
||||
if (diffMins < 1) return 'Ahora';
|
||||
if (diffMins < 60) return `Hace ${diffMins}m`;
|
||||
|
||||
if (diffMins < 60) return `${diffMins}m`;
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
if (diffHours < 24) return `Hace ${diffHours}h`;
|
||||
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
if (diffHours < 24) return `${diffHours}h`;
|
||||
return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
|
||||
};
|
||||
|
||||
const dismissAlert = (alertId: string) => {
|
||||
setAlerts(prev => prev.filter(alert => alert.id !== alertId));
|
||||
const toggleExpanded = (alertId: string) => {
|
||||
setExpandedAlert(prev => prev === alertId ? null : alertId);
|
||||
};
|
||||
|
||||
const handleViewAlert = (alertId: string) => {
|
||||
console.log('Viewing alert details:', alertId);
|
||||
const handleMarkAsRead = (alertId: string) => {
|
||||
markAsRead(alertId);
|
||||
};
|
||||
|
||||
const unresolvedAlerts = alerts.filter(alert => !alert.resolved);
|
||||
const criticalCount = unresolvedAlerts.filter(alert => alert.type === 'critical').length;
|
||||
const warningCount = unresolvedAlerts.filter(alert => alert.type === 'warning').length;
|
||||
const handleRemoveAlert = (alertId: string) => {
|
||||
removeNotification(alertId);
|
||||
if (expandedAlert === alertId) {
|
||||
setExpandedAlert(null);
|
||||
}
|
||||
};
|
||||
|
||||
const activeAlerts = alerts.filter(alert => alert.status === 'active');
|
||||
const urgentCount = activeAlerts.filter(alert => alert.severity === 'urgent').length;
|
||||
const highCount = activeAlerts.filter(alert => alert.severity === 'high').length;
|
||||
|
||||
return (
|
||||
<Card className={className} variant="elevated" padding="none">
|
||||
<CardHeader padding="lg" divider>
|
||||
<CardHeader padding="md" divider>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="p-2 rounded-lg"
|
||||
style={{ backgroundColor: 'var(--color-primary)20' }}
|
||||
>
|
||||
<Bell className="w-5 h-5" style={{ color: 'var(--color-primary)' }} />
|
||||
<Bell className="w-4 h-4" style={{ color: 'var(--color-primary)' }} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||
Alertas en Tiempo Real
|
||||
<h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||
Alertas
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<div className="flex items-center gap-2">
|
||||
{isConnected ? (
|
||||
<Wifi className="w-4 h-4" style={{ color: 'var(--color-success)' }} />
|
||||
<Wifi className="w-3 h-3" style={{ color: 'var(--color-success)' }} />
|
||||
) : (
|
||||
<WifiOff className="w-4 h-4" style={{ color: 'var(--color-error)' }} />
|
||||
<WifiOff className="w-3 h-3" style={{ color: 'var(--color-error)' }} />
|
||||
)}
|
||||
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{isConnected ? 'Conectado' : 'Desconectado'}
|
||||
<span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{isConnected ? 'En vivo' : 'Desconectado'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{criticalCount > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
{urgentCount > 0 && (
|
||||
<Badge variant="error" size="sm">
|
||||
{criticalCount} críticas
|
||||
{urgentCount}
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
{highCount > 0 && (
|
||||
<Badge variant="warning" size="sm">
|
||||
{warningCount} advertencias
|
||||
{highCount}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
@@ -224,78 +178,184 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
|
||||
</CardHeader>
|
||||
|
||||
<CardBody padding="none">
|
||||
{unresolvedAlerts.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div
|
||||
className="p-4 rounded-full mx-auto mb-4 w-16 h-16 flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-success)20' }}
|
||||
>
|
||||
<CheckCircle className="w-8 h-8" style={{ color: 'var(--color-success)' }} />
|
||||
</div>
|
||||
<h4 className="text-lg font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
No hay alertas activas
|
||||
</h4>
|
||||
{activeAlerts.length === 0 ? (
|
||||
<div className="p-6 text-center">
|
||||
<CheckCircle className="w-6 h-6 mx-auto mb-2" style={{ color: 'var(--color-success)' }} />
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
Todo funciona correctamente en tu panadería
|
||||
No hay alertas activas
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 p-4">
|
||||
{unresolvedAlerts.map((alert) => {
|
||||
const statusConfig = getAlertStatusConfig(alert);
|
||||
<div className="space-y-2 p-2">
|
||||
{activeAlerts.map((alert) => {
|
||||
const isExpanded = expandedAlert === alert.id;
|
||||
const SeverityIcon = getSeverityIcon(alert.severity);
|
||||
|
||||
return (
|
||||
<StatusCard
|
||||
<div
|
||||
key={alert.id}
|
||||
id={alert.id}
|
||||
statusIndicator={statusConfig}
|
||||
title={alert.title}
|
||||
subtitle={alert.message}
|
||||
primaryValue={formatTimestamp(alert.timestamp)}
|
||||
primaryValueLabel="TIEMPO"
|
||||
secondaryInfo={{
|
||||
label: 'Fuente',
|
||||
value: alert.source
|
||||
className={`
|
||||
rounded-lg border transition-all duration-200
|
||||
${isExpanded ? 'ring-2 ring-opacity-20' : 'hover:shadow-sm'}
|
||||
`}
|
||||
style={{
|
||||
borderColor: getSeverityColor(alert.severity) + '40',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
...(isExpanded && {
|
||||
ringColor: getSeverityColor(alert.severity),
|
||||
backgroundColor: 'var(--bg-secondary)'
|
||||
})
|
||||
}}
|
||||
metadata={alert.actionRequired ? ['🔥 Acción requerida'] : []}
|
||||
actions={[
|
||||
{
|
||||
label: 'Ver Detalles',
|
||||
icon: Info,
|
||||
variant: 'outline',
|
||||
onClick: () => handleViewAlert(alert.id),
|
||||
priority: 'primary'
|
||||
},
|
||||
{
|
||||
label: 'Descartar',
|
||||
icon: X,
|
||||
variant: 'outline',
|
||||
onClick: () => dismissAlert(alert.id),
|
||||
priority: 'secondary',
|
||||
destructive: true
|
||||
}
|
||||
]}
|
||||
compact={true}
|
||||
className="border-l-4"
|
||||
/>
|
||||
>
|
||||
{/* Compact Card Header */}
|
||||
<div
|
||||
className="flex items-center gap-3 p-3 cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors rounded-lg"
|
||||
onClick={() => toggleExpanded(alert.id)}
|
||||
>
|
||||
{/* Severity Icon */}
|
||||
<div
|
||||
className="flex-shrink-0 p-2 rounded-full"
|
||||
style={{ backgroundColor: getSeverityColor(alert.severity) + '15' }}
|
||||
>
|
||||
<SeverityIcon
|
||||
className="w-4 h-4"
|
||||
style={{ color: getSeverityColor(alert.severity) }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Alert Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Title and Timestamp Row */}
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<h4 className="text-sm font-semibold leading-tight flex-1" style={{ color: 'var(--text-primary)' }}>
|
||||
{alert.title}
|
||||
</h4>
|
||||
<span className="text-xs font-medium flex-shrink-0" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formatTimestamp(alert.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Badges Row */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge variant={getSeverityBadge(alert.severity)} size="sm">
|
||||
{alert.severity.toUpperCase()}
|
||||
</Badge>
|
||||
<Badge variant="secondary" size="sm">
|
||||
{alert.item_type === 'alert' ? '🚨 Alerta' : '💡 Recomendación'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Preview message when collapsed */}
|
||||
{!isExpanded && (
|
||||
<p className="text-xs leading-relaxed truncate" style={{ color: 'var(--text-secondary)' }}>
|
||||
{alert.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expand/Collapse Button */}
|
||||
<div className="flex-shrink-0 p-1 rounded-full hover:bg-black/5 transition-colors">
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Details */}
|
||||
{isExpanded && (
|
||||
<div className="px-3 pb-3 border-t mt-3 pt-3" style={{ borderColor: getSeverityColor(alert.severity) + '20' }}>
|
||||
{/* Full Message */}
|
||||
<div className="mb-4">
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'var(--text-primary)' }}>
|
||||
{alert.message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions Section */}
|
||||
{alert.actions && alert.actions.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<p className="text-xs font-semibold mb-2 uppercase tracking-wide" style={{ color: 'var(--text-primary)' }}>
|
||||
Acciones Recomendadas
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{alert.actions.map((action, index) => (
|
||||
<div key={index} className="flex items-start gap-2">
|
||||
<span className="text-xs mt-0.5" style={{ color: getSeverityColor(alert.severity) }}>
|
||||
•
|
||||
</span>
|
||||
<span className="text-xs leading-relaxed" style={{ color: 'var(--text-secondary)' }}>
|
||||
{action}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
{alert.metadata && Object.keys(alert.metadata).length > 0 && (
|
||||
<div className="mb-4 p-2 rounded-md" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<p className="text-xs font-semibold mb-1 uppercase tracking-wide" style={{ color: 'var(--text-primary)' }}>
|
||||
Detalles Adicionales
|
||||
</p>
|
||||
<div className="text-xs space-y-1" style={{ color: 'var(--text-secondary)' }}>
|
||||
{Object.entries(alert.metadata).map(([key, value]) => (
|
||||
<div key={key} className="flex gap-2">
|
||||
<span className="font-medium capitalize">{key.replace(/_/g, ' ')}:</span>
|
||||
<span>{String(value)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleMarkAsRead(alert.id);
|
||||
}}
|
||||
className="h-8 px-3 text-xs font-medium"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1" />
|
||||
Marcar como leído
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveAlert(alert.id);
|
||||
}}
|
||||
className="h-8 px-3 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="w-3 h-3 mr-1" />
|
||||
Eliminar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{unresolvedAlerts.length > 0 && (
|
||||
{activeAlerts.length > 0 && (
|
||||
<div
|
||||
className="p-4 border-t text-center"
|
||||
className="p-3 border-t text-center"
|
||||
style={{
|
||||
borderColor: 'var(--border-primary)',
|
||||
backgroundColor: 'var(--bg-secondary)'
|
||||
}}
|
||||
>
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{unresolvedAlerts.length} alertas activas •
|
||||
<span className="ml-1" style={{ color: 'var(--color-primary)' }}>
|
||||
Monitoreo automático habilitado
|
||||
</span>
|
||||
<p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{activeAlerts.length} alertas activas
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -3,11 +3,13 @@ import { clsx } from 'clsx';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuthUser, useIsAuthenticated, useAuthActions } from '../../../stores';
|
||||
import { useTheme } from '../../../contexts/ThemeContext';
|
||||
import { useNotifications } from '../../../hooks/useNotifications';
|
||||
import { Button } from '../../ui';
|
||||
import { Avatar } from '../../ui';
|
||||
import { Badge } from '../../ui';
|
||||
import { Modal } from '../../ui';
|
||||
import { TenantSwitcher } from '../../ui/TenantSwitcher';
|
||||
import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
|
||||
import {
|
||||
Menu,
|
||||
Search,
|
||||
@@ -101,11 +103,21 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
|
||||
const isAuthenticated = useIsAuthenticated();
|
||||
const { logout } = useAuthActions();
|
||||
const { theme, resolvedTheme, setTheme } = useTheme();
|
||||
|
||||
const {
|
||||
notifications,
|
||||
unreadCount,
|
||||
isConnected,
|
||||
markAsRead,
|
||||
markAllAsRead,
|
||||
removeNotification,
|
||||
clearAll
|
||||
} = useNotifications();
|
||||
|
||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||
const [isSearchFocused, setIsSearchFocused] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false);
|
||||
const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
|
||||
|
||||
const searchInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -168,6 +180,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
|
||||
if (e.key === 'Escape') {
|
||||
setIsUserMenuOpen(false);
|
||||
setIsThemeMenuOpen(false);
|
||||
setIsNotificationPanelOpen(false);
|
||||
if (isSearchFocused) {
|
||||
searchInputRef.current?.blur();
|
||||
}
|
||||
@@ -188,6 +201,9 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
|
||||
if (!target.closest('[data-theme-menu]')) {
|
||||
setIsThemeMenuOpen(false);
|
||||
}
|
||||
if (!target.closest('[data-notification-panel]')) {
|
||||
setIsNotificationPanelOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
@@ -379,25 +395,45 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
|
||||
|
||||
{/* Notifications */}
|
||||
{showNotifications && (
|
||||
<div className="relative">
|
||||
<div className="relative" data-notification-panel>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onNotificationClick}
|
||||
className="w-10 h-10 p-0 flex items-center justify-center relative"
|
||||
aria-label={`Notificaciones${notificationCount > 0 ? ` (${notificationCount})` : ''}`}
|
||||
onClick={() => setIsNotificationPanelOpen(!isNotificationPanelOpen)}
|
||||
className={clsx(
|
||||
"w-10 h-10 p-0 flex items-center justify-center relative",
|
||||
!isConnected && "opacity-50",
|
||||
isNotificationPanelOpen && "bg-[var(--bg-secondary)]"
|
||||
)}
|
||||
aria-label={`Notificaciones${unreadCount > 0 ? ` (${unreadCount})` : ''}${!isConnected ? ' - Desconectado' : ''}`}
|
||||
title={!isConnected ? 'Sin conexión en tiempo real' : undefined}
|
||||
aria-expanded={isNotificationPanelOpen}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
{notificationCount > 0 && (
|
||||
<Bell className={clsx(
|
||||
"h-5 w-5 transition-colors",
|
||||
unreadCount > 0 && "text-[var(--color-warning)]"
|
||||
)} />
|
||||
{unreadCount > 0 && (
|
||||
<Badge
|
||||
variant="error"
|
||||
size="sm"
|
||||
className="absolute -top-1 -right-1 min-w-[18px] h-[18px] text-xs flex items-center justify-center"
|
||||
>
|
||||
{notificationCount > 99 ? '99+' : notificationCount}
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<NotificationPanel
|
||||
notifications={notifications}
|
||||
isOpen={isNotificationPanelOpen}
|
||||
onClose={() => setIsNotificationPanelOpen(false)}
|
||||
onMarkAsRead={markAsRead}
|
||||
onMarkAllAsRead={markAllAsRead}
|
||||
onRemoveNotification={removeNotification}
|
||||
onClearAll={clearAll}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -0,0 +1,259 @@
|
||||
import React from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
import { Button } from '../Button';
|
||||
import { Badge } from '../Badge';
|
||||
import { NotificationData } from '../../../hooks/useNotifications';
|
||||
import {
|
||||
Check,
|
||||
Trash2,
|
||||
AlertTriangle,
|
||||
AlertCircle,
|
||||
Info,
|
||||
CheckCircle,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface NotificationPanelProps {
|
||||
notifications: NotificationData[];
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onMarkAsRead: (id: string) => void;
|
||||
onMarkAllAsRead: () => void;
|
||||
onRemoveNotification: (id: string) => void;
|
||||
onClearAll: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const getSeverityIcon = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'urgent':
|
||||
return AlertTriangle;
|
||||
case 'high':
|
||||
return AlertCircle;
|
||||
case 'medium':
|
||||
return Info;
|
||||
case 'low':
|
||||
return CheckCircle;
|
||||
default:
|
||||
return Info;
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverityColor = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'urgent':
|
||||
return 'var(--color-error)';
|
||||
case 'high':
|
||||
return 'var(--color-warning)';
|
||||
case 'medium':
|
||||
return 'var(--color-info)';
|
||||
case 'low':
|
||||
return 'var(--color-success)';
|
||||
default:
|
||||
return 'var(--color-info)';
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverityBadge = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'urgent':
|
||||
return 'error';
|
||||
case 'high':
|
||||
return 'warning';
|
||||
case 'medium':
|
||||
return 'info';
|
||||
case 'low':
|
||||
return 'success';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
|
||||
if (diffMins < 1) return 'Ahora';
|
||||
if (diffMins < 60) return `${diffMins}m`;
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
if (diffHours < 24) return `${diffHours}h`;
|
||||
return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
|
||||
};
|
||||
|
||||
export const NotificationPanel: React.FC<NotificationPanelProps> = ({
|
||||
notifications,
|
||||
isOpen,
|
||||
onClose,
|
||||
onMarkAsRead,
|
||||
onMarkAllAsRead,
|
||||
onRemoveNotification,
|
||||
onClearAll,
|
||||
className
|
||||
}) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const unreadNotifications = notifications.filter(n => !n.read);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/20"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={clsx(
|
||||
"absolute right-0 top-full mt-2 w-96 max-w-sm bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-xl z-50 max-h-96 flex flex-col",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[var(--border-primary)]">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
|
||||
Notificaciones
|
||||
</h3>
|
||||
{unreadNotifications.length > 0 && (
|
||||
<Badge variant="info" size="sm">
|
||||
{unreadNotifications.length} nuevas
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{unreadNotifications.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onMarkAllAsRead}
|
||||
className="h-6 px-2 text-xs"
|
||||
>
|
||||
Marcar todas
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notifications List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<CheckCircle className="w-8 h-8 mx-auto mb-2" style={{ color: 'var(--color-success)' }} />
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
No hay notificaciones
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-[var(--border-primary)]">
|
||||
{notifications.map((notification) => {
|
||||
const SeverityIcon = getSeverityIcon(notification.severity);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={notification.id}
|
||||
className={clsx(
|
||||
"p-3 hover:bg-[var(--bg-secondary)] transition-colors",
|
||||
!notification.read && "bg-[var(--color-info)]/5"
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
{/* Icon */}
|
||||
<div
|
||||
className="flex-shrink-0 p-1 rounded-full mt-0.5"
|
||||
style={{ backgroundColor: getSeverityColor(notification.severity) + '15' }}
|
||||
>
|
||||
<SeverityIcon
|
||||
className="w-3 h-3"
|
||||
style={{ color: getSeverityColor(notification.severity) }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-2 mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={getSeverityBadge(notification.severity)} size="sm">
|
||||
{notification.severity.toUpperCase()}
|
||||
</Badge>
|
||||
<Badge variant="secondary" size="sm">
|
||||
{notification.item_type === 'alert' ? 'Alerta' : 'Recomendación'}
|
||||
</Badge>
|
||||
</div>
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formatTimestamp(notification.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<p className="text-sm font-medium mb-1 leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{notification.title}
|
||||
</p>
|
||||
|
||||
{/* Message */}
|
||||
<p className="text-xs leading-relaxed mb-2" style={{ color: 'var(--text-secondary)' }}>
|
||||
{notification.message}
|
||||
</p>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1">
|
||||
{!notification.read && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onMarkAsRead(notification.id)}
|
||||
className="h-6 px-2 text-xs"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1" />
|
||||
Marcar como leído
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveNotification(notification.id)}
|
||||
className="h-6 px-2 text-xs text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="w-3 h-3 mr-1" />
|
||||
Eliminar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="p-3 border-t border-[var(--border-primary)] bg-[var(--bg-secondary)]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClearAll}
|
||||
className="w-full text-xs text-red-600 hover:text-red-700"
|
||||
>
|
||||
Limpiar todas las notificaciones
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { createContext, useContext, useEffect, useRef, useState, ReactNode } from 'react';
|
||||
import { useAuthStore } from '../stores/auth.store';
|
||||
import { useUIStore } from '../stores/ui.store';
|
||||
import { useCurrentTenant } from '../stores/tenant.store';
|
||||
|
||||
interface SSEEvent {
|
||||
type: string;
|
||||
@@ -41,18 +42,28 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
|
||||
|
||||
const { isAuthenticated, token } = useAuthStore();
|
||||
const { showToast } = useUIStore();
|
||||
const currentTenant = useCurrentTenant();
|
||||
|
||||
const connect = () => {
|
||||
if (!isAuthenticated || !token || eventSourceRef.current) return;
|
||||
|
||||
|
||||
// Skip SSE connection for demo/development mode when no backend is available
|
||||
if (token === 'mock-jwt-token') {
|
||||
console.log('SSE connection skipped for demo mode');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get tenant ID from store - no fallback
|
||||
const tenantId = currentTenant?.id;
|
||||
|
||||
if (!tenantId) {
|
||||
console.log('No tenant ID available, skipping SSE connection');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const eventSource = new EventSource(`http://localhost:8000/api/events?token=${token}`, {
|
||||
// Connect to notification service SSE endpoint with token
|
||||
const eventSource = new EventSource(`http://localhost:8006/api/v1/sse/alerts/stream/${tenantId}?token=${encodeURIComponent(token)}`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
@@ -69,41 +80,158 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
// Handle different SSE message types from notification service
|
||||
if (data.status === 'keepalive') {
|
||||
console.log('SSE keepalive received');
|
||||
return;
|
||||
}
|
||||
|
||||
const sseEvent: SSEEvent = {
|
||||
type: 'message',
|
||||
data: JSON.parse(event.data),
|
||||
timestamp: new Date().toISOString(),
|
||||
type: data.item_type || 'message',
|
||||
data: data,
|
||||
timestamp: data.timestamp || new Date().toISOString(),
|
||||
};
|
||||
|
||||
|
||||
setLastEvent(sseEvent);
|
||||
|
||||
|
||||
// Show notification if it's an alert or recommendation
|
||||
if (data.item_type && ['alert', 'recommendation'].includes(data.item_type)) {
|
||||
let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
|
||||
|
||||
if (data.item_type === 'alert') {
|
||||
if (data.severity === 'urgent') toastType = 'error';
|
||||
else if (data.severity === 'high') toastType = 'error';
|
||||
else if (data.severity === 'medium') toastType = 'warning';
|
||||
else toastType = 'info';
|
||||
} else if (data.item_type === 'recommendation') {
|
||||
toastType = 'info';
|
||||
}
|
||||
|
||||
showToast({
|
||||
type: toastType,
|
||||
title: data.title || 'Notificación',
|
||||
message: data.message,
|
||||
duration: data.severity === 'urgent' ? 0 : 5000,
|
||||
});
|
||||
}
|
||||
|
||||
// Trigger registered listeners
|
||||
const listeners = eventListenersRef.current.get('message');
|
||||
const listeners = eventListenersRef.current.get(sseEvent.type);
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(sseEvent.data));
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
|
||||
// Also trigger 'message' listeners for backward compatibility
|
||||
const messageListeners = eventListenersRef.current.get('message');
|
||||
if (messageListeners) {
|
||||
messageListeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing SSE message:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle connection events from backend
|
||||
eventSource.addEventListener('connection', (event) => {
|
||||
// Handle connection confirmation from notification service
|
||||
eventSource.addEventListener('connected', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('SSE connection confirmed:', data.message);
|
||||
console.log('SSE connection confirmed:', data);
|
||||
} catch (error) {
|
||||
console.error('Error parsing connection event:', error);
|
||||
console.error('Error parsing connected event:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle heartbeat events
|
||||
eventSource.addEventListener('heartbeat', (event) => {
|
||||
// Handle ping events (keepalive)
|
||||
eventSource.addEventListener('ping', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('SSE heartbeat received:', new Date(data.timestamp * 1000));
|
||||
console.log('SSE ping received:', data.timestamp);
|
||||
} catch (error) {
|
||||
console.error('Error parsing heartbeat event:', error);
|
||||
console.error('Error parsing ping event:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle initial items
|
||||
eventSource.addEventListener('initial_items', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('Initial items received:', data);
|
||||
|
||||
// Trigger listeners for initial data
|
||||
const listeners = eventListenersRef.current.get('initial_items');
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing initial_items event:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle alert events
|
||||
eventSource.addEventListener('alert', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
const sseEvent: SSEEvent = {
|
||||
type: 'alert',
|
||||
data,
|
||||
timestamp: data.timestamp || new Date().toISOString(),
|
||||
};
|
||||
|
||||
setLastEvent(sseEvent);
|
||||
|
||||
// Show alert toast
|
||||
let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
|
||||
if (data.severity === 'urgent') toastType = 'error';
|
||||
else if (data.severity === 'high') toastType = 'error';
|
||||
else if (data.severity === 'medium') toastType = 'warning';
|
||||
else toastType = 'info';
|
||||
|
||||
showToast({
|
||||
type: toastType,
|
||||
title: data.title || 'Alerta',
|
||||
message: data.message,
|
||||
duration: data.severity === 'urgent' ? 0 : 5000,
|
||||
});
|
||||
|
||||
// Trigger listeners
|
||||
const listeners = eventListenersRef.current.get('alert');
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing alert event:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle recommendation events
|
||||
eventSource.addEventListener('recommendation', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
const sseEvent: SSEEvent = {
|
||||
type: 'recommendation',
|
||||
data,
|
||||
timestamp: data.timestamp || new Date().toISOString(),
|
||||
};
|
||||
|
||||
setLastEvent(sseEvent);
|
||||
|
||||
// Show recommendation toast
|
||||
showToast({
|
||||
type: 'info',
|
||||
title: data.title || 'Recomendación',
|
||||
message: data.message,
|
||||
duration: 5000,
|
||||
});
|
||||
|
||||
// Trigger listeners
|
||||
const listeners = eventListenersRef.current.get('recommendation');
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing recommendation event:', error);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -124,96 +252,6 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// Handle notification events (alerts and recommendations from alert_processor)
|
||||
eventSource.addEventListener('notification', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
const sseEvent: SSEEvent = {
|
||||
type: 'notification',
|
||||
data,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setLastEvent(sseEvent);
|
||||
|
||||
// Determine toast type based on severity and item_type
|
||||
let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
|
||||
if (data.item_type === 'alert') {
|
||||
if (data.severity === 'urgent') toastType = 'error';
|
||||
else if (data.severity === 'high') toastType = 'error';
|
||||
else if (data.severity === 'medium') toastType = 'warning';
|
||||
else toastType = 'info';
|
||||
} else if (data.item_type === 'recommendation') {
|
||||
toastType = 'info';
|
||||
}
|
||||
|
||||
// Show toast notification
|
||||
showToast({
|
||||
type: toastType,
|
||||
title: data.title || 'Notificación',
|
||||
message: data.message,
|
||||
duration: data.severity === 'urgent' ? 0 : 5000, // Keep urgent alerts until dismissed
|
||||
});
|
||||
|
||||
// Trigger registered listeners
|
||||
const listeners = eventListenersRef.current.get('notification');
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing notification event:', error);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('inventory_alert', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
const sseEvent: SSEEvent = {
|
||||
type: 'inventory_alert',
|
||||
data,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setLastEvent(sseEvent);
|
||||
|
||||
// Show inventory alert (high/urgent alerts from alert_processor)
|
||||
showToast({
|
||||
type: data.severity === 'urgent' ? 'error' : 'warning',
|
||||
title: data.title || 'Alerta de Inventario',
|
||||
message: data.message,
|
||||
duration: 0, // Keep until dismissed
|
||||
});
|
||||
|
||||
// Trigger registered listeners
|
||||
const listeners = eventListenersRef.current.get('inventory_alert');
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing inventory alert:', error);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('production_update', (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
const sseEvent: SSEEvent = {
|
||||
type: 'production_update',
|
||||
data,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setLastEvent(sseEvent);
|
||||
|
||||
// Trigger registered listeners
|
||||
const listeners = eventListenersRef.current.get('production_update');
|
||||
if (listeners) {
|
||||
listeners.forEach(callback => callback(data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing production update:', error);
|
||||
}
|
||||
});
|
||||
|
||||
eventSourceRef.current = eventSource;
|
||||
} catch (error) {
|
||||
@@ -256,9 +294,9 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
|
||||
};
|
||||
};
|
||||
|
||||
// Connect when authenticated, disconnect when not
|
||||
// Connect when authenticated, disconnect when not or when tenant changes
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && token) {
|
||||
if (isAuthenticated && token && currentTenant) {
|
||||
connect();
|
||||
} else {
|
||||
disconnect();
|
||||
@@ -267,7 +305,7 @@ export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, [isAuthenticated, token]);
|
||||
}, [isAuthenticated, token, currentTenant?.id]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
|
||||
172
frontend/src/hooks/useNotifications.ts
Normal file
172
frontend/src/hooks/useNotifications.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSSE } from '../contexts/SSEContext';
|
||||
|
||||
export interface NotificationData {
|
||||
id: string;
|
||||
item_type: 'alert' | 'recommendation';
|
||||
severity: 'urgent' | 'high' | 'medium' | 'low';
|
||||
title: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
read: boolean;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'bakery-notifications';
|
||||
|
||||
const loadNotificationsFromStorage = (): NotificationData[] => {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
const parsed = JSON.parse(stored);
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load notifications from localStorage:', error);
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const saveNotificationsToStorage = (notifications: NotificationData[]) => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(notifications));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save notifications to localStorage:', error);
|
||||
}
|
||||
};
|
||||
|
||||
export const useNotifications = () => {
|
||||
const [notifications, setNotifications] = useState<NotificationData[]>(() => loadNotificationsFromStorage());
|
||||
const [unreadCount, setUnreadCount] = useState(() => {
|
||||
const stored = loadNotificationsFromStorage();
|
||||
return stored.filter(n => !n.read).length;
|
||||
});
|
||||
|
||||
const { addEventListener, isConnected } = useSSE();
|
||||
|
||||
// Save to localStorage whenever notifications change
|
||||
useEffect(() => {
|
||||
saveNotificationsToStorage(notifications);
|
||||
}, [notifications]);
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for initial_items event (existing notifications)
|
||||
const removeInitialListener = addEventListener('initial_items', (data: any[]) => {
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
const initialNotifications: NotificationData[] = data.map(item => ({
|
||||
id: item.id,
|
||||
item_type: item.item_type,
|
||||
severity: item.severity,
|
||||
title: item.title,
|
||||
message: item.message,
|
||||
timestamp: item.timestamp || new Date().toISOString(),
|
||||
read: false, // Assume all initial items are unread
|
||||
}));
|
||||
|
||||
setNotifications(prev => {
|
||||
// Merge initial items with existing notifications, avoiding duplicates
|
||||
const existingIds = new Set(prev.map(n => n.id));
|
||||
const newNotifications = initialNotifications.filter(n => !existingIds.has(n.id));
|
||||
const combined = [...newNotifications, ...prev].slice(0, 50);
|
||||
return combined;
|
||||
});
|
||||
|
||||
setUnreadCount(prev => {
|
||||
const newUnreadCount = initialNotifications.filter(n => !n.read).length;
|
||||
return prev + newUnreadCount;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for alert events
|
||||
const removeAlertListener = addEventListener('alert', (data: any) => {
|
||||
const notification: NotificationData = {
|
||||
id: data.id,
|
||||
item_type: 'alert',
|
||||
severity: data.severity,
|
||||
title: data.title,
|
||||
message: data.message,
|
||||
timestamp: data.timestamp || new Date().toISOString(),
|
||||
read: false,
|
||||
};
|
||||
|
||||
setNotifications(prev => {
|
||||
// Check if notification already exists
|
||||
const exists = prev.some(n => n.id === notification.id);
|
||||
if (exists) return prev;
|
||||
|
||||
return [notification, ...prev].slice(0, 50); // Keep last 50 notifications
|
||||
});
|
||||
setUnreadCount(prev => prev + 1);
|
||||
});
|
||||
|
||||
// Listen for recommendation events
|
||||
const removeRecommendationListener = addEventListener('recommendation', (data: any) => {
|
||||
const notification: NotificationData = {
|
||||
id: data.id,
|
||||
item_type: 'recommendation',
|
||||
severity: data.severity,
|
||||
title: data.title,
|
||||
message: data.message,
|
||||
timestamp: data.timestamp || new Date().toISOString(),
|
||||
read: false,
|
||||
};
|
||||
|
||||
setNotifications(prev => {
|
||||
// Check if notification already exists
|
||||
const exists = prev.some(n => n.id === notification.id);
|
||||
if (exists) return prev;
|
||||
|
||||
return [notification, ...prev].slice(0, 50); // Keep last 50 notifications
|
||||
});
|
||||
setUnreadCount(prev => prev + 1);
|
||||
});
|
||||
|
||||
return () => {
|
||||
removeInitialListener();
|
||||
removeAlertListener();
|
||||
removeRecommendationListener();
|
||||
};
|
||||
}, [addEventListener]);
|
||||
|
||||
const markAsRead = (notificationId: string) => {
|
||||
setNotifications(prev =>
|
||||
prev.map(notification =>
|
||||
notification.id === notificationId
|
||||
? { ...notification, read: true }
|
||||
: notification
|
||||
)
|
||||
);
|
||||
setUnreadCount(prev => Math.max(0, prev - 1));
|
||||
};
|
||||
|
||||
const markAllAsRead = () => {
|
||||
setNotifications(prev =>
|
||||
prev.map(notification => ({ ...notification, read: true }))
|
||||
);
|
||||
setUnreadCount(0);
|
||||
};
|
||||
|
||||
const removeNotification = (notificationId: string) => {
|
||||
const notification = notifications.find(n => n.id === notificationId);
|
||||
setNotifications(prev => prev.filter(n => n.id !== notificationId));
|
||||
|
||||
if (notification && !notification.read) {
|
||||
setUnreadCount(prev => Math.max(0, prev - 1));
|
||||
}
|
||||
};
|
||||
|
||||
const clearAllNotifications = () => {
|
||||
setNotifications([]);
|
||||
setUnreadCount(0);
|
||||
};
|
||||
|
||||
return {
|
||||
notifications,
|
||||
unreadCount,
|
||||
isConnected,
|
||||
markAsRead,
|
||||
markAllAsRead,
|
||||
removeNotification,
|
||||
clearAll: clearAllNotifications,
|
||||
};
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Plus, Clock, AlertCircle, CheckCircle, Timer, ChefHat, Eye, Edit, Package } from 'lucide-react';
|
||||
import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
|
||||
import { statusColors } from '../../../../styles/colors';
|
||||
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
|
||||
import { LoadingSpinner } from '../../../../components/shared';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
@@ -82,13 +83,32 @@ const ProductionPage: React.FC = () => {
|
||||
const isUrgent = priority === ProductionPriorityEnum.URGENT;
|
||||
const isCritical = status === ProductionStatusEnum.FAILED || (status === ProductionStatusEnum.PENDING && isUrgent);
|
||||
|
||||
// Map production statuses to global status colors
|
||||
const getStatusColorForProduction = (status: ProductionStatusEnum) => {
|
||||
// Handle both uppercase (backend) and lowercase (frontend) status values
|
||||
const normalizedStatus = status.toLowerCase();
|
||||
|
||||
switch (normalizedStatus) {
|
||||
case 'pending':
|
||||
return statusColors.pending.primary;
|
||||
case 'in_progress':
|
||||
return statusColors.inProgress.primary;
|
||||
case 'completed':
|
||||
return statusColors.completed.primary;
|
||||
case 'cancelled':
|
||||
case 'failed':
|
||||
return statusColors.cancelled.primary;
|
||||
case 'on_hold':
|
||||
return statusColors.pending.primary;
|
||||
case 'quality_check':
|
||||
return statusColors.inProgress.primary;
|
||||
default:
|
||||
return statusColors.other.primary;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
color: getStatusColor(
|
||||
status === ProductionStatusEnum.COMPLETED ? 'completed' :
|
||||
status === ProductionStatusEnum.PENDING ? 'pending' :
|
||||
status === ProductionStatusEnum.CANCELLED || status === ProductionStatusEnum.FAILED ? 'cancelled' :
|
||||
'in_progress'
|
||||
),
|
||||
color: getStatusColorForProduction(status),
|
||||
text: productionEnums.getProductionStatusLabel(status),
|
||||
icon: Icon,
|
||||
isCritical,
|
||||
|
||||
@@ -0,0 +1,703 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from '../../../../components/ui/Card';
|
||||
import { Button } from '../../../../components/ui/Button';
|
||||
import { Input } from '../../../../components/ui/Input';
|
||||
import { Select } from '../../../../components/ui/Select';
|
||||
import { Badge } from '../../../../components/ui/Badge';
|
||||
import {
|
||||
Bell,
|
||||
Mail,
|
||||
MessageSquare,
|
||||
Smartphone,
|
||||
Save,
|
||||
RotateCcw,
|
||||
Clock,
|
||||
Globe,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
AlertTriangle,
|
||||
TrendingUp,
|
||||
Megaphone,
|
||||
FileText,
|
||||
Moon,
|
||||
Sun,
|
||||
Settings
|
||||
} from 'lucide-react';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
|
||||
// Backend-aligned preference types
|
||||
export interface NotificationPreferences {
|
||||
// Email preferences
|
||||
email_enabled: boolean;
|
||||
email_alerts: boolean;
|
||||
email_marketing: boolean;
|
||||
email_reports: boolean;
|
||||
|
||||
// WhatsApp preferences
|
||||
whatsapp_enabled: boolean;
|
||||
whatsapp_alerts: boolean;
|
||||
whatsapp_reports: boolean;
|
||||
|
||||
// Push notification preferences
|
||||
push_enabled: boolean;
|
||||
push_alerts: boolean;
|
||||
push_reports: boolean;
|
||||
|
||||
// Timing preferences
|
||||
quiet_hours_start: string;
|
||||
quiet_hours_end: string;
|
||||
timezone: string;
|
||||
|
||||
// Frequency preferences
|
||||
digest_frequency: 'none' | 'daily' | 'weekly';
|
||||
max_emails_per_day: number;
|
||||
|
||||
// Language preference
|
||||
language: string;
|
||||
}
|
||||
|
||||
interface CommunicationPreferencesProps {
|
||||
userEmail?: string;
|
||||
userPhone?: string;
|
||||
userLanguage?: string;
|
||||
userTimezone?: string;
|
||||
onSave: (preferences: NotificationPreferences) => Promise<void>;
|
||||
onReset: () => void;
|
||||
hasChanges: boolean;
|
||||
}
|
||||
|
||||
const CommunicationPreferences: React.FC<CommunicationPreferencesProps> = ({
|
||||
userEmail = '',
|
||||
userPhone = '',
|
||||
userLanguage = 'es',
|
||||
userTimezone = 'Europe/Madrid',
|
||||
onSave,
|
||||
onReset,
|
||||
hasChanges
|
||||
}) => {
|
||||
const { addToast } = useToast();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [preferences, setPreferences] = useState<NotificationPreferences>({
|
||||
// Email preferences
|
||||
email_enabled: true,
|
||||
email_alerts: true,
|
||||
email_marketing: false,
|
||||
email_reports: true,
|
||||
|
||||
// WhatsApp preferences
|
||||
whatsapp_enabled: false,
|
||||
whatsapp_alerts: false,
|
||||
whatsapp_reports: false,
|
||||
|
||||
// Push notification preferences
|
||||
push_enabled: true,
|
||||
push_alerts: true,
|
||||
push_reports: false,
|
||||
|
||||
// Timing preferences
|
||||
quiet_hours_start: '22:00',
|
||||
quiet_hours_end: '08:00',
|
||||
timezone: userTimezone,
|
||||
|
||||
// Frequency preferences
|
||||
digest_frequency: 'daily',
|
||||
max_emails_per_day: 10,
|
||||
|
||||
// Language preference
|
||||
language: userLanguage
|
||||
});
|
||||
|
||||
const [contactInfo, setContactInfo] = useState({
|
||||
email: userEmail,
|
||||
phone: userPhone
|
||||
});
|
||||
|
||||
// Language options
|
||||
const languageOptions = [
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'en', label: 'English' }
|
||||
];
|
||||
|
||||
// Timezone options
|
||||
const timezoneOptions = [
|
||||
{ value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
|
||||
{ value: 'Atlantic/Canary', label: 'Canarias (WET/WEST)' },
|
||||
{ value: 'Europe/London', label: 'Londres (GMT/BST)' },
|
||||
{ value: 'Europe/Paris', label: 'París (CET/CEST)' }
|
||||
];
|
||||
|
||||
// Digest frequency options
|
||||
const digestOptions = [
|
||||
{ value: 'none', label: 'Sin resumen' },
|
||||
{ value: 'daily', label: 'Resumen diario' },
|
||||
{ value: 'weekly', label: 'Resumen semanal' }
|
||||
];
|
||||
|
||||
// Max emails per day options
|
||||
const maxEmailsOptions = [
|
||||
{ value: 5, label: '5 emails/día' },
|
||||
{ value: 10, label: '10 emails/día' },
|
||||
{ value: 20, label: '20 emails/día' },
|
||||
{ value: 50, label: '50 emails/día' },
|
||||
{ value: 100, label: 'Sin límite' }
|
||||
];
|
||||
|
||||
const handlePreferenceChange = (key: keyof NotificationPreferences, value: any) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleContactChange = (field: 'email' | 'phone', value: string) => {
|
||||
setContactInfo(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await onSave(preferences);
|
||||
addToast('Preferencias guardadas correctamente', 'success');
|
||||
} catch (error) {
|
||||
addToast('Error al guardar las preferencias', 'error');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getChannelIcon = (channel: string) => {
|
||||
switch (channel) {
|
||||
case 'push':
|
||||
return <Bell className="w-4 h-4 text-blue-500" />;
|
||||
case 'email':
|
||||
return <Mail className="w-4 h-4 text-green-500" />;
|
||||
case 'whatsapp':
|
||||
return <MessageSquare className="w-4 h-4 text-green-600" />;
|
||||
case 'sms':
|
||||
return <Smartphone className="w-4 h-4 text-purple-500" />;
|
||||
default:
|
||||
return <Bell className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getCategoryIcon = (category: string) => {
|
||||
switch (category) {
|
||||
case 'alerts':
|
||||
return <AlertTriangle className="w-5 h-5 text-red-500" />;
|
||||
case 'reports':
|
||||
return <TrendingUp className="w-5 h-5 text-blue-500" />;
|
||||
case 'marketing':
|
||||
return <Megaphone className="w-5 h-5 text-purple-500" />;
|
||||
default:
|
||||
return <FileText className="w-5 h-5 text-gray-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const isQuietHoursEnabled = () => {
|
||||
return preferences.quiet_hours_start !== preferences.quiet_hours_end;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onReset}
|
||||
disabled={!hasChanges || isLoading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
Restaurar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges || isLoading}
|
||||
isLoading={isLoading}
|
||||
loadingText="Guardando..."
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Guardar Cambios
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-blue-500/10 rounded-lg">
|
||||
<Settings className="w-5 h-5 text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
Información de Contacto
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Configura tus canales de comunicación
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
value={contactInfo.email}
|
||||
onChange={(e) => handleContactChange('email', e.target.value)}
|
||||
leftIcon={<Mail className="w-4 h-4" />}
|
||||
placeholder="tu-email@ejemplo.com"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Teléfono (WhatsApp)"
|
||||
type="tel"
|
||||
value={contactInfo.phone}
|
||||
onChange={(e) => handleContactChange('phone', e.target.value)}
|
||||
leftIcon={<MessageSquare className="w-4 h-4" />}
|
||||
placeholder="+34 600 123 456"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Global Settings */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-purple-500/10 rounded-lg">
|
||||
<Globe className="w-5 h-5 text-purple-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
Configuración General
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Idioma, zona horaria y configuración de silencio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Select
|
||||
label="Idioma"
|
||||
options={languageOptions}
|
||||
value={preferences.language}
|
||||
onChange={(value) => handlePreferenceChange('language', value)}
|
||||
leftIcon={<Globe className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Zona Horaria"
|
||||
options={timezoneOptions}
|
||||
value={preferences.timezone}
|
||||
onChange={(value) => handlePreferenceChange('timezone', value)}
|
||||
leftIcon={<Clock className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Frecuencia de Resumen"
|
||||
options={digestOptions}
|
||||
value={preferences.digest_frequency}
|
||||
onChange={(value) => handlePreferenceChange('digest_frequency', value)}
|
||||
leftIcon={<FileText className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quiet Hours */}
|
||||
<div className="mt-6 p-4 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{isQuietHoursEnabled() ? (
|
||||
<Moon className="w-5 h-5 text-indigo-500" />
|
||||
) : (
|
||||
<Sun className="w-5 h-5 text-yellow-500" />
|
||||
)}
|
||||
<div>
|
||||
<h4 className="font-medium text-[var(--text-primary)]">Horas Silenciosas</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Sin notificaciones durante este periodo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||
Desde
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={preferences.quiet_hours_start}
|
||||
onChange={(e) => handlePreferenceChange('quiet_hours_start', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||
Hasta
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={preferences.quiet_hours_end}
|
||||
onChange={(e) => handlePreferenceChange('quiet_hours_end', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Notification Categories */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Alerts */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
{getCategoryIcon('alerts')}
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--text-primary)]">Alertas</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Notificaciones urgentes e importantes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Push Alerts */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('push')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
App Push
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.push_alerts}
|
||||
onChange={(e) => handlePreferenceChange('push_alerts', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Email Alerts */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('email')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
Email
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.email_alerts}
|
||||
onChange={(e) => handlePreferenceChange('email_alerts', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp Alerts */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('whatsapp')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
WhatsApp
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.whatsapp_alerts}
|
||||
onChange={(e) => handlePreferenceChange('whatsapp_alerts', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Reports */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
{getCategoryIcon('reports')}
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--text-primary)]">Reportes</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Informes y análisis del negocio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Push Reports */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('push')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
App Push
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.push_reports}
|
||||
onChange={(e) => handlePreferenceChange('push_reports', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Email Reports */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('email')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
Email
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.email_reports}
|
||||
onChange={(e) => handlePreferenceChange('email_reports', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp Reports */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('whatsapp')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
WhatsApp
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.whatsapp_reports}
|
||||
onChange={(e) => handlePreferenceChange('whatsapp_reports', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Marketing */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
{getCategoryIcon('marketing')}
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--text-primary)]">Marketing</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Promociones y campañas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Email Marketing */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('email')}
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
Email
|
||||
</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.email_marketing}
|
||||
onChange={(e) => handlePreferenceChange('email_marketing', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
Las preferencias de marketing se aplicarán solo a contenido promocional opcional
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Master Channel Controls */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-orange-500/10 rounded-lg">
|
||||
<Volume2 className="w-5 h-5 text-orange-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
|
||||
Control de Canales
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Activar o desactivar canales de comunicación completamente
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Email Master Control */}
|
||||
<div className="p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('email')}
|
||||
<span className="font-medium text-[var(--text-primary)]">Email</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.email_enabled}
|
||||
onChange={(e) => handlePreferenceChange('email_enabled', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-1">
|
||||
Límite diario
|
||||
</label>
|
||||
<select
|
||||
value={preferences.max_emails_per_day}
|
||||
onChange={(e) => handlePreferenceChange('max_emails_per_day', parseInt(e.target.value))}
|
||||
disabled={!preferences.email_enabled}
|
||||
className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:opacity-50"
|
||||
>
|
||||
{maxEmailsOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">
|
||||
{preferences.email_enabled ? 'Activado' : 'Desactivado'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Push Master Control */}
|
||||
<div className="p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('push')}
|
||||
<span className="font-medium text-[var(--text-primary)]">Push</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.push_enabled}
|
||||
onChange={(e) => handlePreferenceChange('push_enabled', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">
|
||||
{preferences.push_enabled ? 'Notificaciones push activadas' : 'Notificaciones push desactivadas'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp Master Control */}
|
||||
<div className="p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{getChannelIcon('whatsapp')}
|
||||
<span className="font-medium text-[var(--text-primary)]">WhatsApp</span>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.whatsapp_enabled}
|
||||
onChange={(e) => handlePreferenceChange('whatsapp_enabled', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
|
||||
</label>
|
||||
</div>
|
||||
{contactInfo.phone ? (
|
||||
<p className="text-xs text-[var(--text-secondary)]">
|
||||
{contactInfo.phone}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-[var(--color-warning)]">
|
||||
Configura tu teléfono arriba
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">
|
||||
{preferences.whatsapp_enabled ? 'Activado' : 'Desactivado'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Status Summary */}
|
||||
<Card className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge
|
||||
variant={preferences.email_enabled || preferences.push_enabled || preferences.whatsapp_enabled ? 'success' : 'warning'}
|
||||
size="sm"
|
||||
>
|
||||
{preferences.email_enabled || preferences.push_enabled || preferences.whatsapp_enabled ? 'Activo' : 'Limitado'}
|
||||
</Badge>
|
||||
<span className="text-sm text-[var(--text-secondary)]">
|
||||
Estado de notificaciones
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{[
|
||||
preferences.email_enabled && 'Email',
|
||||
preferences.push_enabled && 'Push',
|
||||
preferences.whatsapp_enabled && 'WhatsApp'
|
||||
].filter(Boolean).join(' • ') || 'Sin canales activos'}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Save Changes Banner */}
|
||||
{hasChanges && (
|
||||
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-[var(--color-primary)] text-white px-6 py-3 rounded-lg shadow-lg flex items-center space-x-4 z-50">
|
||||
<span className="text-sm font-medium">Tienes cambios sin guardar</span>
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="bg-white text-[var(--color-primary)] hover:bg-gray-100 border-white"
|
||||
onClick={onReset}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Descartar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="bg-[var(--color-primary-dark)] hover:bg-[var(--color-primary-darker)] text-white border-transparent"
|
||||
onClick={handleSave}
|
||||
disabled={isLoading}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunicationPreferences;
|
||||
@@ -8,6 +8,7 @@ import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
|
||||
import { subscriptionService, type UsageSummary, type AvailablePlans } from '../../../../api';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CommunicationPreferences, { type NotificationPreferences } from './CommunicationPreferences';
|
||||
|
||||
interface ProfileFormData {
|
||||
first_name: string;
|
||||
@@ -24,58 +25,6 @@ interface PasswordData {
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
interface NotificationPreferences {
|
||||
notifications: {
|
||||
inventory: {
|
||||
app: boolean;
|
||||
email: boolean;
|
||||
sms: boolean;
|
||||
frequency: string;
|
||||
};
|
||||
sales: {
|
||||
app: boolean;
|
||||
email: boolean;
|
||||
sms: boolean;
|
||||
frequency: string;
|
||||
};
|
||||
production: {
|
||||
app: boolean;
|
||||
email: boolean;
|
||||
sms: boolean;
|
||||
frequency: string;
|
||||
};
|
||||
system: {
|
||||
app: boolean;
|
||||
email: boolean;
|
||||
sms: boolean;
|
||||
frequency: string;
|
||||
};
|
||||
marketing: {
|
||||
app: boolean;
|
||||
email: boolean;
|
||||
sms: boolean;
|
||||
frequency: string;
|
||||
};
|
||||
};
|
||||
global: {
|
||||
doNotDisturb: boolean;
|
||||
quietHours: {
|
||||
enabled: boolean;
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
language: string;
|
||||
timezone: string;
|
||||
soundEnabled: boolean;
|
||||
vibrationEnabled: boolean;
|
||||
};
|
||||
channels: {
|
||||
email: string;
|
||||
phone: string;
|
||||
slack: boolean;
|
||||
webhook: string;
|
||||
};
|
||||
}
|
||||
|
||||
const ProfilePage: React.FC = () => {
|
||||
const user = useAuthUser();
|
||||
@@ -120,19 +69,11 @@ const ProfilePage: React.FC = () => {
|
||||
timezone: profile.timezone || 'Europe/Madrid'
|
||||
});
|
||||
|
||||
// Update preferences with profile data
|
||||
setPreferences(prev => ({
|
||||
// Update notification preferences with profile data
|
||||
setNotificationPreferences(prev => ({
|
||||
...prev,
|
||||
global: {
|
||||
...prev.global,
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid'
|
||||
},
|
||||
channels: {
|
||||
...prev.channels,
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || ''
|
||||
}
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid'
|
||||
}));
|
||||
}
|
||||
}, [profile]);
|
||||
@@ -151,58 +92,23 @@ const ProfilePage: React.FC = () => {
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const [preferences, setPreferences] = useState<NotificationPreferences>({
|
||||
notifications: {
|
||||
inventory: {
|
||||
app: true,
|
||||
email: false,
|
||||
sms: true,
|
||||
frequency: 'immediate'
|
||||
},
|
||||
sales: {
|
||||
app: true,
|
||||
email: true,
|
||||
sms: false,
|
||||
frequency: 'hourly'
|
||||
},
|
||||
production: {
|
||||
app: true,
|
||||
email: false,
|
||||
sms: true,
|
||||
frequency: 'immediate'
|
||||
},
|
||||
system: {
|
||||
app: true,
|
||||
email: true,
|
||||
sms: false,
|
||||
frequency: 'daily'
|
||||
},
|
||||
marketing: {
|
||||
app: false,
|
||||
email: true,
|
||||
sms: false,
|
||||
frequency: 'weekly'
|
||||
}
|
||||
},
|
||||
global: {
|
||||
doNotDisturb: false,
|
||||
quietHours: {
|
||||
enabled: false,
|
||||
start: '22:00',
|
||||
end: '07:00'
|
||||
},
|
||||
language: 'es',
|
||||
timezone: 'Europe/Madrid',
|
||||
soundEnabled: true,
|
||||
vibrationEnabled: true
|
||||
},
|
||||
channels: {
|
||||
email: '',
|
||||
phone: '',
|
||||
slack: false,
|
||||
webhook: ''
|
||||
}
|
||||
const [notificationPreferences, setNotificationPreferences] = useState<NotificationPreferences>({
|
||||
email_enabled: true,
|
||||
email_alerts: true,
|
||||
email_marketing: false,
|
||||
email_reports: true,
|
||||
whatsapp_enabled: false,
|
||||
whatsapp_alerts: false,
|
||||
whatsapp_reports: false,
|
||||
push_enabled: true,
|
||||
push_alerts: true,
|
||||
push_reports: false,
|
||||
quiet_hours_start: '22:00',
|
||||
quiet_hours_end: '08:00',
|
||||
timezone: 'Europe/Madrid',
|
||||
digest_frequency: 'daily',
|
||||
max_emails_per_day: 10,
|
||||
language: 'es'
|
||||
});
|
||||
|
||||
const languageOptions = [
|
||||
@@ -316,152 +222,43 @@ const ProfilePage: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Communication Preferences handlers
|
||||
const categories = [
|
||||
{
|
||||
id: 'inventory',
|
||||
name: 'Inventario',
|
||||
description: 'Alertas de stock, reposiciones y vencimientos',
|
||||
icon: '📦'
|
||||
},
|
||||
{
|
||||
id: 'sales',
|
||||
name: 'Ventas',
|
||||
description: 'Pedidos, transacciones y reportes de ventas',
|
||||
icon: '💰'
|
||||
},
|
||||
{
|
||||
id: 'production',
|
||||
name: 'Producción',
|
||||
description: 'Hornadas, calidad y tiempos de producción',
|
||||
icon: '🍞'
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
name: 'Sistema',
|
||||
description: 'Actualizaciones, mantenimiento y errores',
|
||||
icon: '⚙️'
|
||||
},
|
||||
{
|
||||
id: 'marketing',
|
||||
name: 'Marketing',
|
||||
description: 'Campañas, promociones y análisis',
|
||||
icon: '📢'
|
||||
}
|
||||
];
|
||||
|
||||
const frequencies = [
|
||||
{ value: 'immediate', label: 'Inmediato' },
|
||||
{ value: 'hourly', label: 'Cada hora' },
|
||||
{ value: 'daily', label: 'Diario' },
|
||||
{ value: 'weekly', label: 'Semanal' }
|
||||
];
|
||||
|
||||
const handleNotificationChange = (category: string, channel: string, value: boolean) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
notifications: {
|
||||
...prev.notifications,
|
||||
[category]: {
|
||||
...prev.notifications[category as keyof typeof prev.notifications],
|
||||
[channel]: value
|
||||
}
|
||||
}
|
||||
}));
|
||||
setHasPreferencesChanges(true);
|
||||
};
|
||||
|
||||
const handleFrequencyChange = (category: string, frequency: string) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
notifications: {
|
||||
...prev.notifications,
|
||||
[category]: {
|
||||
...prev.notifications[category as keyof typeof prev.notifications],
|
||||
frequency
|
||||
}
|
||||
}
|
||||
}));
|
||||
setHasPreferencesChanges(true);
|
||||
};
|
||||
|
||||
const handleGlobalChange = (setting: string, value: any) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
global: {
|
||||
...prev.global,
|
||||
[setting]: value
|
||||
}
|
||||
}));
|
||||
setHasPreferencesChanges(true);
|
||||
};
|
||||
|
||||
const handleChannelChange = (channel: string, value: string | boolean) => {
|
||||
setPreferences(prev => ({
|
||||
...prev,
|
||||
channels: {
|
||||
...prev.channels,
|
||||
[channel]: value
|
||||
}
|
||||
}));
|
||||
setHasPreferencesChanges(true);
|
||||
};
|
||||
|
||||
const handleSavePreferences = async () => {
|
||||
// Notification preferences handlers
|
||||
const handleSaveNotificationPreferences = async (preferences: NotificationPreferences) => {
|
||||
try {
|
||||
await updateProfileMutation.mutateAsync({
|
||||
language: preferences.global.language,
|
||||
timezone: preferences.global.timezone,
|
||||
phone: preferences.channels.phone,
|
||||
notification_preferences: preferences.notifications
|
||||
language: preferences.language,
|
||||
timezone: preferences.timezone,
|
||||
notification_preferences: preferences
|
||||
});
|
||||
|
||||
addToast('Preferencias guardadas correctamente', 'success');
|
||||
setNotificationPreferences(preferences);
|
||||
setHasPreferencesChanges(false);
|
||||
} catch (error) {
|
||||
addToast('Error al guardar las preferencias', 'error');
|
||||
throw error; // Let the component handle the error display
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetPreferences = () => {
|
||||
const handleResetNotificationPreferences = () => {
|
||||
if (profile) {
|
||||
setPreferences({
|
||||
notifications: {
|
||||
inventory: { app: true, email: false, sms: true, frequency: 'immediate' },
|
||||
sales: { app: true, email: true, sms: false, frequency: 'hourly' },
|
||||
production: { app: true, email: false, sms: true, frequency: 'immediate' },
|
||||
system: { app: true, email: true, sms: false, frequency: 'daily' },
|
||||
marketing: { app: false, email: true, sms: false, frequency: 'weekly' }
|
||||
},
|
||||
global: {
|
||||
doNotDisturb: false,
|
||||
quietHours: { enabled: false, start: '22:00', end: '07:00' },
|
||||
language: profile.language || 'es',
|
||||
timezone: profile.timezone || 'Europe/Madrid',
|
||||
soundEnabled: true,
|
||||
vibrationEnabled: true
|
||||
},
|
||||
channels: {
|
||||
email: profile.email || '',
|
||||
phone: profile.phone || '',
|
||||
slack: false,
|
||||
webhook: ''
|
||||
}
|
||||
setNotificationPreferences({
|
||||
email_enabled: true,
|
||||
email_alerts: true,
|
||||
email_marketing: false,
|
||||
email_reports: true,
|
||||
whatsapp_enabled: false,
|
||||
whatsapp_alerts: false,
|
||||
whatsapp_reports: false,
|
||||
push_enabled: true,
|
||||
push_alerts: true,
|
||||
push_reports: false,
|
||||
quiet_hours_start: '22:00',
|
||||
quiet_hours_end: '08:00',
|
||||
timezone: profile.timezone || 'Europe/Madrid',
|
||||
digest_frequency: 'daily',
|
||||
max_emails_per_day: 10,
|
||||
language: profile.language || 'es'
|
||||
});
|
||||
}
|
||||
setHasPreferencesChanges(false);
|
||||
};
|
||||
|
||||
const getChannelIcon = (channel: string) => {
|
||||
switch (channel) {
|
||||
case 'app':
|
||||
return <Bell className="w-4 h-4" />;
|
||||
case 'email':
|
||||
return <Mail className="w-4 h-4" />;
|
||||
case 'sms':
|
||||
return <Smartphone className="w-4 h-4" />;
|
||||
default:
|
||||
return <MessageSquare className="w-4 h-4" />;
|
||||
setHasPreferencesChanges(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -784,209 +581,15 @@ const ProfilePage: React.FC = () => {
|
||||
|
||||
{/* Communication Preferences Tab */}
|
||||
{activeTab === 'preferences' && (
|
||||
<>
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="outline" onClick={handleResetPreferences}>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Restaurar
|
||||
</Button>
|
||||
<Button onClick={handleSavePreferences} disabled={!hasPreferencesChanges}>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Guardar Cambios
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Global Settings */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Configuración General</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.global.doNotDisturb}
|
||||
onChange={(e) => handleGlobalChange('doNotDisturb', e.target.checked)}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-[var(--text-secondary)]">No molestar</span>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">Silencia todas las notificaciones</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.global.soundEnabled}
|
||||
onChange={(e) => handleGlobalChange('soundEnabled', e.target.checked)}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-[var(--text-secondary)]">Sonidos</span>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">Reproducir sonidos de notificación</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center space-x-2 mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences.global.quietHours.enabled}
|
||||
onChange={(e) => handleGlobalChange('quietHours', {
|
||||
...preferences.global.quietHours,
|
||||
enabled: e.target.checked
|
||||
})}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<span className="text-sm font-medium text-[var(--text-secondary)]">Horas silenciosas</span>
|
||||
</label>
|
||||
{preferences.global.quietHours.enabled && (
|
||||
<div className="flex space-x-4 ml-6">
|
||||
<div>
|
||||
<label className="block text-xs text-[var(--text-tertiary)] mb-1">Desde</label>
|
||||
<input
|
||||
type="time"
|
||||
value={preferences.global.quietHours.start}
|
||||
onChange={(e) => handleGlobalChange('quietHours', {
|
||||
...preferences.global.quietHours,
|
||||
start: e.target.value
|
||||
})}
|
||||
className="px-3 py-1 border border-[var(--border-secondary)] rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-[var(--text-tertiary)] mb-1">Hasta</label>
|
||||
<input
|
||||
type="time"
|
||||
value={preferences.global.quietHours.end}
|
||||
onChange={(e) => handleGlobalChange('quietHours', {
|
||||
...preferences.global.quietHours,
|
||||
end: e.target.value
|
||||
})}
|
||||
className="px-3 py-1 border border-[var(--border-secondary)] rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Channel Settings */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Canales de Comunicación</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={preferences.channels.email}
|
||||
onChange={(e) => handleChannelChange('email', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
placeholder="tu-email@ejemplo.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Teléfono (SMS)</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={preferences.channels.phone}
|
||||
onChange={(e) => handleChannelChange('phone', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
placeholder="+34 600 123 456"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Webhook URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={preferences.channels.webhook}
|
||||
onChange={(e) => handleChannelChange('webhook', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
placeholder="https://tu-webhook.com/notifications"
|
||||
/>
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">URL para recibir notificaciones JSON</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Category Preferences */}
|
||||
<div className="space-y-4">
|
||||
{categories.map((category) => {
|
||||
const categoryPrefs = preferences.notifications[category.id as keyof typeof preferences.notifications];
|
||||
|
||||
return (
|
||||
<Card key={category.id} className="p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="text-2xl">{category.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">{category.name}</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-4">{category.description}</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Channel toggles */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[var(--text-secondary)] mb-2">Canales</h4>
|
||||
<div className="flex space-x-6">
|
||||
{['app', 'email', 'sms'].map((channel) => (
|
||||
<label key={channel} className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={categoryPrefs[channel as keyof typeof categoryPrefs] as boolean}
|
||||
onChange={(e) => handleNotificationChange(category.id, channel, e.target.checked)}
|
||||
className="rounded border-[var(--border-secondary)]"
|
||||
/>
|
||||
<div className="flex items-center space-x-1">
|
||||
{getChannelIcon(channel)}
|
||||
<span className="text-sm text-[var(--text-secondary)] capitalize">{channel}</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Frequency */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-[var(--text-secondary)] mb-2">Frecuencia</h4>
|
||||
<select
|
||||
value={categoryPrefs.frequency}
|
||||
onChange={(e) => handleFrequencyChange(category.id, e.target.value)}
|
||||
className="px-3 py-2 border border-[var(--border-secondary)] rounded-md text-sm"
|
||||
>
|
||||
{frequencies.map((freq) => (
|
||||
<option key={freq.value} value={freq.value}>
|
||||
{freq.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Save Changes Banner */}
|
||||
{hasPreferencesChanges && (
|
||||
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center space-x-4">
|
||||
<span className="text-sm">Tienes cambios sin guardar</span>
|
||||
<div className="flex space-x-2">
|
||||
<Button size="sm" variant="outline" className="text-[var(--color-info)] bg-white" onClick={handleResetPreferences}>
|
||||
Descartar
|
||||
</Button>
|
||||
<Button size="sm" className="bg-blue-700 hover:bg-blue-800" onClick={handleSavePreferences}>
|
||||
Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<CommunicationPreferences
|
||||
userEmail={profileData.email}
|
||||
userPhone={profileData.phone}
|
||||
userLanguage={profileData.language}
|
||||
userTimezone={profileData.timezone}
|
||||
onSave={handleSaveNotificationPreferences}
|
||||
onReset={handleResetNotificationPreferences}
|
||||
hasChanges={hasPreferencesChanges}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Subscription Tab */}
|
||||
|
||||
Reference in New Issue
Block a user