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

Add i18 support

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-22 11:04:03 +02:00
parent ecfc6a1997
commit ee36c45d25
28 changed files with 2307 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/App.tsx
View File

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import { Toaster } from 'react-hot-toast';
import { ErrorBoundary } from './components/shared/ErrorBoundary';
import { LoadingSpinner } from './components/shared/LoadingSpinner';
@@ -10,7 +11,7 @@ import { ThemeProvider } from './contexts/ThemeContext';
import { AuthProvider } from './contexts/AuthContext';
import { SSEProvider } from './contexts/SSEContext';
import GlobalSubscriptionHandler from './components/auth/GlobalSubscriptionHandler';
import './i18n';
import i18n from './i18n';
const queryClient = new QueryClient({
defaultOptions: {
@@ -27,34 +28,36 @@ function App() {
return (
<ErrorBoundary>
<QueryClientProvider client={queryClient}>
<BrowserRouter
future={{
v7_startTransition: true,
v7_relativeSplatPath: true,
}}
>
<ThemeProvider>
<AuthProvider>
<SSEProvider>
<Suspense fallback={<LoadingSpinner overlay />}>
<AppRouter />
<GlobalSubscriptionHandler />
<Toaster
position="top-right"
toastOptions={{
duration: 4000,
style: {
background: '#363636',
color: '#fff',
},
}}
/>
</Suspense>
</SSEProvider>
</AuthProvider>
</ThemeProvider>
</BrowserRouter>
<ReactQueryDevtools initialIsOpen={false} />
<I18nextProvider i18n={i18n}>
<BrowserRouter
future={{
v7_startTransition: true,
v7_relativeSplatPath: true,
}}
>
<ThemeProvider>
<AuthProvider>
<SSEProvider>
<Suspense fallback={<LoadingSpinner overlay />}>
<AppRouter />
<GlobalSubscriptionHandler />
<Toaster
position="top-right"
toastOptions={{
duration: 4000,
style: {
background: '#363636',
color: '#fff',
},
}}
/>
</Suspense>
</SSEProvider>
</AuthProvider>
</ThemeProvider>
</BrowserRouter>
<ReactQueryDevtools initialIsOpen={false} />
</I18nextProvider>
</QueryClientProvider>
</ErrorBoundary>
);

4
frontend/src/api/services/tenant.ts
View File

@@ -140,7 +140,9 @@ export class TenantService {
// Context Management (Frontend-only operations)
setCurrentTenant(tenant: TenantResponse): void {
// Set tenant context in API client
apiClient.setTenantId(tenant.id);
if (tenant && tenant.id) {
apiClient.setTenantId(tenant.id);
}
}
clearCurrentTenant(): void {

180
frontend/src/components/domain/onboarding/OnboardingWizard.tsx
View File

@@ -1,17 +1,18 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from '../../ui/Button';
import { Card, CardHeader, CardBody } from '../../ui/Card';
import { useAuth } from '../../../contexts/AuthContext';
import { useUserProgress, useMarkStepCompleted } from '../../../api/hooks/onboarding';
import { useTenantActions } from '../../../stores/tenant.store';
import { useTenantInitializer } from '../../../stores/useTenantInitializer';
import {
import {
RegisterTenantStep,
UploadSalesDataStep,
MLTrainingStep,
CompletionStep
} from './steps';
import { Building2 } from 'lucide-react';
interface StepConfig {
id: string;
@@ -58,11 +59,26 @@ const STEPS: StepConfig[] = [
];
export const OnboardingWizard: React.FC = () => {
const [currentStepIndex, setCurrentStepIndex] = useState(0);
const [isInitialized, setIsInitialized] = useState(false);
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const { user } = useAuth();
// Check if this is a fresh onboarding (new tenant creation)
const isNewTenant = searchParams.get('new') === 'true';
// Initialize state based on whether this is a new tenant or not
const [currentStepIndex, setCurrentStepIndex] = useState(0);
const [isInitialized, setIsInitialized] = useState(isNewTenant); // If new tenant, consider initialized immediately
// Debug log for new tenant creation
useEffect(() => {
if (isNewTenant) {
console.log('🆕 New tenant creation detected - UI will reset to step 0');
console.log('📊 Current step index:', currentStepIndex);
console.log('🎯 Is initialized:', isInitialized);
}
}, [isNewTenant, currentStepIndex, isInitialized]);
// Initialize tenant data for authenticated users
useTenantInitializer();
@@ -106,64 +122,77 @@ export const OnboardingWizard: React.FC = () => {
// Initialize step index based on backend progress with validation
useEffect(() => {
// Skip backend progress loading for new tenant creation
if (isNewTenant) {
return; // Already initialized to step 0
}
if (userProgress && !isInitialized) {
console.log('🔄 Initializing onboarding progress:', userProgress);
// Check if user_registered step is completed
const userRegisteredStep = userProgress.steps.find(s => s.step_name === 'user_registered');
if (!userRegisteredStep?.completed) {
console.log('⏳ Waiting for user_registered step to be auto-completed...');
return; // Wait for auto-completion to finish
}
// Find the current step index based on backend progress
const currentStepFromBackend = userProgress.current_step;
let stepIndex = STEPS.findIndex(step => step.id === currentStepFromBackend);
console.log(`🎯 Backend current step: "${currentStepFromBackend}", found at index: ${stepIndex}`);
// If current step is not found (e.g., suppliers step), find the next incomplete step
if (stepIndex === -1) {
console.log('🔍 Current step not found in UI steps, finding first incomplete step...');
// Find the first incomplete step that user can access
for (let i = 0; i < STEPS.length; i++) {
const step = STEPS[i];
const stepProgress = userProgress.steps.find(s => s.step_name === step.id);
if (!stepProgress?.completed) {
stepIndex = i;
console.log(`📍 Found first incomplete step: "${step.id}" at index ${i}`);
break;
let stepIndex = 0; // Default to first step
// If this is a new tenant creation, always start from the beginning
if (isNewTenant) {
console.log('🆕 New tenant creation - starting from first step');
stepIndex = 0;
} else {
// Find the current step index based on backend progress
const currentStepFromBackend = userProgress.current_step;
stepIndex = STEPS.findIndex(step => step.id === currentStepFromBackend);
console.log(`🎯 Backend current step: "${currentStepFromBackend}", found at index: ${stepIndex}`);
// If current step is not found (e.g., suppliers step), find the next incomplete step
if (stepIndex === -1) {
console.log('🔍 Current step not found in UI steps, finding first incomplete step...');
// Find the first incomplete step that user can access
for (let i = 0; i < STEPS.length; i++) {
const step = STEPS[i];
const stepProgress = userProgress.steps.find(s => s.step_name === step.id);
if (!stepProgress?.completed) {
stepIndex = i;
console.log(`📍 Found first incomplete step: "${step.id}" at index ${i}`);
break;
}
}
// If all visible steps are completed, go to last step
if (stepIndex === -1) {
stepIndex = STEPS.length - 1;
console.log('✅ All steps completed, going to last step');
}
}
// If all visible steps are completed, go to last step
if (stepIndex === -1) {
stepIndex = STEPS.length - 1;
console.log('✅ All steps completed, going to last step');
// Ensure user can't skip ahead - find the first incomplete step
const firstIncompleteStepIndex = STEPS.findIndex(step => {
const stepProgress = userProgress.steps.find(s => s.step_name === step.id);
return !stepProgress?.completed;
});
if (firstIncompleteStepIndex !== -1 && stepIndex > firstIncompleteStepIndex) {
console.log(`🚫 User trying to skip ahead. Redirecting to first incomplete step at index ${firstIncompleteStepIndex}`);
stepIndex = firstIncompleteStepIndex;
}
}
// Ensure user can't skip ahead - find the first incomplete step
const firstIncompleteStepIndex = STEPS.findIndex(step => {
const stepProgress = userProgress.steps.find(s => s.step_name === step.id);
return !stepProgress?.completed;
});
if (firstIncompleteStepIndex !== -1 && stepIndex > firstIncompleteStepIndex) {
console.log(`🚫 User trying to skip ahead. Redirecting to first incomplete step at index ${firstIncompleteStepIndex}`);
stepIndex = firstIncompleteStepIndex;
}
console.log(`🎯 Final step index: ${stepIndex} ("${STEPS[stepIndex]?.id}")`);
if (stepIndex !== currentStepIndex) {
setCurrentStepIndex(stepIndex);
}
setIsInitialized(true);
}
}, [userProgress, isInitialized, currentStepIndex]);
}, [userProgress, isInitialized, currentStepIndex, isNewTenant]);
const currentStep = STEPS[currentStepIndex];
@@ -214,7 +243,13 @@ export const OnboardingWizard: React.FC = () => {
}
if (currentStep.id === 'completion') {
navigate('/app');
// Navigate to dashboard after completion
if (isNewTenant) {
// For new tenant creation, navigate to dashboard and remove the new param
navigate('/app/dashboard');
} else {
navigate('/app');
}
} else {
// Auto-advance to next step after successful completion
if (currentStepIndex < STEPS.length - 1) {
@@ -246,8 +281,8 @@ export const OnboardingWizard: React.FC = () => {
}
};
// Show loading state while initializing progress
if (isLoadingProgress || !isInitialized) {
// Show loading state while initializing progress (skip for new tenant)
if (!isNewTenant && (isLoadingProgress || !isInitialized)) {
return (
<div className="max-w-4xl mx-auto px-4 sm:px-6">
<Card padding="lg" shadow="lg">
@@ -262,8 +297,8 @@ export const OnboardingWizard: React.FC = () => {
);
}
// Show error state if progress fails to load
if (progressError) {
// Show error state if progress fails to load (skip for new tenant)
if (!isNewTenant && progressError) {
return (
<div className="max-w-4xl mx-auto px-4 sm:px-6">
<Card padding="lg" shadow="lg">
@@ -297,19 +332,47 @@ export const OnboardingWizard: React.FC = () => {
}
const StepComponent = currentStep.component;
const progressPercentage = userProgress?.completion_percentage || ((currentStepIndex + 1) / STEPS.length) * 100;
// Calculate progress percentage - reset for new tenant creation
const progressPercentage = isNewTenant
? ((currentStepIndex + 1) / STEPS.length) * 100 // For new tenant, base progress only on current step
: userProgress?.completion_percentage || ((currentStepIndex + 1) / STEPS.length) * 100;
return (
<div className="max-w-4xl mx-auto px-4 sm:px-6 space-y-4 sm:space-y-6 pb-6">
{/* New Tenant Info Banner */}
{isNewTenant && (
<Card className="bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border-[var(--color-primary)]/20">
<CardBody className="py-3">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
<Building2 className="w-4 h-4 text-[var(--color-primary)]" />
</div>
<div>
<p className="text-sm font-medium text-[var(--text-primary)]">
Creando Nueva Organización
</p>
<p className="text-xs text-[var(--text-secondary)]">
Configurarás una nueva panadería desde cero. Este proceso es independiente de tus organizaciones existentes.
</p>
</div>
</div>
</CardBody>
</Card>
)}
{/* Enhanced Progress Header */}
<Card shadow="sm" padding="lg">
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 space-y-2 sm:space-y-0">
<div className="text-center sm:text-left">
<h1 className="text-xl sm:text-2xl font-bold text-[var(--text-primary)]">
Bienvenido a Bakery IA
{isNewTenant ? 'Crear Nueva Organización' : 'Bienvenido a Bakery IA'}
</h1>
<p className="text-[var(--text-secondary)] text-xs sm:text-sm mt-1">
Configura tu sistema de gestión inteligente paso a paso
{isNewTenant
? 'Configura tu nueva panadería desde cero'
: 'Configura tu sistema de gestión inteligente paso a paso'
}
</p>
</div>
<div className="text-center sm:text-right">
@@ -318,6 +381,7 @@ export const OnboardingWizard: React.FC = () => {
</div>
<div className="text-xs text-[var(--text-tertiary)]">
{Math.round(progressPercentage)}% completado
{isNewTenant && <span className="text-[var(--color-primary)] ml-1">(nuevo)</span>}
</div>
</div>
</div>
@@ -334,7 +398,10 @@ export const OnboardingWizard: React.FC = () => {
<div className="sm:hidden">
<div className="flex space-x-4 overflow-x-auto pb-2 px-1">
{STEPS.map((step, index) => {
const isCompleted = userProgress?.steps.find(s => s.step_name === step.id)?.completed || index < currentStepIndex;
// For new tenant creation, only show completed if index is less than current step
const isCompleted = isNewTenant
? index < currentStepIndex
: userProgress?.steps.find(s => s.step_name === step.id)?.completed || index < currentStepIndex;
const isCurrent = index === currentStepIndex;
return (
@@ -377,7 +444,10 @@ export const OnboardingWizard: React.FC = () => {
{/* Desktop Step Indicators */}
<div className="hidden sm:flex sm:justify-between">
{STEPS.map((step, index) => {
const isCompleted = userProgress?.steps.find(s => s.step_name === step.id)?.completed || index < currentStepIndex;
// For new tenant creation, only show completed if index is less than current step
const isCompleted = isNewTenant
? index < currentStepIndex
: userProgress?.steps.find(s => s.step_name === step.id)?.completed || index < currentStepIndex;
const isCurrent = index === currentStepIndex;
return (

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

@@ -1,23 +1,20 @@
import React, { useState, useCallback, forwardRef } from 'react';
import { clsx } from 'clsx';
import { useNavigate } from 'react-router-dom';
import { useAuthUser, useIsAuthenticated, useAuthActions } from '../../../stores';
import { useTranslation } from 'react-i18next';
import { useAuthUser, useIsAuthenticated } 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 { ThemeToggle } from '../../ui/ThemeToggle';
import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
import { CompactLanguageSelector } from '../../ui/LanguageSelector';
import {
Menu,
Search,
Bell,
Settings,
User,
LogOut,
X
} from 'lucide-react';
@@ -43,10 +40,6 @@ export interface HeaderProps {
* Show/hide theme toggle
*/
showThemeToggle?: boolean;
/**
* Show/hide user menu
*/
showUserMenu?: boolean;
/**
* Custom logo component
*/
@@ -67,17 +60,14 @@ export interface HeaderProps {
export interface HeaderRef {
focusSearch: () => void;
toggleUserMenu: () => void;
closeUserMenu: () => void;
}
/**
* Header - Top navigation header with logo, user menu, notifications, theme toggle
*
* Header - Top navigation header with logo, notifications, theme toggle
*
* Features:
* - Logo/brand area with responsive sizing
* - Global search functionality with keyboard shortcuts
* - User avatar with dropdown menu
* - Notifications bell with badge count
* - Theme toggle button (light/dark/system)
* - Mobile hamburger menu integration
@@ -90,16 +80,15 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
showSearch = true,
showNotifications = true,
showThemeToggle = true,
showUserMenu = true,
logo,
searchPlaceholder = 'Buscar...',
searchPlaceholder,
notificationCount = 0,
onNotificationClick,
}, ref) => {
const { t } = useTranslation();
const navigate = useNavigate();
const user = useAuthUser();
const isAuthenticated = useIsAuthenticated();
const { logout } = useAuthActions();
const { theme, resolvedTheme, setTheme } = useTheme();
const {
notifications,
@@ -111,34 +100,22 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
clearAll
} = useNotifications();
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
const [isSearchFocused, setIsSearchFocused] = useState(false);
const [searchValue, setSearchValue] = useState('');
const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
const searchInputRef = React.useRef<HTMLInputElement>(null);
const defaultSearchPlaceholder = searchPlaceholder || t('common:forms.search_placeholder', 'Search...');
// Focus search input
const focusSearch = useCallback(() => {
searchInputRef.current?.focus();
}, []);
// Toggle user menu
const toggleUserMenu = useCallback(() => {
setIsUserMenuOpen(prev => !prev);
}, []);
// Close user menu
const closeUserMenu = useCallback(() => {
setIsUserMenuOpen(false);
}, []);
// Expose ref methods
React.useImperativeHandle(ref, () => ({
focusSearch,
toggleUserMenu,
closeUserMenu,
}), [focusSearch, toggleUserMenu, closeUserMenu]);
}), [focusSearch]);
// Handle search
const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -158,11 +135,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
searchInputRef.current?.focus();
}, []);
// Handle logout
const handleLogout = useCallback(async () => {
await logout();
setIsUserMenuOpen(false);
}, [logout]);
// Keyboard shortcuts
React.useEffect(() => {
@@ -175,7 +147,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
// Escape to close menus
if (e.key === 'Escape') {
setIsUserMenuOpen(false);
setIsNotificationPanelOpen(false);
if (isSearchFocused) {
searchInputRef.current?.blur();
@@ -191,9 +162,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
React.useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as Element;
if (!target.closest('[data-user-menu]')) {
setIsUserMenuOpen(false);
}
if (!target.closest('[data-notification-panel]')) {
setIsNotificationPanelOpen(false);
}
@@ -287,7 +255,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
onChange={handleSearchChange}
onFocus={() => setIsSearchFocused(true)}
onBlur={() => setIsSearchFocused(false)}
placeholder={searchPlaceholder}
placeholder={defaultSearchPlaceholder}
className={clsx(
'w-full pl-10 pr-12 py-2.5 text-sm',
'bg-[var(--bg-secondary)] border border-[var(--border-primary)]',
@@ -297,14 +265,14 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
'placeholder:text-[var(--text-tertiary)]',
'h-9'
)}
aria-label="Buscar en la aplicación"
aria-label={t('common:accessibility.search', 'Search in the application')}
/>
{searchValue ? (
<button
type="button"
onClick={clearSearch}
className="absolute right-3 top-0 bottom-0 flex items-center p-1 hover:bg-[var(--bg-tertiary)] rounded-full transition-colors"
aria-label="Limpiar búsqueda"
aria-label={t('common:actions.clear', 'Clear search')}
>
<X className="h-3 w-3 text-[var(--text-tertiary)]" />
</button>
@@ -330,12 +298,15 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
size="sm"
onClick={focusSearch}
className="md:hidden w-10 h-10 p-0 flex items-center justify-center"
aria-label="Buscar"
aria-label={t('common:actions.search', 'Search')}
>
<Search className="h-5 w-5" />
</Button>
)}
{/* Language selector */}
<CompactLanguageSelector className="w-auto min-w-[60px]" />
{/* Theme toggle */}
{showThemeToggle && (
<ThemeToggle variant="button" size="md" />
@@ -353,8 +324,8 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
!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-label={`${t('common:navigation.notifications', 'Notifications')}${unreadCount > 0 ? ` (${unreadCount})` : ''}${!isConnected ? ` - ${t('common:status.disconnected', 'Disconnected')}` : ''}`}
title={!isConnected ? t('common:status.no_realtime_connection', 'No real-time connection') : undefined}
aria-expanded={isNotificationPanelOpen}
aria-haspopup="true"
>
@@ -385,93 +356,6 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
</div>
)}
{/* User menu */}
{showUserMenu && user && (
<div className="relative" data-user-menu>
<Button
variant="ghost"
size="sm"
onClick={toggleUserMenu}
className={clsx(
"flex items-center gap-2 pl-2 pr-3 py-1.5 h-9 min-w-0 rounded-lg",
"hover:bg-[var(--bg-secondary)] hover:ring-2 hover:ring-[var(--color-primary)]/20",
"transition-all duration-200 ease-in-out",
"active:scale-95",
isUserMenuOpen && "bg-[var(--bg-secondary)] ring-2 ring-[var(--color-primary)]/20"
)}
aria-label="Menú de usuario"
aria-expanded={isUserMenuOpen}
aria-haspopup="true"
>
<Avatar
src={user.avatar}
alt={user.name}
name={user.name}
size="xs"
className={clsx(
"flex-shrink-0 transition-all duration-200",
"hover:ring-2 hover:ring-[var(--color-primary)]/30",
isUserMenuOpen && "ring-2 ring-[var(--color-primary)]/30"
)}
/>
</Button>
{isUserMenuOpen && (
<div className="absolute right-0 top-full mt-2 w-56 bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg py-2 z-[var(--z-dropdown)]">
{/* User info */}
<div className="px-4 py-3 border-b border-[var(--border-primary)] flex items-center gap-3">
<Avatar
src={user.avatar || undefined}
alt={user.name}
name={user.name}
size="sm"
className="flex-shrink-0"
/>
<div className="min-w-0 flex-1">
<div className="text-xs text-[var(--text-tertiary)] truncate">
{user.email}
</div>
</div>
</div>
{/* Menu items */}
<div className="py-1">
<button
onClick={() => {
navigate('/app/settings/profile');
setIsUserMenuOpen(false);
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
>
<User className="h-4 w-4" />
Perfil
</button>
<button
onClick={() => {
navigate('/app/settings');
setIsUserMenuOpen(false);
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
>
<Settings className="h-4 w-4" />
Configuración
</button>
</div>
{/* Logout */}
<div className="border-t border-[var(--border-primary)] pt-1">
<button
onClick={handleLogout}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors text-[var(--color-error)]"
>
<LogOut className="h-4 w-4" />
Cerrar Sesión
</button>
</div>
</div>
)}
</div>
)}
</div>
)}
</header>

319
frontend/src/components/layout/Sidebar/Sidebar.tsx
View File

@@ -1,13 +1,15 @@
import React, { useState, useCallback, forwardRef, useMemo } from 'react';
import { clsx } from 'clsx';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuthUser, useIsAuthenticated } from '../../../stores';
import { useTranslation } from 'react-i18next';
import { useAuthUser, useIsAuthenticated, useAuthActions } from '../../../stores';
import { useCurrentTenantAccess } from '../../../stores/tenant.store';
import { getNavigationRoutes, canAccessRoute, ROUTES } from '../../../router/routes.config';
import { useSubscriptionAwareRoutes } from '../../../hooks/useSubscriptionAwareRoutes';
import { Button } from '../../ui';
import { Badge } from '../../ui';
import { Tooltip } from '../../ui';
import { Avatar } from '../../ui';
import {
LayoutDashboard,
Package,
@@ -28,7 +30,10 @@ import {
ChevronRight,
ChevronDown,
Dot,
Menu
Menu,
LogOut,
MoreHorizontal,
X
} from 'lucide-react';
export interface SidebarProps {
@@ -127,36 +132,71 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
showCollapseButton = true,
showFooter = true,
}, ref) => {
const { t } = useTranslation();
const location = useLocation();
const navigate = useNavigate();
const user = useAuthUser();
const isAuthenticated = useIsAuthenticated();
const currentTenantAccess = useCurrentTenantAccess();
const { logout } = useAuthActions();
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
const [hoveredItem, setHoveredItem] = useState<string | null>(null);
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
const sidebarRef = React.useRef<HTMLDivElement>(null);
// Get subscription-aware navigation routes
const baseNavigationRoutes = useMemo(() => getNavigationRoutes(), []);
const { filteredRoutes: subscriptionFilteredRoutes } = useSubscriptionAwareRoutes(baseNavigationRoutes);
// Map route paths to translation keys
const getTranslationKey = (routePath: string): string => {
const pathMappings: Record<string, string> = {
'/app/dashboard': 'navigation.dashboard',
'/app/operations': 'navigation.operations',
'/app/operations/procurement': 'navigation.procurement',
'/app/operations/production': 'navigation.production',
'/app/operations/pos': 'navigation.pos',
'/app/bakery': 'navigation.bakery',
'/app/bakery/recipes': 'navigation.recipes',
'/app/database': 'navigation.data',
'/app/database/inventory': 'navigation.inventory',
'/app/analytics': 'navigation.analytics',
'/app/analytics/forecasting': 'navigation.forecasting',
'/app/analytics/sales': 'navigation.sales',
'/app/analytics/performance': 'navigation.performance',
'/app/ai': 'navigation.insights',
'/app/communications': 'navigation.communications',
'/app/communications/notifications': 'navigation.notifications',
'/app/communications/alerts': 'navigation.alerts',
};
return pathMappings[routePath] || routePath;
};
// Convert routes to navigation items - memoized
const navigationItems = useMemo(() => {
const convertRoutesToItems = (routes: typeof subscriptionFilteredRoutes): NavigationItem[] => {
return routes.map(route => ({
id: route.path,
label: route.title,
path: route.path,
icon: route.icon ? iconMap[route.icon] : undefined,
requiredPermissions: route.requiredPermissions,
requiredRoles: route.requiredRoles,
children: route.children ? convertRoutesToItems(route.children) : undefined,
}));
return routes.map(route => {
const translationKey = getTranslationKey(route.path);
const label = translationKey.startsWith('navigation.')
? t(`common:${translationKey}`, route.title)
: route.title;
return {
id: route.path,
label,
path: route.path,
icon: route.icon ? iconMap[route.icon] : undefined,
requiredPermissions: route.requiredPermissions,
requiredRoles: route.requiredRoles,
children: route.children ? convertRoutesToItems(route.children) : undefined,
};
});
};
return customItems || convertRoutesToItems(subscriptionFilteredRoutes);
}, [customItems, subscriptionFilteredRoutes]);
}, [customItems, subscriptionFilteredRoutes, t]);
// Filter items based on user permissions - memoized to prevent infinite re-renders
const visibleItems = useMemo(() => {
@@ -219,6 +259,17 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
}
}, [navigate, onClose]);
// Handle logout
const handleLogout = useCallback(async () => {
await logout();
setIsProfileMenuOpen(false);
}, [logout]);
// Handle profile menu toggle
const handleProfileMenuToggle = useCallback(() => {
setIsProfileMenuOpen(prev => !prev);
}, []);
// Scroll to item
const scrollToItem = useCallback((path: string) => {
const element = sidebarRef.current?.querySelector(`[data-path="${path}"]`);
@@ -277,8 +328,12 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
// Handle keyboard navigation and touch gestures
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen && onClose) {
onClose();
if (e.key === 'Escape') {
if (isProfileMenuOpen) {
setIsProfileMenuOpen(false);
} else if (isOpen && onClose) {
onClose();
}
}
};
@@ -310,13 +365,28 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('touchstart', handleTouchStart, { passive: true });
document.addEventListener('touchmove', handleTouchMove, { passive: true });
return () => {
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('touchstart', handleTouchStart);
document.removeEventListener('touchmove', handleTouchMove);
};
}, [isOpen, onClose]);
}, [isOpen, onClose, isProfileMenuOpen]);
// Handle click outside profile menu
React.useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as Element;
if (!target.closest('[data-profile-menu]')) {
setIsProfileMenuOpen(false);
}
};
if (isProfileMenuOpen) {
document.addEventListener('click', handleClickOutside);
return () => document.removeEventListener('click', handleClickOutside);
}
}, [isProfileMenuOpen]);
// Render submenu overlay for collapsed sidebar
const renderSubmenuOverlay = (item: NavigationItem) => {
@@ -383,14 +453,14 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
>
<div className="relative">
{ItemIcon && (
<ItemIcon
<ItemIcon
className={clsx(
'flex-shrink-0 transition-colors duration-200',
isCollapsed ? 'w-5 h-5' : 'w-4 h-4 mr-3',
isActive
? 'text-[var(--color-primary)]'
isCollapsed && level === 0 ? 'w-5 h-5' : 'w-4 h-4 mr-3',
isActive
? 'text-[var(--color-primary)]'
: 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
)}
)}
/>
)}
@@ -466,7 +536,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
isActive && 'bg-[var(--color-primary)]/10 border-l-2 border-[var(--color-primary)]',
!isActive && 'hover:bg-[var(--bg-secondary)]',
item.disabled && 'opacity-50 cursor-not-allowed',
isCollapsed && !hasChildren ? 'flex justify-center items-center p-2 mx-1' : 'p-3'
isCollapsed && level === 0 ? 'flex justify-center items-center p-3 aspect-square' : 'p-3'
)}
aria-expanded={hasChildren ? isExpanded : undefined}
aria-current={isActive ? 'page' : undefined}
@@ -524,15 +594,99 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
isCollapsed ? 'w-[var(--sidebar-collapsed-width)]' : 'w-[var(--sidebar-width)]',
className
)}
aria-label="Navegación principal"
aria-label={t('common:accessibility.menu', 'Main navigation')}
>
{/* Navigation */}
<nav className={clsx('flex-1 overflow-y-auto', isCollapsed ? 'px-1 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-1' : 'space-y-2')}>
<nav className={clsx('flex-1 overflow-y-auto', isCollapsed ? 'px-2 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-2' : 'space-y-2')}>
{visibleItems.map(item => renderItem(item))}
</ul>
</nav>
{/* Profile section */}
{user && (
<div className="border-t border-[var(--border-primary)]">
<div className="relative" data-profile-menu>
<button
onClick={handleProfileMenuToggle}
className={clsx(
'w-full flex items-center transition-all duration-200',
'hover:bg-[var(--bg-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20',
isCollapsed ? 'justify-center p-3' : 'p-4 gap-3',
isProfileMenuOpen && 'bg-[var(--bg-secondary)]'
)}
aria-label="Menú de perfil"
aria-expanded={isProfileMenuOpen}
aria-haspopup="true"
>
<Avatar
src={user.avatar}
alt={user.name}
name={user.name}
size={isCollapsed ? "sm" : "md"}
className="flex-shrink-0"
/>
{!isCollapsed && (
<>
<div className="flex-1 min-w-0 text-left">
<div className="text-sm font-medium text-[var(--text-primary)] truncate">
{user.name}
</div>
<div className="text-xs text-[var(--text-tertiary)] truncate">
{user.email}
</div>
</div>
<MoreHorizontal className="w-4 h-4 text-[var(--text-tertiary)] flex-shrink-0" />
</>
)}
</button>
{/* Profile menu dropdown */}
{isProfileMenuOpen && (
<div className={clsx(
'absolute bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg py-2 z-[var(--z-dropdown)]',
isCollapsed ? 'left-full bottom-0 ml-2 min-w-[200px]' : 'left-4 right-4 bottom-full mb-2'
)}>
<div className="py-1">
<button
onClick={() => {
navigate('/app/settings/profile');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
>
<User className="h-4 w-4" />
Perfil
</button>
<button
onClick={() => {
navigate('/app/settings');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
>
<Settings className="h-4 w-4" />
Configuración
</button>
</div>
<div className="border-t border-[var(--border-primary)] pt-1">
<button
onClick={handleLogout}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors text-[var(--color-error)]"
>
<LogOut className="h-4 w-4" />
Cerrar Sesión
</button>
</div>
</div>
)}
</div>
</div>
)}
{/* Collapse button */}
{showCollapseButton && (
<div className={clsx('border-t border-[var(--border-primary)]', isCollapsed ? 'p-2' : 'p-4')}>
@@ -541,60 +695,57 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
size="sm"
onClick={onToggleCollapse}
className={clsx(
'w-full flex items-center justify-center',
isCollapsed ? 'p-2' : 'px-4 py-2'
'w-full flex items-center transition-colors duration-200',
isCollapsed ? 'justify-center p-3 aspect-square' : 'justify-start px-4 py-2'
)}
aria-label={isCollapsed ? 'Expandir sidebar' : 'Contraer sidebar'}
aria-label={isCollapsed ? t('common:actions.expand', 'Expand sidebar') : t('common:actions.collapse', 'Collapse sidebar')}
>
{isCollapsed ? (
<ChevronRight className="w-4 h-4" />
) : (
<>
<ChevronLeft className="w-4 h-4 mr-2" />
<span className="text-sm">Contraer</span>
<span className="text-sm">{t('common:actions.collapse', 'Collapse')}</span>
</>
)}
</Button>
</div>
)}
{/* Footer */}
{showFooter && !isCollapsed && (
<div className="p-4 border-t border-[var(--border-primary)]">
<div className="text-xs text-[var(--text-tertiary)] text-center">
Panadería IA v2.0.0
</div>
</div>
)}
</aside>
{/* Mobile Drawer */}
<aside
className={clsx(
'fixed inset-y-0 left-0 w-[var(--sidebar-width)] max-w-[85vw]',
'fixed inset-y-0 left-0 w-[var(--sidebar-width)] max-w-[90vw]',
'bg-[var(--bg-primary)] border-r border-[var(--border-primary)]',
'transition-transform duration-300 ease-in-out z-[var(--z-modal)]',
'lg:hidden flex flex-col',
'shadow-xl',
'shadow-2xl backdrop-blur-sm',
isOpen ? 'translate-x-0' : '-translate-x-full'
)}
aria-label="Navegación principal"
aria-label={t('common:accessibility.menu', 'Main navigation')}
role="dialog"
aria-modal="true"
>
{/* Mobile header */}
<div className="flex items-center justify-between p-4 border-b border-[var(--border-primary)]">
<h2 className="text-lg font-semibold text-[var(--text-primary)]">
Navegación
</h2>
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
PI
</div>
<h2 className="text-lg font-semibold text-[var(--text-primary)]">
Panadería IA
</h2>
</div>
<Button
variant="ghost"
size="sm"
onClick={onClose}
className="p-2"
className="p-2 hover:bg-[var(--bg-secondary)]"
aria-label="Cerrar navegación"
>
<Menu className="w-4 h-4" />
<X className="w-5 h-5" />
</Button>
</div>
@@ -605,14 +756,82 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
</ul>
</nav>
{/* Footer */}
{showFooter && (
<div className="p-4 border-t border-[var(--border-primary)]">
<div className="text-xs text-[var(--text-tertiary)] text-center">
Panadería IA v2.0.0
{/* Profile section - Mobile */}
{user && (
<div className="border-t border-[var(--border-primary)]">
<div className="relative" data-profile-menu>
<button
onClick={handleProfileMenuToggle}
className={clsx(
'w-full flex items-center p-4 gap-3 transition-all duration-200',
'hover:bg-[var(--bg-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20',
isProfileMenuOpen && 'bg-[var(--bg-secondary)]'
)}
aria-label="Menú de perfil"
aria-expanded={isProfileMenuOpen}
aria-haspopup="true"
>
<Avatar
src={user.avatar}
alt={user.name}
name={user.name}
size="md"
className="flex-shrink-0"
/>
<div className="flex-1 min-w-0 text-left">
<div className="text-sm font-medium text-[var(--text-primary)] truncate">
{user.name}
</div>
<div className="text-xs text-[var(--text-tertiary)] truncate">
{user.email}
</div>
</div>
<MoreHorizontal className="w-4 h-4 text-[var(--text-tertiary)] flex-shrink-0" />
</button>
{/* Profile menu dropdown - Mobile */}
{isProfileMenuOpen && (
<div className="mx-4 mb-2 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg py-2">
<div className="py-1">
<button
onClick={() => {
navigate('/app/settings/profile');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
>
<User className="h-4 w-4" />
Perfil
</button>
<button
onClick={() => {
navigate('/app/settings');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
>
<Settings className="h-4 w-4" />
Configuración
</button>
</div>
<div className="border-t border-[var(--border-primary)] pt-1">
<button
onClick={handleLogout}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors text-[var(--color-error)]"
>
<LogOut className="h-4 w-4" />
Cerrar Sesión
</button>
</div>
</div>
)}
</div>
</div>
)}
</aside>
</>
);

78
frontend/src/components/ui/LanguageSelector.tsx Normal file
View File

@@ -0,0 +1,78 @@
import React from 'react';
import {
languageConfig,
supportedLanguages,
type SupportedLanguage
} from '../../locales';
import { useLanguageSwitcher } from '../../hooks/useLanguageSwitcher';
import { Select } from './Select';
interface LanguageSelectorProps {
className?: string;
variant?: 'compact' | 'full';
}
export function LanguageSelector({
className,
variant = 'full'
}: LanguageSelectorProps) {
const { currentLanguage, changeLanguage, isChanging } = useLanguageSwitcher();
const languageOptions = supportedLanguages.map(lang => ({
value: lang,
label: variant === 'compact'
? `${languageConfig[lang].flag} ${languageConfig[lang].code.toUpperCase()}`
: `${languageConfig[lang].flag} ${languageConfig[lang].nativeName}`,
}));
const handleLanguageChange = (value: string | number | Array<string | number>) => {
if (typeof value === 'string') {
const newLanguage = value as SupportedLanguage;
changeLanguage(newLanguage);
}
};
return (
<Select
value={currentLanguage}
onChange={handleLanguageChange}
options={languageOptions}
className={className}
placeholder="Select language"
disabled={isChanging}
/>
);
}
// Compact version for headers/toolbars
export function CompactLanguageSelector({ className }: { className?: string }) {
return (
<LanguageSelector
variant="compact"
className={className}
/>
);
}
// Hook for language-related utilities
export function useLanguageUtils() {
const { currentLanguage, changeLanguage } = useLanguageSwitcher();
const getCurrentLanguageConfig = () => languageConfig[currentLanguage];
const isRTL = () => getCurrentLanguageConfig().rtl;
const getLanguageFlag = () => getCurrentLanguageConfig().flag;
const getLanguageName = () => getCurrentLanguageConfig().nativeName;
return {
currentLanguage,
languageConfig: getCurrentLanguageConfig(),
isRTL,
getLanguageFlag,
getLanguageName,
changeLanguage,
availableLanguages: supportedLanguages,
};
}

102
frontend/src/components/ui/NotificationPanel/NotificationPanel.tsx
View File

@@ -95,12 +95,15 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
if (!isOpen) return null;
const unreadNotifications = notifications.filter(n => !n.read);
const isMobile = window.innerWidth < 768;
return (
<>
{/* Backdrop */}
<div
className="fixed inset-0 z-40 bg-black/20"
className={`fixed inset-0 z-[9998] transition-all duration-300 ${
isMobile ? 'bg-black/50 backdrop-blur-sm' : 'bg-black/20'
}`}
onClick={onClose}
aria-hidden="true"
/>
@@ -108,51 +111,66 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
{/* 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",
"fixed z-[9999] bg-[var(--bg-primary)] border border-[var(--border-primary)] shadow-2xl flex flex-col transition-all duration-300 ease-out",
isMobile
? "inset-x-0 bottom-0 rounded-t-2xl max-h-[85vh]"
: "right-0 top-full mt-2 w-96 max-w-sm rounded-xl shadow-xl max-h-96",
className
)}
>
{/* Mobile Handle */}
{isMobile && (
<div className="flex justify-center py-3">
<div className="w-10 h-1 bg-[var(--border-secondary)] rounded-full" />
</div>
)}
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-[var(--border-primary)]">
<div className={`flex items-center justify-between border-b border-[var(--border-primary)] ${
isMobile ? 'px-6 py-4' : 'px-4 py-3'
}`}>
<div className="flex items-center gap-2">
<h3 className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
<h3 className={`font-semibold text-[var(--text-primary)] ${
isMobile ? 'text-lg' : 'text-sm'
}`}>
Notificaciones
</h3>
{unreadNotifications.length > 0 && (
<Badge variant="info" size="sm">
<Badge variant="info" size={isMobile ? "md" : "sm"}>
{unreadNotifications.length} nuevas
</Badge>
)}
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
{unreadNotifications.length > 0 && (
<Button
variant="ghost"
size="sm"
size={isMobile ? "md" : "sm"}
onClick={onMarkAllAsRead}
className="h-6 px-2 text-xs"
className={`${isMobile ? 'px-3 py-2 text-sm' : 'h-6 px-2 text-xs'}`}
>
<Check className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
Marcar todas
</Button>
)}
<Button
variant="ghost"
size="sm"
size={isMobile ? "md" : "sm"}
onClick={onClose}
className="h-6 w-6 p-0"
className={`${isMobile ? 'p-2' : 'h-6 w-6 p-0'} hover:bg-[var(--bg-secondary)] rounded-full`}
>
<X className="h-3 w-3" />
<X className={`${isMobile ? 'w-5 h-5' : 'w-3 h-3'}`} />
</Button>
</div>
</div>
{/* Notifications List */}
<div className="flex-1 overflow-y-auto">
<div className={`flex-1 overflow-y-auto ${isMobile ? 'px-2 py-2' : ''}`}>
{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)' }}>
<div className={`text-center ${isMobile ? 'py-12 px-6' : 'p-8'}`}>
<CheckCircle className={`mx-auto mb-3 ${isMobile ? 'w-12 h-12' : 'w-8 h-8'}`} style={{ color: 'var(--color-success)' }} />
<p className={`text-[var(--text-secondary)] ${isMobile ? 'text-base' : 'text-sm'}`}>
No hay notificaciones
</p>
</div>
@@ -165,18 +183,19 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
<div
key={notification.id}
className={clsx(
"p-3 hover:bg-[var(--bg-secondary)] transition-colors",
"transition-colors hover:bg-[var(--bg-secondary)] active:bg-[var(--bg-tertiary)]",
isMobile ? 'px-4 py-4 mx-2 my-1 rounded-lg' : 'p-3',
!notification.read && "bg-[var(--color-info)]/5"
)}
>
<div className="flex gap-3">
<div className={`flex gap-${isMobile ? '4' : '3'}`}>
{/* Icon */}
<div
className="flex-shrink-0 p-1 rounded-full mt-0.5"
className={`flex-shrink-0 rounded-full mt-0.5 ${isMobile ? 'p-2' : 'p-1'}`}
style={{ backgroundColor: getSeverityColor(notification.severity) + '15' }}
>
<SeverityIcon
className="w-3 h-3"
className={`${isMobile ? 'w-5 h-5' : 'w-3 h-3'}`}
style={{ color: getSeverityColor(notification.severity) }}
/>
</div>
@@ -184,50 +203,56 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
{/* 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">
<div className={`flex items-start justify-between gap-2 ${isMobile ? 'mb-2' : 'mb-1'}`}>
<div className={`flex items-center gap-2 ${isMobile ? 'flex-wrap' : ''}`}>
<Badge variant={getSeverityBadge(notification.severity)} size={isMobile ? "md" : "sm"}>
{notification.severity.toUpperCase()}
</Badge>
<Badge variant="secondary" size="sm">
<Badge variant="secondary" size={isMobile ? "md" : "sm"}>
{notification.item_type === 'alert' ? 'Alerta' : 'Recomendación'}
</Badge>
</div>
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
<span className={`font-medium text-[var(--text-secondary)] ${isMobile ? 'text-sm' : 'text-xs'}`}>
{formatTimestamp(notification.timestamp)}
</span>
</div>
{/* Title */}
<p className="text-sm font-medium mb-1 leading-tight" style={{ color: 'var(--text-primary)' }}>
<p className={`font-medium leading-tight text-[var(--text-primary)] ${
isMobile ? 'text-base mb-2' : 'text-sm mb-1'
}`}>
{notification.title}
</p>
{/* Message */}
<p className="text-xs leading-relaxed mb-2" style={{ color: 'var(--text-secondary)' }}>
<p className={`leading-relaxed text-[var(--text-secondary)] ${
isMobile ? 'text-sm mb-4' : 'text-xs mb-2'
}`}>
{notification.message}
</p>
{/* Actions */}
<div className="flex items-center gap-1">
<div className={`flex items-center gap-2 ${isMobile ? 'flex-col sm:flex-row' : ''}`}>
{!notification.read && (
<Button
variant="ghost"
size="sm"
size={isMobile ? "md" : "sm"}
onClick={() => onMarkAsRead(notification.id)}
className="h-6 px-2 text-xs"
className={`${isMobile ? 'w-full sm:w-auto px-4 py-2 text-sm' : 'h-6 px-2 text-xs'}`}
>
<Check className="w-3 h-3 mr-1" />
<Check className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
Marcar como leído
</Button>
)}
<Button
variant="ghost"
size="sm"
size={isMobile ? "md" : "sm"}
onClick={() => onRemoveNotification(notification.id)}
className="h-6 px-2 text-xs text-red-600 hover:text-red-700"
className={`text-[var(--color-error)] hover:text-[var(--color-error-dark)] ${
isMobile ? 'w-full sm:w-auto px-4 py-2 text-sm' : 'h-6 px-2 text-xs'
}`}
>
<Trash2 className="w-3 h-3 mr-1" />
<Trash2 className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
Eliminar
</Button>
</div>
@@ -242,13 +267,18 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({
{/* Footer */}
{notifications.length > 0 && (
<div className="p-3 border-t border-[var(--border-primary)] bg-[var(--bg-secondary)]">
<div className={`border-t border-[var(--border-primary)] bg-[var(--bg-secondary)] ${
isMobile ? 'px-6 py-4' : 'p-3'
}`}>
<Button
variant="ghost"
size="sm"
size={isMobile ? "md" : "sm"}
onClick={onClearAll}
className="w-full text-xs text-red-600 hover:text-red-700"
className={`w-full text-[var(--color-error)] hover:text-[var(--color-error-dark)] ${
isMobile ? 'px-4 py-3 text-sm' : 'text-xs'
}`}
>
<Trash2 className={`${isMobile ? 'w-4 h-4 mr-2' : 'w-3 h-3 mr-1'}`} />
Limpiar todas las notificaciones
</Button>
</div>

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

@@ -3,7 +3,7 @@ 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, Plus } from 'lucide-react';
import { ChevronDown, Building2, Check, AlertCircle, Plus, X } from 'lucide-react';
interface TenantSwitcherProps {
className?: string;
@@ -92,41 +92,35 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
// Calculate dropdown position
const calculateDropdownPosition = () => {
if (!buttonRef.current) return;
const buttonRect = buttonRef.current.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const isMobile = viewportWidth < 768; // md breakpoint
if (isMobile) {
// On mobile, use full width with margins and position from top
// Check if dropdown would go off bottom of screen
const dropdownHeight = Math.min(400, viewportHeight * 0.7); // Max 70vh
const spaceBelow = viewportHeight - buttonRect.bottom - 8;
const shouldPositionAbove = spaceBelow < dropdownHeight && buttonRect.top > dropdownHeight;
// On mobile, use a modal-style overlay
setDropdownPosition({
top: shouldPositionAbove ? buttonRect.top - dropdownHeight - 8 : buttonRect.bottom + 8,
left: 16, // 1rem margin from screen edge
right: 16, // For full width calculation
width: viewportWidth - 32, // Full width minus margins
top: 0,
left: 0,
width: viewportWidth,
isMobile: true,
});
} else {
// Desktop positioning - align right edge of dropdown with right edge of button
const dropdownWidth = 320; // w-80 (20rem * 16px) - slightly wider for desktop
const dropdownWidth = 360; // Wider for better content display
let left = buttonRect.right - dropdownWidth;
// Ensure dropdown doesn't go off the left edge of the screen
if (left < 16) {
left = 16;
}
// Ensure dropdown doesn't go off the right edge
if (left + dropdownWidth > viewportWidth - 16) {
left = viewportWidth - dropdownWidth - 16;
}
setDropdownPosition({
top: buttonRect.bottom + 8,
left: left,
@@ -175,7 +169,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
// Handle creating new tenant
const handleCreateNewTenant = () => {
setIsOpen(false);
navigate('/app/onboarding');
navigate('/app/onboarding?new=true');
};
// Don't render if no tenants available
@@ -200,122 +194,221 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
ref={buttonRef}
onClick={toggleDropdown}
disabled={isLoading}
className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-text-primary bg-bg-secondary hover:bg-bg-tertiary border border-border-secondary rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20 disabled:opacity-50 disabled:cursor-not-allowed"
className={`
flex items-center justify-between w-full
${showLabel ? 'px-3 py-2.5' : 'px-2.5 py-2.5 justify-center'}
text-sm font-medium text-[var(--text-primary)]
bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)]
border border-[var(--border-secondary)]
rounded-lg transition-all duration-200
focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20
active:scale-[0.98] active:bg-[var(--bg-tertiary)]
disabled:opacity-50 disabled:cursor-not-allowed
min-h-[44px] touch-manipulation
${isOpen ? 'ring-2 ring-[var(--color-primary)]/20 bg-[var(--bg-tertiary)]' : ''}
`}
aria-expanded={isOpen}
aria-haspopup="listbox"
aria-label="Switch tenant"
>
<Building2 className="w-4 h-4 text-text-secondary" />
<div className="flex items-center space-x-2 min-w-0 flex-1">
<div className={`
flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center
${currentTenant ? 'bg-[var(--color-primary)]/10' : 'bg-[var(--bg-tertiary)]'}
`}>
<Building2 className={`w-4 h-4 ${currentTenant ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'}`} />
</div>
{showLabel && (
<div className="flex-1 min-w-0 text-left">
<div className="text-sm font-medium text-[var(--text-primary)] truncate">
{currentTenant?.name || 'Select Organization'}
</div>
{currentTenant?.city && (
<div className="text-xs text-[var(--text-secondary)] truncate">
{currentTenant.city}
</div>
)}
</div>
)}
</div>
{showLabel && (
<span className="hidden sm:block max-w-32 truncate">
{currentTenant?.name || 'Select Tenant'}
</span>
<ChevronDown
className={`w-4 h-4 text-[var(--text-secondary)] transition-transform duration-200 flex-shrink-0 ml-2 ${
isOpen ? 'rotate-180' : ''
}`}
/>
)}
<ChevronDown
className={`w-4 h-4 text-text-secondary transition-transform ${
isOpen ? 'rotate-180' : ''
}`}
/>
</button>
{/* Dropdown Menu - Rendered in portal to avoid stacking context issues */}
{isOpen && createPortal(
<div
ref={dropdownRef}
className={`fixed bg-bg-primary border border-border-secondary rounded-lg shadow-lg z-[9999] ${
dropdownPosition.isMobile ? 'mx-4' : ''
}`}
style={{
top: `${dropdownPosition.top}px`,
left: `${dropdownPosition.left}px`,
width: `${dropdownPosition.width}px`,
maxHeight: dropdownPosition.isMobile ? '70vh' : '80vh',
}}
role="listbox"
aria-label="Available tenants"
>
{/* 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'}`}>
Organizations
</h3>
</div>
{/* Error State */}
{error && (
<div className="px-3 py-2 border-b border-border-primary">
<div className="flex items-center space-x-2 text-color-error text-xs">
<AlertCircle className="w-4 h-4 flex-shrink-0" />
<span>{error}</span>
<button
onClick={handleRetry}
className="ml-auto text-color-primary hover:text-color-primary-dark underline"
>
Retry
</button>
</div>
</div>
<>
{/* Mobile Backdrop */}
{dropdownPosition.isMobile && (
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9998]"
onClick={() => setIsOpen(false)}
/>
)}
{/* Tenant List */}
<div className={`overflow-y-auto ${dropdownPosition.isMobile ? 'max-h-[60vh]' : 'max-h-80'}`}>
{availableTenants.map((tenant) => (
<button
key={tenant.id}
onClick={() => handleTenantSwitch(tenant.id)}
disabled={isLoading}
className={`w-full text-left hover:bg-bg-secondary focus:bg-bg-secondary focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
dropdownPosition.isMobile ? 'px-4 py-4 active:bg-bg-tertiary' : 'px-3 py-3'
}`}
role="option"
aria-selected={tenant.id === currentTenant?.id}
>
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<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.city}
</p>
{/* Dropdown Content */}
<div
ref={dropdownRef}
className={`
fixed z-[9999] bg-[var(--bg-primary)] border border-[var(--border-primary)]
shadow-2xl transition-all duration-300 ease-out
${dropdownPosition.isMobile
? 'inset-x-0 bottom-0 rounded-t-2xl max-h-[85vh]'
: 'rounded-xl shadow-xl'
}
`}
style={
dropdownPosition.isMobile
? {}
: {
top: `${dropdownPosition.top}px`,
left: `${dropdownPosition.left}px`,
width: `${dropdownPosition.width}px`,
maxHeight: '400px',
}
}
role="listbox"
aria-label="Available tenants"
>
{/* Mobile Handle */}
{dropdownPosition.isMobile && (
<div className="flex justify-center py-3">
<div className="w-10 h-1 bg-[var(--border-secondary)] rounded-full" />
</div>
)}
{/* Header */}
<div className={`
flex items-center justify-between
border-b border-[var(--border-primary)]
${dropdownPosition.isMobile ? 'px-6 py-4' : 'px-4 py-3'}
`}>
<h3 className={`font-semibold text-[var(--text-primary)] ${
dropdownPosition.isMobile ? 'text-lg' : 'text-sm'
}`}>
Organizations
</h3>
{dropdownPosition.isMobile && (
<button
onClick={() => setIsOpen(false)}
className="p-2 hover:bg-[var(--bg-secondary)] rounded-full transition-colors"
>
<X className="w-5 h-5 text-[var(--text-secondary)]" />
</button>
)}
</div>
{/* Error State */}
{error && (
<div className={`border-b border-[var(--border-primary)] ${
dropdownPosition.isMobile ? 'px-6 py-4' : 'px-4 py-3'
}`}>
<div className="flex items-center space-x-3 text-[var(--color-error)]">
<AlertCircle className="w-5 h-5 flex-shrink-0" />
<span className="text-sm flex-1">{error}</span>
<button
onClick={handleRetry}
className="text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] underline text-sm font-medium"
>
Retry
</button>
</div>
</div>
)}
{/* Tenant List */}
<div className={`
overflow-y-auto
${dropdownPosition.isMobile ? 'max-h-[50vh] px-2 py-2' : 'max-h-72 py-1'}
`}>
{availableTenants.map((tenant) => (
<button
key={tenant.id}
onClick={() => handleTenantSwitch(tenant.id)}
disabled={isLoading}
className={`
w-full text-left rounded-lg transition-all duration-200
hover:bg-[var(--bg-secondary)] focus:bg-[var(--bg-secondary)]
active:scale-[0.98] active:bg-[var(--bg-tertiary)]
focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20
disabled:opacity-50 disabled:cursor-not-allowed
${dropdownPosition.isMobile ? 'px-4 py-4 mx-2 my-1 min-h-[60px]' : 'px-3 py-3 mx-1 my-0.5'}
${tenant.id === currentTenant?.id ? 'bg-[var(--color-primary)]/5 ring-1 ring-[var(--color-primary)]/20' : ''}
`}
role="option"
aria-selected={tenant.id === currentTenant?.id}
>
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-3">
<div className={`
${dropdownPosition.isMobile ? 'w-12 h-12' : 'w-10 h-10'}
rounded-full flex items-center justify-center flex-shrink-0 transition-colors
${tenant.id === currentTenant?.id
? 'bg-[var(--color-primary)] text-white'
: 'bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
}
`}>
<Building2 className={`${dropdownPosition.isMobile ? 'w-6 h-6' : 'w-5 h-5'}`} />
</div>
<div className="min-w-0 flex-1">
<p className={`font-medium text-[var(--text-primary)] truncate ${
dropdownPosition.isMobile ? 'text-base' : 'text-sm'
}`}>
{tenant.name}
</p>
{tenant.city && (
<p className={`text-[var(--text-secondary)] truncate ${
dropdownPosition.isMobile ? 'text-sm' : 'text-xs'
}`}>
{tenant.city}
</p>
)}
</div>
</div>
</div>
{tenant.id === currentTenant?.id && (
<Check className={`text-[var(--color-success)] flex-shrink-0 ml-3 ${
dropdownPosition.isMobile ? 'w-6 h-6' : 'w-5 h-5'
}`} />
)}
</div>
</button>
))}
</div>
{tenant.id === currentTenant?.id && (
<Check className="w-4 h-4 text-color-success flex-shrink-0 ml-2" />
)}
</div>
{/* Footer */}
<div className={`
border-t border-[var(--border-primary)]
${dropdownPosition.isMobile ? 'px-6 py-6' : 'px-4 py-3'}
`}>
<button
onClick={handleCreateNewTenant}
className={`
w-full flex items-center justify-center gap-3
${dropdownPosition.isMobile ? 'px-6 py-4 text-base' : 'px-4 py-2.5 text-sm'}
text-white font-semibold
bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)]
hover:from-[var(--color-primary-dark)] hover:to-[var(--color-primary)]
shadow-md hover:shadow-lg
rounded-lg transition-all duration-200
focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30
active:scale-[0.98]
border border-[var(--color-primary)]/30
`}
>
<Plus className={`${dropdownPosition.isMobile ? 'w-5 h-5' : 'w-4 h-4'}`} />
<span>Agregar Nueva Organización</span>
</button>
))}
</div>
</div>
{/* Footer */}
<div className={`border-t border-border-primary bg-bg-secondary rounded-b-lg ${
dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'
}`}>
<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
)}

30
frontend/src/hooks/useLanguageSwitcher.ts Normal file
View File

@@ -0,0 +1,30 @@
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useUIStore } from '../stores/ui.store';
import { type SupportedLanguage } from '../locales';
/**
* Hook for managing language switching with proper synchronization
* between i18n and UI store
*/
export function useLanguageSwitcher() {
const { i18n } = useTranslation();
const { language: uiLanguage, setLanguage: setUILanguage } = useUIStore();
const changeLanguage = useCallback(async (newLanguage: SupportedLanguage) => {
try {
// Only change i18n language - let the i18n event handler update UI store
await i18n.changeLanguage(newLanguage);
} catch (error) {
console.error('Failed to change language:', error);
}
}, [i18n]);
const isChanging = i18n.isLanguageChangingTo !== false;
return {
currentLanguage: i18n.language as SupportedLanguage,
changeLanguage,
isChanging,
};
}

47
frontend/src/i18n/index.ts
View File

@@ -1,13 +1,33 @@
// frontend/src/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { resources, defaultLanguage } from '../locales';
import { resources, defaultLanguage, supportedLanguages } from '../locales';
// Get saved language from localStorage or default
const getSavedLanguage = () => {
try {
const stored = localStorage.getItem('ui-storage');
if (stored) {
const { state } = JSON.parse(stored);
if (state?.language && supportedLanguages.includes(state.language)) {
console.log(`🔍 Found stored language: ${state.language}`);
return state.language;
}
}
} catch (error) {
console.warn('Failed to parse stored language:', error);
}
console.log(`📌 Using default language: ${defaultLanguage}`);
return defaultLanguage;
};
const initialLanguage = getSavedLanguage();
i18n
.use(initReactI18next)
.init({
resources,
lng: defaultLanguage,
lng: initialLanguage,
fallbackLng: defaultLanguage,
interpolation: {
@@ -33,6 +53,29 @@ i18n
react: {
useSuspense: false,
},
// Return key with namespace if translation is missing
saveMissing: process.env.NODE_ENV === 'development',
})
.then(() => {
console.log(`🚀 i18n initialized with language: ${initialLanguage}`);
});
// Listen for language changes and update UI store
i18n.on('languageChanged', (lng) => {
if (typeof window !== 'undefined') {
// Update document direction for RTL languages
document.dir = i18n.dir(lng);
// Update UI store to keep it in sync (without triggering i18n again)
import('../stores/ui.store').then(({ useUIStore }) => {
const currentLanguage = useUIStore.getState().language;
if (currentLanguage !== lng) {
// Set directly to avoid recursive calls
useUIStore.setState({ language: lng as any });
}
});
}
});
export default i18n;

240
frontend/src/locales/en/common.json Normal file
View File

@@ -0,0 +1,240 @@
{
"navigation": {
"dashboard": "Dashboard",
"operations": "Operations",
"inventory": "Inventory",
"production": "Production",
"recipes": "Recipes",
"orders": "Orders",
"procurement": "Procurement",
"pos": "Point of Sale",
"analytics": "Analytics",
"forecasting": "Forecasting",
"sales": "Sales",
"performance": "Performance",
"insights": "AI Insights",
"data": "Data",
"weather": "Weather",
"traffic": "Traffic",
"events": "Events",
"communications": "Communications",
"notifications": "Notifications",
"alerts": "Alerts",
"preferences": "Preferences",
"settings": "Settings",
"team": "Team",
"bakery": "Bakery",
"training": "Training",
"system": "System",
"onboarding": "Initial Setup"
},
"actions": {
"save": "Save",
"cancel": "Cancel",
"edit": "Edit",
"delete": "Delete",
"add": "Add",
"create": "Create",
"update": "Update",
"view": "View",
"search": "Search",
"filter": "Filter",
"export": "Export",
"import": "Import",
"download": "Download",
"upload": "Upload",
"print": "Print",
"refresh": "Refresh",
"reset": "Reset",
"clear": "Clear",
"submit": "Submit",
"close": "Close",
"open": "Open",
"back": "Back",
"next": "Next",
"previous": "Previous",
"finish": "Finish",
"continue": "Continue",
"confirm": "Confirm",
"expand": "Expand",
"collapse": "Collapse"
},
"status": {
"active": "Active",
"inactive": "Inactive",
"pending": "Pending",
"completed": "Completed",
"cancelled": "Cancelled",
"draft": "Draft",
"published": "Published",
"archived": "Archived",
"enabled": "Enabled",
"disabled": "Disabled",
"available": "Available",
"unavailable": "Unavailable",
"in_progress": "In Progress",
"failed": "Failed",
"success": "Success",
"warning": "Warning",
"error": "Error",
"info": "Information",
"undefined": "Not defined",
"no_rating": "No rating",
"disconnected": "Disconnected",
"no_realtime_connection": "No real-time connection"
},
"time": {
"today": "Today",
"yesterday": "Yesterday",
"tomorrow": "Tomorrow",
"this_week": "This Week",
"last_week": "Last Week",
"next_week": "Next Week",
"this_month": "This Month",
"last_month": "Last Month",
"next_month": "Next Month",
"this_year": "This Year",
"last_year": "Last Year",
"next_year": "Next Year",
"morning": "Morning",
"afternoon": "Afternoon",
"evening": "Evening",
"night": "Night",
"now": "Now",
"recently": "Recently",
"soon": "Soon",
"later": "Later"
},
"units": {
"kg": "kg",
"g": "g",
"l": "l",
"ml": "ml",
"pieces": "pieces",
"units": "units",
"portions": "portions",
"minutes": "minutes",
"hours": "hours",
"days": "days",
"weeks": "weeks",
"months": "months",
"years": "years"
},
"categories": {
"bread": "Breads",
"pastry": "Pastries",
"cake": "Cakes",
"cookie": "Cookies",
"other": "Others",
"flour": "Flours",
"dairy": "Dairy",
"eggs": "Eggs",
"fats": "Fats",
"sugar": "Sugars",
"yeast": "Yeasts",
"spices": "Spices",
"salted": "Savory"
},
"priority": {
"low": "Low",
"normal": "Normal",
"medium": "Medium",
"high": "High",
"urgent": "Urgent",
"critical": "Critical",
"undefined": "Priority not defined"
},
"difficulty": {
"easy": "Easy",
"medium": "Medium",
"hard": "Hard",
"expert": "Expert"
},
"payment_methods": {
"cash": "Cash",
"card": "Card",
"transfer": "Transfer",
"other": "Other"
},
"delivery_methods": {
"pickup": "Pickup",
"delivery": "Home Delivery"
},
"weekdays": {
"monday": "Monday",
"tuesday": "Tuesday",
"wednesday": "Wednesday",
"thursday": "Thursday",
"friday": "Friday",
"saturday": "Saturday",
"sunday": "Sunday"
},
"months": {
"january": "January",
"february": "February",
"march": "March",
"april": "April",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"september": "September",
"october": "October",
"november": "November",
"december": "December"
},
"forms": {
"required": "Required",
"optional": "Optional",
"loading": "Loading...",
"no_data": "No data available",
"no_results": "No results found",
"empty_state": "No items to display",
"select_option": "Select option",
"enter_text": "Enter text",
"choose_file": "Choose file",
"drag_drop": "Drag and drop here",
"or": "or",
"no_terms": "No terms defined",
"search_placeholder": "Search..."
},
"table": {
"no_data": "No data to display",
"loading": "Loading data...",
"error": "Error loading data",
"rows_per_page": "Rows per page",
"showing": "Showing",
"of": "of",
"entries": "entries",
"page": "Page",
"first": "First",
"last": "Last",
"sort_asc": "Sort ascending",
"sort_desc": "Sort descending"
},
"alerts": {
"confirm_delete": "Are you sure you want to delete this item?",
"confirm_action": "Are you sure you want to perform this action?",
"unsaved_changes": "You have unsaved changes. Are you sure you want to leave?",
"success_save": "Saved successfully",
"success_delete": "Deleted successfully",
"success_update": "Updated successfully",
"success_create": "Created successfully",
"operation_completed": "Operation completed successfully"
},
"accessibility": {
"close": "Close",
"menu": "Main navigation",
"open_menu": "Open menu",
"close_menu": "Close menu",
"toggle": "Toggle",
"expand": "Expand",
"collapse": "Collapse",
"loading": "Loading",
"image": "Image",
"button": "Button",
"link": "Link",
"tooltip": "Additional information",
"search": "Search in the application"
}
}

74
frontend/src/locales/en/dashboard.json Normal file
View File

@@ -0,0 +1,74 @@
{
"title": "Dashboard",
"subtitle": "Overview of your bakery operations",
"stats": {
"sales_today": "Sales Today",
"pending_orders": "Pending Orders",
"stock_alerts": "Stock Alerts",
"production_efficiency": "Production Efficiency",
"revenue_growth": "Revenue Growth",
"customer_satisfaction": "Customer Satisfaction",
"inventory_turnover": "Inventory Turnover",
"daily_profit": "Daily Profit",
"products_sold": "Products Sold"
},
"trends": {
"vs_yesterday": "% vs yesterday",
"vs_last_week": "% vs last week",
"vs_last_month": "% vs last month",
"growth": "growth",
"decrease": "decrease",
"stable": "stable"
},
"sections": {
"critical_stats": "Critical Statistics",
"real_time_alerts": "Real-time Alerts",
"procurement_today": "Procurement Today",
"production_today": "Production Today",
"recent_activity": "Recent Activity",
"quick_actions": "Quick Actions"
},
"quick_actions": {
"add_new_bakery": "Add New Bakery",
"create_order": "Create Order",
"start_production": "Start Production",
"check_inventory": "Check Inventory",
"view_reports": "View Reports",
"manage_staff": "Manage Staff"
},
"alerts": {
"low_stock": "Low Stock",
"production_delay": "Production Delay",
"quality_issue": "Quality Issue",
"equipment_maintenance": "Equipment Maintenance",
"order_pending": "Order Pending",
"delivery_due": "Delivery Due"
},
"messages": {
"welcome": "Welcome back",
"good_morning": "Good morning",
"good_afternoon": "Good afternoon",
"good_evening": "Good evening",
"no_data": "No data available",
"loading": "Loading dashboard data...",
"error_loading": "Error loading data",
"last_updated": "Last updated",
"auto_refresh": "Auto refresh in",
"more_than_yesterday": "more than yesterday",
"require_attention": "Require attention",
"more_units": "more units",
"action_required": "Action required",
"manage_organizations": "Manage your organizations",
"setup_new_business": "Set up a new business from scratch",
"active_organizations": "Active Organizations"
},
"time_periods": {
"today": "Today",
"this_week": "This Week",
"this_month": "This Month",
"this_year": "This Year",
"last_7_days": "Last 7 days",
"last_30_days": "Last 30 days",
"last_90_days": "Last 90 days"
}
}

80
frontend/src/locales/en/production.json Normal file
View File

@@ -0,0 +1,80 @@
{
"title": "Production",
"subtitle": "Manage your bakery production",
"production_status": {
"PENDING": "Pending",
"IN_PROGRESS": "In Progress",
"COMPLETED": "Completed",
"CANCELLED": "Cancelled",
"ON_HOLD": "On Hold",
"QUALITY_CHECK": "Quality Check",
"FAILED": "Failed"
},
"production_priority": {
"LOW": "Low",
"MEDIUM": "Medium",
"HIGH": "High",
"URGENT": "Urgent"
},
"batch_status": {
"PLANNED": "Planned",
"IN_PROGRESS": "In Progress",
"COMPLETED": "Completed",
"CANCELLED": "Cancelled",
"ON_HOLD": "On Hold"
},
"quality_check_status": {
"PENDING": "Pending",
"IN_PROGRESS": "In Progress",
"PASSED": "Passed",
"FAILED": "Failed",
"REQUIRES_ATTENTION": "Requires Attention"
},
"fields": {
"batch_number": "Batch Number",
"production_date": "Production Date",
"planned_quantity": "Planned Quantity",
"actual_quantity": "Actual Quantity",
"yield_percentage": "Yield Percentage",
"priority": "Priority",
"assigned_staff": "Assigned Staff",
"production_notes": "Production Notes",
"quality_score": "Quality Score",
"quality_notes": "Quality Notes",
"defect_rate": "Defect Rate",
"rework_required": "Rework Required",
"waste_quantity": "Waste Quantity",
"waste_reason": "Waste Reason",
"efficiency": "Efficiency",
"material_cost": "Material Cost",
"labor_cost": "Labor Cost",
"overhead_cost": "Overhead Cost",
"total_cost": "Total Cost",
"cost_per_unit": "Cost per Unit"
},
"actions": {
"start_production": "Start Production",
"complete_batch": "Complete Batch",
"pause_production": "Pause Production",
"cancel_batch": "Cancel Batch",
"quality_check": "Quality Check",
"create_batch": "Create Batch",
"view_details": "View Details",
"edit_batch": "Edit Batch",
"duplicate_batch": "Duplicate Batch"
},
"labels": {
"current_production": "Current Production",
"production_queue": "Production Queue",
"completed_today": "Completed Today",
"efficiency_rate": "Efficiency Rate",
"quality_score": "Quality Score",
"active_batches": "Active Batches",
"pending_quality_checks": "Pending Quality Checks"
},
"descriptions": {
"production_efficiency": "Percentage of efficiency in current production",
"quality_average": "Average quality score in recent batches",
"waste_reduction": "Waste reduction compared to previous month"
}
}

22
frontend/src/locales/es/common.json
View File

@@ -55,7 +55,9 @@
"previous": "Anterior",
"finish": "Finalizar",
"continue": "Continuar",
"confirm": "Confirmar"
"confirm": "Confirmar",
"expand": "Expandir",
"collapse": "Contraer"
},
"status": {
"active": "Activo",
@@ -75,7 +77,11 @@
"success": "Éxito",
"warning": "Advertencia",
"error": "Error",
"info": "Información"
"info": "Información",
"undefined": "No definido",
"no_rating": "Sin calificación",
"disconnected": "Desconectado",
"no_realtime_connection": "Sin conexión en tiempo real"
},
"time": {
"today": "Hoy",
@@ -135,7 +141,8 @@
"medium": "Media",
"high": "Alta",
"urgent": "Urgente",
"critical": "Crítica"
"critical": "Crítica",
"undefined": "Prioridad no definida"
},
"difficulty": {
"easy": "Fácil",
@@ -187,7 +194,9 @@
"enter_text": "Ingresa texto",
"choose_file": "Elegir archivo",
"drag_drop": "Arrastra y suelta aquí",
"or": "o"
"or": "o",
"no_terms": "Sin términos definidos",
"search_placeholder": "Buscar..."
},
"table": {
"no_data": "No hay datos para mostrar",
@@ -215,7 +224,7 @@
},
"accessibility": {
"close": "Cerrar",
"menu": "Menú",
"menu": "Navegación principal",
"open_menu": "Abrir menú",
"close_menu": "Cerrar menú",
"toggle": "Alternar",
@@ -225,6 +234,7 @@
"image": "Imagen",
"button": "Botón",
"link": "Enlace",
"tooltip": "Información adicional"
"tooltip": "Información adicional",
"search": "Buscar en la aplicación"
}
}

74
frontend/src/locales/es/dashboard.json Normal file
View File

@@ -0,0 +1,74 @@
{
"title": "Panel de Control",
"subtitle": "Resumen general de tu panadería",
"stats": {
"sales_today": "Ventas Hoy",
"pending_orders": "Órdenes Pendientes",
"stock_alerts": "Alertas de Stock",
"production_efficiency": "Eficiencia de Producción",
"revenue_growth": "Crecimiento de Ingresos",
"customer_satisfaction": "Satisfacción del Cliente",
"inventory_turnover": "Rotación de Inventario",
"daily_profit": "Ganancia Diaria",
"products_sold": "Productos Vendidos"
},
"trends": {
"vs_yesterday": "% vs ayer",
"vs_last_week": "% vs semana pasada",
"vs_last_month": "% vs mes pasado",
"growth": "crecimiento",
"decrease": "disminución",
"stable": "estable"
},
"sections": {
"critical_stats": "Estadísticas Críticas",
"real_time_alerts": "Alertas en Tiempo Real",
"procurement_today": "Compras Hoy",
"production_today": "Producción Hoy",
"recent_activity": "Actividad Reciente",
"quick_actions": "Acciones Rápidas"
},
"quick_actions": {
"add_new_bakery": "Agregar Nueva Panadería",
"create_order": "Crear Pedido",
"start_production": "Iniciar Producción",
"check_inventory": "Revisar Inventario",
"view_reports": "Ver Reportes",
"manage_staff": "Gestionar Personal"
},
"alerts": {
"low_stock": "Stock Bajo",
"production_delay": "Retraso en Producción",
"quality_issue": "Problema de Calidad",
"equipment_maintenance": "Mantenimiento de Equipo",
"order_pending": "Pedido Pendiente",
"delivery_due": "Entrega Vencida"
},
"messages": {
"welcome": "Bienvenido de vuelta",
"good_morning": "Buenos días",
"good_afternoon": "Buenas tardes",
"good_evening": "Buenas noches",
"no_data": "No hay datos disponibles",
"loading": "Cargando datos del panel...",
"error_loading": "Error al cargar los datos",
"last_updated": "Última actualización",
"auto_refresh": "Actualización automática en",
"more_than_yesterday": "más que ayer",
"require_attention": "Requieren atención",
"more_units": "unidades más",
"action_required": "Acción requerida",
"manage_organizations": "Gestiona tus organizaciones",
"setup_new_business": "Configurar un nuevo negocio desde cero",
"active_organizations": "Organizaciones Activas"
},
"time_periods": {
"today": "Hoy",
"this_week": "Esta Semana",
"this_month": "Este Mes",
"this_year": "Este Año",
"last_7_days": "Últimos 7 días",
"last_30_days": "Últimos 30 días",
"last_90_days": "Últimos 90 días"
}
}

80
frontend/src/locales/es/production.json Normal file
View File

@@ -0,0 +1,80 @@
{
"title": "Producción",
"subtitle": "Gestiona la producción de tu panadería",
"production_status": {
"PENDING": "Pendiente",
"IN_PROGRESS": "En Proceso",
"COMPLETED": "Completado",
"CANCELLED": "Cancelado",
"ON_HOLD": "En Pausa",
"QUALITY_CHECK": "Control Calidad",
"FAILED": "Fallido"
},
"production_priority": {
"LOW": "Baja",
"MEDIUM": "Media",
"HIGH": "Alta",
"URGENT": "Urgente"
},
"batch_status": {
"PLANNED": "Planificado",
"IN_PROGRESS": "En Proceso",
"COMPLETED": "Completado",
"CANCELLED": "Cancelado",
"ON_HOLD": "En Pausa"
},
"quality_check_status": {
"PENDING": "Pendiente",
"IN_PROGRESS": "En Proceso",
"PASSED": "Aprobado",
"FAILED": "Reprobado",
"REQUIRES_ATTENTION": "Requiere Atención"
},
"fields": {
"batch_number": "Número de Lote",
"production_date": "Fecha de Producción",
"planned_quantity": "Cantidad Planificada",
"actual_quantity": "Cantidad Real",
"yield_percentage": "Porcentaje de Rendimiento",
"priority": "Prioridad",
"assigned_staff": "Personal Asignado",
"production_notes": "Notas de Producción",
"quality_score": "Puntuación de Calidad",
"quality_notes": "Notas de Calidad",
"defect_rate": "Tasa de Defectos",
"rework_required": "Requiere Retrabajo",
"waste_quantity": "Cantidad de Desperdicio",
"waste_reason": "Razón del Desperdicio",
"efficiency": "Eficiencia",
"material_cost": "Costo de Materiales",
"labor_cost": "Costo de Mano de Obra",
"overhead_cost": "Costo Indirecto",
"total_cost": "Costo Total",
"cost_per_unit": "Costo por Unidad"
},
"actions": {
"start_production": "Iniciar Producción",
"complete_batch": "Completar Lote",
"pause_production": "Pausar Producción",
"cancel_batch": "Cancelar Lote",
"quality_check": "Control de Calidad",
"create_batch": "Crear Lote",
"view_details": "Ver Detalles",
"edit_batch": "Editar Lote",
"duplicate_batch": "Duplicar Lote"
},
"labels": {
"current_production": "Producción Actual",
"production_queue": "Cola de Producción",
"completed_today": "Completado Hoy",
"efficiency_rate": "Tasa de Eficiencia",
"quality_score": "Puntuación de Calidad",
"active_batches": "Lotes Activos",
"pending_quality_checks": "Controles de Calidad Pendientes"
},
"descriptions": {
"production_efficiency": "Porcentaje de eficiencia en la producción actual",
"quality_average": "Puntuación promedio de calidad en los últimos lotes",
"waste_reduction": "Reducción de desperdicio comparado con el mes anterior"
}
}

240
frontend/src/locales/eu/common.json Normal file
View File

@@ -0,0 +1,240 @@
{
"navigation": {
"dashboard": "Aginte Panela",
"operations": "Eragiketak",
"inventory": "Inbentarioa",
"production": "Ekoizpena",
"recipes": "Errezetak",
"orders": "Eskaerak",
"procurement": "Erosketak",
"pos": "Salmenta Puntua",
"analytics": "Analisiak",
"forecasting": "Aurreikuspena",
"sales": "Salmentak",
"performance": "Errendimendua",
"insights": "AI Jakintza",
"data": "Datuak",
"weather": "Eguraldia",
"traffic": "Trafikoa",
"events": "Gertaerak",
"communications": "Komunikazioak",
"notifications": "Jakinarazpenak",
"alerts": "Alertak",
"preferences": "Lehentasunak",
"settings": "Ezarpenak",
"team": "Taldea",
"bakery": "Okindegi",
"training": "Trebakuntza",
"system": "Sistema",
"onboarding": "Hasierako Konfigurazioa"
},
"actions": {
"save": "Gorde",
"cancel": "Ezeztatu",
"edit": "Editatu",
"delete": "Ezabatu",
"add": "Gehitu",
"create": "Sortu",
"update": "Eguneratu",
"view": "Ikusi",
"search": "Bilatu",
"filter": "Iragazi",
"export": "Esportatu",
"import": "Inportatu",
"download": "Deskargatu",
"upload": "Kargatu",
"print": "Inprimatu",
"refresh": "Eguneratu",
"reset": "Berrezarri",
"clear": "Garbitu",
"submit": "Bidali",
"close": "Itxi",
"open": "Ireki",
"back": "Atzera",
"next": "Hurrengoa",
"previous": "Aurrekoa",
"finish": "Amaitu",
"continue": "Jarraitu",
"confirm": "Berretsi",
"expand": "Zabaldu",
"collapse": "Tolestu"
},
"status": {
"active": "Aktibo",
"inactive": "Ez aktibo",
"pending": "Zain",
"completed": "Amaituta",
"cancelled": "Bertan behera utzi",
"draft": "Zirriborroa",
"published": "Argitaratua",
"archived": "Artxibatua",
"enabled": "Gaituta",
"disabled": "Desgaituta",
"available": "Erabilgarri",
"unavailable": "Ez erabilgarri",
"in_progress": "Abian",
"failed": "Huts egin du",
"success": "Arrakasta",
"warning": "Abisua",
"error": "Errorea",
"info": "Informazioa",
"undefined": "Zehaztu gabe",
"no_rating": "Baloraziorik ez",
"disconnected": "Deskonektatuta",
"no_realtime_connection": "Denbora errealeko konexiorik ez"
},
"time": {
"today": "Gaur",
"yesterday": "Atzo",
"tomorrow": "Bihar",
"this_week": "Aste honetan",
"last_week": "Azken astean",
"next_week": "Hurrengo astean",
"this_month": "Hilabete honetan",
"last_month": "Azken hilabetean",
"next_month": "Hurrengo hilabetean",
"this_year": "Urte honetan",
"last_year": "Azken urtean",
"next_year": "Hurrengo urtean",
"morning": "Goiza",
"afternoon": "Arratsaldea",
"evening": "Iluntzea",
"night": "Gaua",
"now": "Orain",
"recently": "Duela gutxi",
"soon": "Laster",
"later": "Geroago"
},
"units": {
"kg": "kg",
"g": "g",
"l": "l",
"ml": "ml",
"pieces": "zatiak",
"units": "unitateak",
"portions": "zatiak",
"minutes": "minutuak",
"hours": "orduak",
"days": "egunak",
"weeks": "asteak",
"months": "hilabeteak",
"years": "urteak"
},
"categories": {
"bread": "Ogiak",
"pastry": "Gozogintza",
"cake": "Tartoak",
"cookie": "Galletak",
"other": "Besteak",
"flour": "Irinak",
"dairy": "Esnekiak",
"eggs": "Arrautzak",
"fats": "Gantzak",
"sugar": "Azukreak",
"yeast": "Legamiak",
"spices": "Espezieak",
"salted": "Gazidunak"
},
"priority": {
"low": "Baxua",
"normal": "Normala",
"medium": "Ertaina",
"high": "Altua",
"urgent": "Larria",
"critical": "Kritikoa",
"undefined": "Lehentasuna zehaztu gabe"
},
"difficulty": {
"easy": "Erraza",
"medium": "Ertaina",
"hard": "Zaila",
"expert": "Adituarena"
},
"payment_methods": {
"cash": "Dirua",
"card": "Txartela",
"transfer": "Transferentzia",
"other": "Besteak"
},
"delivery_methods": {
"pickup": "Hartzera",
"delivery": "Etxera banatzea"
},
"weekdays": {
"monday": "Astelehena",
"tuesday": "Asteartea",
"wednesday": "Asteazkena",
"thursday": "Osteguna",
"friday": "Ostirala",
"saturday": "Larunbata",
"sunday": "Igandea"
},
"months": {
"january": "Urtarrila",
"february": "Otsaila",
"march": "Martxoa",
"april": "Apirila",
"may": "Maiatza",
"june": "Ekaina",
"july": "Uztaila",
"august": "Abuztua",
"september": "Iraila",
"october": "Urria",
"november": "Azaroa",
"december": "Abendua"
},
"forms": {
"required": "Beharrezkoa",
"optional": "Aukerakoa",
"loading": "Kargatzen...",
"no_data": "Ez dago daturik",
"no_results": "Ez da emaitzarik aurkitu",
"empty_state": "Ez dago elementurik erakusteko",
"select_option": "Aukera hautatu",
"enter_text": "Testua sartu",
"choose_file": "Fitxategia aukeratu",
"drag_drop": "Arrastatu eta jaregin hemen",
"or": "edo",
"no_terms": "Baldintzarik zehaztu gabe",
"search_placeholder": "Bilatu..."
},
"table": {
"no_data": "Ez dago daturik erakusteko",
"loading": "Datuak kargatzen...",
"error": "Errorea datuak kargatzean",
"rows_per_page": "Errenkadak orrialdepo",
"showing": "Erakusten",
"of": "-tik",
"entries": "sarrerak",
"page": "Orrialdea",
"first": "Lehena",
"last": "Azkena",
"sort_asc": "Ordenatu gorantz",
"sort_desc": "Ordenatu beherantz"
},
"alerts": {
"confirm_delete": "Ziur zaude elementu hau ezabatu nahi duzula?",
"confirm_action": "Ziur zaude ekintza hau egin nahi duzula?",
"unsaved_changes": "Gorde gabeko aldaketak dituzu. Ziur zaude irten nahi duzula?",
"success_save": "Ongi gorde da",
"success_delete": "Ongi ezabatu da",
"success_update": "Ongi eguneratu da",
"success_create": "Ongi sortu da",
"operation_completed": "Eragiketa ongi burutu da"
},
"accessibility": {
"close": "Itxi",
"menu": "Nabigazio nagusia",
"open_menu": "Menua ireki",
"close_menu": "Menua itxi",
"toggle": "Aldatu",
"expand": "Zabaldu",
"collapse": "Tolestu",
"loading": "Kargatzen",
"image": "Irudia",
"button": "Botoia",
"link": "Esteka",
"tooltip": "Informazio gehigarria",
"search": "Aplikazioan bilatu"
}
}

74
frontend/src/locales/eu/dashboard.json Normal file
View File

@@ -0,0 +1,74 @@
{
"title": "Aginte Panela",
"subtitle": "Zure okindegiaren eragiketen ikuspegi orokorra",
"stats": {
"sales_today": "Gaurko Salmentak",
"pending_orders": "Eskaera Zain",
"stock_alerts": "Stock Alertak",
"production_efficiency": "Ekoizpen Eraginkortasuna",
"revenue_growth": "Diru-sarrera Hazkundea",
"customer_satisfaction": "Bezeroaren Gogobetetasuna",
"inventory_turnover": "Inbentario Biraketa",
"daily_profit": "Eguneko Irabazia",
"products_sold": "Saldutako Produktuak"
},
"trends": {
"vs_yesterday": "% atzokoarekin alderatuta",
"vs_last_week": "% azken astearekin alderatuta",
"vs_last_month": "% azken hilarekin alderatuta",
"growth": "hazkundea",
"decrease": "beherakada",
"stable": "egonkorra"
},
"sections": {
"critical_stats": "Estatistika Kritikoak",
"real_time_alerts": "Denbora Errealeko Alertak",
"procurement_today": "Gaurko Erosketak",
"production_today": "Gaurko Ekoizpena",
"recent_activity": "Azken Jarduera",
"quick_actions": "Ekintza Azkarrak"
},
"quick_actions": {
"add_new_bakery": "Okindegi Berria Gehitu",
"create_order": "Eskaera Sortu",
"start_production": "Ekoizpena Hasi",
"check_inventory": "Inbentarioa Begiratu",
"view_reports": "Txostenak Ikusi",
"manage_staff": "Langilea Kudeatu"
},
"alerts": {
"low_stock": "Stock Baxua",
"production_delay": "Ekoizpen Atzerapena",
"quality_issue": "Kalitate Arazoa",
"equipment_maintenance": "Ekipo Mantentze",
"order_pending": "Eskaera Zain",
"delivery_due": "Entrega Atzeratua"
},
"messages": {
"welcome": "Ongi etorri berriro",
"good_morning": "Egun on",
"good_afternoon": "Arratsalde on",
"good_evening": "Iluntzeko on",
"no_data": "Ez dago daturik",
"loading": "Aginte panelaren datuak kargatzen...",
"error_loading": "Errorea datuak kargatzean",
"last_updated": "Azken eguneraketa",
"auto_refresh": "Eguneraketa automatikoa",
"more_than_yesterday": "atzo baino gehiago",
"require_attention": "Arreta behar dute",
"more_units": "unitate gehiago",
"action_required": "Ekintza beharrezkoa",
"manage_organizations": "Zure erakundeak kudeatu",
"setup_new_business": "Negozio berri bat hutsetik konfiguratu",
"active_organizations": "Erakunde Aktiboak"
},
"time_periods": {
"today": "Gaur",
"this_week": "Aste Hau",
"this_month": "Hilabete Hau",
"this_year": "Urte Hau",
"last_7_days": "Azken 7 egun",
"last_30_days": "Azken 30 egun",
"last_90_days": "Azken 90 egun"
}
}

80
frontend/src/locales/eu/production.json Normal file
View File

@@ -0,0 +1,80 @@
{
"title": "Ekoizpena",
"subtitle": "Zure okindegiaren ekoizpena kudeatu",
"production_status": {
"PENDING": "Zain",
"IN_PROGRESS": "Abian",
"COMPLETED": "Amaituta",
"CANCELLED": "Bertan behera utzi",
"ON_HOLD": "Pausatuta",
"QUALITY_CHECK": "Kalitate Kontrola",
"FAILED": "Huts egin"
},
"production_priority": {
"LOW": "Baxua",
"MEDIUM": "Ertaina",
"HIGH": "Altua",
"URGENT": "Larria"
},
"batch_status": {
"PLANNED": "Planifikatuta",
"IN_PROGRESS": "Abian",
"COMPLETED": "Amaituta",
"CANCELLED": "Bertan behera utzi",
"ON_HOLD": "Pausatuta"
},
"quality_check_status": {
"PENDING": "Zain",
"IN_PROGRESS": "Abian",
"PASSED": "Onartuta",
"FAILED": "Baztertuta",
"REQUIRES_ATTENTION": "Arreta Behar du"
},
"fields": {
"batch_number": "Lote Zenbakia",
"production_date": "Ekoizpen Data",
"planned_quantity": "Planifikatutako Kantitatea",
"actual_quantity": "Benetako Kantitatea",
"yield_percentage": "Errendimendu Ehunekoa",
"priority": "Lehentasuna",
"assigned_staff": "Esleitutako Langilea",
"production_notes": "Ekoizpen Oharrak",
"quality_score": "Kalitate Puntuazioa",
"quality_notes": "Kalitate Oharrak",
"defect_rate": "Akats Tasa",
"rework_required": "Berrlana Behar",
"waste_quantity": "Hondakin Kantitatea",
"waste_reason": "Hondakin Arrazoia",
"efficiency": "Eraginkortasuna",
"material_cost": "Material Kostua",
"labor_cost": "Lan Kostua",
"overhead_cost": "Kostu Orokorra",
"total_cost": "Kostu Osoa",
"cost_per_unit": "Unitateko Kostua"
},
"actions": {
"start_production": "Ekoizpena Hasi",
"complete_batch": "Lotea Amaitu",
"pause_production": "Ekoizpena Pausatu",
"cancel_batch": "Lotea Ezeztatu",
"quality_check": "Kalitate Kontrola",
"create_batch": "Lotea Sortu",
"view_details": "Xehetasunak Ikusi",
"edit_batch": "Lotea Editatu",
"duplicate_batch": "Lotea Bikoiztu"
},
"labels": {
"current_production": "Uneko Ekoizpena",
"production_queue": "Ekoizpen Ilara",
"completed_today": "Gaur Amaitutakoak",
"efficiency_rate": "Eraginkortasun Tasa",
"quality_score": "Kalitate Puntuazioa",
"active_batches": "Lote Aktiboak",
"pending_quality_checks": "Kalitate Kontrol Zain"
},
"descriptions": {
"production_efficiency": "Uneko ekoizpenaren eraginkortasun ehunekoa",
"quality_average": "Azken loteen batez besteko kalitate puntuazioa",
"waste_reduction": "Hondakin murrizketa aurreko hilarekin alderatuta"
}
}

44
frontend/src/locales/index.ts
View File

@@ -7,6 +7,19 @@ import suppliersEs from './es/suppliers.json';
import ordersEs from './es/orders.json';
import recipesEs from './es/recipes.json';
import errorsEs from './es/errors.json';
import dashboardEs from './es/dashboard.json';
import productionEs from './es/production.json';
// English translations
import commonEn from './en/common.json';
import recipesEn from './en/recipes.json';
import dashboardEn from './en/dashboard.json';
import productionEn from './en/production.json';
// Basque translations
import commonEu from './eu/common.json';
import dashboardEu from './eu/dashboard.json';
import productionEu from './eu/production.json';
// Translation resources by language
export const resources = {
@@ -19,11 +32,24 @@ export const resources = {
orders: ordersEs,
recipes: recipesEs,
errors: errorsEs,
dashboard: dashboardEs,
production: productionEs,
},
en: {
common: commonEn,
recipes: recipesEn,
dashboard: dashboardEn,
production: productionEn,
},
eu: {
common: commonEu,
dashboard: dashboardEu,
production: productionEu,
},
};
// Supported languages
export const supportedLanguages = ['es'] as const;
export const supportedLanguages = ['es', 'en', 'eu'] as const;
export type SupportedLanguage = typeof supportedLanguages[number];
// Default language
@@ -38,10 +64,24 @@ export const languageConfig = {
flag: '🇪🇸',
rtl: false,
},
en: {
name: 'English',
nativeName: 'English',
code: 'en',
flag: '🇺🇸',
rtl: false,
},
eu: {
name: 'Euskera',
nativeName: 'Euskera',
code: 'eu',
flag: '🏴󠁥󠁳󠁰󠁶󠁿',
rtl: false,
},
};
// Namespaces available in translations
export const namespaces = ['common', 'auth', 'inventory', 'foodSafety', 'suppliers', 'orders', 'recipes', 'errors'] as const;
export const namespaces = ['common', 'auth', 'inventory', 'foodSafety', 'suppliers', 'orders', 'recipes', 'errors', 'dashboard', 'production'] as const;
export type Namespace = typeof namespaces[number];
// Helper function to get language display name

83
frontend/src/pages/app/DashboardPage.tsx
View File

@@ -1,67 +1,82 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '../../components/layout';
import { Button } from '../../components/ui/Button';
import { Card, CardHeader, CardBody } from '../../components/ui/Card';
import StatsGrid from '../../components/ui/Stats/StatsGrid';
import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
import ProcurementPlansToday from '../../components/domain/dashboard/ProcurementPlansToday';
import ProductionPlansToday from '../../components/domain/dashboard/ProductionPlansToday';
import { useTenant } from '../../stores/tenant.store';
import {
AlertTriangle,
Clock,
DollarSign,
Package,
TrendingUp,
TrendingDown
TrendingDown,
Plus,
Building2
} from 'lucide-react';
const DashboardPage: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { availableTenants } = useTenant();
const handleAddNewBakery = () => {
navigate('/app/onboarding?new=true');
};
const criticalStats = [
{
title: 'Ventas Hoy',
title: t('dashboard:stats.sales_today', 'Sales Today'),
value: '€1,247',
icon: DollarSign,
variant: 'success' as const,
trend: {
value: 12,
direction: 'up' as const,
label: '% vs ayer'
label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
},
subtitle: '+€135 más que ayer'
subtitle: '+€135 ' + t('dashboard:messages.more_than_yesterday', 'more than yesterday')
},
{
title: 'Órdenes Pendientes',
title: t('dashboard:stats.pending_orders', 'Pending Orders'),
value: '23',
icon: Clock,
variant: 'warning' as const,
trend: {
value: 4,
direction: 'down' as const,
label: '% vs ayer'
label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
},
subtitle: 'Requieren atención'
subtitle: t('dashboard:messages.require_attention', 'Require attention')
},
{
title: 'Productos Vendidos',
title: t('dashboard:stats.products_sold', 'Products Sold'),
value: '156',
icon: Package,
variant: 'info' as const,
trend: {
value: 8,
direction: 'up' as const,
label: '% vs ayer'
label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
},
subtitle: '+12 unidades más'
subtitle: '+12 ' + t('dashboard:messages.more_units', 'more units')
},
{
title: 'Stock Crítico',
title: t('dashboard:stats.stock_alerts', 'Critical Stock'),
value: '4',
icon: AlertTriangle,
variant: 'error' as const,
trend: {
value: 100,
direction: 'up' as const,
label: '% vs ayer'
label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
},
subtitle: 'Acción requerida'
subtitle: t('dashboard:messages.action_required', 'Action required')
}
];
@@ -88,20 +103,54 @@ const DashboardPage: React.FC = () => {
return (
<div className="space-y-6 p-4 sm:p-6">
<PageHeader
title="Panel de Control"
description="Vista general de tu panadería"
title={t('dashboard:title', 'Dashboard')}
description={t('dashboard:subtitle', 'Overview of your bakery operations')}
/>
{/* Critical Metrics using StatsGrid */}
<StatsGrid
stats={criticalStats}
columns={4}
title="Métricas Críticas"
description="Los datos más importantes para la gestión diaria de tu panadería"
gap="lg"
className="mb-6"
/>
{/* Quick Actions - Add New Bakery */}
{availableTenants && availableTenants.length > 0 && (
<Card>
<CardHeader>
<h3 className="text-lg font-semibold text-[var(--text-primary)]">{t('dashboard:sections.quick_actions', 'Quick Actions')}</h3>
<p className="text-sm text-[var(--text-secondary)]">{t('dashboard:messages.manage_organizations', 'Manage your organizations')}</p>
</CardHeader>
<CardBody>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Button
onClick={handleAddNewBakery}
variant="outline"
size="lg"
className="h-auto p-6 flex flex-col items-center gap-3 bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border-[var(--color-primary)]/20 hover:border-[var(--color-primary)]/40 hover:bg-[var(--color-primary)]/20 transition-all duration-200"
>
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center">
<Plus className="w-6 h-6 text-[var(--color-primary)]" />
</div>
<div className="text-center">
<div className="font-semibold text-[var(--text-primary)]">{t('dashboard:quick_actions.add_new_bakery', 'Add New Bakery')}</div>
<div className="text-sm text-[var(--text-secondary)] mt-1">{t('dashboard:messages.setup_new_business', 'Set up a new business from scratch')}</div>
</div>
</Button>
<div className="flex flex-col items-center justify-center p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
<Building2 className="w-8 h-8 text-[var(--text-tertiary)] mb-2" />
<div className="text-center">
<div className="text-sm font-medium text-[var(--text-secondary)]">{t('dashboard:messages.active_organizations', 'Active Organizations')}</div>
<div className="text-2xl font-bold text-[var(--color-primary)]">{availableTenants.length}</div>
</div>
</div>
</div>
</CardBody>
</Card>
)}
{/* Full width blocks - one after another */}
<div className="space-y-6">
{/* 1. Real-time alerts block */}

2
frontend/src/pages/app/operations/procurement/ProcurementPage.tsx
View File

@@ -538,7 +538,7 @@ const ProcurementPage: React.FC = () => {
{/* Critical Requirements Modal */}
{showCriticalRequirements && selectedPlanForRequirements && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="fixed top-[var(--header-height)] left-0 right-0 bottom-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
<div className="bg-[var(--bg-primary)] rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden mx-4">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-[var(--border-primary)]">

283
frontend/src/pages/app/settings/organizations/OrganizationsPage.tsx Normal file
View File

@@ -0,0 +1,283 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { PageHeader } from '../../../../components/layout';
import { Button } from '../../../../components/ui/Button';
import { Card, CardHeader, CardBody } from '../../../../components/ui/Card';
import { Badge } from '../../../../components/ui/Badge';
import { Tooltip } from '../../../../components/ui/Tooltip';
import { useTenant } from '../../../../stores/tenant.store';
import { useAuthUser } from '../../../../stores/auth.store';
import {
Plus,
Building2,
Settings,
Users,
Calendar,
MapPin,
Phone,
Mail,
Globe,
MoreHorizontal,
ArrowRight,
Crown,
Shield,
Eye
} from 'lucide-react';
const OrganizationsPage: React.FC = () => {
const navigate = useNavigate();
const user = useAuthUser();
const { currentTenant, availableTenants, switchTenant } = useTenant();
const [isLoading, setIsLoading] = useState(false);
const handleAddNewOrganization = () => {
navigate('/app/onboarding?new=true');
};
const handleSwitchToTenant = async (tenantId: string) => {
if (tenantId === currentTenant?.id) return;
setIsLoading(true);
await switchTenant(tenantId);
setIsLoading(false);
};
const handleManageTenant = (tenantId: string) => {
// Navigate to tenant settings
navigate(`/app/database/bakery-config`);
};
const handleManageTeam = (tenantId: string) => {
// Navigate to team management
navigate(`/app/database/team`);
};
const getRoleIcon = (ownerId: string) => {
if (user?.id === ownerId) {
return <Crown className="w-4 h-4 text-[var(--color-warning)]" />;
}
return <Shield className="w-4 h-4 text-[var(--color-primary)]" />;
};
const getRoleLabel = (ownerId: string) => {
if (user?.id === ownerId) {
return 'Propietario';
}
return 'Miembro';
};
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('es-ES', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
};
return (
<div className="space-y-6 p-4 sm:p-6">
<PageHeader
title="Mis Organizaciones"
description="Gestiona tus panaderías y negocios"
actions={
<Button
onClick={handleAddNewOrganization}
variant="primary"
size="lg"
className="flex items-center gap-2"
>
<Plus className="w-4 h-4" />
Nueva Organización
</Button>
}
/>
{/* Statistics */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card>
<CardBody className="text-center">
<Building2 className="w-8 h-8 text-[var(--color-primary)] mx-auto mb-2" />
<div className="text-2xl font-bold text-[var(--text-primary)]">
{availableTenants?.length || 0}
</div>
<div className="text-sm text-[var(--text-secondary)]">Organizaciones Totales</div>
</CardBody>
</Card>
<Card>
<CardBody className="text-center">
<Crown className="w-8 h-8 text-[var(--color-warning)] mx-auto mb-2" />
<div className="text-2xl font-bold text-[var(--text-primary)]">
{availableTenants?.filter(t => t.owner_id === user?.id).length || 0}
</div>
<div className="text-sm text-[var(--text-secondary)]">Propietario</div>
</CardBody>
</Card>
<Card>
<CardBody className="text-center">
<Shield className="w-8 h-8 text-[var(--color-primary)] mx-auto mb-2" />
<div className="text-2xl font-bold text-[var(--text-primary)]">
{availableTenants?.filter(t => t.owner_id !== user?.id).length || 0}
</div>
<div className="text-sm text-[var(--text-secondary)]">Miembro</div>
</CardBody>
</Card>
</div>
{/* Organizations List */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Tus Organizaciones</h3>
{availableTenants && availableTenants.length > 0 ? (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{availableTenants.map((tenant) => (
<Card
key={tenant.id}
className={`transition-all duration-200 hover:shadow-lg ${
currentTenant?.id === tenant.id
? 'ring-2 ring-[var(--color-primary)]/20 bg-[var(--color-primary)]/5'
: 'hover:border-[var(--color-primary)]/30'
}`}
>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4">
<div className="flex items-start gap-3 flex-1 min-w-0">
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
<Building2 className="w-6 h-6 text-[var(--color-primary)]" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h4 className="font-semibold text-[var(--text-primary)] truncate">
{tenant.name}
</h4>
{currentTenant?.id === tenant.id && (
<Badge variant="primary" size="sm">Activa</Badge>
)}
</div>
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
{getRoleIcon(tenant.owner_id)}
<span>{getRoleLabel(tenant.owner_id)}</span>
</div>
</div>
</div>
<div className="flex gap-1">
<Tooltip content="Configurar organización">
<Button
variant="ghost"
size="sm"
onClick={() => handleManageTenant(tenant.id)}
className="w-8 h-8 p-0"
>
<Settings className="w-4 h-4" />
</Button>
</Tooltip>
{user?.id === tenant.owner_id && (
<Tooltip content="Gestionar equipo">
<Button
variant="ghost"
size="sm"
onClick={() => handleManageTeam(tenant.id)}
className="w-8 h-8 p-0"
>
<Users className="w-4 h-4" />
</Button>
</Tooltip>
)}
</div>
</CardHeader>
<CardBody className="pt-0">
{/* Organization details */}
<div className="space-y-2 mb-4">
{tenant.business_type && (
<div className="text-sm text-[var(--text-secondary)]">
<Badge variant="outline" size="sm">{tenant.business_type}</Badge>
</div>
)}
{tenant.address && (
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
<MapPin className="w-4 h-4 flex-shrink-0" />
<span className="truncate">{tenant.address}</span>
</div>
)}
{tenant.city && (
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
<MapPin className="w-4 h-4 flex-shrink-0" />
<span>{tenant.city}</span>
</div>
)}
{tenant.phone && (
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
<Phone className="w-4 h-4 flex-shrink-0" />
<span>{tenant.phone}</span>
</div>
)}
<div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
<Calendar className="w-4 h-4 flex-shrink-0" />
<span>Creada el {formatDate(tenant.created_at)}</span>
</div>
</div>
{/* Actions */}
<div className="flex gap-2">
{currentTenant?.id !== tenant.id ? (
<Button
onClick={() => handleSwitchToTenant(tenant.id)}
variant="primary"
size="sm"
disabled={isLoading}
className="flex items-center gap-2"
>
<ArrowRight className="w-4 h-4" />
Cambiar a esta organización
</Button>
) : (
<Button
onClick={() => navigate('/app/dashboard')}
variant="outline"
size="sm"
className="flex items-center gap-2"
>
<Eye className="w-4 h-4" />
Ver dashboard
</Button>
)}
</div>
</CardBody>
</Card>
))}
</div>
) : (
<Card>
<CardBody className="text-center py-12">
<Building2 className="w-16 h-16 text-[var(--text-tertiary)] mx-auto mb-4" />
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
No tienes organizaciones
</h3>
<p className="text-[var(--text-secondary)] mb-6">
Crea tu primera organización para comenzar a usar Bakery IA
</p>
<Button
onClick={handleAddNewOrganization}
variant="primary"
size="lg"
className="flex items-center gap-2"
>
<Plus className="w-4 h-4" />
Crear Primera Organización
</Button>
</CardBody>
</Card>
)}
</div>
</div>
);
};
export default OrganizationsPage;

17
frontend/src/router/AppRouter.tsx
View File

@@ -30,6 +30,7 @@ const PerformanceAnalyticsPage = React.lazy(() => import('../pages/app/analytics
const ProfilePage = React.lazy(() => import('../pages/app/settings/profile/ProfilePage'));
const BakeryConfigPage = React.lazy(() => import('../pages/app/settings/bakery-config/BakeryConfigPage'));
const TeamPage = React.lazy(() => import('../pages/app/settings/team/TeamPage'));
const OrganizationsPage = React.lazy(() => import('../pages/app/settings/organizations/OrganizationsPage'));
// Database pages
const DatabasePage = React.lazy(() => import('../pages/app/database/DatabasePage'));
@@ -232,15 +233,25 @@ export const AppRouter: React.FC = () => {
{/* Settings Routes */}
<Route
path="/app/settings/profile"
<Route
path="/app/settings/profile"
element={
<ProtectedRoute>
<AppShell>
<ProfilePage />
</AppShell>
</ProtectedRoute>
}
}
/>
<Route
path="/app/settings/organizations"
element={
<ProtectedRoute>
<AppShell>
<OrganizationsPage />
</AppShell>
</ProtectedRoute>
}
/>
{/* Data Routes */}

10
frontend/src/router/routes.config.ts
View File

@@ -428,6 +428,16 @@ export const routesConfig: RouteConfig[] = [
showInNavigation: true,
showInBreadcrumbs: true,
},
{
path: '/app/settings/organizations',
name: 'Organizations',
component: 'OrganizationsPage',
title: 'Mis Organizaciones',
icon: 'database',
requiresAuth: true,
showInNavigation: true,
showInBreadcrumbs: true,
},
],
},

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

@@ -40,9 +40,11 @@ export const useTenantStore = create<TenantState>()(
setCurrentTenant: (tenant: TenantResponse) => {
set({ currentTenant: tenant, currentTenantAccess: null });
// Update API client with new tenant ID
tenantService.setCurrentTenant(tenant);
// Load tenant access info
get().loadCurrentTenantAccess();
if (tenant) {
tenantService.setCurrentTenant(tenant);
// Load tenant access info
get().loadCurrentTenantAccess();
}
},
switchTenant: async (tenantId: string): Promise<boolean> => {

9
frontend/src/stores/ui.store.ts
View File

@@ -2,7 +2,7 @@ import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
export type Theme = 'light' | 'dark' | 'auto';
export type Language = 'es' | 'en' | 'fr' | 'pt' | 'it';
export type Language = 'es' | 'en' | 'eu';
export type ViewMode = 'list' | 'grid' | 'card';
export type SidebarState = 'expanded' | 'collapsed' | 'hidden';
@@ -152,7 +152,12 @@ export const useUIStore = create<UIState>()(
setLanguage: (language: Language) => {
set({ language });
// You might want to trigger i18n language change here
// Trigger i18n language change only if different
import('../i18n').then(({ default: i18n }) => {
if (i18n.language !== language) {
i18n.changeLanguage(language);
}
});
},
setSidebarState: (sidebarState: SidebarState) => {

154
frontend/src/utils/enumHelpers.ts
View File

@@ -80,8 +80,8 @@ export function useSupplierEnums() {
}),
getSupplierTypeLabel: (type: SupplierType): string => {
if (!type) return 'Tipo no definido';
return t(`types.${type}`);
if (!type) return t('common:status.undefined', 'Type not defined');
return t(`types.${type}`, type);
},
// Supplier Status
@@ -89,8 +89,8 @@ export function useSupplierEnums() {
enumToSelectOptions(SupplierStatus, 'status', t),
getSupplierStatusLabel: (status: SupplierStatus): string => {
if (!status) return 'Estado no definido';
return t(`status.${status}`);
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`status.${status}`, status);
},
// Payment Terms
@@ -101,8 +101,8 @@ export function useSupplierEnums() {
}),
getPaymentTermsLabel: (terms: PaymentTerms): string => {
if (!terms) return 'Sin términos definidos';
return t(`payment_terms.${terms}`);
if (!terms) return t('common:forms.no_terms', 'No terms defined');
return t(`payment_terms.${terms}`, terms);
},
// Purchase Order Status
@@ -110,8 +110,8 @@ export function useSupplierEnums() {
enumToSelectOptions(PurchaseOrderStatus, 'purchase_order_status', t),
getPurchaseOrderStatusLabel: (status: PurchaseOrderStatus): string => {
if (!status) return 'Estado no definido';
return t(`purchase_order_status.${status}`);
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`purchase_order_status.${status}`, status);
},
// Delivery Status
@@ -119,8 +119,8 @@ export function useSupplierEnums() {
enumToSelectOptions(DeliveryStatus, 'delivery_status', t),
getDeliveryStatusLabel: (status: DeliveryStatus): string => {
if (!status) return 'Estado no definido';
return t(`delivery_status.${status}`);
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`delivery_status.${status}`, status);
},
// Quality Rating
@@ -131,8 +131,8 @@ export function useSupplierEnums() {
}),
getQualityRatingLabel: (rating: QualityRating): string => {
if (rating === undefined || rating === null) return 'Sin calificación';
return t(`quality_rating.${rating}`);
if (rating === undefined || rating === null) return t('common:status.no_rating', 'No rating');
return t(`quality_rating.${rating}`, rating.toString());
},
// Delivery Rating
@@ -143,8 +143,8 @@ export function useSupplierEnums() {
}),
getDeliveryRatingLabel: (rating: DeliveryRating): string => {
if (rating === undefined || rating === null) return 'Sin calificación';
return t(`delivery_rating.${rating}`);
if (rating === undefined || rating === null) return t('common:status.no_rating', 'No rating');
return t(`delivery_rating.${rating}`, rating.toString());
},
// Invoice Status
@@ -152,8 +152,8 @@ export function useSupplierEnums() {
enumToSelectOptions(InvoiceStatus, 'invoice_status', t),
getInvoiceStatusLabel: (status: InvoiceStatus): string => {
if (!status) return 'Estado no definido';
return t(`invoice_status.${status}`);
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`invoice_status.${status}`, status);
},
// Field Labels
@@ -197,12 +197,8 @@ export function useOrderEnums() {
enumToSelectOptions(CustomerType, 'customer_types', t),
getCustomerTypeLabel: (type: CustomerType): string => {
if (!type) return 'Tipo no definido';
const translated = t(`customer_types.${type}`);
if (translated === `customer_types.${type}`) {
return type.charAt(0).toUpperCase() + type.slice(1);
}
return translated;
if (!type) return t('common:status.undefined', 'Type not defined');
return t(`customer_types.${type}`, type.charAt(0).toUpperCase() + type.slice(1));
},
// Delivery Method
@@ -210,12 +206,8 @@ export function useOrderEnums() {
enumToSelectOptions(DeliveryMethod, 'delivery_methods', t),
getDeliveryMethodLabel: (method: DeliveryMethod): string => {
if (!method) return 'Método no definido';
const translated = t(`delivery_methods.${method}`);
if (translated === `delivery_methods.${method}`) {
return method.charAt(0).toUpperCase() + method.slice(1);
}
return translated;
if (!method) return t('common:status.undefined', 'Method not defined');
return t(`delivery_methods.${method}`, method.charAt(0).toUpperCase() + method.slice(1));
},
// Payment Terms
@@ -223,8 +215,8 @@ export function useOrderEnums() {
enumToSelectOptions(OrderPaymentTerms, 'payment_terms', t),
getPaymentTermsLabel: (terms: OrderPaymentTerms): string => {
if (!terms) return 'Términos no definidos';
return t(`payment_terms.${terms}`);
if (!terms) return t('common:forms.no_terms', 'Terms not defined');
return t(`payment_terms.${terms}`, terms);
},
// Payment Method
@@ -232,8 +224,8 @@ export function useOrderEnums() {
enumToSelectOptions(PaymentMethod, 'payment_methods', t),
getPaymentMethodLabel: (method: PaymentMethod): string => {
if (!method) return 'Método no definido';
return t(`payment_methods.${method}`);
if (!method) return t('common:status.undefined', 'Method not defined');
return t(`payment_methods.${method}`, method);
},
// Payment Status
@@ -241,8 +233,8 @@ export function useOrderEnums() {
enumToSelectOptions(PaymentStatus, 'payment_status', t),
getPaymentStatusLabel: (status: PaymentStatus): string => {
if (!status) return 'Estado no definido';
return t(`payment_status.${status}`);
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`payment_status.${status}`, status);
},
// Customer Segment
@@ -250,8 +242,8 @@ export function useOrderEnums() {
enumToSelectOptions(CustomerSegment, 'customer_segments', t),
getCustomerSegmentLabel: (segment: CustomerSegment): string => {
if (!segment) return 'Segmento no definido';
return t(`customer_segments.${segment}`);
if (!segment) return t('common:status.undefined', 'Segment not defined');
return t(`customer_segments.${segment}`, segment);
},
// Priority Level
@@ -259,8 +251,8 @@ export function useOrderEnums() {
enumToSelectOptions(PriorityLevel, 'priority_levels', t),
getPriorityLevelLabel: (level: PriorityLevel): string => {
if (!level) return 'Prioridad no definida';
return t(`priority_levels.${level}`);
if (!level) return t('common:priority.undefined', 'Priority not defined');
return t(`priority_levels.${level}`, level);
},
// Order Type
@@ -268,13 +260,8 @@ export function useOrderEnums() {
enumToSelectOptions(OrderType, 'order_types', t),
getOrderTypeLabel: (type: OrderType): string => {
if (!type) return 'Tipo no definido';
const translated = t(`order_types.${type}`);
// If translation failed, return a fallback
if (translated === `order_types.${type}`) {
return type.charAt(0).toUpperCase() + type.slice(1);
}
return translated;
if (!type) return t('common:status.undefined', 'Type not defined');
return t(`order_types.${type}`, type.charAt(0).toUpperCase() + type.slice(1));
},
// Order Status
@@ -282,8 +269,8 @@ export function useOrderEnums() {
enumToSelectOptions(OrderStatus, 'order_status', t),
getOrderStatusLabel: (status: OrderStatus): string => {
if (!status) return 'Estado no definido';
return t(`order_status.${status}`);
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`order_status.${status}`, status);
},
// Order Source
@@ -291,8 +278,8 @@ export function useOrderEnums() {
enumToSelectOptions(OrderSource, 'order_sources', t),
getOrderSourceLabel: (source: OrderSource): string => {
if (!source) return 'Origen no definido';
return t(`order_sources.${source}`);
if (!source) return t('common:status.undefined', 'Source not defined');
return t(`order_sources.${source}`, source);
},
// Sales Channel
@@ -300,8 +287,8 @@ export function useOrderEnums() {
enumToSelectOptions(SalesChannel, 'sales_channels', t),
getSalesChannelLabel: (channel: SalesChannel): string => {
if (!channel) return 'Canal no definido';
return t(`sales_channels.${channel}`);
if (!channel) return t('common:status.undefined', 'Channel not defined');
return t(`sales_channels.${channel}`, channel);
},
// Field Labels
@@ -325,22 +312,8 @@ export function useProductionEnums() {
enumToSelectOptions(ProductionStatusEnum, 'production_status', t),
getProductionStatusLabel: (status: ProductionStatusEnum): string => {
if (!status) return 'Estado no definido';
const translated = t(`production_status.${status}`);
// If translation failed, return a fallback
if (translated === `production_status.${status}`) {
const fallbacks = {
[ProductionStatusEnum.PENDING]: 'Pendiente',
[ProductionStatusEnum.IN_PROGRESS]: 'En Proceso',
[ProductionStatusEnum.COMPLETED]: 'Completado',
[ProductionStatusEnum.CANCELLED]: 'Cancelado',
[ProductionStatusEnum.ON_HOLD]: 'En Pausa',
[ProductionStatusEnum.QUALITY_CHECK]: 'Control Calidad',
[ProductionStatusEnum.FAILED]: 'Fallido'
};
return fallbacks[status] || status;
}
return translated;
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`production_status.${status}`, status);
},
// Production Priority
@@ -348,19 +321,8 @@ export function useProductionEnums() {
enumToSelectOptions(ProductionPriorityEnum, 'production_priority', t),
getProductionPriorityLabel: (priority: ProductionPriorityEnum): string => {
if (!priority) return 'Prioridad no definida';
const translated = t(`production_priority.${priority}`);
// If translation failed, return a fallback
if (translated === `production_priority.${priority}`) {
const fallbacks = {
[ProductionPriorityEnum.LOW]: 'Baja',
[ProductionPriorityEnum.MEDIUM]: 'Media',
[ProductionPriorityEnum.HIGH]: 'Alta',
[ProductionPriorityEnum.URGENT]: 'Urgente'
};
return fallbacks[priority] || priority;
}
return translated;
if (!priority) return t('common:priority.undefined', 'Priority not defined');
return t(`production_priority.${priority}`, priority);
},
// Production Batch Status
@@ -368,20 +330,8 @@ export function useProductionEnums() {
enumToSelectOptions(ProductionBatchStatus, 'batch_status', t),
getProductionBatchStatusLabel: (status: ProductionBatchStatus): string => {
if (!status) return 'Estado no definido';
const translated = t(`batch_status.${status}`);
// If translation failed, return a fallback
if (translated === `batch_status.${status}`) {
const fallbacks = {
[ProductionBatchStatus.PLANNED]: 'Planificado',
[ProductionBatchStatus.IN_PROGRESS]: 'En Proceso',
[ProductionBatchStatus.COMPLETED]: 'Completado',
[ProductionBatchStatus.CANCELLED]: 'Cancelado',
[ProductionBatchStatus.ON_HOLD]: 'En Pausa'
};
return fallbacks[status] || status;
}
return translated;
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`batch_status.${status}`, status);
},
// Quality Check Status
@@ -389,20 +339,8 @@ export function useProductionEnums() {
enumToSelectOptions(QualityCheckStatus, 'quality_check_status', t),
getQualityCheckStatusLabel: (status: QualityCheckStatus): string => {
if (!status) return 'Estado no definido';
const translated = t(`quality_check_status.${status}`);
// If translation failed, return a fallback
if (translated === `quality_check_status.${status}`) {
const fallbacks = {
[QualityCheckStatus.PENDING]: 'Pendiente',
[QualityCheckStatus.IN_PROGRESS]: 'En Proceso',
[QualityCheckStatus.PASSED]: 'Aprobado',
[QualityCheckStatus.FAILED]: 'Reprobado',
[QualityCheckStatus.REQUIRES_ATTENTION]: 'Requiere Atención'
};
return fallbacks[status] || status;
}
return translated;
if (!status) return t('common:status.undefined', 'Status not defined');
return t(`quality_check_status.${status}`, status);
},
// Field Labels