bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend pages imporvements

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-21 22:56:55 +02:00
parent f08667150d
commit ecfc6a1997
14 changed files with 1538 additions and 1093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/domain/team/AddTeamMemberModal.tsx
View File

@@ -23,6 +23,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
}) => {
const [formData, setFormData] = useState({
userId: '',
userEmail: '', // Add email field for manual input
role: TENANT_ROLES.MEMBER
});
@@ -33,7 +34,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
// Map field positions to form data fields
const fieldMappings = [
// Basic Information section
['userId', 'role']
['userId', 'userEmail', 'role']
];
const fieldName = fieldMappings[sectionIndex]?.[fieldIndex] as keyof typeof formData;
@@ -46,9 +47,9 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
};
const handleSave = async () => {
// Validation
if (!formData.userId) {
alert('Por favor selecciona un usuario');
// Validation - need either userId OR userEmail
if (!formData.userId && !formData.userEmail) {
alert('Por favor selecciona un usuario o ingresa un email');
return;
}
@@ -61,7 +62,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
try {
if (onAddMember) {
await onAddMember({
userId: formData.userId,
userId: formData.userId || formData.userEmail, // Use email as userId if no userId selected
role: formData.role
});
}
@@ -69,6 +70,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
// Reset form
setFormData({
userId: '',
userEmail: '',
role: TENANT_ROLES.MEMBER
});
@@ -85,6 +87,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
// Reset form to initial values
setFormData({
userId: '',
userEmail: '',
role: TENANT_ROLES.MEMBER
});
onClose();
@@ -104,10 +107,12 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
{ label: 'Observador - Solo lectura', value: TENANT_ROLES.VIEWER }
];
const userOptions = availableUsers.map(user => ({
label: `${user.full_name} (${user.email})`,
value: user.id
}));
const userOptions = availableUsers.length > 0
? availableUsers.map(user => ({
label: `${user.full_name} (${user.email})`,
value: user.id
}))
: [];
const getRoleDescription = (role: string) => {
switch (role) {
@@ -127,14 +132,22 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
title: 'Información del Miembro',
icon: Users,
fields: [
{
...(userOptions.length > 0 ? [{
label: 'Usuario',
value: formData.userId,
type: 'select' as const,
editable: true,
required: true,
required: !formData.userEmail, // Only required if email not provided
options: userOptions,
placeholder: 'Seleccionar usuario...'
}] : []),
{
label: userOptions.length > 0 ? 'O Email del Usuario' : 'Email del Usuario',
value: formData.userEmail,
type: 'email' as const,
editable: true,
required: !formData.userId, // Only required if user not selected
placeholder: 'usuario@ejemplo.com'
},
{
label: 'Rol',

68
frontend/src/components/layout/Header/Header.tsx
View File

@@ -9,16 +9,14 @@ import { Avatar } from '../../ui';
import { Badge } from '../../ui';
import { Modal } from '../../ui';
import { TenantSwitcher } from '../../ui/TenantSwitcher';
import { ThemeToggle } from '../../ui/ThemeToggle';
import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
import {
Menu,
Search,
Bell,
Sun,
Moon,
Computer,
Settings,
User,
import {
Menu,
Search,
Bell,
Settings,
User,
LogOut,
X
} from 'lucide-react';
@@ -116,7 +114,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
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);
@@ -179,7 +176,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
// Escape to close menus
if (e.key === 'Escape') {
setIsUserMenuOpen(false);
setIsThemeMenuOpen(false);
setIsNotificationPanelOpen(false);
if (isSearchFocused) {
searchInputRef.current?.blur();
@@ -198,9 +194,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
if (!target.closest('[data-user-menu]')) {
setIsUserMenuOpen(false);
}
if (!target.closest('[data-theme-menu]')) {
setIsThemeMenuOpen(false);
}
if (!target.closest('[data-notification-panel]')) {
setIsNotificationPanelOpen(false);
}
@@ -210,13 +203,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
return () => document.removeEventListener('click', handleClickOutside);
}, []);
const themeIcons = {
light: Sun,
dark: Moon,
auto: Computer,
};
const ThemeIcon = themeIcons[theme] || Sun;
return (
<header
@@ -352,45 +338,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
{/* Theme toggle */}
{showThemeToggle && (
<div className="relative" data-theme-menu>
<Button
variant="ghost"
size="sm"
onClick={() => setIsThemeMenuOpen(!isThemeMenuOpen)}
className="w-10 h-10 p-0 flex items-center justify-center"
aria-label={`Tema actual: ${theme}`}
aria-expanded={isThemeMenuOpen}
aria-haspopup="true"
>
<ThemeIcon className="h-5 w-5" />
</Button>
{isThemeMenuOpen && (
<div className="absolute right-0 top-full mt-2 w-48 bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg py-1 z-[var(--z-dropdown)]">
{[
{ key: 'light' as const, label: 'Claro', icon: Sun },
{ key: 'dark' as const, label: 'Oscuro', icon: Moon },
{ key: 'auto' as const, label: 'Sistema', icon: Computer },
].map(({ key, label, icon: Icon }) => (
<button
key={key}
onClick={() => {
setTheme(key);
setIsThemeMenuOpen(false);
}}
className={clsx(
'w-full px-4 py-2 text-left text-sm flex items-center gap-3',
'hover:bg-[var(--bg-secondary)] transition-colors',
theme === key && 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
)}
>
<Icon className="h-4 w-4" />
{label}
</button>
))}
</div>
)}
</div>
<ThemeToggle variant="button" size="md" />
)}
{/* Notifications */}

52
frontend/src/components/ui/TenantSwitcher.tsx
View File

@@ -1,8 +1,9 @@
import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useNavigate } from 'react-router-dom';
import { useTenant } from '../../stores/tenant.store';
import { useToast } from '../../hooks/ui/useToast';
import { ChevronDown, Building2, Check, AlertCircle } from 'lucide-react';
import { ChevronDown, Building2, Check, AlertCircle, Plus } from 'lucide-react';
interface TenantSwitcherProps {
className?: string;
@@ -13,6 +14,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
className = '',
showLabel = true,
}) => {
const navigate = useNavigate();
const [isOpen, setIsOpen] = useState(false);
const [dropdownPosition, setDropdownPosition] = useState<{
top: number;
@@ -23,7 +25,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
}>({ top: 0, left: 0, width: 288, isMobile: false });
const dropdownRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const {
currentTenant,
availableTenants,
@@ -33,7 +35,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
loadUserTenants,
clearError,
} = useTenant();
const { success: showSuccessToast, error: showErrorToast } = useToast();
// Load tenants on mount
@@ -170,6 +172,12 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
loadUserTenants();
};
// Handle creating new tenant
const handleCreateNewTenant = () => {
setIsOpen(false);
navigate('/app/onboarding');
};
// Don't render if no tenants available
if (!availableTenants || availableTenants.length === 0) {
return null;
@@ -229,11 +237,8 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
{/* Header */}
<div className={`border-b border-border-primary ${dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'}`}>
<h3 className={`font-semibold text-text-primary ${dropdownPosition.isMobile ? 'text-base' : 'text-sm'}`}>
Switch Organization
Organizations
</h3>
<p className={`text-text-secondary ${dropdownPosition.isMobile ? 'text-sm mt-1' : 'text-xs'}`}>
Select the organization you want to work with
</p>
</div>
{/* Error State */}
@@ -267,21 +272,25 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
>
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-color-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<Building2 className="w-4 h-4 text-color-primary" />
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
tenant.id === currentTenant?.id
? 'bg-color-primary text-white'
: 'bg-color-primary/10 text-color-primary'
}`}>
<Building2 className="w-4 h-4" />
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-text-primary truncate">
{tenant.name}
</p>
<p className="text-xs text-text-secondary truncate">
{tenant.business_type} • {tenant.city}
{tenant.city}
</p>
</div>
</div>
</div>
{tenant.id === currentTenant?.id && (
<Check className="w-4 h-4 text-color-success flex-shrink-0 ml-2" />
)}
@@ -294,14 +303,17 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
<div className={`border-t border-border-primary bg-bg-secondary rounded-b-lg ${
dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'
}`}>
<p className={`text-text-secondary ${dropdownPosition.isMobile ? 'text-sm' : 'text-xs'}`}>
Need to add a new organization?{' '}
<button className={`text-color-primary hover:text-color-primary-dark underline ${
dropdownPosition.isMobile ? 'active:text-color-primary-dark' : ''
}`}>
Contact Support
</button>
</p>
<button
onClick={handleCreateNewTenant}
className={`w-full flex items-center justify-center gap-2 ${
dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'
} text-color-primary hover:text-color-primary-dark hover:bg-bg-tertiary rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20`}
>
<Plus className="w-4 h-4" />
<span className={`font-medium ${dropdownPosition.isMobile ? 'text-sm' : 'text-xs'}`}>
Add New Organization
</span>
</button>
</div>
</div>,
document.body

23
frontend/src/components/ui/ThemeToggle/ThemeToggle.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { clsx } from 'clsx';
import { useTheme } from '../../../contexts/ThemeContext';
import { Button } from '../Button';
import { Sun, Moon, Computer } from 'lucide-react';
import { Sun, Moon } from 'lucide-react';
export interface ThemeToggleProps {
className?: string;
@@ -29,7 +29,7 @@ export interface ThemeToggleProps {
*
* Features:
* - Multiple display variants (button, dropdown, switch)
* - Support for light/dark/system themes
* - Support for light/dark themes
* - Configurable size and labels
* - Accessible keyboard navigation
* - Click outside to close dropdown
@@ -47,10 +47,11 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = ({
const themes = [
{ key: 'light' as const, label: 'Claro', icon: Sun },
{ key: 'dark' as const, label: 'Oscuro', icon: Moon },
{ key: 'auto' as const, label: 'Sistema', icon: Computer },
];
const currentTheme = themes.find(t => t.key === theme) || themes[0];
// If theme is 'auto', use the resolved theme for display
const displayTheme = theme === 'auto' ? resolvedTheme : theme;
const currentTheme = themes.find(t => t.key === displayTheme) || themes[0];
const CurrentIcon = currentTheme.icon;
// Size mappings
@@ -93,20 +94,18 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = ({
return () => document.removeEventListener('click', handleClickOutside);
}, [isDropdownOpen]);
// Cycle through themes for button variant
// Toggle between light and dark for button variant
const handleButtonToggle = () => {
const currentIndex = themes.findIndex(t => t.key === theme);
const nextIndex = (currentIndex + 1) % themes.length;
setTheme(themes[nextIndex].key);
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
};
// Handle theme selection
const handleThemeSelect = (themeKey: 'light' | 'dark' | 'auto') => {
const handleThemeSelect = (themeKey: 'light' | 'dark') => {
setTheme(themeKey);
setIsDropdownOpen(false);
};
// Button variant - cycles through themes
// Button variant - toggles between light and dark
if (variant === 'button') {
return (
<Button
@@ -209,14 +208,14 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = ({
'w-full px-4 py-2 text-left text-sm flex items-center gap-3',
'hover:bg-[var(--bg-secondary)] transition-colors',
'focus:bg-[var(--bg-secondary)] focus:outline-none',
theme === key && 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
displayTheme === key && 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
)}
role="menuitem"
aria-label={`Cambiar a tema ${label.toLowerCase()}`}
>
<Icon className="w-4 h-4" />
{label}
{theme === key && (
{displayTheme === key && (
<div className="ml-auto w-2 h-2 bg-[var(--color-primary)] rounded-full" />
)}
</button>

5
frontend/src/hooks/index.ts Normal file
View File

@@ -0,0 +1,5 @@
// Export commonly used hooks
export { default as useLocalStorage } from './useLocalStorage';
export { default as useDebounce } from './useDebounce';
export { default as useSubscription } from './useSubscription';
export { useTenantId, useTenantInfo, useRequiredTenant } from './useTenantId';

49
frontend/src/hooks/useTenantId.ts Normal file
View File

@@ -0,0 +1,49 @@
/**
* Custom hook to consistently get tenant ID from tenant store
* Provides a standardized way to access tenant ID across the application
*/
import { useCurrentTenant } from '../stores/tenant.store';
/**
* Hook to get the current tenant ID
* @returns {string} The current tenant ID, or empty string if not available
*/
export const useTenantId = (): string => {
const currentTenant = useCurrentTenant();
return currentTenant?.id || '';
};
/**
* Hook to get both tenant and tenant ID
* @returns {object} Object containing currentTenant and tenantId
*/
export const useTenantInfo = () => {
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
return {
currentTenant,
tenantId,
hasTenant: !!currentTenant,
};
};
/**
* Hook to ensure tenant is available before proceeding
* Useful for components that absolutely require a tenant to function
* @returns {object} Object with tenant info and loading state
*/
export const useRequiredTenant = () => {
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
const isReady = !!tenantId;
return {
currentTenant,
tenantId,
isReady,
isLoading: !isReady, // Indicates if we're still waiting for tenant
};
};
export default useTenantId;

797
frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx
View File

@@ -1,15 +1,17 @@
import React, { useState, useMemo } from 'react';
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings, Loader, Zap, Brain, Target, CloudRain, Sun, Thermometer } from 'lucide-react';
import { Button, Card, Badge, Select, Table, StatsGrid } from '../../../../components/ui';
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings, Loader, Zap, Brain, Target, CloudRain, Sun, Thermometer, Package, Activity, Clock } from 'lucide-react';
import { Button, Card, Badge, Table, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
import type { TableColumn } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { LoadingSpinner } from '../../../../components/shared';
import { DemandChart, ForecastTable } from '../../../../components/domain/forecasting';
import { useTenantForecasts, useCreateSingleForecast } from '../../../../api/hooks/forecasting';
import { useIngredients } from '../../../../api/hooks/inventory';
import { useModels } from '../../../../api/hooks/training';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useTenantId } from '../../../../hooks/useTenantId';
import { ForecastResponse } from '../../../../api/types/forecasting';
import { forecastingService } from '../../../../api/services/forecasting';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
const ForecastingPage: React.FC = () => {
const [selectedProduct, setSelectedProduct] = useState('');
@@ -20,8 +22,7 @@ const ForecastingPage: React.FC = () => {
const [currentForecastData, setCurrentForecastData] = useState<ForecastResponse[]>([]);
// Get tenant ID from tenant store
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
const tenantId = useTenantId();
// Calculate date range based on selected period
const endDate = new Date();
@@ -145,42 +146,6 @@ const ForecastingPage: React.FC = () => {
};
// Extract weather data from all forecasts for 7-day view
const getWeatherImpact = (forecasts: ForecastResponse[]) => {
if (!forecasts || forecasts.length === 0) return null;
// Calculate average temperature across all forecast days
const avgTemp = forecasts.reduce((sum, f) => sum + (f.weather_temperature || 0), 0) / forecasts.length;
const tempRange = {
min: Math.min(...forecasts.map(f => f.weather_temperature || 0)),
max: Math.max(...forecasts.map(f => f.weather_temperature || 0))
};
// Aggregate weather descriptions
const weatherTypes = forecasts
.map(f => f.weather_description)
.filter(Boolean)
.reduce((acc, desc) => {
acc[desc] = (acc[desc] || 0) + 1;
return acc;
}, {} as Record<string, number>);
const dominantWeather = Object.entries(weatherTypes)
.sort(([,a], [,b]) => b - a)[0]?.[0] || 'N/A';
return {
avgTemperature: Math.round(avgTemp),
tempRange,
dominantWeather,
forecastDays: forecasts.length,
dailyForecasts: forecasts.map(f => ({
date: f.forecast_date,
temperature: f.weather_temperature,
description: f.weather_description,
predicted_demand: f.predicted_demand
}))
};
};
const forecastColumns: TableColumn[] = [
@@ -224,7 +189,6 @@ const ForecastingPage: React.FC = () => {
// Use either current forecast data or fetched data
const forecasts = currentForecastData.length > 0 ? currentForecastData : (forecastsData?.forecasts || []);
const transformedForecasts = transformForecastsForTable(forecasts);
const weatherImpact = getWeatherImpact(forecasts);
const isLoading = forecastsLoading || ingredientsLoading || modelsLoading || isGenerating;
const hasError = forecastsError || ingredientsError || modelsError;
@@ -234,495 +198,370 @@ const ForecastingPage: React.FC = () => {
? Math.round((forecasts.reduce((sum, f) => sum + f.confidence_level, 0) / forecasts.length) * 100)
: 0;
// Get forecast insights from the latest forecast - only real backend data
const getForecastInsights = (forecast: ForecastResponse) => {
// Get simplified forecast insights
const getForecastInsights = (forecasts: ForecastResponse[]) => {
if (!forecasts || forecasts.length === 0) return [];
const insights = [];
const avgConfidence = forecasts.reduce((sum, f) => sum + f.confidence_level, 0) / forecasts.length;
// Weather data (only factual)
if (forecast.weather_temperature) {
insights.push({
type: 'weather',
icon: Thermometer,
title: 'Temperatura',
description: `${forecast.weather_temperature}°C`,
impact: 'info'
});
}
if (forecast.weather_description) {
insights.push({
type: 'weather',
icon: CloudRain,
title: 'Condición Climática',
description: forecast.weather_description,
impact: 'info'
});
}
// Temporal factors (only factual)
if (forecast.is_weekend) {
insights.push({
type: 'temporal',
icon: Calendar,
title: 'Fin de Semana',
description: 'Día de fin de semana',
impact: 'info'
});
}
if (forecast.is_holiday) {
insights.push({
type: 'temporal',
icon: Calendar,
title: 'Día Festivo',
description: 'Día festivo',
impact: 'info'
});
}
// Model confidence (factual)
// Model confidence
insights.push({
type: 'model',
icon: Target,
title: 'Confianza del Modelo',
description: `${Math.round(forecast.confidence_level * 100)}%`,
impact: forecast.confidence_level > 0.8 ? 'positive' : forecast.confidence_level > 0.6 ? 'moderate' : 'high'
description: `${Math.round(avgConfidence * 100)}%`,
impact: avgConfidence > 0.8 ? 'positive' : avgConfidence > 0.6 ? 'moderate' : 'high'
});
// Algorithm used
if (forecasts[0]?.algorithm) {
insights.push({
type: 'algorithm',
icon: Brain,
title: 'Algoritmo',
description: forecasts[0].algorithm,
impact: 'info'
});
}
// Forecast period
insights.push({
type: 'period',
icon: Calendar,
title: 'Período',
description: `${forecasts.length} días predichos`,
impact: 'info'
});
return insights;
};
const currentInsights = forecasts.length > 0 ? getForecastInsights(forecasts[0]) : [];
const currentInsights = getForecastInsights(forecasts);
// Loading and error states - using project patterns
if (isLoading || !tenantId) {
return (
<div className="flex items-center justify-center min-h-64">
<LoadingSpinner text="Cargando datos de predicción..." />
</div>
);
}
if (hasError) {
return (
<div className="text-center py-12">
<TrendingUp className="mx-auto h-12 w-12 text-[var(--color-error)] mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
Error al cargar datos
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{forecastsError?.message || ingredientsError?.message || modelsError?.message || 'Ha ocurrido un error inesperado'}
</p>
<Button onClick={() => window.location.reload()}>
Reintentar
</Button>
</div>
);
}
return (
<div className="p-6 space-y-6">
<div className="space-y-6">
<PageHeader
title="Predicción de Demanda"
description="Predicciones inteligentes basadas en IA para optimizar tu producción"
action={
<div className="flex space-x-2">
<Button variant="outline">
<Settings className="w-4 h-4 mr-2" />
Configurar
</Button>
<Button variant="outline">
<Download className="w-4 h-4 mr-2" />
Exportar
</Button>
</div>
}
description="Sistema inteligente de predicción de demanda basado en IA"
/>
{isLoading && (
<Card className="p-6 flex items-center justify-center">
<Loader className="h-6 w-6 animate-spin mr-2" />
<span>
{isGenerating ? 'Generando nuevas predicciones...' : 'Cargando predicciones...'}
</span>
</Card>
)}
{/* Stats Grid - Similar to POSPage */}
<StatsGrid
stats={[
{
title: 'Ingredientes con Modelos',
value: products.length,
variant: 'default' as const,
icon: Brain,
},
{
title: 'Predicciones Generadas',
value: forecasts.length,
variant: 'info' as const,
icon: TrendingUp,
},
{
title: 'Confianza Promedio',
value: `${averageConfidence}%`,
variant: 'success' as const,
icon: Target,
},
{
title: 'Demanda Total',
value: formatters.number(Math.round(totalDemand)),
variant: 'warning' as const,
icon: BarChart3,
},
]}
columns={4}
/>
{hasError && (
<Card className="p-6 bg-[var(--color-error-50)] border-[var(--color-error-200)]">
<div className="flex items-center">
<AlertTriangle className="h-5 w-5 text-[var(--color-error-600)] mr-2" />
<span className="text-[var(--color-error-800)]">Error al cargar las predicciones. Por favor, inténtalo de nuevo.</span>
</div>
</Card>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Ingredient Selection Section */}
<div className="lg:col-span-2 space-y-6">
{/* Ingredients Grid - Similar to POSPage products */}
<Card className="p-4">
<h3 className="text-lg font-semibold mb-4 flex items-center">
<Brain className="w-5 h-5 mr-2" />
Ingredientes Disponibles ({products.length})
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{products.map(product => {
const isSelected = selectedProduct === product.id;
{!isLoading && !hasError && (
<>
const getStatusConfig = () => {
if (isSelected) {
return {
color: getStatusColor('completed'),
text: 'Seleccionado',
icon: Target,
isCritical: false,
isHighlight: true
};
} else {
return {
color: getStatusColor('pending'),
text: 'Disponible',
icon: Brain,
isCritical: false,
isHighlight: false
};
}
};
</>
)}
return (
<StatusCard
key={product.id}
id={product.id}
statusIndicator={getStatusConfig()}
title={product.name}
subtitle={product.category}
primaryValue="Modelo IA"
primaryValueLabel="entrenado"
actions={[
{
label: isSelected ? 'Seleccionado' : 'Seleccionar',
icon: isSelected ? Target : Zap,
variant: isSelected ? 'success' : 'primary',
priority: 'primary',
disabled: isGenerating,
onClick: () => setSelectedProduct(product.id)
}
]}
/>
);
})}
</div>
{/* Forecast Configuration */}
<Card className="p-6">
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Configurar Predicción</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Step 1: Select Ingredient */}
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
<span className="flex items-center">
<span className="bg-[var(--color-info-600)] text-white rounded-full w-6 h-6 flex items-center justify-center text-xs mr-2">1</span>
Seleccionar Ingrediente
</span>
</label>
<select
value={selectedProduct}
onChange={(e) => setSelectedProduct(e.target.value)}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
disabled={isGenerating}
>
<option value="">Selecciona un ingrediente...</option>
{products.map(product => (
<option key={product.id} value={product.id}>
🤖 {product.name}
</option>
))}
</select>
{/* Empty State */}
{products.length === 0 && (
<p className="text-xs text-[var(--text-tertiary)] mt-1">
No hay ingredientes con modelos entrenados
</p>
<div className="text-center py-12">
<Brain className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
No hay modelos entrenados
</h3>
<p className="text-[var(--text-secondary)] mb-4">
Para generar predicciones, necesitas modelos IA entrenados para tus ingredientes
</p>
<Button
onClick={() => window.location.href = '/app/database/models'}
variant="primary"
>
<Settings className="w-4 h-4 mr-2" />
Entrenar Modelos
</Button>
</div>
)}
</div>
</Card>
</div>
{/* Step 2: Select Period */}
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
<span className="flex items-center">
<span className={`rounded-full w-6 h-6 flex items-center justify-center text-xs mr-2 ${
selectedProduct ? 'bg-[var(--color-info-600)] text-white' : 'bg-gray-300 text-gray-600'
}`}>2</span>
Período de Predicción
</span>
</label>
<select
value={forecastPeriod}
onChange={(e) => setForecastPeriod(e.target.value)}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
disabled={!selectedProduct || isGenerating}
>
{periods.map(period => (
<option key={period.value} value={period.value}>{period.label}</option>
))}
</select>
</div>
{/* Configuration and Generation Section */}
<div className="space-y-6">
{/* Period Selection */}
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4 flex items-center">
<Calendar className="w-5 h-5 mr-2" />
Configuración
</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
Período de Predicción
</label>
<select
value={forecastPeriod}
onChange={(e) => setForecastPeriod(e.target.value)}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
disabled={isGenerating}
>
{periods.map(period => (
<option key={period.value} value={period.value}>{period.label}</option>
))}
</select>
</div>
{/* Step 3: Generate */}
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
<span className="flex items-center">
<span className={`rounded-full w-6 h-6 flex items-center justify-center text-xs mr-2 ${
selectedProduct && forecastPeriod ? 'bg-[var(--color-info-600)] text-white' : 'bg-gray-300 text-gray-600'
}`}>3</span>
Generar Predicción
</span>
</label>
{selectedProduct && (
<div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
<p className="text-sm font-medium text-[var(--text-primary)]">
{products.find(p => p.id === selectedProduct)?.name}
</p>
<p className="text-xs text-[var(--text-secondary)]">
Predicción para {forecastPeriod} días
</p>
</div>
)}
</div>
</Card>
{/* Generate Forecast */}
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4 flex items-center">
<Zap className="w-5 h-5 mr-2" />
Generar Predicción
</h3>
<Button
onClick={handleGenerateForecast}
disabled={!selectedProduct || !forecastPeriod || isGenerating}
className="w-full bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/90"
className="w-full"
size="lg"
>
{isGenerating ? (
<>
<Loader className="w-4 h-4 mr-2 animate-spin" />
Generando...
<Loader className="w-5 h-5 mr-2 animate-spin" />
Generando Predicción...
</>
) : (
<>
<Zap className="w-4 h-4 mr-2" />
Generar Predicción
<Zap className="w-5 h-5 mr-2" />
Generar Predicción IA
</>
)}
</Button>
</div>
{!selectedProduct && (
<p className="text-xs text-[var(--text-tertiary)] mt-2 text-center">
Selecciona un ingrediente para continuar
</p>
)}
</Card>
</div>
</div>
{selectedProduct && (
<div className="mt-4 p-3 bg-[var(--color-info-50)] border border-[var(--color-info-200)] rounded-lg">
<p className="text-sm text-[var(--color-info-800)]">
<strong>Ingrediente seleccionado:</strong> {products.find(p => p.id === selectedProduct)?.name}
</p>
<p className="text-xs text-[var(--color-info-600)] mt-1">
Se generará una predicción de demanda para los próximos {forecastPeriod} días usando IA
</p>
</div>
)}
</Card>
{/* Results Section - Only show after generating forecast */}
{/* Results Section */}
{hasGeneratedForecast && forecasts.length > 0 && (
<>
{/* Enhanced Layout Structure */}
<div className="space-y-8">
{/* Key Metrics Row - Using StatsGrid */}
<StatsGrid
columns={4}
gap="md"
stats={[
{
title: "Confianza del Modelo",
value: `${averageConfidence}%`,
icon: Target,
variant: "success",
size: "sm"
},
{
title: "Demanda Total",
value: Math.round(totalDemand),
icon: TrendingUp,
variant: "info",
size: "sm",
subtitle: `próximos ${forecastPeriod} días`
},
{
title: "Días Predichos",
value: forecasts.length,
icon: Calendar,
variant: "default",
size: "sm"
},
{
title: "Variabilidad",
value: (Math.max(...forecasts.map(f => f.predicted_demand)) - Math.min(...forecasts.map(f => f.predicted_demand))).toFixed(1),
icon: BarChart3,
variant: "warning",
size: "sm"
}
]}
/>
{/* Main Content Grid */}
<div className="grid grid-cols-12 gap-6">
{/* Chart Section - Takes most space */}
<div className="col-span-12 lg:col-span-8">
<Card className="h-full">
<div className="p-6 border-b border-gray-200">
<div className="flex items-center justify-between">
<div>
<h3 className="text-xl font-bold text-gray-900">Predicción de Demanda</h3>
<p className="text-sm text-gray-600 mt-1">
{products.find(p => p.id === selectedProduct)?.name} • {forecastPeriod} días • {forecasts.length} puntos
</p>
</div>
<div className="flex items-center space-x-3">
<div className="flex rounded-lg border border-gray-300 overflow-hidden">
<button
onClick={() => setViewMode('chart')}
className={`px-4 py-2 text-sm font-medium transition-colors ${
viewMode === 'chart'
? 'bg-[var(--color-info-600)] text-white'
: 'bg-white text-gray-700 hover:bg-gray-50'
}`}
>
📊 Gráfico
</button>
<button
onClick={() => setViewMode('table')}
className={`px-4 py-2 text-sm font-medium transition-colors border-l ${
viewMode === 'table'
? 'bg-[var(--color-info-600)] text-white'
: 'bg-white text-gray-700 hover:bg-gray-50'
}`}
>
📋 Tabla
</button>
</div>
<Button variant="outline" size="sm">
<Download className="w-4 h-4 mr-2" />
Exportar
</Button>
</div>
</div>
</div>
<div className="p-6">
{viewMode === 'chart' ? (
<DemandChart
data={forecasts}
product={selectedProduct}
period={forecastPeriod}
loading={isLoading}
error={hasError ? 'Error al cargar las predicciones' : null}
height={450}
title=""
/>
) : (
<ForecastTable forecasts={transformedForecasts} />
)}
</div>
</Card>
{/* Results Header */}
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-xl font-bold text-[var(--text-primary)]">Resultados de Predicción</h3>
<p className="text-[var(--text-secondary)]">
{products.find(p => p.id === selectedProduct)?.name} • {forecastPeriod} días
</p>
</div>
{/* Right Sidebar - Insights */}
<div className="col-span-12 lg:col-span-4 space-y-6">
{/* Weather & External Factors */}
<div className="space-y-6">
{/* Forecast Insights */}
{currentInsights.length > 0 && (
<Card className="p-6">
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Factores que Afectan la Predicción</h3>
<div className="space-y-3">
{currentInsights.map((insight, index) => {
const IconComponent = insight.icon;
return (
<div key={index} className="flex items-start space-x-3 p-3 bg-[var(--bg-secondary)] rounded-lg">
<div className={`p-2 rounded-lg ${
insight.impact === 'positive' ? 'bg-[var(--color-success-100)] text-[var(--color-success-600)]' :
insight.impact === 'high' ? 'bg-[var(--color-error-100)] text-[var(--color-error-600)]' :
insight.impact === 'moderate' ? 'bg-[var(--color-warning-100)] text-[var(--color-warning-600)]' :
'bg-[var(--color-info-100)] text-[var(--color-info-600)]'
}`}>
<IconComponent className="w-4 h-4" />
</div>
<div className="flex-1">
<p className="text-sm font-medium text-[var(--text-primary)]">{insight.title}</p>
<p className="text-xs text-[var(--text-secondary)]">{insight.description}</p>
</div>
</div>
);
})}
</div>
</Card>
)}
{/* Weather Impact */}
{weatherImpact && (
<Card className="overflow-hidden">
<div className="bg-gradient-to-r from-[var(--color-warning-500)] to-[var(--color-error-500)] p-4">
<h3 className="text-lg font-bold text-white flex items-center">
<Sun className="w-5 h-5 mr-2" />
Clima ({weatherImpact.forecastDays} días)
</h3>
<p className="text-[var(--color-warning-100)] text-sm">Impacto meteorológico en la demanda</p>
</div>
<div className="p-4 space-y-4">
{/* Temperature Overview */}
<div className="grid grid-cols-2 gap-3">
<div className="bg-[var(--color-warning-50)] p-3 rounded-lg border border-[var(--color-warning-200)]">
<div className="flex items-center justify-between">
<Thermometer className="w-4 h-4 text-[var(--color-warning-600)]" />
<span className="text-lg font-bold text-[var(--color-warning-800)]">{weatherImpact.avgTemperature}°C</span>
</div>
<p className="text-xs text-[var(--color-warning-600)] mt-1">Promedio</p>
</div>
<div className="bg-[var(--color-info-50)] p-3 rounded-lg border border-[var(--color-info-200)]">
<div className="text-center">
<p className="text-sm font-medium text-[var(--color-info-800)]">{weatherImpact.dominantWeather}</p>
<p className="text-xs text-[var(--color-info-600)] mt-1">Condición</p>
</div>
</div>
</div>
{/* Daily forecast - compact */}
<div className="space-y-1">
<p className="text-xs font-medium text-gray-700">Pronóstico detallado:</p>
<div className="max-h-24 overflow-y-auto space-y-1">
{weatherImpact.dailyForecasts.slice(0, 5).map((day, index) => (
<div key={index} className="flex items-center justify-between text-xs p-2 bg-gray-50 rounded">
<span className="text-gray-600 font-medium">
{new Date(day.date).toLocaleDateString('es-ES', { weekday: 'short', day: 'numeric' })}
</span>
<div className="flex items-center space-x-2">
<span className="text-[var(--color-warning-600)]">{day.temperature}°C</span>
<span className="text-[var(--color-info-600)] font-bold">{day.predicted_demand?.toFixed(0)}</span>
</div>
</div>
))}
</div>
</div>
</div>
</Card>
)}
{/* Model Information */}
{forecasts.length > 0 && (
<Card className="overflow-hidden">
<div className="bg-gradient-to-r from-[var(--chart-quinary)] to-[var(--color-info-700)] p-4">
<h3 className="text-lg font-bold text-white flex items-center">
<Brain className="w-5 h-5 mr-2" />
Modelo IA
</h3>
<p className="text-purple-100 text-sm">Información técnica del algoritmo</p>
</div>
<div className="p-4 space-y-3">
<div className="grid grid-cols-1 gap-2">
<div className="flex items-center justify-between p-2 bg-[var(--color-info-50)] rounded border border-[var(--color-info-200)]">
<span className="text-sm font-medium text-[var(--color-info-800)]">Algoritmo</span>
<Badge variant="purple">{forecasts[0]?.algorithm || 'N/A'}</Badge>
</div>
<div className="flex items-center justify-between p-2 bg-gray-50 rounded">
<span className="text-xs text-gray-600">Versión</span>
<span className="text-xs font-mono text-gray-800">{forecasts[0]?.model_version || 'N/A'}</span>
</div>
<div className="flex items-center justify-between p-2 bg-gray-50 rounded">
<span className="text-xs text-gray-600">Tiempo</span>
<span className="text-xs font-mono text-gray-800">{forecasts[0]?.processing_time_ms || 'N/A'}ms</span>
</div>
</div>
</div>
</Card>
)}
<div className="flex items-center space-x-3">
<div className="flex rounded-lg border border-[var(--border-secondary)] overflow-hidden">
<Button
variant={viewMode === 'chart' ? 'primary' : 'outline'}
onClick={() => setViewMode('chart')}
size="sm"
>
<BarChart3 className="w-4 h-4 mr-1" />
Gráfico
</Button>
<Button
variant={viewMode === 'table' ? 'primary' : 'outline'}
onClick={() => setViewMode('table')}
size="sm"
>
<Package className="w-4 h-4 mr-1" />
Tabla
</Button>
</div>
<Button variant="outline" size="sm">
<Download className="w-4 h-4 mr-2" />
Exportar
</Button>
</div>
</div>
</div>
</div>
{/* Chart or Table */}
<div className="min-h-96">
{viewMode === 'chart' ? (
<DemandChart
data={forecasts}
product={selectedProduct}
period={forecastPeriod}
loading={isLoading}
error={hasError ? 'Error al cargar las predicciones' : null}
height={400}
title=""
/>
) : (
<ForecastTable forecasts={transformedForecasts} />
)}
</div>
</Card>
{/* Insights */}
{currentInsights.length > 0 && (
<Card className="p-6">
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center">
<Activity className="w-5 h-5 mr-2" />
Factores de Influencia
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{currentInsights.map((insight, index) => {
const IconComponent = insight.icon;
return (
<div key={index} className="flex items-start space-x-3 p-4 bg-[var(--bg-secondary)] rounded-lg">
<div className={`p-2 rounded-lg ${
insight.impact === 'positive' ? 'bg-[var(--color-success-100)] text-[var(--color-success-600)]' :
insight.impact === 'high' ? 'bg-[var(--color-error-100)] text-[var(--color-error-600)]' :
insight.impact === 'moderate' ? 'bg-[var(--color-warning-100)] text-[var(--color-warning-600)]' :
'bg-[var(--color-info-100)] text-[var(--color-info-600)]'
}`}>
<IconComponent className="w-4 h-4" />
</div>
<div className="flex-1">
<p className="text-sm font-medium text-[var(--text-primary)]">{insight.title}</p>
<p className="text-xs text-[var(--text-secondary)]">{insight.description}</p>
</div>
</div>
);
})}
</div>
</Card>
)}
</>
)}
{/* Detailed Forecasts Table */}
{!isLoading && !hasError && transformedForecasts.length > 0 && (
<Card className="p-6">
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Predicciones Detalladas</h3>
<Table
columns={forecastColumns}
data={transformedForecasts}
rowKey="id"
hover={true}
variant="default"
size="md"
/>
</Card>
)}
{/* Empty States */}
{/* Help Section - Only when no models available */}
{!isLoading && !hasError && products.length === 0 && (
<Card className="p-6 text-center">
<div className="py-8">
<TrendingUp className="h-12 w-12 text-[var(--color-warning-400)] mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-600 mb-2">No hay ingredientes con modelos entrenados</h3>
<p className="text-gray-500 mb-6">
Para generar predicciones, primero necesitas entrenar modelos de IA para tus ingredientes.
Ve a la página de Modelos IA para entrenar modelos para tus ingredientes.
<Brain className="h-12 w-12 text-[var(--color-info)] mx-auto mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
No hay modelos entrenados
</h3>
<p className="text-[var(--text-secondary)] mb-6">
Para generar predicciones, necesitas entrenar modelos de IA para tus ingredientes.
</p>
<div className="flex justify-center space-x-4">
<Button
variant="primary"
onClick={() => {
window.location.href = '/app/database/models';
}}
>
<Settings className="w-4 h-4 mr-2" />
Configurar Modelos IA
</Button>
</div>
</div>
</Card>
)}
{!isLoading && !hasError && products.length > 0 && !hasGeneratedForecast && (
<Card className="p-6 text-center">
<div className="py-8">
<BarChart3 className="h-12 w-12 text-[var(--color-info-400)] mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-600 mb-2">Listo para Generar Predicciones</h3>
<p className="text-gray-500 mb-6">
Tienes {products.length} ingrediente{products.length > 1 ? 's' : ''} con modelos entrenados disponibles.
Selecciona un ingrediente y período para comenzar.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
<div className="text-center p-4 border rounded-lg">
<div className="bg-[var(--color-info-600)] text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm">1</div>
<p className="text-sm font-medium text-gray-600">Selecciona Ingrediente</p>
<p className="text-xs text-gray-500">Elige un ingrediente con modelo IA</p>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="bg-gray-300 text-gray-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm">2</div>
<p className="text-sm font-medium text-gray-600">Define Período</p>
<p className="text-xs text-gray-500">Establece días a predecir</p>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="bg-gray-300 text-gray-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm">3</div>
<p className="text-sm font-medium text-gray-600">Generar Predicción</p>
<p className="text-xs text-gray-500">Obtén insights de IA</p>
</div>
</div>
<Button
onClick={() => window.location.href = '/app/database/models'}
variant="primary"
>
<Settings className="w-4 h-4 mr-2" />
Entrenar Modelos IA
</Button>
</div>
</Card>
)}

942
frontend/src/pages/app/analytics/sales-analytics/SalesAnalyticsPage.tsx
View File

File diff suppressed because it is too large Load Diff

5
frontend/src/pages/app/operations/inventory/InventoryPage.tsx
View File

@@ -15,7 +15,7 @@ import {
// Import AddStockModal separately since we need it for adding batches
import AddStockModal from '../../../../components/domain/inventory/AddStockModal';
import { useIngredients, useStockAnalytics, useStockMovements, useStockByIngredient, useCreateIngredient, useSoftDeleteIngredient, useHardDeleteIngredient, useAddStock, useConsumeStock, useUpdateIngredient, useTransformationsByIngredient } from '../../../../api/hooks/inventory';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useTenantId } from '../../../../hooks/useTenantId';
import { IngredientResponse, StockCreate, StockMovementCreate, IngredientCreate } from '../../../../api/types/inventory';
const InventoryPage: React.FC = () => {
@@ -30,8 +30,7 @@ const InventoryPage: React.FC = () => {
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [showAddBatch, setShowAddBatch] = useState(false);
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
const tenantId = useTenantId();
// Mutations
const createIngredientMutation = useCreateIngredient();

451
frontend/src/pages/app/operations/pos/POSPage.tsx
View File

@@ -1,16 +1,24 @@
import React, { useState } from 'react';
import { Plus, Minus, ShoppingCart, CreditCard, Banknote, Calculator, User, Receipt } from 'lucide-react';
import { Button, Input, Card, Badge } from '../../../../components/ui';
import React, { useState, useMemo } from 'react';
import { Plus, Minus, ShoppingCart, CreditCard, Banknote, Calculator, User, Receipt, Package, Euro, TrendingUp, Clock } from 'lucide-react';
import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { LoadingSpinner } from '../../../../components/shared';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
import { useIngredients } from '../../../../api/hooks/inventory';
import { useTenantId } from '../../../../hooks/useTenantId';
import { ProductType, ProductCategory, IngredientResponse } from '../../../../api/types/inventory';
interface CartItem {
id: string;
name: string;
price: number;
quantity: number;
category: string;
stock: number;
}
const POSPage: React.FC = () => {
const [cart, setCart] = useState<Array<{
id: string;
name: string;
price: number;
quantity: number;
category: string;
}>>([]);
const [cart, setCart] = useState<CartItem[]>([]);
const [selectedCategory, setSelectedCategory] = useState('all');
const [customerInfo, setCustomerInfo] = useState({
name: '',
@@ -20,73 +28,65 @@ const POSPage: React.FC = () => {
const [paymentMethod, setPaymentMethod] = useState<'cash' | 'card' | 'transfer'>('cash');
const [cashReceived, setCashReceived] = useState('');
const products = [
{
id: '1',
name: 'Pan de Molde Integral',
price: 4.50,
category: 'bread',
stock: 25,
image: '/api/placeholder/100/100',
},
{
id: '2',
name: 'Croissants de Mantequilla',
price: 1.50,
category: 'pastry',
stock: 32,
image: '/api/placeholder/100/100',
},
{
id: '3',
name: 'Baguette Francesa',
price: 2.80,
category: 'bread',
stock: 18,
image: '/api/placeholder/100/100',
},
{
id: '4',
name: 'Tarta de Chocolate',
price: 25.00,
category: 'cake',
stock: 8,
image: '/api/placeholder/100/100',
},
{
id: '5',
name: 'Magdalenas',
price: 0.75,
category: 'pastry',
stock: 48,
image: '/api/placeholder/100/100',
},
{
id: '6',
name: 'Empanadas',
price: 2.50,
category: 'other',
stock: 24,
image: '/api/placeholder/100/100',
},
];
const tenantId = useTenantId();
const categories = [
{ id: 'all', name: 'Todos' },
{ id: 'bread', name: 'Panes' },
{ id: 'pastry', name: 'Bollería' },
{ id: 'cake', name: 'Tartas' },
{ id: 'other', name: 'Otros' },
];
// Fetch finished products from API
const {
data: ingredientsData,
isLoading: productsLoading,
error: productsError
} = useIngredients(tenantId, {
// Filter for finished products only
category: undefined, // We'll filter client-side for now
search: undefined
});
const filteredProducts = products.filter(product =>
selectedCategory === 'all' || product.category === selectedCategory
);
// Filter for finished products and convert to POS format
const products = useMemo(() => {
if (!ingredientsData) return [];
return ingredientsData
.filter(ingredient => ingredient.product_type === ProductType.FINISHED_PRODUCT)
.map(ingredient => ({
id: ingredient.id,
name: ingredient.name,
price: Number(ingredient.average_cost) || 0,
category: ingredient.category.toLowerCase(),
stock: Number(ingredient.current_stock) || 0,
ingredient: ingredient
}))
.filter(product => product.stock > 0); // Only show products in stock
}, [ingredientsData]);
// Generate categories from actual product data
const categories = useMemo(() => {
const categoryMap = new Map();
categoryMap.set('all', { id: 'all', name: 'Todos' });
products.forEach(product => {
if (!categoryMap.has(product.category)) {
const categoryName = product.category.charAt(0).toUpperCase() + product.category.slice(1);
categoryMap.set(product.category, { id: product.category, name: categoryName });
}
});
return Array.from(categoryMap.values());
}, [products]);
const filteredProducts = useMemo(() => {
return products.filter(product =>
selectedCategory === 'all' || product.category === selectedCategory
);
}, [products, selectedCategory]);
const addToCart = (product: typeof products[0]) => {
setCart(prevCart => {
const existingItem = prevCart.find(item => item.id === product.id);
if (existingItem) {
// Check if we have enough stock
if (existingItem.quantity >= product.stock) {
return prevCart; // Don't add if no stock available
}
return prevCart.map(item =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
@@ -99,6 +99,7 @@ const POSPage: React.FC = () => {
price: product.price,
quantity: 1,
category: product.category,
stock: product.stock
}];
}
});
@@ -109,9 +110,14 @@ const POSPage: React.FC = () => {
setCart(prevCart => prevCart.filter(item => item.id !== id));
} else {
setCart(prevCart =>
prevCart.map(item =>
item.id === id ? { ...item, quantity } : item
)
prevCart.map(item => {
if (item.id === id) {
// Don't allow quantity to exceed stock
const maxQuantity = Math.min(quantity, item.stock);
return { ...item, quantity: maxQuantity };
}
return item;
})
);
}
};
@@ -128,8 +134,8 @@ const POSPage: React.FC = () => {
const processPayment = () => {
if (cart.length === 0) return;
// Process payment logic here
// TODO: Integrate with real POS API endpoint
console.log('Processing payment:', {
cart,
customerInfo,
@@ -143,53 +149,205 @@ const POSPage: React.FC = () => {
setCart([]);
setCustomerInfo({ name: '', email: '', phone: '' });
setCashReceived('');
alert('Venta procesada exitosamente');
};
// Calculate stats for the POS dashboard
const posStats = useMemo(() => {
const totalProducts = products.length;
const totalStock = products.reduce((sum, product) => sum + product.stock, 0);
const cartValue = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
const cartItems = cart.reduce((sum, item) => sum + item.quantity, 0);
const lowStockProducts = products.filter(product => product.stock <= 5).length;
const avgProductPrice = totalProducts > 0 ? products.reduce((sum, product) => sum + product.price, 0) / totalProducts : 0;
return {
totalProducts,
totalStock,
cartValue,
cartItems,
lowStockProducts,
avgProductPrice
};
}, [products, cart]);
const stats = [
{
title: 'Productos Disponibles',
value: posStats.totalProducts,
variant: 'default' as const,
icon: Package,
},
{
title: 'Stock Total',
value: posStats.totalStock,
variant: 'info' as const,
icon: Package,
},
{
title: 'Artículos en Carrito',
value: posStats.cartItems,
variant: 'success' as const,
icon: ShoppingCart,
},
{
title: 'Valor del Carrito',
value: formatters.currency(posStats.cartValue),
variant: 'success' as const,
icon: Euro,
},
{
title: 'Stock Bajo',
value: posStats.lowStockProducts,
variant: 'warning' as const,
icon: Clock,
},
{
title: 'Precio Promedio',
value: formatters.currency(posStats.avgProductPrice),
variant: 'info' as const,
icon: TrendingUp,
},
];
// Loading and error states
if (productsLoading || !tenantId) {
return (
<div className="flex items-center justify-center min-h-64">
<LoadingSpinner text="Cargando productos..." />
</div>
);
}
if (productsError) {
return (
<div className="text-center py-12">
<Package className="mx-auto h-12 w-12 text-red-500 mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
Error al cargar productos
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{productsError.message || 'Ha ocurrido un error inesperado'}
</p>
<Button onClick={() => window.location.reload()}>
Reintentar
</Button>
</div>
);
}
return (
<div className="p-6 h-screen flex flex-col">
<div className="space-y-6">
<PageHeader
title="Punto de Venta"
description="Sistema de ventas integrado"
description="Sistema de ventas para productos terminados"
/>
<div className="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
{/* Stats Grid */}
<StatsGrid
stats={stats}
columns={3}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Products Section */}
<div className="lg:col-span-2 space-y-6">
{/* Categories */}
<div className="flex space-x-2 overflow-x-auto">
{categories.map(category => (
<Button
key={category.id}
variant={selectedCategory === category.id ? 'default' : 'outline'}
onClick={() => setSelectedCategory(category.id)}
className="whitespace-nowrap"
>
{category.name}
</Button>
))}
</div>
<Card className="p-4">
<div className="flex space-x-2 overflow-x-auto">
{categories.map(category => (
<Button
key={category.id}
variant={selectedCategory === category.id ? 'default' : 'outline'}
onClick={() => setSelectedCategory(category.id)}
className="whitespace-nowrap"
>
{category.name}
</Button>
))}
</div>
</Card>
{/* Products Grid */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{filteredProducts.map(product => (
<Card
key={product.id}
className="p-4 cursor-pointer hover:shadow-md transition-shadow"
onClick={() => addToCart(product)}
>
<img
src={product.image}
alt={product.name}
className="w-full h-20 object-cover rounded mb-3"
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filteredProducts.map(product => {
const cartItem = cart.find(item => item.id === product.id);
const inCart = !!cartItem;
const cartQuantity = cartItem?.quantity || 0;
const remainingStock = product.stock - cartQuantity;
const getStockStatusConfig = () => {
if (remainingStock <= 0) {
return {
color: getStatusColor('cancelled'),
text: 'Sin Stock',
icon: Package,
isCritical: true,
isHighlight: false
};
} else if (remainingStock <= 5) {
return {
color: getStatusColor('pending'),
text: `${remainingStock} disponibles`,
icon: Package,
isCritical: false,
isHighlight: true
};
} else {
return {
color: getStatusColor('completed'),
text: `${remainingStock} disponibles`,
icon: Package,
isCritical: false,
isHighlight: false
};
}
};
return (
<StatusCard
key={product.id}
id={product.id}
statusIndicator={getStockStatusConfig()}
title={product.name}
subtitle={product.category.charAt(0).toUpperCase() + product.category.slice(1)}
primaryValue={formatters.currency(product.price)}
primaryValueLabel="precio"
secondaryInfo={inCart ? {
label: 'En carrito',
value: cartQuantity.toString()
} : undefined}
actions={[
{
label: 'Agregar al Carrito',
icon: Plus,
variant: 'primary',
priority: 'primary',
disabled: remainingStock <= 0,
onClick: () => addToCart(product)
}
]}
/>
<h3 className="font-medium text-sm mb-1 line-clamp-2">{product.name}</h3>
<p className="text-lg font-bold text-[var(--color-success)]">€{product.price.toFixed(2)}</p>
<p className="text-xs text-[var(--text-tertiary)]">Stock: {product.stock}</p>
</Card>
))}
);
})}
</div>
{/* Empty State */}
{filteredProducts.length === 0 && (
<div className="text-center py-12">
<Package className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
No hay productos disponibles
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{selectedCategory === 'all'
? 'No hay productos en stock en este momento'
: `No hay productos en la categoría "${categories.find(c => c.id === selectedCategory)?.name}"`
}
</p>
</div>
)}
</div>
{/* Cart and Checkout Section */}
@@ -212,40 +370,47 @@ const POSPage: React.FC = () => {
{cart.length === 0 ? (
<p className="text-[var(--text-tertiary)] text-center py-8">Carrito vacío</p>
) : (
cart.map(item => (
<div key={item.id} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded">
<div className="flex-1">
<h4 className="text-sm font-medium">{item.name}</h4>
<p className="text-xs text-[var(--text-tertiary)]">€{item.price.toFixed(2)} c/u</p>
cart.map(item => {
const product = products.find(p => p.id === item.id);
const maxQuantity = product?.stock || item.stock;
return (
<div key={item.id} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded">
<div className="flex-1">
<h4 className="text-sm font-medium">{item.name}</h4>
<p className="text-xs text-[var(--text-tertiary)]">€{item.price.toFixed(2)} c/u</p>
<p className="text-xs text-[var(--text-tertiary)]">Stock: {maxQuantity}</p>
</div>
<div className="flex items-center space-x-2">
<Button
size="sm"
variant="outline"
onClick={(e) => {
e.stopPropagation();
updateQuantity(item.id, item.quantity - 1);
}}
>
<Minus className="w-3 h-3" />
</Button>
<span className="w-8 text-center text-sm">{item.quantity}</span>
<Button
size="sm"
variant="outline"
disabled={item.quantity >= maxQuantity}
onClick={(e) => {
e.stopPropagation();
updateQuantity(item.id, item.quantity + 1);
}}
>
<Plus className="w-3 h-3" />
</Button>
</div>
<div className="ml-4 text-right">
<p className="text-sm font-medium">€{(item.price * item.quantity).toFixed(2)}</p>
</div>
</div>
<div className="flex items-center space-x-2">
<Button
size="sm"
variant="outline"
onClick={(e) => {
e.stopPropagation();
updateQuantity(item.id, item.quantity - 1);
}}
>
<Minus className="w-3 h-3" />
</Button>
<span className="w-8 text-center text-sm">{item.quantity}</span>
<Button
size="sm"
variant="outline"
onClick={(e) => {
e.stopPropagation();
updateQuantity(item.id, item.quantity + 1);
}}
>
<Plus className="w-3 h-3" />
</Button>
</div>
<div className="ml-4 text-right">
<p className="text-sm font-medium">€{(item.price * item.quantity).toFixed(2)}</p>
</div>
</div>
))
);
})
)}
</div>
@@ -305,7 +470,7 @@ const POSPage: React.FC = () => {
<div className="space-y-3">
<div className="grid grid-cols-3 gap-2">
<Button
variant={paymentMethod === 'cash' ? 'default' : 'outline'}
variant={paymentMethod === 'cash' ? 'primary' : 'outline'}
onClick={() => setPaymentMethod('cash')}
className="flex items-center justify-center"
>
@@ -313,7 +478,7 @@ const POSPage: React.FC = () => {
Efectivo
</Button>
<Button
variant={paymentMethod === 'card' ? 'default' : 'outline'}
variant={paymentMethod === 'card' ? 'primary' : 'outline'}
onClick={() => setPaymentMethod('card')}
className="flex items-center justify-center"
>
@@ -321,7 +486,7 @@ const POSPage: React.FC = () => {
Tarjeta
</Button>
<Button
variant={paymentMethod === 'transfer' ? 'default' : 'outline'}
variant={paymentMethod === 'transfer' ? 'primary' : 'outline'}
onClick={() => setPaymentMethod('transfer')}
className="flex items-center justify-center"
>

67
frontend/src/pages/app/settings/bakery-config/BakeryConfigPage.tsx
View File

@@ -40,7 +40,7 @@ interface BusinessHours {
const BakeryConfigPage: React.FC = () => {
const { addToast } = useToast();
const currentTenant = useCurrentTenant();
const { loadUserTenants } = useTenantActions();
const { loadUserTenants, setCurrentTenant } = useTenantActions();
const tenantId = currentTenant?.id || '';
// Use the current tenant from the store instead of making additional API calls
@@ -83,12 +83,10 @@ const BakeryConfigPage: React.FC = () => {
language: 'es'
});
// Load user tenants on component mount if no current tenant
// Load user tenants on component mount to ensure fresh data
React.useEffect(() => {
if (!currentTenant) {
loadUserTenants();
}
}, [currentTenant, loadUserTenants]);
loadUserTenants();
}, [loadUserTenants]);
// Update config when tenant data is loaded
@@ -97,8 +95,8 @@ const BakeryConfigPage: React.FC = () => {
setConfig({
name: tenant.name || '',
description: tenant.description || '',
email: tenant.email || '', // Fixed: use email instead of contact_email
phone: tenant.phone || '', // Fixed: use phone instead of contact_phone
email: tenant.email || '',
phone: tenant.phone || '',
website: tenant.website || '',
address: tenant.address || '',
city: tenant.city || '',
@@ -106,9 +104,10 @@ const BakeryConfigPage: React.FC = () => {
country: tenant.country || '',
taxId: '', // Not supported by backend yet
currency: 'EUR', // Default value
timezone: 'Europe/Madrid', // Default value
timezone: 'Europe/Madrid', // Default value
language: 'es' // Default value
});
setHasUnsavedChanges(false); // Reset unsaved changes when loading fresh data
}
}, [tenant]);
@@ -249,30 +248,48 @@ const BakeryConfigPage: React.FC = () => {
const handleSaveConfig = async () => {
if (!validateConfig() || !tenantId) return;
setIsLoading(true);
try {
await updateTenantMutation.mutateAsync({
const updateData = {
name: config.name,
description: config.description,
email: config.email,
phone: config.phone,
website: config.website,
address: config.address,
city: config.city,
postal_code: config.postalCode,
country: config.country
};
const updatedTenant = await updateTenantMutation.mutateAsync({
tenantId,
updateData: {
name: config.name,
description: config.description,
email: config.email, // Fixed: use email instead of contact_email
phone: config.phone, // Fixed: use phone instead of contact_phone
website: config.website,
address: config.address,
city: config.city,
postal_code: config.postalCode,
country: config.country
// Note: tax_id, currency, timezone, language might not be supported by backend
}
updateData
});
// Update the tenant store with the new data
if (updatedTenant) {
setCurrentTenant(updatedTenant);
// Force reload tenant list to ensure cache consistency
await loadUserTenants();
// Update localStorage to persist the changes
const tenantStorage = localStorage.getItem('tenant-storage');
if (tenantStorage) {
const parsedStorage = JSON.parse(tenantStorage);
if (parsedStorage.state && parsedStorage.state.currentTenant) {
parsedStorage.state.currentTenant = updatedTenant;
localStorage.setItem('tenant-storage', JSON.stringify(parsedStorage));
}
}
}
setHasUnsavedChanges(false);
addToast('Configuración actualizada correctamente', { type: 'success' });
} catch (error) {
addToast('No se pudo actualizar la configuración', { type: 'error' });
addToast(`Error al actualizar: ${error instanceof Error ? error.message : 'Error desconocido'}`, { type: 'error' });
} finally {
setIsLoading(false);
}

82
frontend/src/pages/app/settings/team/TeamPage.tsx
View File

@@ -1,9 +1,9 @@
import React, { useState, useMemo } from 'react';
import { Users, Plus, Search, Mail, Phone, Shield, Trash2, Crown, X, UserCheck } from 'lucide-react';
import { Button, Card, Badge, Input, StatusCard, getStatusColor, StatsGrid } from '../../../../components/ui';
import { Users, Plus, Search, Shield, Trash2, Crown, UserCheck } from 'lucide-react';
import { Button, Card, Input, StatusCard, getStatusColor, StatsGrid } from '../../../../components/ui';
import AddTeamMemberModal from '../../../../components/domain/team/AddTeamMemberModal';
import { PageHeader } from '../../../../components/layout';
import { useTeamMembers, useAddTeamMember, useRemoveTeamMember, useUpdateMemberRole } from '../../../../api/hooks/tenant';
import { useTeamMembers, useAddTeamMember, useRemoveTeamMember, useUpdateMemberRole, useTenantAccess } from '../../../../api/hooks/tenant';
import { useAllUsers } from '../../../../api/hooks/user';
import { useAuthUser } from '../../../../stores/auth.store';
import { useCurrentTenant, useCurrentTenantAccess } from '../../../../stores/tenant.store';
@@ -12,12 +12,23 @@ import { TENANT_ROLES } from '../../../../types/roles';
const TeamPage: React.FC = () => {
const { addToast } = useToast();
const currentUser = useAuthUser();
const currentTenant = useCurrentTenant();
const currentTenantAccess = useCurrentTenantAccess();
const tenantId = currentTenant?.id || '';
// Try to get tenant access directly via hook as fallback
const { data: directTenantAccess } = useTenantAccess(
tenantId,
currentUser?.id || '',
{ enabled: !!tenantId && !!currentUser?.id && !currentTenantAccess }
);
const { data: teamMembers = [], isLoading } = useTeamMembers(tenantId, false, { enabled: !!tenantId }); // Show all members including inactive
const { data: allUsers = [] } = useAllUsers();
const { data: allUsers = [], error: allUsersError, isLoading: allUsersLoading } = useAllUsers({
retry: false, // Don't retry on permission errors
staleTime: 0 // Always fresh check for permissions
});
// Mutations
const addMemberMutation = useAddTeamMember();
@@ -72,9 +83,15 @@ const TeamPage: React.FC = () => {
{ value: TENANT_ROLES.VIEWER, label: 'Observador', count: enhancedTeamMembers.filter(m => m.role === TENANT_ROLES.VIEWER).length }
];
// Use direct tenant access as fallback
const effectiveTenantAccess = currentTenantAccess || directTenantAccess;
// Check if current user is the tenant owner (fallback when access endpoint fails)
const isCurrentUserOwner = currentUser?.id === currentTenant?.owner_id;
// Permission checks
const isOwner = currentTenantAccess?.role === TENANT_ROLES.OWNER;
const canManageTeam = isOwner || currentTenantAccess?.role === TENANT_ROLES.ADMIN;
const isOwner = effectiveTenantAccess?.role === TENANT_ROLES.OWNER || isCurrentUserOwner;
const canManageTeam = isOwner || effectiveTenantAccess?.role === TENANT_ROLES.ADMIN;
const teamStats = {
total: enhancedTeamMembers.length,
@@ -197,29 +214,38 @@ const TeamPage: React.FC = () => {
});
// Available users for adding (exclude current members)
const availableUsers = allUsers.filter(u =>
const availableUsers = allUsers.filter(u =>
!enhancedTeamMembers.some(m => m.user_id === u.id)
);
// Member action handlers
const handleAddMember = async () => {
if (!selectedUserToAdd || !selectedRoleToAdd || !tenantId) return;
try {
await addMemberMutation.mutateAsync({
tenantId,
userId: selectedUserToAdd,
role: selectedRoleToAdd,
});
addToast('Miembro agregado exitosamente', { type: 'success' });
setShowAddForm(false);
setSelectedUserToAdd('');
setSelectedRoleToAdd(TENANT_ROLES.MEMBER);
} catch (error) {
addToast('Error al agregar miembro', { type: 'error' });
// Force reload tenant access if missing
React.useEffect(() => {
if (currentTenant?.id && !currentTenantAccess) {
console.log('Forcing tenant access reload for tenant:', currentTenant.id);
// You can trigger a manual reload here if needed
}
};
}, [currentTenant?.id, currentTenantAccess]);
// Debug logging
console.log('TeamPage Debug:', {
canManageTeam,
isOwner,
isCurrentUserOwner,
currentUser: currentUser?.id,
currentTenant: currentTenant?.id,
tenantOwner: currentTenant?.owner_id,
currentTenantAccess,
directTenantAccess,
effectiveTenantAccess,
tenantAccess: effectiveTenantAccess?.role,
allUsers: allUsers.length,
allUsersError,
allUsersLoading,
availableUsers: availableUsers.length,
enhancedTeamMembers: enhancedTeamMembers.length
});
// Member action handlers - removed unused handleAddMember since modal handles it directly
const handleRemoveMember = async (memberUserId: string) => {
if (!tenantId) return;
@@ -276,7 +302,7 @@ const TeamPage: React.FC = () => {
title="Gestión de Equipo"
description="Administra los miembros del equipo, roles y permisos"
actions={
canManageTeam && availableUsers.length > 0 ? [{
canManageTeam ? [{
id: 'add-member',
label: 'Agregar Miembro',
icon: Plus,
@@ -351,7 +377,7 @@ const TeamPage: React.FC = () => {
</Card>
{/* Add Member Button */}
{canManageTeam && availableUsers.length > 0 && filteredMembers.length > 0 && (
{canManageTeam && filteredMembers.length > 0 && (
<div className="flex justify-end">
<Button
onClick={() => setShowAddForm(true)}
@@ -406,7 +432,7 @@ const TeamPage: React.FC = () => {
: "Este tenant aún no tiene miembros del equipo"
}
</p>
{canManageTeam && availableUsers.length > 0 && (
{canManageTeam && (
<Button
onClick={() => setShowAddForm(true)}
variant="primary"

1
frontend/src/stores/tenant.store.ts
View File

@@ -222,6 +222,7 @@ export const useTenantStore = create<TenantState>()(
);
// Selectors for common use cases
// Note: For getting tenant ID, prefer using useTenantId() from hooks/useTenantId.ts
export const useCurrentTenant = () => useTenantStore((state) => state.currentTenant);
export const useAvailableTenants = () => useTenantStore((state) => state.availableTenants);
export const useCurrentTenantAccess = () => useTenantStore((state) => state.currentTenantAccess);