ADMIN PARTNER DASHBOARD

This document explain how to use the template Matmix to create the admin partner
dashboard. Print the sketches i made. There’s two screen sketched per page. I wrote letter
for each screen (A-B-C-etc).

When the partner subscribe through the website or the app, he can now login into this admin
website.

SCREEN A

1. Use the La Dépanneuse logo. ​I will provide soon​. Leave it normal for now.
2. Replace the layers (dashboard, Form Elements, Table, etc.) with: ​Account / Vehicles
/ Employees / Service History / Bank Information / FAQ​.

The layer Account have two sub-layers : Business / Insurance

Take out the menu icon from the bar at the top. The menu must be always open !
3. Leave the search bar. ​Take out the Message icon leave the Notification icons
4. Leave it like it his. The Name of the user and the Email of the user. Put a generic icon
of a user: ​fa fa-users ​from Components - Buttons and Icons - ​fa fa-users (icon)
5. While the sections from Account are not completed (Business - Insurance)
this layer stays at the top (below the search bar). Use something like
Components Bootstrap Elements - Alerts (the red alert box)
The message is : Your account is incomplete. Complete the section Account
from the menu in order to receive job opportunities.
6. When you go on Form Elements - Basic Forms, a title appears : Basic Forms.
Replace Basic Form with Account - Business
7. Use a Elements - Basic Forms to create this part. Add the icon Components -
Buttons and Icons - ​fa fa-building-o ​at top left of this form box.
8. Replace the title: Form Elements with Information about your business
9. Use Form Elements - Basic Forms - Form Elements (and ​Form Elements With
Addon)​.
PS: Some forms are already filled because they provided this information on
the website or through the app

DESCRIPTION FORM FORM TYPE

Contact information Title over the next three

forms

First name “Already filled” Text Input

Last name “Already filled” Text Input

 Title Enter title Text Input

Business Information Title over the next

forms

Business name “Already filled” Text Input

Phone number “Already filled” Text Input - The format is

1-800-514-5384. The
number 1 is always
present. The rest changes

Email “Already filled” Text Input

Address Enter address Text Input

City Enter city Text Input

Postal code Enter postal code Text Input - ​The format is

J5R 4N4
10. This is the right part of my sketch. This information should be at right on a
computer and below this information on a smartphone (Must be responsive)

DESCRIPTION FORM FORM TYPE

Password (small dots - hidden) Password - Disabled

input. Button at the right
to Edit ( Form elements
with addon - Input
Label).

Self-employed “Clickable checkbox” Checkbox - Text at right

side: I am
self-employed and I
work alone.

Business “Clickable checkbox” Checkbox - Text at right

side: ​I own a business
and I want to create app
account for my
employees and myself.

11. When you press Edit from the Password form, it opens three forms below
and two buttons (Save and Cancel). ​It could be in a popup​. See my sketch
DESCRIPTION FORM FORM TYPE

Old Password Old Password Password (Form Elements)

New Password Password Password (Form Elements)

New Password Password Password (Form Elements)

Save changes Button UI Elements - Sweet Alerts - Success Alert. When the
popup appears, then: Title :Password changed
(no subtext)
If the old password is wrong, then: UI Elements -
Sweet Alerts - Alert: Title : Invalid Password

PS: The user must have 8 characters minimum and

both password must be identical before the button
Save becomes clickable.

Cancel Button Button Cancel from Form Elements.

Pressing Cancel take out those three new forms
12. Use the button from UI Elements - Sweet Alerts - Alert Auto Close. The text
inside the button is: ​Save - Go to Insurance information
When the popup appears, then: Title : Saved ! (color of text: Green)
Duration: 1 second
Then redirect to the next page
When information is missing, then UI Elements - Sweet Alerts - Alert.
Text is: It seems that some information is missing

SCREEN B
PS: This layer is now out of the Sub-Menu from Account. Is is now between Account and
Vehicles in the Menu.

1. Same as SCREEN A
2. Same as SCREEN A
3. Same as SCREEN A
4. Same as SCREEN A
5. Same as SCREEN A ​(Should no longer be present)
6. When you go on Form Elements - Basic Forms, a title appears : Basic Forms.
Replace Basic Form with Bank Information
7. Use a Elements - Basic Forms to create this part. Add the icon Components -
Buttons and Icons - ​fa fa-bank ​at top left of this form box.
8. Replace the title: Form Elements with Information to proceed payments
9. Add this text: La Dépanneuse generally proceed to payment in the next
business days following a service your business provided.
10.
 DESCRIPTION FORM FORM TYPE

Bank name Form Elements - Basic

