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/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>