Updated meteor; Modified the assignments byPerson page considerably to improve the workflow; Added an external id to sites; Added an import for students; Improved the students page.

2023-06-16 11:52:48 -07:00
parent 9444cac85d
commit 3c76d5e6a0
15 changed files with 664 additions and 180 deletions
--- a/imports/ui/pages/Admin/Sites.jsx
+++ b/imports/ui/pages/Admin/Sites.jsx
@@ -28,14 +28,15 @@ const cssButtonContainer = {

 const SiteEditor = ({value, close}) => {
 	const [name, setName] = useState(value.name || "")
+	const [externalId, setExternalId] = useState(value.externalId || "")

 	const applyChanges = () => {
 		close()
 		//TODO Should invert this and only close if there was success on the server.
 		if(value._id)
-			Meteor.call("sites.update", value._id, name);
+			Meteor.call("sites.update", value._id, name, externalId);
 		else
-			Meteor.call("sites.add", name);
+			Meteor.call("sites.add", name, externalId);
 	}
 	const rejectChanges = () => {
 		close()
@@ -45,6 +46,7 @@ const SiteEditor = ({value, close}) => {
 		<div style={cssFieldContainer}>
 			<h1>Site Editor</h1>
 			<TextField style={cssEditorField} variant="standard" label="Name" value={name} onChange={(e) => {setName(e.target.value)}}/>
+			<TextField style={cssEditorField} variant="standard" label="External ID" value={externalId} onChange={(e) => {setExternalId(e.target.value)}}/>
 			<div style={cssButtonContainer}>
 				<Button variant="contained" className="button accept-button" onClick={applyChanges}>Accept</Button>
 				<Button variant="outlined" className="button reject-button" onClick={rejectChanges}>Reject</Button>
@@ -68,6 +70,10 @@ export default () => {
 			name: "Name",
 			value: (row) => row.name,
 		},
+		{
+			name: "External ID",
+			value: (row) => row.externalId,
+		},
 	]

 	const options = {
--- a/imports/ui/pages/Admin/Students.jsx
+++ b/imports/ui/pages/Admin/Students.jsx
@@ -9,6 +9,17 @@ import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import {Students} from "/imports/api/students";
 import {Sites} from "/imports/api/sites";
+import Box from "@mui/material/Box";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import ToggleButton from "@mui/material/ToggleButton";
+import {InputLabel, List, ListItemButton, ListItemText, Switch} from "@mui/material";
+import FormControl from "@mui/material/FormControl";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";

 const cssSitesSelect = {
 	margin: '0.6rem 0',
@@ -24,7 +35,7 @@ const cssFieldColumnContainer = {
 }
 const cssGridFieldContainer = {
 	display: 'grid',
-	gridTemplateColumns: "1fr 1fr 1fr",
+	gridTemplateColumns: "1fr 1fr 1fr 1fr",
 	columnGap: '1rem',
 	rowGap: '0.4rem',
 	marginBottom: '1.5rem'
@@ -39,8 +50,10 @@ const StudentEditor = ({value, close, defaultSiteId}) => {
 	const [email, setEmail] = useState(value.email || "")
 	const [id, setId] = useState(value.id || "")
 	const [firstName, setFirstName] = useState(value.firstName || "")
+	const [firstNameAlias, setFirstNameAlias] = useState(value.firstNameAlias || "")
 	const [lastName, setLastName] = useState(value.lastName || "")
 	const [grade, setGrade] = useState(value.grade || "")
+	const [active, setActive] = useState(value.active)
 	const [siteId, setSiteId] = useState(value.siteId ? value.siteId : defaultSiteId)

 	const {sites} = useTracker(() => {
@@ -57,9 +70,9 @@ const StudentEditor = ({value, close, defaultSiteId}) => {
 		close()
 		//TODO Should invert this and only close if there was success on the server.
 		if(value._id)
-			Meteor.call("students.update", value._id, id, firstName, lastName, email, siteId, grade);
+			Meteor.call("students.update", value._id, id, firstName, firstNameAlias, lastName, email, siteId, grade, active);
 		else
-			Meteor.call("students.add", id, firstName, lastName, email, siteId, grade);
+			Meteor.call("students.add", id, firstName, firstNameAlias, lastName, email, siteId, grade, active);
 	}
 	const rejectChanges = () => {
 		close()
@@ -72,7 +85,9 @@ const StudentEditor = ({value, close, defaultSiteId}) => {
 				<TextField variant="standard" label="ID" value={id} onChange={(e) => {setId(e.target.value)}}/>
 				<TextField variant="standard" label="Email" value={email} onChange={(e) => {setEmail(e.target.value)}}/>
 				<TextField variant="standard" label="Grade" value={grade} onChange={(e) => {setGrade(e.target.value)}}/>
+				<FormControlLabel control={<Switch variant="standard" checked={active} onChange={(e) => {setActive(e.target.checked)}}/>} label="Active"/>
 				<TextField variant="standard" label="First Name" value={firstName} onChange={(e) => {setFirstName(e.target.value)}}/>
+				<TextField variant="standard" label="Alias" value={firstNameAlias} onChange={(e) => {setFirstNameAlias(e.target.value)}}/>
 				<TextField variant="standard" label="Last Name" value={lastName} onChange={(e) => {setLastName(e.target.value)}}/>
 				<TextField select variant="standard" label="Site" value={siteId} onChange={(e) => {setSiteId(e.target.value)}}>
 					{sites.map((next, i) => {
@@ -103,8 +118,23 @@ export default () => {
 		return {sites}
 	});

+	const ACTIVE_BOTH = "both"
+	const ACTIVE_ONLY = "active"
+	const ACTIVE_OFF = "inactive"
+	const [active, setActive] = useState(ACTIVE_BOTH)
+	const [nameSearch, setNameSearch] = useState("")
+
 	const {students} = useTracker(() => {
 		const studentQuery = site === siteAll._id ? {} : {siteId: site}
+		
+		if(active !== ACTIVE_BOTH) {
+			studentQuery["active"] = active === ACTIVE_ONLY
+		}
+		
+		if(nameSearch && nameSearch.length > 2) {
+			studentQuery["$or"] = [{firstName: {$regex: nameSearch, $options: 'i'}}, {firstNameAlias: {$regex: nameSearch, $options: 'i'}}, {lastName: {$regex: nameSearch, $options: 'i'}}]
+		}
+		
 		let students = Students.find(studentQuery).fetch();

 		return {students}
@@ -132,6 +162,10 @@ export default () => {
 			name: "First Name",
 			value: (row) => row.firstName,
 		},
+		{
+			name: "Alias",
+			value: (row) => row.firstNameAlias,
+		},
 		{
 			name: "Last Name",
 			value: (row) => row.lastName,
@@ -149,6 +183,10 @@ export default () => {
 				else return 1
 			}
 		},
+		{
+			name: "Active",
+			value: (row) => row.active ? "Active" : "Inactive",
+		},
 	]

 	const options = {
@@ -162,14 +200,81 @@ export default () => {
 			}
 		}
 	}
+	
+	const importData = (type) => {
+		let input = document.createElement('input')
+		input.type = 'file'
+		input.onchange = _ => {
+			let files = Array.from(input.files)

+			if(files.length === 1) {
+				let reader = new FileReader()
+				reader.onload = () => {
+					Meteor.call("students.loadCsv", reader.result, type, testImportOnly, (err, result) => {
+						//Note: It would be nice to have feedback about the operation, but right now I cannot figure out how to wait on the server for the result of the callback that is wrapped by a bindEnvironment call.
+						if(err) console.log(err)
+						// else if(testImportOnly) console.log(result)
+					})
+				}
+				reader.readAsText(input.files[0])
+			}
+		}
+		input.click()
+	}
+	
+	const [showImportDialog, setShowImportDialog] = useState(false)
+	const [testImportOnly, setTestImportOnly] = useState(false)
+	
+	const openImportDialog = () => {
+		setTestImportOnly(false)
+		setShowImportDialog(true)
+	}
+	const closeImportDialog = (cause, importType) => {
+		if(importType) importData(importType)
+
+		if(showImportDialog) setShowImportDialog(false)
+	}
+	
 	return (
 		<>
-			<TextField label="Site" style={cssSitesSelect} select variant="standard" value={site} onChange={(e)=>{setSite(e.target.value)}}>
-				{sites.map((next, i) => {
-					return <MenuItem key={next._id} value={next._id}>{next.name}</MenuItem>
-				})}
-			</TextField>
+			<Dialog open={showImportDialog}>
+				<DialogTitle>Import</DialogTitle>
+				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
+					<p>Imports students for the entire district and deals with altering the "active" flag for students no longer in the district or who have graduated.</p>
+					<h3>Middle of Year</h3>
+					<pre>LIST STU SC ID SEM FN LN GR FNA</pre>
+					<p>Run any time during the year to capture changes in student body.</p>
+					<h3>End of Year</h3>
+					<pre>LIST STU NS ID SEM FN LN NG FNA IF NG &gt;= 12</pre>
+					<p>Use this query for the import if the school year is over (before summer school).  It utilizes the next school &amp; next grade fields instead of the current grade/school.</p>
+					<FormControlLabel control={<Checkbox checked={testImportOnly} onChange={(e) => setTestImportOnly(e.target.checked)}/>} label="Test Only"/>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={() => closeImportDialog("button")}>Cancel</Button>
+					<Button onClick={() => closeImportDialog("button", 'csv')}>Import CSV</Button>
+					<Button onClick={() => closeImportDialog("button", 'aeries-txt')}>Import Aeries TXT</Button>
+				</DialogActions>
+			</Dialog>
+			
+			<Box component="div" sx={{m: 2, p: 2, border: '1px dashed grey'}}>
+				<TextField label="Site" style={cssSitesSelect} select variant="standard" value={site} onChange={(e)=>{setSite(e.target.value)}}>
+					{sites.map((next, i) => {
+						return <MenuItem key={next._id} value={next._id}>{next.name}</MenuItem>
+					})}
+				</TextField>
+				<Box component="div" sx={{display: "inline-block", marginLeft: "2rem"}}>
+					<InputLabel htmlFor="activeGroup" sx={{fontSize: "0.8rem"}}>Active Students</InputLabel>
+					<ToggleButtonGroup id="activeGroup" color="primary" value={active} exclusive onChange={(e)=>{setActive(e.target.value)}} aria-label="Active Students">
+						<ToggleButton value={ACTIVE_BOTH}>All</ToggleButton>
+						<ToggleButton value={ACTIVE_ONLY}>Active</ToggleButton>
+						<ToggleButton value={ACTIVE_OFF}>Inactive</ToggleButton>
+					</ToggleButtonGroup>
+				</Box>
+				<TextField sx={{margin: "0.7rem 0 0 2rem"}} variant="standard" label="Name Search" value={nameSearch} onChange={(e) => {setNameSearch(e.target.value)}}/>
+				<Box component="div" sx={{display: "inline-block", float: "right", marginTop: "1rem"}}>
+					<Button variant="contained" color='secondary' className="button" onClick={openImportDialog}>Import</Button>
+				</Box>
+			</Box>
 			<SimpleTable rows={students} columns={columns} options={options}/>
 		</>
 	)
--- a/imports/ui/pages/Assignments.jsx
+++ b/imports/ui/pages/Assignments.jsx
@@ -24,6 +24,15 @@ export default () => {
 			path: '/byAsset',
 			href: 'byAsset'
 		},
+		{
+			title: "Report",
+			getElement: () => {
+				const AssignmentsReport = lazy(()=>import('./Assignments/Report'))
+				return <AssignmentsReport/>
+			},
+			path: '/report',
+			href: 'report'
+		},
 	]

 	return <TabNav tabs={tabs}/>
--- a/imports/ui/pages/Assignments/ByAsset.jsx
+++ b/imports/ui/pages/Assignments/ByAsset.jsx
@@ -42,6 +42,7 @@ const AssignmentsByAsset = () => {

 	//Dialog stuff.
 	const [openUnassignDialog, setOpenUnassignDialog] = useState(false)
+	const [unassignDialogEditConditionOnly, setUnassignDialogEditConditionOnly] = useState(false)
 	const [unassignCondition, setUnassignCondition] = useState(conditions[2])
 	const [unassignComment, setUnassignComment] = useState("")
 	const [unassignConditionDetails, setUnassignConditionDetails] = useState("")
@@ -71,8 +72,9 @@ const AssignmentsByAsset = () => {
 	// 	if(assetIdInput) assetIdInput.focus()
 	// })

-	const unassign = () => {
+	const unassign = (editConditionOnly) => {
 		// Open the dialog to get condition and comment.
+		setUnassignDialogEditConditionOnly(editConditionOnly)
 		setUnassignComment("")
 		setUnassignCondition(foundAsset.condition ? foundAsset.condition : conditions[2])
 		setUnassignConditionDetails(foundAsset.conditionDetails || "")
@@ -82,18 +84,26 @@ const AssignmentsByAsset = () => {
 		setOpenUnassignDialog(false)

 		if(unassign === true) {
-			// Call assets.unassign(assetId, comment, condition, conditionDetails, date)
-			Meteor.call('assets.unassign', foundAsset.assetId, unassignComment, unassignCondition, unassignConditionDetails, (err, result) => {
-				if(err) console.error(err)
-				else if(assetIdInput) assetIdInput.focus()
-			})
+			if(unassignDialogEditConditionOnly) {
+				Meteor.call('assets.updateCondition', unassignAsset._id, unassignCondition, unassignConditionDetails, (err, result) => {
+					if(err) console.error(err)
+					else if(assetIdInput) assetIdInput.focus()
+				})
+			}
+			else {
+				// Call assets.unassign(assetId, comment, condition, conditionDetails, date)
+				Meteor.call('assets.unassign', foundAsset.assetId, unassignComment, unassignCondition, unassignConditionDetails, (err, result) => {
+					if (err) console.error(err)
+					else if (assetIdInput) assetIdInput.focus()
+				})
+			}
 		}
 	}

 	return (
 		<>
 			<Dialog open={openUnassignDialog} onClose={unassignDialogClosed}>
-				<DialogTitle>Unassign Asset</DialogTitle>
+				<DialogTitle>{unassignDialogEditConditionOnly ? "Edit Condition" : "Unassign Asset"}</DialogTitle>
 				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
 					<div>
 						<TextField style={cssEditorField} select variant="standard" label="Condition" value={unassignCondition} onChange={(e)=>{setUnassignCondition(e.target.value)}}>
@@ -102,11 +112,11 @@ const AssignmentsByAsset = () => {
 							})}
 						</TextField>
 					</div>
-					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Comment" value={unassignComment} onChange={(e) => {setUnassignComment(e.target.value)}}/>
+					{!unassignDialogEditConditionOnly && <TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Comment" value={unassignComment} onChange={(e) => {setUnassignComment(e.target.value)}}/>}
 					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} multiline rows={4} variant="outlined" label="Condition Details" value={unassignConditionDetails} onChange={(e) => {setUnassignConditionDetails(e.target.value)}}/>
 				</DialogContent>
 				<DialogActions>
-					<Button onClick={() => unassignDialogClosed(true)}>Unassign</Button>
+					<Button onClick={() => unassignDialogClosed(true)}>{unassignDialogEditConditionOnly ? "Save" : "Unassign"}</Button>
 					<Button onClick={() => unassignDialogClosed(false)}>Cancel</Button>
 				</DialogActions>
 			</Dialog>
@@ -123,7 +133,9 @@ const AssignmentsByAsset = () => {
 						<>
 							<div>Assigned on: {foundAsset.assignmentDate.toString()}</div>
 							<div>Assigned to: {foundAsset.assignee.firstName} {foundAsset.assignee.lastName} {foundAsset.assignee.grade && foundAsset.assignee.grade} (<Link to={"/search?email=" + encodeURIComponent(foundAsset.assignee.email)}>{foundAsset.assignee.email}</Link>)</div>
-							<Button variant="contained" color='secondary' className="button" onClick={()=>unassign()}>Unassign</Button>
+							<Button variant="contained" color='secondary' className="button" onClick={()=>unassign(false)}>Unassign</Button>
+							{"  "}
+							<Button variant="contained" color='secondary' className="button" onClick={()=>unassign(true)}>Edit</Button>
 						</>
 					)}
 				</div>
--- a/imports/ui/pages/Assignments/ByPerson.jsx
+++ b/imports/ui/pages/Assignments/ByPerson.jsx
@@ -6,7 +6,7 @@ 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 {InputLabel, List, ListItem, ListItemButton, ListItemText, Switch} from "@mui/material";
 import Box from "@mui/material/Box";
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -19,7 +19,9 @@ import {Assets, conditions} 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";
+import {Link, useLocation, useNavigate, useNavigationType} from "react-router-dom";
+import { Action as NavigationType } from "@remix-run/router";
+import FormControlLabel from "@mui/material/FormControlLabel";

 const cssTwoColumnContainer = {
 	display: 'grid',
@@ -32,10 +34,15 @@ const cssEditorField = {
 }

 const AssignmentsByPerson = () => {
-	const theme = useTheme();
-	const [searchType, setSearchType] = useState("Email")
-	const [search, setSearch] = useState("")
-	const [selectedPerson, setSelectedPerson] = useState("")
+	const navigate = useNavigate()
+	const navigateType = useNavigationType()
+	const location = useLocation()
+	const state = location.state
+	const theme = useTheme()
+	// const [searchType, setSearchType] = useState("Email")
+	const [search, setSearch] = useState(state && state.search ? state.search : "")
+	const [includeInactive, setIncludeInactive] = useState(false)
+	const [selectedPerson, setSelectedPerson] = useState(state && state.person ? state.person : "")
 	const [assetId, setAssetId] = useState("")
 	const [openAssignDialog, setOpenAssignDialog] = useState(false)
 	const [assignCondition, setAssignCondition] = useState(conditions[2])
@@ -43,6 +50,7 @@ const AssignmentsByPerson = () => {
 	
 	//Dialog stuff.
 	const [openUnassignDialog, setOpenUnassignDialog] = useState(false)
+	const [unassignDialogEditConditionOnly, setUnassignDialogEditConditionOnly] = useState(false)
 	const [unassignCondition, setUnassignCondition] = useState(conditions[2])
 	const [unassignComment, setUnassignComment] = useState("")
 	const [unassignConditionDetails, setUnassignConditionDetails] = useState("")
@@ -56,13 +64,17 @@ const AssignmentsByPerson = () => {
 		if(search && search.length > 1) {
 			let query;
 			
-			if(searchType === "Email") {
-				query = {email: {$regex: search, $options: 'i'}};
-			} else if(searchType === 'First Name') {
-				query = {firstName: {$regex: search, $options: 'i'}}
-			} else {
-				query = {lastName: {$regex: search, $options: 'i'}}
-			}
+			query = {$or: [{email: {$regex: search, $options: 'i'}}, {firstName: {$regex: search, $options: 'i'}}, {firstNameAlias: {$regex: search, $options: 'i'}}, {lastName: {$regex: search, $options: 'i'}}]}
+			// if(searchType === "Email") {
+			// 	query = {email: {$regex: search, $options: 'i'}};
+			// } else if(searchType === 'First Name') {
+			// 	query = {firstName: {$regex: search, $options: 'i'}}
+			// } else {
+			// 	query = {lastName: {$regex: search, $options: 'i'}}
+			// }
+			
+			// Look for students/staff that are active or whose active flag is not set.
+			if(!includeInactive) query = {$and: [query, {$or: [{active: true}, {active: {$exists: false}}]}]}
 			
 			const students = Students.find(query).fetch();
 			const staff = Staff.find(query).fetch();
@@ -143,8 +155,9 @@ const AssignmentsByPerson = () => {
 	// 	if(assetIdInput) assetIdInput.focus()
 	// })
 	
-	const unassign = (asset) => {
+	const unassign = (asset, editConditionOnly) => {
 		// Open the dialog to get condition and comment.
+		setUnassignDialogEditConditionOnly(editConditionOnly)
 		setUnassignAsset(asset);
 		setUnassignComment("")
 		setUnassignCondition(asset.condition ? asset.condition : conditions[2])
@@ -155,11 +168,19 @@ const AssignmentsByPerson = () => {
 		setOpenUnassignDialog(false)

 		if(unassign === true) {
-			// Call assets.unassign(assetId, comment, condition, conditionDetails, date)
-			Meteor.call('assets.unassign', unassignAsset.assetId, unassignComment, unassignCondition, unassignConditionDetails, (err, result) => {
-				if(err) console.error(err)
-				else if(assetIdInput) assetIdInput.focus()
-			})
+			if(unassignDialogEditConditionOnly) {
+				Meteor.call('assets.updateCondition', unassignAsset._id, unassignCondition, unassignConditionDetails, (err, result) => {
+					if(err) console.error(err)
+					else if(assetIdInput) assetIdInput.focus()
+				})
+			}
+			else {
+				// Call assets.unassign(assetId, comment, condition, conditionDetails, date)
+				Meteor.call('assets.unassign', unassignAsset.assetId, unassignComment, unassignCondition, unassignConditionDetails, (err, result) => {
+					if(err) console.error(err)
+					else if(assetIdInput) assetIdInput.focus()
+				})
+			}
 		}
 	}

@@ -171,6 +192,20 @@ const AssignmentsByPerson = () => {
 		userSelect: 'none',
 		// '&:nthChild(even)': {backgroundColor: '#935e5e'}
 	}
+
+	const changeSelectedPerson = (person) => {
+		setSelectedPerson(person)
+		navigate("/assignments", {replace: false, state: {person, search}});
+	}
+	useEffect(() => {
+		if(!state) navigate("/assignments/byPerson", {replace: true, state: {search: "", person: null}})
+		else {
+			if(navigateType === NavigationType.Pop) {
+				setSearch(state.search)
+				setSelectedPerson(state.person)
+			}
+		}
+	})
 	
 	return (
 		<>
@@ -193,7 +228,7 @@ const AssignmentsByPerson = () => {
 			</Dialog>
 			
 			<Dialog open={openUnassignDialog} onClose={unassignDialogClosed}>
-				<DialogTitle>Unassign Asset</DialogTitle>
+				<DialogTitle>{unassignDialogEditConditionOnly ? "Edit Condition" : "Unassign Asset"}</DialogTitle>
 				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
 					<div>
 						<TextField style={cssEditorField} select variant="standard" label="Condition" value={unassignCondition} onChange={(e)=>{setUnassignCondition(e.target.value)}}>
@@ -202,47 +237,51 @@ const AssignmentsByPerson = () => {
 							})}
 						</TextField>
 					</div>
-					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Comment" value={unassignComment} onChange={(e) => {setUnassignComment(e.target.value)}}/>
+					{!unassignDialogEditConditionOnly && <TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Comment" value={unassignComment} onChange={(e) => {setUnassignComment(e.target.value)}}/>}
 					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} multiline rows={4} variant="outlined" label="Condition Details" value={unassignConditionDetails} onChange={(e) => {setUnassignConditionDetails(e.target.value)}}/>
 				</DialogContent>
 				<DialogActions>
-					<Button onClick={() => unassignDialogClosed(true)}>Unassign</Button>
+					<Button onClick={() => unassignDialogClosed(true)}>{unassignDialogEditConditionOnly ? "Save" : "Unassign"}</Button>
 					<Button onClick={() => unassignDialogClosed(false)}>Cancel</Button>
 				</DialogActions>
 			</Dialog>
 			
-			<Box style={{marginTop: '1rem',...cssTwoColumnContainer}}>
-				<ToggleButtonGroup color="primary" value={searchType} exclusive onChange={(e, type)=>setSearchType(type)} aria-label="Search Type">
-					<ToggleButton value="Email">Email</ToggleButton>
-					<ToggleButton value="First Name">First Name</ToggleButton>
-					<ToggleButton value="Last Name">Last Name</ToggleButton>
-				</ToggleButtonGroup>
+			<Box style={{margin: '1rem 0 0 0', padding: '0 1rem',...cssTwoColumnContainer, width: "24rem"}}>
+				{/*<ToggleButtonGroup color="primary" value={searchType} exclusive onChange={(e, type)=>setSearchType(type)} aria-label="Search Type">*/}
+				{/*	<ToggleButton value="Email">Email</ToggleButton>*/}
+				{/*	<ToggleButton value="First Name">First Name</ToggleButton>*/}
+				{/*	<ToggleButton value="Last Name">Last Name</ToggleButton>*/}
+				{/*</ToggleButtonGroup>*/}
+				<FormControlLabel sx={{marginTop: '0.7rem'}} control={<Switch variant="standard" checked={includeInactive} onChange={(e) => {setIncludeInactive(e.target.checked)}}/>} label="Inactive"/>
 				<TextField style={cssEditorField} variant="standard" label="Search" value={search} onChange={(e) => {setSearch(e.target.value)}}/>
 			</Box>
-			<Box style={cssTwoColumnContainer}>
-				<div style={{maxHeight: '26rem', overflowY:'auto', minWidth: '10rem', minHeight: '10rem'}}>
+			<Box style={{...cssTwoColumnContainer, gridTemplateColumns: "24rem 1fr"}}>
+				<div style={{maxHeight: '26rem', overflowY:'auto', minWidth: '10rem', minHeight: '10rem', maxWidth: '40rem'}}>
 					<List>
 						{people.map((next, i) => {
 							return (
-								<ListItemButton key={next._id} style={getListItemStyle(next)} selected={selectedPerson === next} onClick={(e) => {setSelectedPerson(next)}}>
-									<ListItemText primary={next.firstName + " " + next.lastName} secondary={next.email}/>
+								<ListItemButton key={next._id} style={getListItemStyle(next)} selected={selectedPerson === next} onClick={(e) => {changeSelectedPerson(next)}}>
+									<ListItemText primary={next.firstName + " " + (next.firstNameAlias ? "'" + next.firstNameAlias + "' " : "") + next.lastName + (next.grade ? " (" + next.grade + ")" : "")} secondary={next.email}/>
 								</ListItemButton>
 							)
 						})}
 					</List>
 				</div>
-				<div style={{display: 'flex', flexDirection: 'column', margin: '1rem 0 0 .5rem'}}>
+				<div style={{display: 'flex', flexDirection: 'column', margin: '0 0 0 .5rem'}}>
 					{selectedPerson && (
-						<div style={cssAssetTile}>
-							<div style={{marginBottom: '1rem'}}><TextField id='assetIdInput' inputRef={input=>setAssetIdInput(input)} style={cssEditorField} variant="standard" label="Asset ID" value={assetId} onChange={(e) => {setAssetId(e.target.value.toUpperCase())}}/></div>
-							<div>{foundAsset && foundAsset.assetType.name}</div>
-							<div>{foundAsset && <Link to={"/search?assetId=" + encodeURIComponent(foundAsset.assetId)}>{foundAsset.assetId}</Link>}</div>
-							<div>{foundAsset && <Link to={"/search?serial=" + encodeURIComponent(foundAsset.serial)}>{foundAsset.serial}</Link>}</div>
-							{foundAsset && foundAsset.assignee && (
-								<div>Assigned To: {foundAsset.assignee.firstName} {foundAsset.assignee.lastName}</div>
-							)}
-							<Button variant="contained" color='primary' className="button" disabled={!foundAsset || foundAsset.assignee !== undefined} onClick={()=>assign()}>Assign</Button>
-						</div>
+						<>
+							<h3 style={{margin: "0 0 0.5rem 0"}}>{selectedPerson.firstName + " " + (selectedPerson.firstNameAlias ? "'" + selectedPerson.firstNameAlias + "' " : "") + selectedPerson.lastName + (selectedPerson.grade ? " (" + selectedPerson.grade + ")" : "")}</h3>
+							<div style={{...cssAssetTile, paddingTop: "0"}}>
+								<div style={{marginBottom: '1rem'}}><TextField id='assetIdInput' inputRef={input=>setAssetIdInput(input)} style={cssEditorField} variant="standard" label="Asset ID" value={assetId} onChange={(e) => {setAssetId(e.target.value.toUpperCase())}}/></div>
+								<div>{foundAsset && foundAsset.assetType.name}</div>
+								<div>{foundAsset && <Link to={"/search?assetId=" + encodeURIComponent(foundAsset.assetId)}>{foundAsset.assetId}</Link>}</div>
+								<div>{foundAsset && <Link to={"/search?serial=" + encodeURIComponent(foundAsset.serial)}>{foundAsset.serial}</Link>}</div>
+								{foundAsset && foundAsset.assignee && (
+									<div>Assigned To: {foundAsset.assignee.firstName} {foundAsset.assignee.lastName}</div>
+								)}
+								<Button variant="contained" color='primary' className="button" disabled={!foundAsset || foundAsset.assignee !== undefined} onClick={()=>assign()}>Assign</Button>
+							</div>
+						</>
 					)}
 					{assets.map((next, i) => {
 						return (
@@ -250,7 +289,9 @@ const AssignmentsByPerson = () => {
 								<div>{next.assetType.name}</div>
 								<div><Link to={"/search?assetId=" + encodeURIComponent(next.assetId)}>{next.assetId}</Link></div>
 								<div><Link to={"/search?serial=" + encodeURIComponent(next.serial)}>{next.serial}</Link></div>
-								<Button variant="contained" color='secondary' className="button" onClick={()=>unassign(next)}>Unassign</Button>
+								<Button variant="contained" color='secondary' className="button" onClick={()=>unassign(next, false)}>Unassign</Button>
+								{"  "}
+								<Button variant="contained" color='secondary' className="button" onClick={()=>unassign(next, true)}>Edit</Button>
 							</div>
 						)
 					})}
--- a/imports/ui/pages/Assignments/Report.jsx
+++ b/imports/ui/pages/Assignments/Report.jsx
@@ -0,0 +1,168 @@
+import {Meteor} from "meteor/meteor";
+import React from "react";
+import {useTheme} from "@mui/material/styles";
+import {useTracker} from "meteor/react-meteor-data";
+import {AssetTypes} from "/imports/api/asset-types";
+import {Assets} from "/imports/api/assets";
+import {Students} from "/imports/api/students";
+import {Staff} from "/imports/api/staff";
+import SimpleTable from "/imports/ui/util/SimpleTable";
+import moment from "moment";
+import {Box, Grid} from "@mui/material";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import Button from "@mui/material/Button";
+
+const AssignmentsReport = () => {
+	const theme = useTheme();
+
+	const {people} = useTracker(() => {
+		let assets = Assets.find({assigneeId: {$exists: true}, assigneeType: "Student"}).fetch()
+		let assetTypes = AssetTypes.find().fetch()
+		let students = Students.find().fetch()
+		let people = []
+
+		let assetTypesById = assetTypes.reduce((map, obj) => {map[obj._id] = obj; return map}, {})
+		let studentsById = students.reduce((map, obj) => {map[obj._id] = obj; return map}, {})
+		// let staffById = staff.reduce((map, obj) => {map[obj._id] = obj; return map}, {})
+
+		for(let next of assets) {
+			let student = studentsById[next.assigneeId]
+			let assetType = assetTypesById[next.assetTypeId]
+			
+			people.push({_id: next._id, firstName: student.firstName, lastName: student.lastName, grade: student.grade, assetName: assetType.name, checkOutDate: next.assignmentDate, condition: next.condition, assetTag: next.assetId})
+		}
+		
+		people.sort((a, b) => {
+			let firstName = a.firstName.localeCompare(b.firstName)
+			let lastName = a.lastName.localeCompare(b.lastName)
+			
+			return a.grade === b.grade ? lastName ? lastName : firstName : b.grade - a.grade
+		})
+		
+		return {people}
+	});
+	
+	const exportData = () => {
+		let csv
+		
+		for(let next of people) {
+			if(csv) csv += "\r\n"
+			else csv = "First Name;Last Name;Grade;Asset Name;Check Out Date;Condition;Asset Tag\r\n"
+			
+			csv += next.firstName + ";" + next.lastName + ";" + next.grade + ";" + next.assetName + ";" + next.checkOutDate + ";" + next.condition + ";" + next.assetTag + ";"
+		}
+		
+		let blob = new Blob([csv], {type: 'text/csv'})
+		let a = document.createElement('a')
+		a.download = 'export.csv'
+		a.href = window.URL.createObjectURL(blob)
+		a.click()
+	}
+
+	// const {checkedOutAssets} = useTracker(() => {
+	// 	let assets = Assets.find({assigneeId: {$exists: true}}).fetch()
+	// 	let assetTypes = AssetTypes.find().fetch()
+	// 	let students = Students.find().fetch()
+	// 	let staff = Staff.find().fetch()
+	//	
+	// 	let assetTypesById = assetTypes.reduce((map, obj) => {map[obj._id] = obj; return map}, {})
+	// 	let studentsById = students.reduce((map, obj) => {map[obj._id] = obj; return map}, {})
+	// 	let staffById = staff.reduce((map, obj) => {map[obj._id] = obj; return map}, {})
+	//	
+	// 	for(let next of assets) {
+	// 		next.assetType = assetTypesById[next.assetTypeId]
+	// 		if(next.assigneeType === "Staff")
+	// 			next.person = staffById[next.assigneeId]
+	// 		else
+	// 			next.person = studentsById[next.assigneeId]
+	// 	}
+	//
+	// 	let checkedOutAssets = [];
+	//
+	// 	for(let next of assets) {
+	// 		if(next.assigneeType === "Student") {
+	// 			checkedOutAssets.push(next);
+	// 		}
+	// 	}
+	//
+	// 	return {checkedOutAssets}
+	// });
+
+	// people.push({firstName: student.firstName, lastName: student.lastName, grade: student.grade, assetName: assetType.name, checkOutDate: next.assignmentDate, condition: next.condition, assetTag: next.assetTag})
+	const columns = [
+		{
+			name: "First Name",
+			//value: (checkedOutAsset) => checkedOutAsset.person ? checkedOutAsset.person.firstName : ""
+			value: (next) => next.firstName
+		},
+		{
+			name: "Last Name",
+			// value: (checkedOutAsset) => checkedOutAsset.person ? checkedOutAsset.person.lastName : ""
+			value: (next) => next.lastName
+		},
+		{
+			name: "Grade",
+			value: (next) => next.grade,
+		},
+		{
+			name: "Asset",
+			value: (next) => next.assetName,
+		},
+		{
+			name: "Asset Tag",
+			value: (next) => next.assetTag,
+		},
+		{
+			name: "Checkout Date",
+			value: (next) => moment(next.assignmentDate).format("YYYY-MM-DD"),
+		},
+		{
+			name: "Condition",
+			value: (next) => next.condition,
+		},
+	]
+
+	const options = {
+		key: (row) => row._id,
+		// editor: (row, close) => {return (<AssetTypeEditor value={row} close={close}/>)},
+		add: false,
+		maxHeight: '40rem',
+		keyHandler: (e, selected) => {
+			// if(selected && selected._id && e.key === "Delete") {
+			// 	Meteor.call("assetTypes.remove", selected._id);
+			// }
+		}
+	}
+	
+	return (
+		<>
+			
+			<Box component="div" sx={{m: 2, p: 2, border: '1px dashed grey'}}>
+				<Button variant="contained" color='secondary' className="button" onClick={()=>exportData()}>Export</Button>
+			{/*	<h4 style={{margin: 0, padding: 0}}>Filter</h4>*/}
+			{/*	<Grid container spacing={2}>*/}
+			{/*		<Grid item xs={4}>*/}
+			{/*			<TextField style={cssEditorField} select variant="standard" value={assetTypeId} onChange={(e)=>{setAssetTypeId(e.target.value)}} label="Grade">*/}
+			{/*				{assetTypes.map((assetType, i) => {*/}
+			{/*					return <MenuItem key={i} value={assetType._id}>{assetType.name}</MenuItem>*/}
+			{/*				})}*/}
+			{/*			</TextField>*/}
+			{/*		</Grid>*/}
+			{/*	</Grid>*/}
+			</Box>
+			<SimpleTable rows={people} columns={columns} options={options}/>
+		</>
+	)
+}
+
+export default () => {
+	Meteor.subscribe('students');
+	Meteor.subscribe('staff');
+	Meteor.subscribe('assetTypes');
+	Meteor.subscribe('assets');
+
+	return (
+		<AssignmentsReport/>
+	)
+}
--- a/imports/ui/pages/Home.jsx
+++ b/imports/ui/pages/Home.jsx
@@ -15,7 +15,7 @@ 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} from "/imports/api/assets";
+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";
@@ -34,6 +34,21 @@ const cssEditorField = {
 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 = [];

@@ -54,16 +69,32 @@ const Statistics = () => {
 	
 	return (
 		<>
-			<h1>Missing Equipment</h1>
-			<List>
-				{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 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>
 		</>
 	)
 }