Form - FormElements -
Select Box (I’ll provide
the list to add here
soon.)

Institution number Enter institution number Text Input

The institution number is a 3-digit number that Text Input - ? Input

identifies your financial institution. You can Instructions
find it at the bottom of your check specimen.
You don’t have a check? Usually, you can
easily find those information when logged into
your bank’s website.

Transit number Enter transit number Text Input (Format is 5

digits)

The transit number a 5-digit number. You can Text Input - ? Input
find it at the bottom of your check specimen. Instructions
You don’t have a check? Usually, you can
easily find those information when logged into
your bank’s website.

Account number Enter account number Text Input (Format is

may vary)

Account number Confirm account number Text Input (Format is

verification may vary)

Your account number identifies in which Text Input - ? Input

account you want us to send the funds for the Instructions
services you provided.
11. Write the text: Can’t find the information ?
Then add UI Elements - Sweet Alerts - Custom Icon. ​Text in the button:
Example
When clicked, the popup appears and there’s an image that​ I will provide you
soon ​(this is an image of a check specimen to help the partner find the
information to fill this form page). The image must be large enough to be
easily visible
The text below is: Example of a check specimen
Keep the OK button
12. Use the button from UI Elements - Sweet Alerts - Alert Auto Close. Text on
the button is: ​Save
When the popup appears, then: Title : Saved ! (color of text: Green)
 Duration: 1 second
