wip

package.json

@@ -23,12 +23,12 @@
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.26.1",
     "ionicons": "^5.4.0",
+    "lodash.isequal": "^4.5.0",
     "pigeon-maps": "^0.21.0",
     "pullstate": "^1.24.0",
-    "lodash.isequal": "^4.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-google-places-autocomplete": "^3.3.4",
+    "react-google-places-autocomplete": "^3.4.0",
     "react-hook-form": "^7.30.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -51,7 +51,6 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start:mock": "json-server --port 8080 --watch ./mock/db.json",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject"
@@ -80,5 +79,5 @@
     "@types/lodash.isequal": "^4.5.6",
     "react-scripts": "5.0.1"
   },
-  "description": "An Ionic project"
+  "description": "Projeto de conclusão de curso a fim de resolver a dificuldade de alunos universitários ao buscar vans para suas universidades"
 }

src/App.tsx

@@ -49,6 +49,8 @@ import { search, home, person } from 'ionicons/icons';
 import { useState, useContext } from 'react';
 import React from 'react';
 import MinhasVans from './pages/MinhasVans';
+import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios';
+import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario';
 
 setupIonicReact();
 
@@ -73,6 +75,8 @@ const routes = (
 
   <Route exact path="/cadastro-van" component={CadastroVan}></Route>
   <Route exact path="/minhas-vans" component={MinhasVans}></Route>
+  <Route exact path="/cadastrar-itinerario" component={CadastrarItinerario}></Route>
+  <Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
   <Route exact path="/">
     <Redirect to="/login" />
   </Route>

src/pages/CadastrarItinerario/CadastrarItinerario.tsx

@@ -0,0 +1,99 @@
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonPage,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { close, locateOutline, locationOutline } from "ionicons/icons";
+import { useState } from "react";
+import GooglePlacesAutocomplete from "react-google-places-autocomplete";
+
+export default function CadastrarItinerario() {
+  const [selected, setSelected] = useState<any>("");
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton icon={close} text="" defaultHref="/perfil" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Cadastrar Itinerário</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonCard>
+          <IonCardContent>
+            <div className="inputs-from-to">
+              <IonIcon icon={locateOutline}></IonIcon>
+              <GooglePlacesAutocomplete
+                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  className: "input-autocomplete",
+                  placeholder: "R. José Paulino, 1234",
+                }}
+              />
+            </div>
+            <div className="inputs-from-to">
+              <IonIcon icon={locationOutline}></IonIcon>
+              <GooglePlacesAutocomplete
+                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  className: "input-autocomplete",
+                  placeholder: "PUC Campinas",
+                }}
+              />
+            </div>
+            <IonList>
+              <IonRadioGroup
+                value={selected}
+                onIonChange={(e) => setSelected(e.detail.value)}
+              >
+                <IonListHeader>
+                  <IonLabel>Name</IonLabel>
+                </IonListHeader>
+
+                <IonItem>
+                  <IonLabel>Biff</IonLabel>
+                  <IonRadio slot="start" value="biff" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Griff</IonLabel>
+                  <IonRadio slot="start" value="griff" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Buford</IonLabel>
+                  <IonRadio slot="start" value="buford" />
+                </IonItem>
+              </IonRadioGroup>
+            </IonList>
+            <div className="button-search">
+              <IonButton color="primary">Cadastrar</IonButton>
+            </div>
+          </IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+}

src/pages/MeusItinerarios/MeusItinerarios.css

