LogTrack

Complex Logistics ERP: GPS Tracking, invoices, recruitment, maintenance...

Summary

Description

Your everyday logistics partner. LogTrack is an ERP and provides a set of pioneering functionalities for all related workers:
Driver, Manager, Dispatcher, Insurer, Accountant, Mechanic...
Built with the most modern technologies, LogTrack is a powerful, versatile and user-centered product.

Tags

ERPLogisticsUI

Technologies

Firebase Cloud Firestore + Real-Time + Auth + Storage + FunctionsReactOpenLayersSass

Presentation

An all-in-one website for your daily tasks
This is a WIP project. This structurized document may be outdated, and mentions only partially developed or only planned functionalities.

Original Branding

Project full-size Logo
Simplified Logo

Re-Branding

Project full-size Logo
Simplified Logo
Full-size website Logo

Colors

Blue: Technology, Trust#113885
When creating a company, the user has to upload a logo.
From this logo are automatically extracted all dark colors via the package 'color-thief-node'.
These colors will be proposed in the 'Dominant Color' field, which is used to color every component of the application when the user has an active role in this company.
Technically, the default color is stored in a CSS variable, that is dynamically overwritten when having an active role.
Note: The color gray is always available and selected by default in the 'Dominant Color' field.
As an example, main colors of the 'Transports Alainé' logo (under trademark) are extracted, and the red and yellow are proposed in the 'Dominant Color' field
The resulting interface, when having an active role in 'Transports Alainé' company is:

Fonts

Website FontNunito - Google Fonts
Main website iconsFont Awesome - Pro License
Custom icons for equipment parts
Custom FontTransportation Font

Custom Font

A custom font, the 'transportation-font', is built independently from this project.
Linked as a dependency, this font is composed of 50+ characters that permits to categorize every type of semi-trucks and vans:
With this font, we can build every configuration:

Equipment Models

A preview of all equipment models created initially is available to manage equipments.
Equipment models created by users can be accessed to everyone.

Key Functionalities

The app contains specific vocabulary:
'Equipment' stands for every tool used directly or indirectly by your company, such as trucks, trailers, garage gates, compressor...
'Role' is a real work position. For example, a role as a driver in your company
'LogTrack' is a general activity of an employee, and can represent either a brief action (refueling) or a longer activity (driving for hours).
The unauthentified user can register, or sign in.

The authenticated user can access to a simplified dashboard, search trough all users and companies, chat with other users, modify his profile and settings, manage his active role, request a new role, and create a company.

If the user has a role selected, his dashboard is enhanced and company details appear both on top of it and on its menu.

Role-based Functionalities

Logistics functionalities are based on the user's active role.
A role is a current working position at a company. For example, I can have three roles: Driver at Company1, Manager at Company1, and Manager at Company2.
Although, I can only have one active role at a time, even if sone roles are linked to the same company.

Role List:
Driver As a driver, you have access to:
  • Your LogTrack journal (for both past and upcoming tasks)
  • GPS
  • and you can monitor your assigned equipment
Manager With an active role of manager, you can:
  • Manage Company's details, as well as warehouses and equipments
  • Manage Employees, with their roles
  • You can also see and monitor all company's employees via their LogTrack.
  • You can also propose and validate a contract and create or pay invoices.
  • Generally, this is the most powerful role of the platform
Observer As an observer in a company, you are considered as an extern partner of the company
such as an accounting or an insurance company that is not present on the app. You can monitor everything but can edit nothing:
  • View and monitor Employees, Warehouses and Equipments
  • View all invoices and LogTracks (including incidents)
Mechanic A mechanic is able to monitor and manage every equipment of the company, as well as
partner companies' equipments when needed:
  • View and manage its own company's equipments
  • View and manage partner companies' equipments that are in status 'NEEDS MAINTENANCE'
