Merge pull request #20 from BananasDev0/RD-53

Rd 53

src/components/CustomToolBar.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Toolbar, IconButton, Typography, Menu, MenuItem } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import AccountCircle from "@mui/icons-material/AccountCircle";
+import Logo from '../assets/IMAGEN SIN FONDO CIRCULO.png';
 
 export default function CustomToolBar({ handleDrawerOpen, open }) {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -28,9 +29,13 @@ export default function CustomToolBar({ handleDrawerOpen, open }) {
       >
         <MenuIcon />
       </IconButton>
-
+      <img
+        src={Logo}
+        alt='Logotipo Refaccionaria Diaz'
+        style={{ width: 50, height: 'auto', marginBottom: 10,marginRight:10,marginTop:10 }}
+      />
       <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
-        Refa Diaz
+        Radiadorez Diaz
       </Typography>
 
       <IconButton

src/components/ElementList.jsx

@@ -3,10 +3,22 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
+
+import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices';
+import DirectionsCarFilledIcon from '@mui/icons-material/DirectionsCarFilled';
+import InventoryIcon from '@mui/icons-material/Inventory';
+import PersonIcon from '@mui/icons-material/Person';
 
 export default function ElementList() {
+
+    const icons = [
+        <InventoryIcon />,
+        <MiscellaneousServicesIcon />,
+        <DirectionsCarFilledIcon />,
+        <PersonIcon />,
+    ];
+
+
     return (
         <List>
             {['Productos', 'Servicios', 'Autos', 'Proveedores'].map((text, index) => (
@@ -25,7 +37,7 @@ export default function ElementList() {
                                 justifyContent: 'center',
                             }}
                         >
-                            {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                            {icons[index]}
                         </ListItemIcon>
                         <ListItemText primary={text} sx={{ opacity: open ? 1 : 0 }} />
                     </ListItemButton>

src/components/ProtectedRoute.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { onAuthStateChanged } from 'firebase/auth';
 import { Navigate } from 'react-router-dom';
 import { auth } from '../services/Firebase/firebase';
+import { CircularProgress, Box } from '@mui/material';
 
 export const ProtectedRoute = ({ children }) => {
   const [isLoading, setIsLoading] = useState(true);
@@ -18,7 +19,20 @@ export const ProtectedRoute = ({ children }) => {
     });
   }, []);
 
-  if (isLoading) return <div></div>; // O cualquier componente de carga
+  if (isLoading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
 
   if (!isAuthenticated) return <Navigate to="/login" />;
 

src/pages/Login.jsx

@@ -4,12 +4,13 @@ import CssBaseline from '@mui/material/CssBaseline';
 import TextField from '@mui/material/TextField';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import { Alert, Stack } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { signIn } from '../services/Firebase/auth';
-import Logo from '../assets/Logo_RD.png';
+import Logo from '../assets/LOGO CON CONTORNO BLANCO RD.png';
 
 function Copyright(props) {
   return (
@@ -40,8 +41,10 @@ export default function Login() {
     message: '',
     severity: 'error',
   });
+  const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     // Restablecer la alerta
@@ -71,16 +74,19 @@ export default function Login() {
 
 
     try {
+      setIsLoading(true);
       const validate = await signIn(email, password);
+
       if (validate) {
         navigate('/home');
-
       } else {
         setAlert({ show: true, message: 'Usuario o Contraseña incorrecta', severity: 'error' });
       }
     } catch (error) {
       console.log(error);
       setAlert({ show: true, message: 'Servicio no disponible', severity: 'error' });
+    } finally {
+      setIsLoading(false); 
     }
 
 
@@ -103,7 +109,7 @@ export default function Login() {
         <img
           src={Logo}
           alt='Logotipo Refaccionaria Diaz'
-          style={{ width: 100, height: 'auto', marginBottom: 20 }}
+          style={{ width: 300, height: 'auto', marginBottom: 20 }}
         />
         <Box component='form' onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
           <TextField
@@ -143,6 +149,25 @@ export default function Login() {
             Sign In
           </Button>
 
+          {isLoading && (
+            <Box
+              sx={{
+                position: 'fixed',
+                top: '0',
+                left: '0',
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                zIndex: 9999,
+              }}
+            >
+              <CircularProgress />
+            </Box>
+          )}
+
           {alert.show && (
             <Stack sx={{ width: '100%', mb: 2 }}>
               <Alert severity={alert.severity}>{alert.message}</Alert>