Skip to content

Commit 4e8b5d7

Browse files
Frnn4268Frnn4268
authored
Merge pull request #168 from Frnn4268/Frnn
Adding new changes inside of dashboard Menu's
2 parents df97db8 + 634babb commit 4e8b5d7

File tree

2 files changed

+187
-143
lines changed

2 files changed

+187
-143
lines changed

‎frontend/src/pages/dashboard/LeftMenu.jsx

Lines changed: 118 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,131 @@
11
import React, { useState } from 'react';
2-
import { Menu, Button } from 'antd';
2+
import { Menu } from 'antd';
33
import { Link } from 'react-router-dom';
4-
import {
5-
CarOutlined,
6-
UsergroupAddOutlined ,
7-
MenuFoldOutlined,
8-
MenuUnfoldOutlined,
9-
PieChartOutlined,
10-
HomeOutlined,
11-
InfoCircleOutlined,
12-
PhoneOutlined,
13-
UserOutlined,
14-
AreaChartOutlined,
15-
HistoryOutlined,
16-
BarChartOutlined,
17-
DollarOutlined
18-
} from '@ant-design/icons';
4+
import {
5+
CarOutlined,
6+
UsergroupAddOutlined,
7+
PieChartOutlined,
8+
HomeOutlined,
9+
InfoCircleOutlined,
10+
PhoneOutlined,
11+
UserOutlined,
12+
AreaChartOutlined,
13+
HistoryOutlined,
14+
BarChartOutlined,
15+
DollarOutlined,
16+
} from '@ant-design/icons';
1917

2018
function getItem(label, key, icon, children, type, link) {
21-
return {
22-
key,
23-
icon,
24-
children,
25-
label,
26-
type,
27-
link,
28-
};
19+
return {
20+
key,
21+
icon,
22+
children,
23+
label,
24+
type,
25+
link,
26+
};
2927
}
3028

3129
const items = [
32-
getItem('Inicio', '1', <HomeOutlined />, null, null, '/dashboard'),
33-
getItem('Parqueo', '2', <PieChartOutlined />, null, null, '/park'),
34-
getItem('Historial de Parqueo', '3', <HistoryOutlined />, null, null, '/parkhistory'),
35-
getItem('Estadísticas de Parqueo', '4', <BarChartOutlined />, null, null, '/parkingstatistics'),
36-
getItem('Usuarios', '5', <UserOutlined />, null, null, '/users'),
37-
getItem('Clientes', 'sub2', <UsergroupAddOutlined />, [
38-
getItem('Ver Clientes', '6', null, null, null, '/customers'),
39-
getItem('Clientes frecuentes', '7', null, null, null, '/usual_customers'),
40-
]),
41-
getItem('Vehículos', 'sub1', <CarOutlined />, [
42-
getItem('Ver Vehículos', '8', null, null, null, '/vehicles'),
43-
getItem('Historial de Vehículos', '9', null, null, null, '/vehicleshistory'),
44-
]),
45-
getItem('Ingresos', 'sub3', <AreaChartOutlined />, [
46-
getItem('Ingresos diarios', '10', null, null, null, '/dailyincome'),
47-
getItem('Historial de Ingresos', '11', null, null, null, '/incomehistory'),
48-
getItem('Estadísticas de Ingresos', '12', null, null, null, '/incomestatistics'),
49-
]),
50-
getItem('Precio Estacionamiento', '13', <DollarOutlined />, null, null, '/module_parking_price'),
51-
getItem('Información', '14', <InfoCircleOutlined />, null, null, '/module_about'),
52-
getItem('Contacto', '15', <PhoneOutlined />, null, null, '/module_contact')
30+
getItem('Inicio', '1', <HomeOutlined />, null, null, '/dashboard'),
31+
getItem('Parqueo', '2', <PieChartOutlined />, null, null, '/park'),
32+
getItem(
33+
'Historial de Parqueo',
34+
'3',
35+
<HistoryOutlined />,
36+
null,
37+
null,
38+
'/parkhistory'
39+
),
40+
getItem(
41+
'Estadísticas de Parqueo',
42+
'4',
43+
<BarChartOutlined />,
44+
null,
45+
null,
46+
'/parkingstatistics'
47+
),
48+
getItem('Usuarios', '5', <UserOutlined />, null, null, '/users'),
49+
getItem('Clientes', 'sub2', <UsergroupAddOutlined />, [
50+
getItem('Ver Clientes', '6', null, null, null, '/customers'),
51+
getItem('Clientes frecuentes', '7', null, null, null, '/usual_customers'),
52+
]),
53+
getItem('Vehículos', 'sub1', <CarOutlined />, [
54+
getItem('Ver Vehículos', '8', null, null, null, '/vehicles'),
55+
getItem(
56+
'Historial de Vehículos',
57+
'9',
58+
null,
59+
null,
60+
null,
61+
'/vehicleshistory'
62+
),
63+
]),
64+
getItem('Ingresos', 'sub3', <AreaChartOutlined />, [
65+
getItem('Ingresos diarios', '10', null, null, null, '/dailyincome'),
66+
getItem('Historial de Ingresos', '11', null, null, null, '/incomehistory'),
67+
getItem(
68+
'Estadísticas de Ingresos',
69+
'12',
70+
null,
71+
null,
72+
null,
73+
'/incomestatistics'
74+
),
75+
]),
76+
getItem(
77+
'Precio Estacionamiento',
78+
'13',
79+
<DollarOutlined />,
80+
null,
81+
null,
82+
'/module_parking_price'
83+
),
84+
getItem(
85+
'Información',
86+
'14',
87+
<InfoCircleOutlined />,
88+
null,
89+
null,
90+
'/module_about'
91+
),
92+
getItem('Contacto', '15', <PhoneOutlined />, null, null, '/module_contact'),
5393
];
5494

