|
1
|
|
|
import React, { useEffect, useState } from "react"; |
|
2
|
|
|
import scooter from "../models/scooters"; |
|
3
|
|
|
import users from "../models/users"; |
|
4
|
|
|
import cities from "../models/cities"; |
|
5
|
|
|
import { Databox, DataLists } from "../components"; |
|
6
|
|
|
const Dashboard = () => { |
|
7
|
|
|
const [data, setData] = useState({ |
|
8
|
|
|
totalScooters: 0, |
|
9
|
|
|
liveScooters: 0, |
|
10
|
|
|
chargingScooters: 0, |
|
11
|
|
|
maintenceScooters: 0, |
|
12
|
|
|
totalUsers: 0, |
|
13
|
|
|
activeUsers: 0, |
|
14
|
|
|
totalAreas: 0, |
|
15
|
|
|
totalParkingZones: 0, |
|
16
|
|
|
totalBonus: 0, |
|
17
|
|
|
totalNoParking: 0, |
|
18
|
|
|
}); |
|
19
|
|
|
|
|
20
|
|
|
useEffect(() => { |
|
21
|
|
|
fetchData(); |
|
22
|
|
|
}, []); |
|
23
|
|
|
|
|
24
|
|
|
const counter = (data, prop, type) => { |
|
25
|
|
|
let count = 0; |
|
26
|
|
|
data.forEach((element) => { |
|
27
|
|
|
if (element[type] === prop) { |
|
28
|
|
|
count++; |
|
29
|
|
|
} |
|
30
|
|
|
}); |
|
31
|
|
|
return count; |
|
32
|
|
|
}; |
|
33
|
|
|
|
|
34
|
|
|
const areaCounter = (data, prop, type, type2) => { |
|
35
|
|
|
let count = 0; |
|
36
|
|
|
data.forEach((element) => { |
|
37
|
|
|
element[type].forEach((e) => { |
|
38
|
|
|
if (e[type2] === prop) { |
|
39
|
|
|
count++; |
|
40
|
|
|
} |
|
41
|
|
|
}); |
|
42
|
|
|
}); |
|
43
|
|
|
return count; |
|
44
|
|
|
}; |
|
45
|
|
|
|
|
46
|
|
|
async function fetchData() { |
|
47
|
|
|
const scooterOverview = await scooter.getScootersOverview(); |
|
48
|
|
|
const scooterData = scooterOverview.scootersOverview; |
|
49
|
|
|
const usersOverview = await users.getUsers(); |
|
50
|
|
|
const userData = usersOverview.users; |
|
51
|
|
|
const citiesOverview = await cities.getCities(); |
|
52
|
|
|
const cityData = citiesOverview.cities; |
|
53
|
|
|
console.log(cityData); |
|
54
|
|
|
const liveScooters = counter(scooterData, "In use", "status"); |
|
55
|
|
|
const chargeScooters = counter(scooterData, "Unavailable", "status"); |
|
56
|
|
|
const maintenanceScooter = counter(scooterData, "Maintenance", "status"); |
|
57
|
|
|
const parkingZones = areaCounter( |
|
58
|
|
|
cityData, |
|
59
|
|
|
"parkingZone", |
|
60
|
|
|
"zones", |
|
61
|
|
|
"zoneType" |
|
62
|
|
|
); |
|
63
|
|
|
const bonusZone = areaCounter( |
|
64
|
|
|
cityData, |
|
65
|
|
|
"bonusParkingZone", |
|
66
|
|
|
"zones", |
|
67
|
|
|
"zoneType" |
|
68
|
|
|
); |
|
69
|
|
|
const noPark = areaCounter(cityData, "noParkingZone", "zones", "zoneType"); |
|
70
|
|
|
setData({ |
|
71
|
|
|
totalScooters: scooterData.length, |
|
72
|
|
|
liveScooters: liveScooters, |
|
73
|
|
|
chargingScooters: chargeScooters, |
|
74
|
|
|
maintenceScooters: maintenanceScooter, |
|
75
|
|
|
totalUsers: userData.length, |
|
76
|
|
|
activeUsers: userData.length, |
|
77
|
|
|
totalAreas: cityData.length, |
|
78
|
|
|
totalParkingZones: parkingZones, |
|
79
|
|
|
totalBonus: bonusZone, |
|
80
|
|
|
totalNoParking: noPark, |
|
81
|
|
|
}); |
|
82
|
|
|
} |
|
83
|
|
|
return ( |
|
84
|
|
|
<div className="w-full px-5"> |
|
85
|
|
|
<h1 className="text-xl font-semibold py-2">Dashboard</h1> |
|
86
|
|
|
<div className="w-full flex justify-center relative "> |
|
87
|
|
|
<Databox data={data} /> |
|
88
|
|
|
</div> |
|
89
|
|
|
<div> |
|
90
|
|
|
<DataLists data={data} /> |
|
91
|
|
|
</div> |
|
92
|
|
|
</div> |
|
93
|
|
|
); |
|
94
|
|
|
}; |
|
95
|
|
|
|
|
96
|
|
|
export default Dashboard; |
|
97
|
|
|
|
FalkenDev /
SparkRentals-Admin-Dashboard
