New Frontend
This commit is contained in:
Urtzi Alfaro
@@ -1,4 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Home,
|
||||
TrendingUp,
|
||||
@@ -10,18 +11,17 @@ import {
|
||||
User,
|
||||
Bell,
|
||||
ChevronDown,
|
||||
ChefHat,
|
||||
Warehouse,
|
||||
ShoppingCart,
|
||||
BookOpen
|
||||
BarChart3,
|
||||
Building
|
||||
} from 'lucide-react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { RootState } from '../../store';
|
||||
import { logout } from '../../store/slices/authSlice';
|
||||
import { TenantSelector } from '../navigation/TenantSelector';
|
||||
import { usePermissions } from '../../hooks/usePermissions';
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
user: any;
|
||||
currentPage: string;
|
||||
onNavigate: (page: string) => void;
|
||||
onLogout: () => void;
|
||||
// No props needed - using React Router
|
||||
}
|
||||
|
||||
interface NavigationItem {
|
||||
@@ -29,32 +29,52 @@ interface NavigationItem {
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
href: string;
|
||||
requiresRole?: string[];
|
||||
}
|
||||
|
||||
const Layout: React.FC<LayoutProps> = ({
|
||||
children,
|
||||
user,
|
||||
currentPage,
|
||||
onNavigate,
|
||||
onLogout
|
||||
}) => {
|
||||
const Layout: React.FC<LayoutProps> = () => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const { user } = useSelector((state: RootState) => state.auth);
|
||||
const { hasRole } = usePermissions();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||
|
||||
const navigation: NavigationItem[] = [
|
||||
{ id: 'dashboard', label: 'Inicio', icon: Home, href: '/dashboard' },
|
||||
{ id: 'orders', label: 'Pedidos', icon: Package, href: '/orders' },
|
||||
{ id: 'production', label: 'Producción', icon: ChefHat, href: '/production' },
|
||||
{ id: 'recipes', label: 'Recetas', icon: BookOpen, href: '/recipes' },
|
||||
{ id: 'inventory', label: 'Inventario', icon: Warehouse, href: '/inventory' },
|
||||
{ id: 'sales', label: 'Ventas', icon: ShoppingCart, href: '/sales' },
|
||||
{ id: 'reports', label: 'Informes', icon: TrendingUp, href: '/reports' },
|
||||
{ id: 'settings', label: 'Configuración', icon: Settings, href: '/settings' },
|
||||
{ id: 'dashboard', label: 'Dashboard', icon: Home, href: '/app/dashboard' },
|
||||
{ id: 'operations', label: 'Operaciones', icon: Package, href: '/app/operations' },
|
||||
{
|
||||
id: 'analytics',
|
||||
label: 'Analytics',
|
||||
icon: BarChart3,
|
||||
href: '/app/analytics',
|
||||
requiresRole: ['admin', 'manager']
|
||||
},
|
||||
{ id: 'settings', label: 'Configuración', icon: Settings, href: '/app/settings' },
|
||||
];
|
||||
|
||||
const handleNavigate = (pageId: string) => {
|
||||
onNavigate(pageId);
|
||||
setIsMobileMenuOpen(false);
|
||||
// Filter navigation based on user role
|
||||
const filteredNavigation = navigation.filter(item => {
|
||||
if (!item.requiresRole) return true;
|
||||
return item.requiresRole.some(role => hasRole(role));
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
if (window.confirm('¿Estás seguro de que quieres cerrar sesión?')) {
|
||||
dispatch(logout());
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('user_data');
|
||||
localStorage.removeItem('selectedTenantId');
|
||||
navigate('/');
|
||||
}
|
||||
};
|
||||
|
||||
const isActiveRoute = (href: string): boolean => {
|
||||
if (href === '/app/dashboard') {
|
||||
return location.pathname === '/app/dashboard' || location.pathname === '/app';
|
||||
}
|
||||
return location.pathname.startsWith(href);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -88,14 +108,14 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex md:ml-10 md:space-x-1">
|
||||
{navigation.map((item) => {
|
||||
{filteredNavigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = currentPage === item.id;
|
||||
const isActive = isActiveRoute(item.href);
|
||||
|
||||
return (
|
||||
<button
|
||||
<Link
|
||||
key={item.id}
|
||||
onClick={() => handleNavigate(item.id)}
|
||||
to={item.href}
|
||||
className={`
|
||||
flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200
|
||||
${isActive
|
||||
@@ -103,17 +123,20 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
|
||||
}
|
||||
`}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<Icon className="h-4 w-4 mr-2" />
|
||||
{item.label}
|
||||
</button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Notifications and User Menu */}
|
||||
{/* Right side - Tenant Selector, Notifications and User Menu */}
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Tenant Selector */}
|
||||
<TenantSelector />
|
||||
{/* Notifications */}
|
||||
<button className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors relative">
|
||||
<Bell className="h-5 w-5" />
|
||||
@@ -142,19 +165,17 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
<p className="text-sm font-medium text-gray-900">{user.fullName}</p>
|
||||
<p className="text-sm text-gray-500">{user.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleNavigate('settings');
|
||||
setIsUserMenuOpen(false);
|
||||
}}
|
||||
<Link
|
||||
to="/app/settings"
|
||||
onClick={() => setIsUserMenuOpen(false)}
|
||||
className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Configuración
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
onLogout();
|
||||
handleLogout();
|
||||
setIsUserMenuOpen(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center"
|
||||
@@ -173,14 +194,15 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200 bg-white">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||
{navigation.map((item) => {
|
||||
{filteredNavigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = currentPage === item.id;
|
||||
const isActive = isActiveRoute(item.href);
|
||||
|
||||
return (
|
||||
<button
|
||||
<Link
|
||||
key={item.id}
|
||||
onClick={() => handleNavigate(item.id)}
|
||||
to={item.href}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={`
|
||||
w-full flex items-center px-3 py-2 rounded-lg text-base font-medium transition-all duration-200
|
||||
${isActive
|
||||
@@ -191,7 +213,7 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
>
|
||||
<Icon className="h-5 w-5 mr-3" />
|
||||
{item.label}
|
||||
</button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@@ -201,9 +223,7 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
{/* Click outside handler for dropdowns */}
|
||||
|
||||
Reference in New Issue
Block a user