5595
const LeftMenu = () => {
56-
const [collapsed, setCollapsed] = useState(false);
57-
const toggleCollapsed = () => {
58-
setCollapsed(!collapsed);
59-
};
96+
const [collapsed, setCollapsed] = useState(false);
97+
const toggleCollapsed = () => {
98+
setCollapsed(!collapsed);
99+
};
60100

61-
const buttonWidth = collapsed ? `${collapsed ? 20 : 200}px` : 'auto' ;
62-
63-
return (
64-
<div className='left-menu-div'>
65-
{/*
66-
<Button
67-
type="primary"
68-
//onClick={toggleCollapsed}
69-
style={{
70-
borderRadius: 0,
71-
width: buttonWidth,
72-
height: '-5px',
73-
}}
74-
>
75-
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
76-
</Button>
77-
*/}
78-
<Menu
79-
defaultOpenKeys={items.map(item => item.key)}
80-
mode="inline"
81-
theme="dark"
82-
inlineCollapsed={collapsed}
83-
style={{}}
84-
className='left-menu'
85-
>
86-
{items.map(item => (
87-
item.children ? (
88-
<Menu.SubMenu key={item.key} icon={item.icon} title={item.label}>
89-
{item.children.map(subItem => (
90-
<Menu.Item key={subItem.key} icon={subItem.icon}>
91-
<Link to={subItem.link}>{subItem.label}</Link>
92-
</Menu.Item>
93-
))}
94-
</Menu.SubMenu>
95-
) : (
96-
<Menu.Item key={item.key} icon={item.icon}>
97-
<Link to={item.link}>{item.label}</Link>
98-
</Menu.Item>
99-
)
100-
))}
101-
</Menu>
102-
</div>
103-
)
104-
}
101+
return (
102+
<div className='left-menu-div'>
103+
<Menu
104+
defaultOpenKeys={items.map((item) => item.key)}
105+
mode='inline'
106+
theme='dark'
107+
inlineCollapsed={collapsed}
108+
style={{}}
109+
className='left-menu'
110+
>
111+
{items.map((item) =>
112+
item.children ? (
113+
<Menu.SubMenu key={item.key} icon={item.icon} title={item.label}>
114+
{item.children.map((subItem) => (
115+
<Menu.Item key={subItem.key} icon={subItem.icon}>
116+
<Link to={subItem.link}>{subItem.label}</Link>
117+
</Menu.Item>
118+
))}
119+
</Menu.SubMenu>
120+
) : (
121+
<Menu.Item key={item.key} icon={item.icon}>
122+
<Link to={item.link}>{item.label}</Link>
123+
</Menu.Item>
124+
)
125+
)}
126+
</Menu>
127+
</div>
128+
);
129+
};
105130

106131
export default LeftMenu;

‎frontend/src/pages/dashboard/TopMenu.jsx

Lines changed: 69 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,59 +5,78 @@ import { UserOutlined, LogoutOutlined, EditOutlined } from '@ant-design/icons';
55

66
import { useAuth } from '../../contexts/AuthContext.jsx';
77

8-
import '../../css/DashboardMenu.css'
8+
import '../../css/DashboardMenu.css';
99

