Avance admin y arreglo menu categorias

public/index.html

@@ -20,6 +20,7 @@
 
     <div id="root"></div>
     <div id="modal"></div>
+    <div id="modalAdmin"></div>
 
   </body>
 </html>

src/App.js

@@ -7,6 +7,7 @@ import { DeliveredOrders } from './components/waiterView/deliveredOrders/indexDe
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import { KitchenMain } from './components/kitchenView/kitchenMain/kitchenMain';
 import { KitchenDelivered } from './components/kitchenView/kitchenDelivered/kitchenDelivered';
+import { AdminIndexOptions } from './components/adminView/indexAdminView';
 import { AuthSession } from './context/context';
 import { useAuth } from './firebase/auth';
 
@@ -22,6 +23,8 @@ export function App () {
         Navigate('/waiterMain');
       } else if (user.cargo === 'JEFE DE COCINA') {
         Navigate('/kitchenMain');
+      } else if (user.cargo === 'ADMINISTRADOR') {
+        Navigate('/adminMain');
       }
     }
   }, [user]);
@@ -37,6 +40,7 @@ export function App () {
         <Route path= "/waiterDelivered" element= {<DeliveredOrders/>}/>
         <Route path= "/kitchenMain" element= {<KitchenMain/>}/>
         <Route path= "/kitchenDelivered" element= {<KitchenDelivered/>}/>
+        <Route path= "/adminMain" element= {<AdminIndexOptions/>}/>
       </Routes>
         : ''}
     </div>

src/components/adminView/adminNavBar.css

@@ -0,0 +1,63 @@
+.row{
+  display: flex;
+  flex-direction: row;
+}
+.adminNavBar{
+  background-color: rgba(25, 25, 26, 1);
+  padding: 2vh 4vh;
+  display: flex;
+  flex-direction: column;
+  gap: 3vh;
+}
+.dataBar{
+  justify-content: space-between;
+}
+.inactiveGrey{
+  background-color: rgba(46, 44, 44, 1);
+}
+.activePurple{
+  background-color: rgba(75, 22, 87, 1);
+}
+.imageContainer{
+  width: 7vmin;
+  height: 7vmin;
+  border: none;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  border-radius: 6px;
+}
+.barText{
+  color: aliceblue;
+  font-size: 3vmin;
+  /* text-shadow:
+  0 0 1px #fff,
+  0 0 0px #fff,
+  0 0 10px #fff,
+  0 0 0px #5271ff,
+  0 0 82px #5271ff,
+  0 0 92px #5271ff,
+  0 0 1px #5271ff,
+  0 0 151px #5271ff; */
+  display: flex;
+  align-items: center;
+  font-family: 'Montserrat', sans-serif;
+}
+.adminNavButton{
+  white-space: nowrap;
+  text-align: center;
+  height: 5.5vh;
+  border-radius: 6px;
+  border: none;
+  color: whitesmoke;
+  padding: 1vmin 1.5vmin;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 2vmin;
+}
+.buttonBar{
+  display: flex;
+  gap: 1.5vw;
+}
+.textIndent{
+  text-indent: 1vw;
+}

