Removed generated css; Renamed SASS files that are @use only (imported) to have an _ prefix as per spec; Tried to customize the SMUI sass, but was having problems with compiling not finding the SMUI source files; Added initial cut of asset check out system.

imports/ui/Admin.svelte

@@ -6,22 +6,22 @@
 	import Students from "/imports/ui/Admin/Students.svelte";
 	import Staff from "/imports/ui/Admin/Staff.svelte";
 
-	let activeTab = null;
+	let activeTab = "Sites";
 </script>
 
 <div class="container">
-	<TabBar tabs={[{id:'sites', label:'Sites'}, {id:'students', label:'Students'}, {id:'staff', label:'Staff'}, {id:'assetTypes', label:'Asset Types'}]} minWidth let:tab bind:active={activeTab}>
+	<TabBar tabs={['Sites','Students','Staff','Asset Types']} minWidth let:tab bind:active={activeTab}>
 		<Tab {tab}>
-			<Label>{tab.label}</Label>
+			<Label>{tab}</Label>
 		</Tab>
 	</TabBar>
-	{#if activeTab && activeTab.id === 'sites'}
+	{#if activeTab === 'Sites'}
 		<Sites></Sites>
-	{:else if activeTab && activeTab.id === 'students'}
+	{:else if activeTab === 'Students'}
 		<Students></Students>
-	{:else if activeTab && activeTab.id === 'staff'}
+	{:else if activeTab === 'Staff'}
 		<Staff></Staff>
-	{:else if activeTab && activeTab.id === 'assetTypes'}
+	{:else if activeTab === 'Asset Types'}
 		<AssetTypes></AssetTypes>
 	{/if}
 </div>

imports/ui/Admin/Staff.svelte

@@ -172,7 +172,7 @@
 		<Content id="exportHelpContent">
 			<h3>Aeries</h3>
 			<p>For the Aeries system, log into your Aeries web interface and navigate to the query page.  Enter the following query (change PSC = 5 to your school's number):</p>
-			<pre style="font-size: 0.7rem"><code>LIST STF ID FN LN EM BY FN IF PSC = 5 AND TG # I</code></pre>
+			<pre style="font-size: 0.7rem"><code>LIST STF ID EM FN LN BY FN IF PSC = 5 AND TG # I</code></pre>
 			<p>Run the query and validate that all staff have an email address and a staff ID.  The `TG # I` hides staff that are inactive.</p>
 			<p>You have two options for export.  You can:</p>
 			<ol class="help">

imports/ui/Admin/Students.svelte

@@ -175,8 +175,11 @@
 		<Content id="exportHelpContent">
 			<h3>Aeries</h3>
 			<p>For the Aeries system, log into your Aeries web interface and navigate to the query page.  Enter the following query:</p>
+			<h4>Pre-Rollover</h4>
 			<pre style="font-size: 0.7rem"><code>LIST STU STU.ID STU.SEM STU.FN STU.LN STU.NG BY STU.ID STU.NG STU.SEM IF STU.NG &gt;= 7 AND NG &lt;= 12 AND STU.NS = 5</code></pre>
-			<p>Run the query and validate that all students have an email address and a student ID.  You likely also want to check that the student `next grade (NG)` field is set correctly for the students.</p>
+			<h4>Post-Rollover</h4>
+			<pre style="font-size: 0.7rem"><code>LIST STU STU.ID STU.SEM STU.FN STU.LN STU.NG BY STU.ID STU.NG STU.SEM IF STU.NG &gt;= 7 AND GR &lt;= 12 AND STU.SC = 5</code></pre>
+			<p>Run the query and validate that all students have an email address and a student ID.  You likely also want to check that the student `next grade (NG)` field is set correctly for the students (pre-rollover).</p>
 			<p>You have two options for export.  You can:</p>
 			<ol class="help">
 				<li class="help">Click the `Report` button to generate a TXT formatted report.  Use Single Spacing, Automatic Orientation and no page breaks.  The generated text is CSV but with a repeating collection of headers for each page.  The headers will be ignored.</li>

imports/ui/App.svelte

@@ -13,9 +13,9 @@
 	// When the URL changes, run the code... in this case to scroll to the top.
 	router.subscribe(_ => window.scrollTo(0, 0));
 
+	let canManageLaptops = false;
+	let isAdmin = false;
 	$: currentUser = useTracker(() => Meteor.user());
-	$: canManageLaptops = false;
-	$: isAdmin = false;
 
 	Tracker.autorun(() => {
 		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
@@ -65,9 +65,9 @@
 			{/if}
 			{#if canManageLaptops}
 				<a href="/users">Users</a>
+				<a href="/assets">Assets</a>
 			{/if}
 			{#if isAdmin}
-				<a href="/assets">Assets</a>
 				<a href="/admin">Admin</a>
 			{/if}
 		</nav>

imports/ui/Assets.svelte

@@ -5,12 +5,34 @@
 	import {onMount} from "svelte";
 	import AssetList from "/imports/ui/Assets/AssetList.svelte";
 	import AssetDataEntry from "/imports/ui/Assets/AssetDataEntry.svelte";
-	
-	let activeTab = null;
+	import {useTracker} from "meteor/rdb:svelte-meteor-data";
+	import Assign from "/imports/ui/Assets/Assign.svelte";
+
+	let canManageLaptops = false;
+	let isAdmin = false;
+	$: currentUser = useTracker(() => Meteor.user());
+
+	Tracker.autorun(() => {
+		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
+		let user = Meteor.user();
+		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
+		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
+	});
+
+	let tabs = [];
+
+	if(canManageLaptops) {
+		tabs.push({id: 'assignment', label: 'Assign'});
+	}
+	if(isAdmin) {
+		tabs.push({id: 'list', label: 'Asset List'});
+		tabs.push({id: 'entry', label: 'Data Entry'});
+	}
+	let activeTab = tabs[0];
 </script>
 
 <div class="container">
-	<TabBar tabs={[{id:'list', label:'Asset List'}, {id:'entry', label:'Data Entry'}]} minWidth let:tab bind:active={activeTab}>
+	<TabBar tabs={tabs} minWidth let:tab bind:active={activeTab}>
 		<Tab {tab}>
 			<Label>{tab.label}</Label>
 		</Tab>
@@ -19,6 +41,8 @@
 		<AssetList></AssetList>
 	{:else if activeTab && activeTab.id === 'entry'}
 		<AssetDataEntry></AssetDataEntry>
+	{:else if activeTab && activeTab.id === 'assignment'}
+		<Assign></Assign>
 	{/if}
 </div>
 

imports/ui/Assets/Assign.svelte

@@ -0,0 +1,72 @@
+<script>
+	import {Meteor} from "meteor/meteor";
+	import {onMount} from "svelte";
+	import {Sites} from "../../api/sites";
+	import GridTable from "./../GridTable.svelte";
+	import {writable} from "svelte/store";
+	import TextField from '@smui/textfield';
+	import HelperText from '@smui/textfield/helper-text';
+	import {Students} from "../../api/students";
+	import Select, { Option } from '@smui/select';
+	import Dialog, { Title, Content, Actions } from '@smui/dialog';
+	import Button, { Label } from '@smui/button';
+	import {Staff} from "/imports/api/staff";
+	import List, {Item, Graphic, Meta, Text, PrimaryText, SecondaryText} from '@smui/list';
+
+	onMount(async () => {
+		Meteor.subscribe('sites');
+	});
+	// Load the sites (reactive).
+	let sites = Sites.find({});
+	let selectedSiteId;
+	let assignees;
+	let siteSelectComponent;
+	let categories = ['Student', 'Staff'];
+	let selectedCategory = 'Student';
+	$: {
+		if(selectedSiteId) {
+			if(selectedCategory === 'Student') {
+				Meteor.subscribe('students', selectedSiteId);
+				assignees = Students.find({siteId: selectedSiteId});
+			}
+			else if(selectedCategory === 'Staff') {
+				Meteor.subscribe('staff', selectedSiteId);
+				assignees = Staff.find({siteId: selectedSiteId});
+			}
+		}
+	}
+	let selectedAssignee;
+</script>
+
+<div class="container">
+	<h1>Assign Assets</h1>
+
+	<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
+		{#each $sites as site}
+			<Option value={site._id}>{site.name}</Option>
+		{/each}
+	</Select>
+	
+	<Select bind:value={selectedCategory} label="Category">
+		{#each categories as category}
+			<Option value={category}>{category}</Option>
+		{/each}
+	</Select>
+	
+	<List twoLine singleSelection>
+		{#if $assignees}
+			{#each $assignees as assignee}
+				<Item on:SMUI:action={() => (selectedAssignee = assignee)} selected={selectedAssignee === assignee}>
+					<Text>
+						<PrimaryText>{assignee.firstName} {assignee.lastName}</PrimaryText>
+						<SecondaryText>{assignee.grade}</SecondaryText>
+					</Text>
+				</Item>
+			{/each}
+		{/if}
+	</List>
+</div>
+
+<style>
+	
+</style>