1010
const TopMenu = () => {
11-
const { logout, userData } = useAuth();
12-
13-
const avatarImages = [
14-
'https://i.postimg.cc/R0z1gL1N/icon-1.png',
15-
'https://i.postimg.cc/hGbL6QMM/icon-2.png',
16-
'https://i.postimg.cc/Qt8Q3NyD/icon-3.png',
17-
'https://i.postimg.cc/63Md5skv/icon-4.png',
18-
'https://i.postimg.cc/Kj4t1qbs/icon-5.png'
19-
];
20-
21-
const randomAvatarIndex = Math.floor(Math.random() * avatarImages.length);
22-
const avatarSrc = avatarImages[randomAvatarIndex];
23-
24-
const handleLogout = async () => {
25-
await logout();
26-
};
27-
28-
const popoverContent = (
29-
<div>
30-
<p><strong>Rol:</strong> {userData && userData.role}</p>
31-
<p><strong>Correo:</strong> {userData && userData.email}</p>
32-
<Link to="/user-profile">
33-
<Button type="link" icon={<EditOutlined />} style={{ marginLeft: 45 }}>
34-
Editar perfil
35-
</Button>
36-
</Link>
37-
</div>
38-
);
39-
40-
return (
41-
<div style={{ position: 'fixed', width: '100%', zIndex: 1000 }}>
42-
<Menu theme='dark' mode="horizontal" style={{ display: 'flex' }} selectable={false}>
43-
<Menu.Item key='1' >
44-
<Typography.Text className='top-nav-text'>EasyPark</Typography.Text>
45-
</Menu.Item>
46-
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
47-
<div>
48-
<Popover content={popoverContent}>
49-
<Avatar src={avatarSrc} icon={<UserOutlined />} />
50-
<Typography.Text className='top-nav-username'>{userData && userData.name}</Typography.Text>
51-
</Popover>
52-
</div>
53-
<Divider type="vertical" className="top-menu-divider" />
54-
<Button icon={<LogoutOutlined />} size="large" type="primary" className="profile-btn" onClick={handleLogout}>
55-
Cerrar sesión
56-
</Button>
57-
</div>
58-
</Menu>
11+
const { logout, userData } = useAuth();
12+
13+
const avatarImages = [
14+
'https://i.postimg.cc/R0z1gL1N/icon-1.png',
15+
'https://i.postimg.cc/hGbL6QMM/icon-2.png',
16+
'https://i.postimg.cc/Qt8Q3NyD/icon-3.png',
17+
'https://i.postimg.cc/63Md5skv/icon-4.png',
18+
'https://i.postimg.cc/Kj4t1qbs/icon-5.png',
19+
];
20+
21+
const randomAvatarIndex = Math.floor(Math.random() * avatarImages.length);
22+
const avatarSrc = avatarImages[randomAvatarIndex];
23+
24+
const handleLogout = async () => {
25+
await logout();
26+
};
27+
28+
const popoverContent = (
29+
<div>
30+
<p>
31+
<strong>Rol:</strong> {userData && userData.role}
32+
</p>
33+
<p>
34+
<strong>Correo:</strong> {userData && userData.email}
35+
</p>
36+
<Link to='/user-profile'>
37+
<Button type='link' icon={<EditOutlined />} style={{ marginLeft: 45 }}>
38+
Editar perfil
39+
</Button>
40+
</Link>
41+
</div>
42+
);
43+
44+
return (
45+
<div style={{ position: 'fixed', width: '100%', zIndex: 1000 }}>
46+
<Menu
47+
theme='dark'
48+
mode='horizontal'
49+
style={{ display: 'flex' }}
50+
selectable={false}
51+
>
52+
<Menu.Item key='1'>
53+
<Typography.Text className='top-nav-text'>EasyPark</Typography.Text>
54+
</Menu.Item>
55+
<div
56+
style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}
57+
>
58+
<div>
59+
<Popover content={popoverContent}>
60+
<Avatar src={avatarSrc} icon={<UserOutlined />} />
61+
<Typography.Text className='top-nav-username'>
62+
{userData && userData.name}
63+
</Typography.Text>
64+
</Popover>
65+
</div>
66+
<Divider type='vertical' className='top-menu-divider' />
67+
<Button
68+
icon={<LogoutOutlined />}
69+
size='large'
70+
type='primary'
71+
className='profile-btn'
72+
onClick={handleLogout}
73+
>
74+
Cerrar sesión
75+
</Button>
5976
</div>
60-
);
77+
</Menu>
78+
</div>
79+
);
6180
};
6281

6382
export default TopMenu;

0 commit comments

Comments
 (0)