@@ -0,0 +1,10 @@
+.icons-location-divider{
+    margin-left: 0.33rem;
+    margin-bottom: 0.4rem;
+}
+
+.addresses-itinerary{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

src/pages/MeusItinerarios/MeusItinerarios.tsx

@@ -0,0 +1,146 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { add, locateOutline, locationOutline } from "ionicons/icons";
+import { useState } from "react";
+import "./MeusItinerarios.css";
+
+interface ItineraryInfo {
+  id_itinerary: number;
+  van_plate: string;
+  days_of_week: number;
+  specific_day: string;
+  estimated_departure_time: string;
+  estimated_arrival_time: string;
+  available_seats: number;
+  price: number;
+  itinerary_nickname: string;
+}
+
+export default function MeusItinerarios() {
+  const [routes, setRoutes] = useState<ItineraryInfo[]>(
+    [
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste 2',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+  ]
+  );
+
+  return (
+    <IonPage>
+      <IonHeader translucent>
+        <IonToolbar>
+          <IonTitle>Meus Itinerários</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton text={""} defaultHref="/perfil" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Meus Itinerários</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        {routes ? (
+          routes.map((itinerary, index) => {
+            return (
+              <IonCard key={index}>
+                <IonCardHeader>
+                  <IonCardTitle>{itinerary.itinerary_nickname}</IonCardTitle>
+                </IonCardHeader>
+                <IonCardContent>
+                  <div className="addresses-itinerary">
+                    <IonIcon icon={locateOutline}></IonIcon>
+                    Rua Francisco Glicerio, nº 100, Vila Novam aaaaaaaaaaaaaaaaaaaaaaaaaaa
+                  </div>
+                  <div className="icons-location-divider">
+                    | 
+                  </div>
+                  <div className="addresses-itinerary">
+                    <IonIcon icon={locationOutline}></IonIcon>
+                    PUC Campinas H15 Campus 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+                  </div>
+                </IonCardContent>
+              </IonCard>
+            );
+          })
+        ) : (
+          <h1 className="msg-not-found">
+            Você ainda não possui nenhum itinerário cadastrado!
+          </h1>
+        )}
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+          <IonFabButton size="small" href="/cadastrar-itinerario">
+            <IonIcon icon={add}></IonIcon>
+          </IonFabButton>
+        </IonFab>
+      </IonContent>
+    </IonPage>
+  );
+}

src/pages/Perfil.tsx

@@ -21,30 +21,40 @@ import {
 } from "@ionic/react";
 import { useHistory, useLocation } from "react-router-dom";
 import React, { useState, useEffect, useReducer, useContext } from "react";
-import { callOutline, cardOutline, carOutline, createOutline, exitOutline, logoFacebook, logoWhatsapp, personOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
+import {
+  callOutline,
+  cardOutline,
+  carOutline,
+  createOutline,
+  exitOutline,
+  mapOutline,
+  personOutline,
+  shieldCheckmarkOutline,
+  starOutline,
+} from "ionicons/icons";
 
-import './Perfil.css'
+import "./Perfil.css";
 import LocalStorage from "../LocalStorage";
 
-import sessionsService from '../services/functions/sessionsService'
-import usersService from '../services/functions/usersService'
+import sessionsService from "../services/functions/sessionsService";
+import usersService from "../services/functions/usersService";
 import { UserContext } from "../App";
 import { Color } from "@ionic/core";
 
 interface ScanNewProps {
-  match:  {
+  match: {
     params: {
       id: string;
-    }
-  }
+    };
+  };
 }
 
-interface LocationState { 
+interface LocationState {
   redirectData?: {
     showToastMessage: boolean;
     toastColor: Color;
     toastMessage: string;
-  }
+  };
 }
 
 const Perfil: React.FC<ScanNewProps> = (props) => {
@@ -53,92 +63,92 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
   const history = useHistory();
   const location = useLocation<LocationState>();
 
-  const [isVisitor, setIsVisitor] = useState(true)
-  const [isDriver, setIsDriver] = useState(false)
+  const [isVisitor, setIsVisitor] = useState(true);
+  const [isDriver, setIsDriver] = useState(false);
 
-  const [incompleteProfile, setIncompleteProfile] = useState(false)
-  const [incompleteProfileCounter, setIncompleteProfileCounter] = useState(0)
+  const [incompleteProfile, setIncompleteProfile] = useState(false);
+  const [incompleteProfileCounter, setIncompleteProfileCounter] = useState(0);
 
   const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
+  const [toastMessage, setToastMessage] = useState("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
-      id: '',
-      name: '',
-      lastname: '',
-      email: '',
-      phone_number: '',
-      birth_date: '',
-      bio: '',
-      document_type: '',
-      document: '',
+      id: "",
+      name: "",
+      lastname: "",
+      email: "",
+      phone_number: "",
+      birth_date: "",
+      bio: "",
+      document_type: "",
+      document: "",
     }
   );
 
   const redirectUserToLogin = () => {
-    history.push({ pathname: '/login' });
+    history.push({ pathname: "/login" });
     setToastMessage("Por favor, autentique-se!");
     setShowToast(true);
-  }
+  };
 
   const logoff = () => {
-    LocalStorage.clearToken()
+    LocalStorage.clearToken();
     user.setIsLoggedIn(false);
-    history.push({ pathname: '/login' });
-  }
+    history.push({ pathname: "/login" });
+  };
 
   useEffect(() => {
     if (location.state && location.state.redirectData) {
-      const redirectData = location.state.redirectData
+      const redirectData = location.state.redirectData;
 
       if (redirectData.showToastMessage) {
-        setToastColor(redirectData.toastColor)
-        setToastMessage(redirectData.toastMessage)
-        setShowToast(true)
+        setToastColor(redirectData.toastColor);
+        setToastMessage(redirectData.toastMessage);
+        setShowToast(true);
       }
     }
 
     const loadUserData = async () => {
-      let userId = ''
+      let userId = "";
 
       // verify if user is authenticated
       if (props.match.params.id) {
-        userId = props.match.params.id
+        userId = props.match.params.id;
       } else {
-        const refreshSessionRes = await sessionsService.refreshSession()
-  
+        const refreshSessionRes = await sessionsService.refreshSession();
+
         if (refreshSessionRes.error) {
-          redirectUserToLogin()
-          return
+          redirectUserToLogin();
+          return;
         }
-    
+
         if (refreshSessionRes.userId) {
-          userId = refreshSessionRes.userId
+          userId = refreshSessionRes.userId;
         }
       }
-      
+
       // get user info by ID
-      const getByIdRes = await usersService.getById(userId)
-  
+      const getByIdRes = await usersService.getById(userId);
+
       if (getByIdRes.error) {
         if (isVisitor && props.match.params.id) {
-          setToastMessage('Usuário não existe!')
-          setShowToast(true)
-          history.push({ pathname: '/home' })
+          setToastMessage("Usuário não existe!");
+          setShowToast(true);
+          history.push({ pathname: "/home" });
         } else {
-          setToastMessage(getByIdRes.error.errorMessage)
-          setShowToast(true)
+          setToastMessage(getByIdRes.error.errorMessage);
+          setShowToast(true);
         }
-  
-        return
+
+        return;
       }
 
       // check if user is driver (if they have vans)
-      const userIsDriverRes = await usersService.checkIfUserIsDriver(userId)
-  
+      const userIsDriverRes = await usersService.checkIfUserIsDriver(userId);
+
       // if (userIsDriverRes.error) {
       //   setToastColor('warning')
       //   setToastMessage(userIsDriverRes.error.errorMessage)
@@ -147,91 +157,102 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
       // }
 
       if (!userIsDriverRes.error && userIsDriverRes.result !== undefined) {
-        setIsDriver(userIsDriverRes.result)
+        setIsDriver(userIsDriverRes.result);
       }
-  
+
       if (getByIdRes.userData) {
-        const userData = getByIdRes.userData
-  
+        const userData = getByIdRes.userData;
+
         if (isMounted) {
           setInputValues({
-            'id': userId,
-            'name': userData.name,
-            'lastname': userData.lastname,
-            'email': userData.email,
-            'phone_number': userData.phone_number,
-            'birth_date': userData.birth_date,
-            'bio': userData.bio,
-            'document_type': userData.document_type,
-            'document': userData.document
+            id: userId,
+            name: userData.name,
+            lastname: userData.lastname,
+            email: userData.email,
+            phone_number: userData.phone_number,
+            birth_date: userData.birth_date,
+            bio: userData.bio,
+            document_type: userData.document_type,
+            document: userData.document,
           });
 
           if (!props.match.params.id) {
-            setIsVisitor(false)
+            setIsVisitor(false);
           }
-          
+
           if (!userData.document || !userData.phone_number) {
-            setIncompleteProfile(true)
+            setIncompleteProfile(true);
 
-            let counter = 0
+            let counter = 0;
 
-            if (!userData.document) counter++
-            if (!userData.phone_number) counter++
+            if (!userData.document) counter++;
+            if (!userData.phone_number) counter++;
 
-            setIncompleteProfileCounter(counter)
+            setIncompleteProfileCounter(counter);
           }
         }
       }
-    }
+    };
 
     let isMounted = true;
-    
-    const userToken = LocalStorage.getToken()
+
+    const userToken = LocalStorage.getToken();
 
     if (!userToken) {
-      redirectUserToLogin()
+      redirectUserToLogin();
     }
-    
-    loadUserData()
 
-    return () => { isMounted = false };
+    loadUserData();
+
+    return () => {
+      isMounted = false;
+    };
   }, []);
 
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader translucent>
         <IonToolbar>
           <IonTitle>Seu perfil</IonTitle>
           <IonButtons slot="start">