When creating a company, the user becomes both the creator (company's field) and manager of the company (role).
This role becomes unrevokable and the creator of the company needs to contact the support if he needs to transfer it.
A user can request a role he doesn't already have via the target company's page.
The newly created role is now a DRAFT.
This request needs to be CONFIRMED by a manager of this company before becoming available. This step is mandatory, apart if you're already a manager of the target company.
When having a confirmed role, a manager can REVOKE your role at any time (i.e. for the end of your contract).
Note: some icons are being integrated into Logistics in order for mechanics to have a better maintenance interface:

User's settings and profile

Every user has his own settings that are stored independently of the company's settings:
He can also easily enhance his profile by adding his profile picture, and adding the certifications he obtained and past experience:

Support

Support is available via the user's profile. For the moment, only messages are supported and they are recorded into the database.
Some data is automatically computed and added to the message to give more context for the administrator:
  • userId
  • userName
  • userEmail
  • activeRoleId
  • activeRoleCompanyId (on which company the active role is applied to)
  • activeRole (the nature of the role)
  • date (current datetime, without timezone)

Company Creation

When creating a company, apart from its name and logo, you will have to choose between three plans.
Although at this moment only the "Standard" plan can be chosen, it can give users some ideas on future pricing of the app.

Invoice & Contract Systems

Every manager of a company can create a contract.
For this, he has to choose the partner company, and to select which company is the exec company (the one that will execute the contract),
and the one the order company (the one that will pay the contract once finished).

Here are the different statuses of a contract:
DraftA draft is a contract that has been created by one company, but not accepted by the other company yet.
ExecutionNormal execution of a contract by the exec company
FinishedOnce the execution is finished (noted by the order company)
PaidStatus updated by the exec company once it has been paid
ArchivedThe contract can be marked as archived by either company once it has been paid
In addition, a contract must for the moment be of one type among following types:
MaintenanceMonitoring and Maintenance of the order company by the exec company
TransportationTransportation of various shipments by the exec company
InsuranceEquipment insured by the exec company
AccountingAccounting of the exec company on the order company
Invoices can be attached to a contract while it has the status 'EXECUTION or FINISHED'.

Navigation

The sidebar menu gives an easy access to every relevant page of the app.
Depending on the current active role of the user, it is enriched with relevant links.
The sidebar menu is defaultly presented expanded, and collapses automatically on tablets. It can alse be configured to always be collapsed.
A new version of the navigation, available only on smaller screens, is currently being designed. It will permit to only show a button, that will print the menu with the active role in fullscreen.
Extended version
Collapsed version

Dashboard

Depending of the current active role, the dashboard is enhanced with relevant data.
By default, the dashboard of a manager looks like this:
We can retrieve some data, like the active role, the number of warehouses, employees and equipments with direct links to management pages.
Some links are also present to have a fast access to the profile, the chat, alerts, requested roles, and logtracks of employees.
Optionally, the user may want to have the weather on his dashboard.

LogTrack

As previously defined, a LogTrack is an activity of an employee. It can be a punctual event, like refueling, or a longer activity, like several driving hours.

Each employee is responsible of his own logbook. LogTrack are categorized:
Pause
Sleep, Eat, Parked
Service
Fix, Ready for service, Ending service, Maintenance
Not available
Absent, Waiting
Operation
Recharging, Refueling, Weight, Wash, Loading, Unloading
Driving
Transiting, Commuting
Other categories are being developed, like a category concerning specific problems:

Technologies

ReactJS library to built user interfaces
FirebaseOnline database, authentication and storage.
For the moment, are used: Firestore (document-based database), authentication (user signin, signup and sign out), storage (file storage, user spaced) and functions (processes on database and storage).
Every service provided by Firebase has a full layer of security that provides interesting capabilities to limit users' rights.
It is planned to use Firebase Real-Time database for chat messages and alerts. That's not the case at the moment.
OpenLayersOpen-source JavaScript library for displaying maps
SassCSS, more flexible and powerful

APIs

OpenWeatherThis API is used to fetch the current weather at user's location.
To limit API calls, the weather is cached into Firestore (Firebase database) and is fetched only through the API if the user's location has not been fetched yet,
or if the weather is out-of-date.

Routing

React Router DOM Famous Router for React
This router provides the Route class to be used for every endpoint of the app.
In an additional layer, I developed the PrivateRoute class that redirects non-logged in users to the sign in page.
I also developed the RoleLimitedRoute class that takes a role array. If the user is logged in and if his active role is part of this array, he is routed correctly.
Otherwise, he is redirected to his dashboard (or the signin page if not signed in).

These two classes, additionally to the class provided by the react-router-dom package, provides efficient ways to limit user access through the app.

Real-Time data

Firebase provides an efficient way to real-time updates.
Real-Time is a way to register a listener function that will be called each time data is modified.
With Firebase Real-Time database, you can register a query that will call a callback everytime results are different.

For the moment, real-time data is not integrated into Logistics, but I aim to provide real-time alerts and chat messages,
instead of the current version that fetch an endpoint provided by Firebase Functions every 5 to 10 seconds. This migration is currently being designed.

Map

A map component that uses OpenWeather is part of the app. Used in several screens, it needs to be intialized via reference.
It provides numerous functions to manage the center, zoom and heading of the map, as well as map features (markers, lines, shapes drawn on top of it, along with their popups)

Services

One service is already developed by collection. It provides useful data to create, read, update and delete (if applicable) documents, plus custom fetch functions.
In addition, these services contains right management details for every action the user can do.

Other services are developed and answer specific problematics:
ColorServiceUsed to filter colors and to extract main colors from an image
DataServiceUsed to pre compute data linked to the user (active role, active role company, user details).
This data permits to ask the database once and to keep data available every time we need it.
Using a singleton pattern, the call of computed data fetch data only the first time, then it keeps it.
Utility funcitons are available to invalidate data (for example when the current active role is changed).
DateServiceSeveral functions to format and process date operations
ErrorServiceUsed to manage errors and warnings and responsible of printing user-friendly errors.
Automatic error reporting is being designed.
FileServiceUsed to store documents in the user-space. Firebase Storage provides an efficiant way to restrict user access.
Each user, when signing up, is gived a user storage folder (named by his id). He has the right to read every user space, but can write only to his own space.
This service provides a way to upload files to his user space.
FirebaseServiceThis service is used to initialize global Firebase objects, as well as providing user authentication functions.
GeoServiceUsed to store third-party tile layers configurations (from Bing, CartoDB...)
as well as giving access to utility functions (data coordinates transformation, bounding boxes computes...)
LocalStorageServiceProvides functionalities to put and retrieve data stored in the local storage.
ModalServiceLaunching modals and listening from user events in modals are never been so simple with this service.
PermissionServiceUsed to ask specific permissions from the browser, like location.
Using the observer pattern, every location listener is called at the same time when the user's position is changed.
PlacesServiceProvides places search anf geocoding from the Nominatim package.
ResizeServiceService that uses the observer pattern to call every listener that needs to know when the window has been moved or resized.
Useful for components that cannot be developed with CSS responsiveness in mind (Map for example).
RightServiceProvides a utility functions that check if a user has a specific right.
It stores right dependency tree as well.
SettingsServiceUsed to store, retrieve and print settings.
UtilsServiceMore utility functions to manage arrays, JS events and strings.
WeatherServiceUsed to interact with OpenWeather API endpoints to get the weather at user's location.

Firebase Security

Each functionality provided by Firebase has a full security layer I need to develop.
It provides a way to differentiate all possible actions on every collection: get one document, list several documents, create a document, update a document or delete it.
For examples (not exhaustive and voluntarily not fully accurate), I have limited the rights on Firestore (online document-based database):
  • Brands collection can only be read or listed
  • A company can: be created, got and listed by every signed in user, updated if the active role of the user is a manager on this company, and cannot be deleted.
  • A contract: can be created and updated if the current active role is a manager for either company, can be got and listed if the current active role is on the company, and cannot be deleted.
  • A role can be created if: the user is the user related for this role and the role status is draft (needs to be confirmed by a manager),
    or if the active role is a manager for the target company, or if the related user is the creator of the target company.
  • ...