Capitalized usernames

src/lib/components/graph/graph.svelte

@@ -1,31 +0,0 @@
-<script>
-	import chartjs from 'chart.js/auto';
-	import { onMount } from 'svelte';
-
-	const chartValues = [20, 10, 5, 2, 20, 30, 45];
-	const chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-	let ctx;
-	let chartCanvas;
-	let chartData;
-
-	onMount(async (promise) => {
-		  ctx = chartCanvas.getContext('2d');
-			var chart = new chartjs(ctx, {
-				type: 'line',
-				data: {
-						labels: chartLabels,
-						datasets: [{
-								label: 'Revenue',
-								backgroundColor: 'rgb(255, 99, 132)',
-								borderColor: 'rgb(255, 99, 132)',
-								data: chartValues
-						}]
-				}
-		});
-
-	});
-</script>
-
-<div class="w-fill m-auto px-60  mt-10">
-	<canvas class="w-1/2" bind:this={chartCanvas} id="myChart"></canvas>
-</div>

src/lib/components/stats/used_licenses.svelte

@@ -0,0 +1,18 @@
+<script>
+    let total = "0";
+</script>
+
+<div class="rounded shadow-lg w-full bg-blue-500 text-white flex flex-col h-25">
+    <div class="w-full flex justify-between items-center p-4">
+        <div>
+            <h2 class="font-bold text-4xl">{total}</h2>
+            <h3 class="font-bold text-xl">Used Licenses</h3>
+        </div>
+        <div> 
+            <i class="fa-solid fa-ticket"></i>
+        </div>
+    </div>
+    <div class="w-full bg-blue-600 h-2 mt-auto rounded"> <!--Bottom bar of color-->
+
+    </div>
+</div>

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <!--apilicenses.mpe.ca/api/licenses-->
 <script>
 	import { onMount } from 'svelte';
+	import UsedLicenses from '$lib/components/stats/used_licenses.svelte';
 	import { createEventDispatcher } from 'svelte';
-	import Chart from '$lib/components/graph/graph.svelte'
 
 	let homeBase = "https://apilicenses.mpe.ca";
 
@@ -212,7 +212,7 @@
 			</div>
 			<div class="w-1/2 flex flex-row-reverse">
 				<div class="flex flex-col justify-center">
-					<h3 class="mr-1">{license.machine}</h3>
+					<h3 class="mr-1">{license.machine.toUpperCase()}</h3>
 				</div>
 			</div>
 		</div>