-            <IonBackButton defaultHref="/home" />
+            <IonBackButton text="" defaultHref="/home" />
           </IonButtons>
         </IonToolbar>
       </IonHeader>
 
-      <IonContent>
+      <IonContent fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar>
             <IonTitle size="large">Seu perfil</IonTitle>
           </IonToolbar>
         </IonHeader>
-        
+
         <IonCard>
           <IonCardContent>
-              <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/>
-              {/* <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/> */}
+            <img
+              src="https://static.generated.photos/vue-static/home/feed/adult.png"
+              alt="avatar"
+              className="avatar"
+              id="avatar"
+            />
+            {/* <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/> */}
             <IonCardHeader>
-              <IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
+              <IonCardTitle class="ion-text-center">
+                {inputValues.name} {inputValues.lastname}
+              </IonCardTitle>
             </IonCardHeader>
 
-            <div id='profile-status'>
-              { isDriver ?
+            <div id="profile-status">
+              {isDriver ? (
                 <>
                   <IonChip>
                     <IonIcon icon={carOutline}></IonIcon>
                     <IonLabel color="primary">Motorista</IonLabel>
                   </IonChip>
-                </> : <></>
-              }
+                </>
+              ) : (
+                <></>
+              )}
               <IonChip>
                 <IonIcon icon={personOutline}></IonIcon>
                 <IonLabel color="primary">Passageiro</IonLabel>
