Add fleet management grid sample

[IMinchev64]

To-do:

• css classes need some cleanup

[yradoeva]

Here are my comments related to design and UX:

1. Would be better the whole Grid to be higher - e.g. 1024px (600px currently is narrow in my opinion). The exact height will depend of course on the container in which it will be embedded on the marketing webpage. By enlarging the height, the visibility of Cost and Utilization tabs will be improved.

2. Would be better to have more than 12 vehicles on the first level. Exactly how many, I’m not sure, maybe at least 25, but I know it will affect the performance so I’ll leave it to you to decide.

3. The Grid should be in S size - with cells’ height of 32px (Toolbar and buttons at the top are OK, already in S). I think the 40px height of the cells and rows currently comes from the avatars, which are 40x40px.

4. The Avatars of the car makes should be with custom size 22x22px with border-radius 0.25 rem (4px)
   

5. The gap between the Avatar and the Text (“Make” column) should be 8px, also between the Badge and the Text (“Status” column).

6. Card for GPS coordinates: the avatar should be M size (64x64px)
   The card should be with elevation 24 (as far as I see it is 4)
   The card should not have a border.
   

7. If possible, the background of the detail area for each row (“behind” the Tabs) should be black (#000000) so the tabs are more distinguishable.
   

8. Detail area, all Tabs - The content area of all Tabs should have 16px paddings from all sides (currently only “Cost” Tab has 10px)
   By design:

Cost Tab:

9. Details Tab: Carousel - Let’s have photos of the same car in one carousel (not mixing for example red and blue cars). I have uploaded more photos in One Drive and ordered all the photos in separate folders for each vehicle. Let’s have 3 photos in each carousel.

10. Details Tab: The Divider’s color between the divs should be —ig-gray-200 with 24% opacity - the same as the bottom border of the grid cells.
The font-size of the text should be 0.8125rem (13px) same as in the grid cells.
    

11. Trip History Tab is related to the Status of the vehicle:

• “Active” status: we have “Current” badge for the current driver and not ended trips (End: N/A, End Mater: N/A, Distance: N/A and Total Time: N/A)
• “Available” and “In Maintenance” status: we don’t have current driver and the trips should be finished

That screenshot is OK, but I’ve seen some vehicles in “Available” and “In Maintenance” status have current driver, and some in “Active” status have finished trips.

12. Trip History Tab: There should be a gap of 8px between the Аvatar and the driver’s name and between the name and the Badge in the Driver column
    

13. Trip History Tab: the card for the driver’s details should be with elevation 24 (as far as I see it is 4)
    The Divider’s color between the divs should be —ig-gray-200 with 24% opacity - the same as the bottom border of the grid cells.
The font-size of the text (except the name), should be 0.8125rem (13px) same as in the grid cells.
    The card should not have a border.
    

14. Maintenance Tab: the gap between the Badge and the text in Type column should be 8px
    

15. Cost Tab and Utilization Tab: The border of the chart areas should be 1px, with border-radius 6px.

16. Cost Tab and Utilization Tab: data in the charts - if we show on the “Utilization per Month” chart comparison between all 12 months of 2023 and 2024, then we should include also November and December on the “Fuel Costs per Month” chart.

17. Utilization Tab: 2023 and 2024 in the legend should not have ‘ ‘ (apostrophes)
    

18. Could the animation by opening the cards (for the drivers’ details and for the GPS coordinates) be of type fade-in (fade-out for closing)? Currently, this side opening, swing-right / swing-left, looks a little bit strange, at least to me.