Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://smart-vehicle-fleet-manager.web.app/'
2. See an error in the console

Screenshots

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Uncaught FirebaseError: Installations: Missing App configuration value: "apiKey" (installations/missing-app-config-values).
    at J (extract-app-config.ts:54)
    at extract-app-config.ts:41
    at e.instanceFactory (index.ts:48)
    at e.getOrInitializeService (provider.ts:194)
    at e.getImmediate (provider.ts:95)
    at e.instanceFactory (index.ts:61)
    at e.getOrInitializeService (provider.ts:194)
    at e.getImmediate (provider.ts:95)
    at e._getService (firebaseApp.ts:127)
    at e.<computed> [as performance] (firebaseNamespaceCore.ts:228)

Desktop (please complete the following information):

• OS: [Linux]
• Browser [Chrome]
• Version [92.0.4515.107 (Official Build) (64-bit)]

Additional context
Add any other context about the problem here.

Module Status indicator

• Capture the status signal sent by the module.
• Process that signal and turns into the Active or Inactive state.
• Display on top of the dashboard for users

New Vehicle addition section

• add new vehicle using a simple GUI.

• added in DB vehicle

• & connect with DB.

• manage the user state using ContextAPI.

CICD using GitHub action and circleCI.

• Build GitHub Actions to automate integration.
• Every PR's and Merge check for integration test or dependencies failure.
• Build the CD pipeline using circleCI for automating the deployment processes.

Make it responsive
change in default CSS and added custom CSS to make it more responsive or mobile compatible.

Note Before you jump into the code first read the CONTRIBUTION.md

Put the logo

• inside the navbar before the name "Smart Vehicle Fleet Manager".

make sure the size of the logo is doesn't break the navbar.

logo is always before the name "Smart Vehicle Fleet Manager".

keep it simple and float at the left side of the navbar.

@MuskanKabir @AshutoshMourya

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to navigation panel
2. Click on 'all navigation buttons'
3. See all buttons are not working due to preventDeafault.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Mint20.1]
• Browser [e.g. chrome]
• Version [e.g. 89]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

FuelTheft Notification

• Capture the data from collection.
• Generate the notification same as AccidentAlert #35.

If you want to contribute in then you must be read first CONTRIBUTE.md

Problem will be described in CONTRIBUTE.md

Overview

Fetching data from firestore database and render in-app.

There are 2 things:-

• first the chart for updated with real-time data

• second will be a log table to keep track of each record and display

All the points are important for the new schema

• create a Data_Record entire collection.

• its subdocuments by RegID and its fields like vehicleID, vehicleNAME.

• each vehicle has particular its own collection of records of sensor data may be.

• each collection it will look like same as previously I design for collection -> document -> field.

• And create a service module.

when the new vehicle adds through the dashboard the code will run like these.
1. vehicle added into the DB as a document with their respective fields.
2. if the vehicle added & then the dummy collection will be created through the script for no reason just the avoid complexity and inconsistency.

Render the vehicle Name and RegId or Model

• Capture the data from the DB.
• Render the info before the status #42.

Update in Login page

• delete the signup module.

• manual register user or org by sysadmin.

• only register user logged in into system but via third way is not possible.

• all the access level distribution is under the sysadmin only.

1. Instantly fetch data from Firestore and render.
2. Without refreshing quickly databind with UI.
3. Suggestion:- Write an efficient listener for connectivity.

Add test cases for the dashboard

• It could be client-side or server-side.

• also test fetching the data from the firestore basically firestore DB testing.

• design more test cases are per more feature added in future.

• create a UI for the maintenance component.

• establish a connection with the Firestore.

• store data into the docs & check validation at client side.

I assume that https://smart-vehicle-fleet-manager.web.app/ is a demo application, that a new user can see and test the features for this project.
Unfortunately there is no documentation how to login

• are there demo credentials?
• where is it possible to register a demo account?

as developer I tried to build and run the docker but that fails at step 9

RUN npm run build

I guess freezing the versions at the previous steps would be good

RUN npm install npm@latest
RUN npm install react-scripts@latest

• manage the no. of the user's in terms of auth.

• manage the no. of the vehicles for each unique user.

• switch btw vehicle through the dashboard directly.

• manage the DB to handling the relationship btw the user & its vehicle.

• fetch data without page refreshing & in realTime

Accident Alert Notification

• Capture newly added data from firestore.
• Add data into the accident_log.
• Notify the user through snakbar when notification is new.
• In case of mark as read do not toggle the snakbar pop up.

Add some CSS for making a dynamic dashboard

• added your own custom CSS.

• use MDBootsrap, MaterialUI or React-Bootstrap.

• using [dot]class CSS if you write your own.

• comments are present for more readable code

• tested at your side.

NOTE- if you send a PR for this issue, make sure tick all the checkbox if you do it code for as requested or unchecked if not

Change in README.md file*

Description

• • describe the problem statement
• • how to we solve the probelm

Road Map

• • create our project folder structure

Installation

• • prerequisite
• • installation guide

Contribution

• • contribution guidelines
• • define rules for contribution

Data fetch successfully from the firestore, but the problem is that put the data_values in pagination table and most recent data_values display using charts & widgets & also improve the overall performance of application

Note:- Please refer to the CONTRIBUTE.md for a detailed description of the problem.