30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
|
import { useStoreDispatch } from "../../../hooks/useStoreDispatch";
|
||
|
|
import VehicleSessionItem from "../../UI/VehicleSessionItem";
|
||
|
|
|
||
|
|
const StoreFields = () => {
|
||
|
|
const { storeQuery } = useStoreDispatch();
|
||
|
|
|
||
|
|
const totalPending = storeQuery?.data?.totalPending;
|
||
|
|
const totalActive = storeQuery?.data?.totalActive;
|
||
|
|
const totalSent = storeQuery?.data?.totalSent;
|
||
|
|
const totalReceived = storeQuery?.data?.totalReceived;
|
||
|
|
const totalLost = storeQuery?.data?.totalLost;
|
||
|
|
|
||
|
|
if (storeQuery.isLoading) return <div className="p-4">Loading store data...</div>;
|
||
|
|
if (storeQuery.error) return <div className="p-4">Error: {storeQuery.error.message}</div>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-4">
|
||
|
|
<ul className="text-white space-y-3">
|
||
|
|
<VehicleSessionItem sessionNumber={totalActive} textColour="text-gray-400" vehicleTag={"Total Active:"} />
|
||
|
|
<VehicleSessionItem sessionNumber={totalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
|
||
|
|
<VehicleSessionItem sessionNumber={totalReceived} textColour="text-green-400" vehicleTag={"Total Received:"} />
|
||
|
|
<VehicleSessionItem sessionNumber={totalPending} textColour="text-amber-400" vehicleTag={"Total Pending:"} />
|
||
|
|
<VehicleSessionItem sessionNumber={totalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StoreFields;
|