actosoft / buntiappfrontend Goto Github PK

Using Adobe XD on Web artboard, design the UI of an admin panel.
The Admin Panel need to show a list view where the admin can see the news taxi requests.

The list view need to have the next columns:

1.- Usuario
2.- Localización
3.- Hora de solicitud
4.- Acciones (Aceptar / Declinar)

If you have more questions about this, you can ask me or @Inatedy

We'll use Boostrap 4 as CSS framework to this project. So you'll need to add it to the project. Read docs about installation https://getbootstrap.com/docs/4.0/getting-started/introduction/

When on row of the list view of request the action Aceptar is clicked, you'll need to open a modal. In this modal, you'll create a little form with an input to specify the time in minutes to indicate to the user how many time ir will need to wait. With a button, get this info and close the modal.

When the Web App is rendered, you need to show all the requests on the database, ordered by Date (Recently on the top). So you need yo handle this with jquery and Firebase. in this moment don't worry for design, when @Emily-Garcia finishes #3 you could go ahead with design

Read about the component available on Boostrap 4 and which could be the best option to show the requests. When you have been selected a Boostrap component, you can start to show the Firebase data into that component.

When the admin accepts a taxi request and he indicates the time in minutes of user waiting, you'll need to update the doc into the Firestore DB. The doc has this structure:
Latitud: number Longitude: number PaymentMethod: string User Reference: ref

Add the next attributes:

Accepted: Bool (true) TimestampAccepted: DateTime WaitingTime: number

Firebase handle to work with realtime data. Check the Firebase method to handle a function every time the database info change (CRUD)

We need to add Firebase to our project. The credential are available on Firebase Project

When the admin click on Rechazar action on a row of the listview of the taxi requests, show a confirm modal when the user need to confirm that action to perform it. Check on boostrap if exists a component to handle this in a pretty way, instead of use the classical Javascript version.