src/components/adminView/adminNavBar.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-tabs */
+import { React, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AuthSession } from '../../context/context';
+import { auth, logOut } from '../../firebase/auth';
+import './adminNavBar.css';
+
+const AdminNavBar = (props) => {
+  const Navigate = useNavigate();
+  const { user } = useContext(AuthSession);
+  // const colorTab = '/adminMain';
+
+  const logOutSesion = () => {
+    logOut(auth)
+      .then(() => {
+        Navigate('/');
+        sessionStorage.clear();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+		<div className='adminNavBar'>
+			<div className='row dataBar'>
+				<div className='row'>
+					<div className='inactiveGrey imageContainer'>
+						<img src={'/icons/user.svg'}/>
+					</div>
+					<p className='barText textIndent'>{user.nombre}</p>
+				</div>
+				<p className='barText'>{user.cargo}</p>
+				<button className='inactiveGrey imageContainer' onClick={logOutSesion}>
+					<img src={'/icons/stand-by.png'} alt="cerrar sesion"/>
+				</button>
+			</div>
+			<div className='buttonBar'>
+				<button className={`adminNavButton inactiveGrey ${props.colorTab === '/adminMain' && 'activePurple'}`} data-name='/adminMain'>INICIO</button>
+				<button className={`adminNavButton inactiveGrey ${props.colorTab === '/personnel' && 'activePurple'}`}>PERSONAL</button>
+				<button className={`adminNavButton inactiveGrey ${props.colorTab === '/menuManager' && 'activePurple'}`}>CARTA</button>
+				<button className={`adminNavButton inactiveGrey ${props.colorTab === '/waiterInterface' && 'activePurple'}`}>INTERFAZ DE PEDIDOS</button>
+			</div>
+		</div>
+  );
+};
+
+export { AdminNavBar };

src/components/adminView/indexAdminView.js

@@ -0,0 +1,26 @@
+import { React, useState } from 'react';
+import { AdminNavBar } from './adminNavBar';
+import { ModalAdmin } from './modal';
+
+const AdminIndexOptions = () => {
+  const [showModal, setShowModal] = useState(true);
+  const colorTab = '/adminMain';
+
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  const done = () => {
+    console.log('wuuuu2');
+  };
+
+  return (
+    <>
+      <AdminNavBar colorTab={colorTab}/>
+      <div>WUHUUU</div>
+      {showModal ? <ModalAdmin onClick={done} closeModalMenu={closeModal} text={'¿Quieres eliminar a este usuario?'} yesText={'Sí, eliminar'} noText={'No, conservar'} /> : ''}
+    </>
+  );
+};
+
+export { AdminIndexOptions };

src/components/adminView/modal.css

@@ -0,0 +1,26 @@
+.yesButton{
+  font-family: 'Montserrat', sans-serif;
+  color: white;
+  border-radius: 6px;
+  background-color: rgba(185, 57, 172, 1);
+  border: none;
+}
+.noButton{
+  font-family: 'Montserrat', sans-serif;
+  color: white;
+  border-radius: 6px;
+  border: 0.5px solid white;
+  background: none;
+}
+.buttonSize{
+  font-size: 1.9vmax;
+  white-space: nowrap;
+  padding: 1vh 1vw;
+}
+.buttonContainer{
+  justify-content: center;
+  display: flex;
+  flex-direction: row;
+  gap: 7vw;
+  margin-top: 5vh;
+}

src/components/adminView/modal.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './modal.css';
+
+const ModalAdmin = ({ onClick, closeModalMenu, text, yesText, noText }) => {
+  return ReactDOM.createPortal( // revisar este metodo
+
+    <section className={'modal-father'}>
+      <div className={'container-modal'}>
+        <p className='text'>{text}</p>
+        <div className={'buttonContainer'}>
+          <button className="yesButton buttonSize" onClick={onClick}>{yesText}</button>
+          <button className="noButton buttonSize" onClick={closeModalMenu}>{noText}</button>
+        </div>
+      </div>
+    </section>,
+    document.getElementById('modalAdmin')
+  );
+};
+
+export { ModalAdmin };

src/components/kitchenView/kitchenMain/kitchenMain.js

@@ -16,16 +16,25 @@ const KitchenMain = () => {
   const items = useDocsInRealTime(onDataOrderChange('PENDIENTE'));
   const [tableOrderKitchen, setTableOrderKitchen] = useState(undefined);
   const [showModalCompleted, setShowModalCompleted] = useState(false);
+
   const capturingTableKitchenWithAnEvent = (index) => {
     setTableOrderKitchen(index);
+    // console.log(tableOrderKitchen);
+  };
+
+  const closeModal = () => {
+    setShowModalCompleted(false);
   };
 
   const openModal = () => {
+    console.log('aaaaa', tableOrderKitchen);
     if (tableOrderKitchen === undefined) {
       modalAlert('Selecciona algun pedido');
+      console.log(showModalCompleted);
       return;
     }
     setShowModalCompleted(true);
+    console.log('else', showModalCompleted);
   };
 
   const updateOrderAndCloseModal = () => {
@@ -44,7 +53,7 @@ const KitchenMain = () => {
         <NavKitchen colorTab={colorTab} />
         <OrderList>
           {items.map((item, index) => {
-            console.log(item.data.seconds);
+            // console.log(item.data.seconds);
             return (
               <>
                 <OrderButtonsTimer
@@ -63,12 +72,9 @@ const KitchenMain = () => {
         </OrderList>
         {tableOrderKitchen !== undefined ? <Ticket items={items[tableOrderKitchen].data} /> : <SelectAnOrder/>}
 
-        <ButtonOrderDelivered
-          onClick={openModal}
-          text="LISTO"
-        />
+        <ButtonOrderDelivered onClick={openModal} text='LISTO' />
 
-        {showModalCompleted ? <Modal onClick={updateOrderAndCloseModal} closeModalMenu={setShowModalCompleted(false)} text={`¿El pedido de la mesa ${items[tableOrderKitchen].data.table} esta listo?`} /> : ''}
+        {showModalCompleted ? <Modal onClick={updateOrderAndCloseModal} closeModalMenu={closeModal} text={`¿El pedido de la mesa ${items[tableOrderKitchen].data.table} esta listo?`} /> : ''}
 
       </section>
       <ToastContainer />

src/components/nameUser/nameUser.css

@@ -24,6 +24,7 @@
       0 0 92px #5271ff,
       0 0 1px #5271ff,
       0 0 151px #5271ff;
+      text-align: center;
   }
 .btnLogOut{
   background: #521260;

src/components/nameUser/nameUser.js

@@ -8,7 +8,7 @@ import { AuthSession } from '../../context/context.js';
 export function User () {
   const Navigate = useNavigate();
   const { user } = useContext(AuthSession);
-  console.log('user', user);
+  // console.log('user', user);
 
   const logOutSesion = () => {
     logOut(auth)

src/components/waiterView/deliveredOrders/buttonDelivered.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import './buttonDelivered.css';
 
-const ButtonOrderDelivered = ({ buttonHandler, text }) => {
+const ButtonOrderDelivered = ({ onClick, text }) => {
   return (
 
       <section className="component-father-DerDelivered">
         <div className= 'component-flex-DerDelivered'>
-          <button className="buttonOrder-DerDelivered" onClick={buttonHandler}>
+          <button className="buttonOrder-DerDelivered" onClick={onClick}>
             <img src={process.env.PUBLIC_URL + '/icons/checked.png'} alt={'checked'} />
             <br></br>
-             {text}
+            {text}
           </button>
         </div>
       </section>

src/components/waiterView/deliveredOrders/indexDeliveredOrders.js

@@ -22,6 +22,10 @@ const DeliveredOrders = () => {
   const [modalDeleteOrder, setModalDeleteOrder] = useState(false);
   const colorTab = '/waiterDelivered';
 
+  const closeModal = () => {
+    setModalDeleteOrder(false);
+  };
+
   const buttonHandler = () => {
     if (tableOrderKitchen === undefined) {
       modalAlert('Selecciona un pedido');
@@ -65,7 +69,7 @@ const DeliveredOrders = () => {
                 </OrderList>
                 {tableOrderKitchen !== undefined ? <Ticket items={items[tableOrderKitchen].data} /> : <SelectAnOrder/>}
                 <ButtonOrderDelivered onClick={buttonHandler} text="ENTREGADO"/>
-                {modalDeleteOrder ? <Modal onClick={orderDeliveredModal} closeModalMenu={setModalDeleteOrder(false)} text={`¿El pedido de la mesa ${items[tableOrderKitchen].data.table} fue entregado?`} /> : ''}
+                {modalDeleteOrder ? <Modal onClick={orderDeliveredModal} closeModalMenu={closeModal} text={`¿El pedido de la mesa ${items[tableOrderKitchen].data.table} fue entregado?`} /> : ''}
             </section>
             <ToastContainer />
         </>

src/components/waiterView/index/categoryMenu/button.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import './button.css';
 
-const Button = ({ className, text, value, src, alt, clickHandler }) => { /* este boton lo puedo reutilizar las veces que desee,
+const Button = ({ className, text, value, clickHandler, src, alt }) => { /* este boton lo puedo reutilizar las veces que desee,
 le paso la clase, el evento y el texto que quiero que lleve */
   return (
     <>
       <button
-      className={className}
-      value={value}
-      onClickCapture={clickHandler}
+        className={className}
+        value={value}
+        onClickCapture={clickHandler}
       >
-        <img src={process.env.PUBLIC_URL + src} alt={alt}/>
+        <img src={src} alt={alt}/>
         <br/>
         {text}
       </button>