Tempest/imports/ui/pages/Home.jsx

import { Meteor } from 'meteor/meteor';
import React, { useState, useEffect } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { useTheme } from '@mui/material/styles';
import _ from 'lodash';
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import MenuItem from '@mui/material/MenuItem';
import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
import Box from "@mui/material/Box";
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {Assets, conditions, functionalConditions} from "/imports/api/assets";
import {AssetTypes} from "/imports/api/asset-types";
import {Students} from "/imports/api/students";
import {Staff} from "/imports/api/staff";
import {Link} from "react-router-dom";

const cssTwoColumnContainer = {
	display: 'grid',
	gridTemplateColumns: "1fr 1fr",
	columnGap: '1rem',
	rowGap: '0.4rem',
}
const cssEditorField = {
	minWidth: '10rem'
}

const Statistics = () => {
	const [selectedMissingAsset, setSelectedMissingAsset] = useState("")
	
	const {assetStatistics} = useTracker(() => {
		let assetStatistics = []
		const assetTypes = AssetTypes.find({}, {year: 1}).fetch()
		
		for(let type of assetTypes) {
			let count = Assets.find({assetTypeId: type._id, condition: {$in: functionalConditions}}).count()
			
			if(count > 0) {
				assetStatistics.push({name: type.name, count})
			}
		}
		
		return {assetStatistics}
	})
	
	const {missingAssets} = useTracker(() => {
		let missingAssets = [];

		missingAssets = Assets.find({condition: 'Missing'}).fetch();

		for(let next of missingAssets) {
			next.assetType = AssetTypes.findOne({_id: next.assetTypeId})
		}

		return {missingAssets}
	});

	const getListItemStyle = (item) => {
		return {
			backgroundColor: selectedMissingAsset === item ? '#EECFA6' : 'white'
		}
	}
	
	return (
		<>
			<div style={{display: 'flex', flexFlow: 'row wrap', justifyContent: 'center', alignItems: 'flex-start', columnGap: '1rem'}}>
				<div>
					<h1>Equipment Counts</h1>
					<List sx={{overflow: "auto", maxHeight: "30rem", position: "relative", width: "30rem", border: "1px solid #999", marginBottom: "2rem"}}>
						{assetStatistics.map((next, i) => {
							return (
								<ListItem key={next.name} style={getListItemStyle(next)}>
									<ListItemText primary={next.name} secondary={next.count}/>
								</ListItem>
							)
						})}
					</List>
				</div>
				<div>
					<h1>Missing Equipment</h1>
					<List sx={{overflow: "auto", maxHeight: "30rem", position: "relative", width: "30rem", border: "1px solid #999", marginBottom: "2rem"}}>
						{missingAssets.map((next, i) => {
							return (
								<ListItemButton key={next._id} style={getListItemStyle(next)} selected={selectedMissingAsset === next} onClick={(e) => {setSelectedMissingAsset(next)}}>
									<ListItemText primary={next.assetId} secondary={next.assetType.name}/>
								</ListItemButton>
							)
						})}
					</List>
				</div>
			</div>
		</>
	)
}

export default () => {
	// Meteor.subscribe('students');
	// Meteor.subscribe('staff');
	Meteor.subscribe('assetTypes');
	Meteor.subscribe('assets');

	return (
		<Statistics/>
	)
}