@@ -245,7 +266,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
             <IonCardTitle>Biografia</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>
-            {inputValues.bio ? inputValues.bio : 'Sem biografia.' }
+            {inputValues.bio ? inputValues.bio : "Sem biografia."}
           </IonCardContent>
         </IonCard>
 
@@ -254,78 +275,123 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
             <IonCardTitle>Informações de contato</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>
-            { !inputValues.phone_number ?
-                <>Sem informações de contato.</>
-            : <>
-                {
-                  inputValues.phone_number ?
+            {!inputValues.phone_number ? (
+              <>Sem informações de contato.</>
+            ) : (
+              <>
+                {inputValues.phone_number ? (
                   <>
                     <IonChip>
                       <IonIcon icon={callOutline} />
                       <IonLabel>{inputValues.phone_number}</IonLabel>
                     </IonChip>
-                  </> : <></>
-                }
+                  </>
+                ) : (
+                  <></>
+                )}
               </>
-            }
+            )}
           </IonCardContent>
         </IonCard>
 
-        { !isVisitor ?
+        {!isVisitor ? (
           <IonList>
             <IonListHeader>Configurações</IonListHeader>
-              <IonItem button onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
-                <IonIcon icon={createOutline} slot="start" />
-                <IonLabel>Editar perfil</IonLabel>
-              </IonItem>
-
-              { incompleteProfile ?
-                <>
-                  <IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
-                    <IonIcon icon={shieldCheckmarkOutline} slot="start" />
-                    <IonLabel>Completar cadastro</IonLabel>
-                    <IonBadge color="primary">{incompleteProfileCounter}</IonBadge>
-                  </IonItem>
-                </>
-                : <></> }
-
-              <IonItem button onClick={() => history.push({ pathname: '/cadastro-van'})}>
-                <IonIcon icon={carOutline} slot="start" />
-                <IonLabel>Cadastrar Van</IonLabel>
-              </IonItem>
-
-              { isDriver ?
-                <>
-                  <IonItem button onClick={() => history.push({ pathname: '/minhas-vans'})}>
-                    <IonIcon icon={carOutline} slot="start" />
-                    <IonLabel>Minhas Vans</IonLabel>
-                  </IonItem>
-                  <IonItem button onClick={() => history.push({ pathname: '/buscar-passageiro'})}>
-                    <IonIcon icon={personOutline} slot="start" />
-                    <IonLabel>Buscar passageiros</IonLabel>
-                  </IonItem>
-                </>
-                : <></> 
+            <IonItem
+              button
+              onClick={() =>
+                history.push({
+                  pathname: "/perfil/editar",
+                  state: { userData: inputValues },
+                })
               }
-              
-              <IonItem>
-                <IonIcon icon={cardOutline} slot="start" />
-                <IonLabel>Pagamentos</IonLabel>
-              </IonItem>
-              <IonItem>
-                <IonIcon icon={starOutline} slot="start" />
-                <IonLabel>Avaliações</IonLabel>
-              </IonItem>
-              <IonItem button onClick={logoff}>
-                <IonIcon icon={exitOutline} slot="start" />
-                <IonLabel>Sair da conta</IonLabel>
-              </IonItem>
-          </IonList> : <></>
-        }
+            >
+              <IonIcon icon={createOutline} slot="start" />
+              <IonLabel>Editar perfil</IonLabel>
+            </IonItem>
+
+            {incompleteProfile ? (
+              <>
+                <IonItem
+                  button
+                  onClick={() =>
+                    history.push({
+                      pathname: "/perfil/completar",
+                      state: { userData: inputValues },
+                    })
+                  }
+                >
+                  <IonIcon icon={shieldCheckmarkOutline} slot="start" />
+                  <IonLabel>Completar cadastro</IonLabel>
+                  <IonBadge color="primary">
+                    {incompleteProfileCounter}
+                  </IonBadge>
+                </IonItem>
+              </>
+            ) : (
+              <></>
+            )}
+
+            <IonItem
+              button
+              onClick={() => history.push({ pathname: "/cadastro-van" })}
+            >
+              <IonIcon icon={carOutline} slot="start" />
+              <IonLabel>Cadastrar van</IonLabel>
+            </IonItem>
+
+            {isDriver ? (
+              <>
+                <IonItem
+                  button
+                  onClick={() => history.push({ pathname: "/minhas-vans" })}
+                >
+                  <IonIcon icon={carOutline} slot="start" />
+                  <IonLabel>Minhas vans</IonLabel>
+                </IonItem>
+                <IonItem
+                  button
+                  onClick={() =>
+                    history.push({ pathname: "/buscar-passageiro" })
+                  }
+                >
+                  <IonIcon icon={personOutline} slot="start" />
+                  <IonLabel>Buscar passageiros</IonLabel>
+                </IonItem>
+                <IonItem
+                  button
+                  onClick={() =>
+                    history.push({ pathname: "/meus-itinerarios" })
+                  }
+                >
+                  <IonIcon icon={mapOutline} slot="start" />
+                  <IonLabel>Meus itinerários</IonLabel>
+                </IonItem>
+              </>
+            ) : (
+              <></>
+            )}
+
+            <IonItem>
+              <IonIcon icon={cardOutline} slot="start" />
+              <IonLabel>Pagamentos</IonLabel>
+            </IonItem>
+            <IonItem>
+              <IonIcon icon={starOutline} slot="start" />
+              <IonLabel>Avaliações</IonLabel>
+            </IonItem>
+            <IonItem button onClick={logoff}>
+              <IonIcon icon={exitOutline} slot="start" />
+              <IonLabel>Sair da conta</IonLabel>
+            </IonItem>
+          </IonList>
+        ) : (
+          <></>
+        )}
 
         <IonToast
           position="top"
-          color={toastColor}      
+          color={toastColor}
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}
           message={toastMessage}