Then redirect to the next page
When information is missing, then UI Elements - Sweet Alerts - Alert.
Text is: It seems that some information is missing
13. Use the button from UI Elements - Sweet Alerts - Alert. Text on the button is:
Skip
No Popup should appear. The button should be grey
(DON'T DO NO.13 / Ignore and do not place this button)

SCREEN C

1. Same as SCREEN A
2. Same as SCREEN A
3. Same as SCREEN A
4. Same as SCREEN A
5. Same as SCREEN A (PS: This layer should disappear when the Account part has
been completed by the partner
6. When you go on Form Elements - Basic Forms, a title appears : Basic Forms.
Replace Basic Form with Account - Insurance
7. Use a Elements - Basic Forms to create this part. Add the icon Components -
Buttons and Icons - ​fa fa-book ​at top left of this form box.
8. Replace the title: Form Elements with Information about your insurance
9. Add this text:
Partners must have at all time a valid insurance cover for their vehicle(s) and services they
provide. ​Per our Terms and Conditions, you must have and maintain general and automobile
liability insurance with a minimum per occurrence limit of $1,000,000.00 for partners that
perform towing services and a minimum per occurrence limit of $500,000 for partners that
perform roadside services exclusively.
10.
DESCRIPTION FORM FORM TYPE

Insurance provider Enter insurance Form Elements - Basic

provider - Text input

Insurance number Enter insurance Form Elements - Basic

number - Text input

Insurance expiration DD/MM/YYYY Form Elements -

date Advanced - Input mask
- Date (DD/MM/YYYY)
11. Below, add a separation and write ------OR------ (to separate and give another way to
provide this info) Write at left: Upload insurance certificate. Then add ​Form
Elements - Advanced - File Style - ​File style with button style
12. Title: Terms & Conditions
Sub text:
 By clicking the “I Agree” button you represent and warrant that: (a) you have read,
understood and agree to be bound by the Terms & Conditions; (b) if you are an individual,
you are of legal age to form a binding contract, or if you are registering on behalf of an
entity, that you are authorized to enter into, and bind the entity to, this Agreement (Terms &
Conditions); and (d) that your registration and your use of the La Dépanneuse’s Platform is in
compliance with any and all applicable laws and regulations.

Click ​here​ to read the Terms & Conditions. (Place here a link to the page)

13. Add UI Elements - On/Off Switch - Small (button should start at Off). The text at the
left of this button is: I agree
14. Use the button from UI Elements - Sweet Alerts - Alert Auto Close. Text on
the button is: Save
When the popup appears, then: Title : Saved ! (color of text: Green)
Duration: 1 second
Then redirect to the next page
When information is missing, then UI Elements - Sweet Alerts - Alert.
Text is: It seems that some information is missing

ACCOUNT (Business and Insurance)

When both the business and insurance sections are completed for the first time, a popup
should appear. Use the popup UI Elements - Sweet Alerts - Success Alert. Don’t use the
button, just the popup that appears when you click on it.
The popup title: Congratulation !
The popup subtext:
Your account has been successfully created.
You can now add vehicles, employees and start using the mobile app. If you have
employees, create their profiles and generate access codes in order to let them use the
mobile app.

Also, make sure that the layer at the top reminding the user to complete is account
disappear when the section Account is completed:
“​While the sections from Account are not completed (Business - Insurance) this
layer stays at the top (below the search bar). Use something like Components
Bootstrap Elements - Alerts (the red alert box)
The message is : Your account is incomplete. Complete the section Account from
the menu in order to receive job opportunities.​”

When the section Account is completed, a new layer appears : Dashboard

SCREEN D

1. Please note that when the section Account is created, then the layer Dashboard
appears
2. Title of the page: Vehicles
3. Use the icon Components - Buttons and Icons - ​fa fa-plus
4. Title in the title bar: Add a vehicle
5. Add a button written inside: ADD in green. Initially, you only see the bar and NOT the
form below. When you press ADD, then the rest of the form appears below.
6. Title: Type of vehicle
Then you have three options but you can ONLY select one. Use Advanced Form
Elements - Icheck Checkbox for the clickable icons. Change the color when you click
here from pink to blue.
The three options are: Flat bed / Tow truck / Roadside assistance vehicle
7. Title: Vehicle description

Description Initial text present Form type

inside the form

Make Basic Forms - Text input

Model Basic Forms - Text input

Year 2016 Advanced Forms - Spinner -

Using data attributes (make
the bar smaller, just enough
large to see the year and not
all the width). Lock the
spinner between 1950 and
2017

Color Basic Forms - Select box (the

box is empty first, upload a
list of car colors - We should
talk about it for the client app
(when you must add a car))

Immatriculation No (Optional) Basic Forms - Text input

Montreal’s validation (Optional) Basic Forms - Text input

sticker number

8. This is where the partner tells us what services he can do with the vehicle he is
adding. Not all vehicle can do all services. It will consist in 6 services that you can
select or unselect.
Use Advanced Form Elements - Icheck Checkbox for the clickable icons. Change the
color when you click here from pink to blue.
In function of the Type of vehicle he has chosen, some services must be pre
selected.
 Description If Flat bed If tow truck If Roadside

Towing X X

Jump start X X X

Winching X X

Tire change X X X

Fuel delivery X X X

Lockout X X X
9. I forgot to draw the title bar in my sketch, it should be present just like the bar from
the points “3” and “4” above. Use the icon Components - Buttons and Icons - ​fa
fa-cab. ​Title in the title bar: List of your vehicles
10. Use Advanced style tables - Simple Header Example to create the list of vehicles.
Lock the number of vehicle in the table to 50 before you have to click on the page 2
(or 3 or 4, etc).
Look the chart below to see what is in the table. What is ​“like that” ​is just information
about what kind of info is inside. All the form are initially empty.

Title What’s inside the form

Type “text”

Make “text”

Year “digits”

Color “text”

Plate “digits”

Montreal sticker number “digits”

Action “Button Edit and Delete”

11. When you press Edit, it opens the layer above. Then all the information is there and
you can simply edit the information about the vehicle. If you click Delete, then the
popup appears (don’t change anything about this popup).
12. Use the button from UI Elements - Sweet Alerts -Success Alert. Text on the
button is: Save
When the popup appears, then:
Title : Vehicle added !
Subtext: This vehicle is now available in the mobile app under the section
“Vehicles”.
When information is missing, then UI Elements - Sweet Alerts - Alert.
Text is: It seems that some information is missing.
 13. Use the button from UI Elements - Sweet Alerts -With cancel Message. Text
on the button is: Cancel
Make no popup. Just delete information in the form and close the box with
forms when this button Cancel is clicked

IMPORTANT CODING NOTE:

- the Plate and Montreal sticker number are optional. You can add a vehicle
without those information. The rest must be complete in order to create a vehicle.
- You must add button to reorganise the table below, just like Table - Data
Table - Data table (Example, reorganise by alphabetical order)

SCREEN E
This screen is really similar the the screen D, it’s the same concept.

1. Same as SCREEN D
2. Title: Employees
3. Same as SCREEN D
4. Title: Add an employee
5. Same as SCREEN D
6.
Description Form type More information

First name Basic Forms - Text input

Last name Basic Forms - Text input

Phone number Basic Forms - Text input The form of a phone number in canada is
514-717-5384.

Below that form, add the (? - Input

Information) to add some text. Text: This
must be the phone number used while the
employee is on the road. While an employee
is on his way to provide a service for a “La
Dépanneuse” user, he must be reachable at
this number.

Driver’s licence Form Elements - Below that form, add the (? - Input
Advanced - File Style - Information) to add some text. Text: This
File style with button style information is optional. If not provided now,
the employee can add a picture of his
driver’s licence through the mobile app.
7. See the table above
8. At right, there’s another section of the form where you can add an excel sheet to
automatically create the table
Text: Upload a list of your employees
 Subtext: You can upload a list of the employees that will use the mobile app. Make
sure the Excel worksheet is similar to the picture below.
Then add this picture: (​I WILL PROVIDE SOON​)
Then add F ​ orm Elements - Advanced - File Style - ​File style with button style
9. Same as SCREEN D but text is: List of your employees
10. Use Advanced style tables - Simple Header Example to create the list of vehicles. If
you can use Tables - Stack Tables, then do it.
Lock the number of employee in the table to 50 before you have to click on the page
2 (or 3 or 4, etc).
Look the chart below to see what is in the table. What is ​“like that” ​is just information
about what kind of info is inside.

Title What’s inside the form

First name “Text” (Make sure the first letter comes

in Capital letter)

Last name “Text” (Make sure the first letter comes

in Capital letter)

Phone number “Digits Format 514-717-5384”

Driver’s licence
“Stickers like this:
Options for stikers are:
Waiting for approval (yellow)/ Approved
(green) / Refused (red) / Not uploaded
(grey)

La Dépanneuse code “Digits or text”

Action “Button Edit and Delete”

11. When you press Edit, it opens the layer above. Then all the information is there and
you can simply edit the information about the vehicle. If you click Delete, then the
popup appears (don’t change anything about this popup).
12. Use the button from UI Elements - Sweet Alerts - Alert. Text on the button is:
Save
When the popup appears, then:
Title : Saved ! Employee code : XXX (This XXX represent the code that is
generated. The employee use this code to download the app)
Subtext: Give this code to your employee. He can now download the app and
use this code in order to link his account with this business account.

When information is missing, then UI Elements - Sweet Alerts - Alert.

Text is: It seems that some information is missing
 13. Use the button from UI Elements - Sweet Alerts -With cancel Message. Text
on the button is: Cancel
Make no popup. Just delete information in the form and close the box with
forms when this button Cancel is clicked

IMPORTANT CODING NOTE:

- Uploading the picture of the driver’s licence is optional. You can add a
employee without this information. The rest must be complete in order to create a
vehicle.
- You must add button to reorganise the table below, just like Table - Data
Table - Data table (Example, reorganise by alphabetical order)
- When you had an excel sheet, It must add the new employee in the table. It
doesn’t delete what is present. If an employee is already present in the table
and his present in the excel sheet, then replace the information about the
employee

SCREEN F

1. Title: Service history

2. This will be 3 UI Widgets from Ui widgets - 2nd row.They look like this:

3. The first widget will be like the image above (left side). Use the same icon. The color
will be dark blu like the image at right (above). Replace the text with: Requests
received
4. The second widget will be like the image above (right side). Use the same icon.The
color will be blue turquoise (like the download widget). Replace the text with:
Requests completed
5. The third widget will be green like the image above (left side). The icon will be
Components - Buttons & Icons - ​fa fa-money​. Make the icon the same size than
the other two widgets. The format of the amount should be 0$ . The text below
is: Amount earned
6. Use Advanced style tables - Simple Header Example. Keep the table icon at the left
7. Title: Service history
At right, keep the search bar. Text: Search: Then, the box to search.
8. There are 9 columns (PS: i forgot to sketch the column Invoice which should be the
first column). Each one have an option at the right side of them to organize them (see
my sketch). This organisation button is present in Data Tables - Data table. The
columns are:
 Title What’s inside

Invoice Format is 10000 (5 digits)

Date Date in format DD/MM/YYYY

Time Time in format 24:00

Service The services possible are: Towing /

Jump start / Winching / Tire change /
Fuel delivery / Lockout

Employee Format is first name and last name

Client Format is first name and last name

Payment Format is 70$

Status
Stickers like this:
Options for stickers are:
Paid (Green) / Pending (Yellow) /
Service cancelled (Red)

View A button like is already present in the

Action column from the template but
write inside: View

SCREEN G

1. Title: Notifications
2. Use something like Components Bootstrap Elements - Alerts (Those will
appears when i need to gave them a message. It’s possible there’s nothing
here sometimes. By the way, This should look like the bar that existed while
the account was not completed)
3. Title: General
4. Same as Screen F - 3
5. Same as Screen F - 4
6. Same kind of widget as the the others but the icon is Component - Buttons &
Icons - ​fa fa-group.​ The title of the widget is Employees. The color is the same
as “Request received” widget.
7. Same kind of widget as the the others but the icon is Component - Buttons &
Icons - ​fa fa-cab.​ The title of the widget is Vehicles. The color is the same as
“Request completed” widget.
8. Same table as Screen F (Service history)
FAQ