ui: ui for dashboard widgets

apps/front/package.json

@@ -14,6 +14,7 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
+		"pnpm": "^8.15.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",

apps/front/pnpm-lock.yaml

@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  pnpm:
+    specifier: ^8.15.0
+    version: 8.15.0
+
 devDependencies:
   '@sveltejs/adapter-auto':
     specifier: ^3.0.0
@@ -2065,6 +2070,12 @@ packages:
       pathe: 1.1.2
     dev: true
 
+  /pnpm@8.15.0:
+    resolution: {integrity: sha512-6kVRfVKF0SPqwCw3k1Bfof1tqQovxg0ejZ4MHpKSiG7Pr/UT8GK50cyAIbuGFQM7GsW+o7LuP8FlptcDS75rAw==}
+    engines: {node: '>=16.14'}
+    hasBin: true
+    dev: false
+
   /postcss-import@15.1.0(postcss@8.4.33):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}

apps/front/src/routes/+layout.svelte

@@ -77,8 +77,9 @@
 
 					<!-- Sidebar component, swap this element with another sidebar if you like -->
 					<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
-						<div class="flex h-16 shrink-0 items-center">
+						<div class="flex gap-4 h-16 shrink-0 items-center">
 							<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
+							<h3 class="text-white">JB Lux</h3>
 						</div>
 						<nav class="flex flex-1 flex-col">
 							<ul role="list" class="flex flex-1 flex-col gap-y-7">
@@ -180,8 +181,9 @@
 		<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
 			<!-- Sidebar component, swap this element with another sidebar if you like -->
 			<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
-				<div class="flex h-16 shrink-0 items-center">
+				<div class="flex gap-4 h-16 shrink-0 items-center">
 					<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
+					<h3 class="text-white">JB Lux</h3>
 				</div>
 				<nav class="flex flex-1 flex-col">
 					<ul role="list" class="flex flex-1 flex-col gap-y-7">

apps/front/src/routes/+page.svelte

@@ -3,38 +3,93 @@
 </script>
 
 <!-- Pinned projects -->
-<div class="">
+<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
-	<ul role="list" class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-4">
+	<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
-		<li class="relative col-span-1 flex rounded-md shadow-sm">
+		<div class="flex items-center gap-2 bg-gray-50 p-5">
-			<div class="flex w-16 flex-shrink-0 items-center justify-center bg-green-500 rounded-l-md text-sm font-medium text-white">
+			<span class="text-gray-800">
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+				  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" />
 				</svg>
+			</span>
+			<div class="text-sm font-medium leading-6 text-gray-900">Devices</div>
 		</div>
-			<div class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
+		<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
-				<div class="flex-1 truncate px-4 py-2 text-sm">
+			<div class="flex justify-between gap-x-4 py-3">
-					<a href="#" class="font-medium text-gray-900 hover:text-gray-600">Total devices</a>
+				<dt class="flex items-center gap-x-2">
-					<p class="text-gray-500">863</p>
+					<span class="h-2 w-2 rounded-full bg-green-600"></span>
+					<span class="text-gray-500">On</span>
+				</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">123</time></dd>
 			</div>
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="flex items-center gap-x-2">
+					<span class="h-2 w-2 rounded-full bg-red-600"></span>
+					<span class="text-gray-500">Faulty</span>
+				</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
 			</div>
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="text-gray-500">Total</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">135</time></dd>
+			</div>
+		</dl>
 	</li>
-
+	<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
-		<li class="relative col-span-1 flex rounded-md shadow-sm">
+		<div class="flex items-center gap-2 bg-gray-50 p-5">
-			<div class="flex w-16 flex-shrink-0 items-center justify-center bg-pink-600 rounded-l-md text-sm font-medium text-white">
+			<span class="text-gray-800">
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+					<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
 				</svg>
-			</div>
+			</span>
-			<div class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
-				<div class="flex-1 truncate px-4 py-2 text-sm">
-					<a href="#" class="font-medium text-gray-900 hover:text-gray-600">Failed lamps</a>
-					<p class="text-gray-500">12 items</p>
-				</div>
-			</div>
-		</li>
 
+			<div class="text-sm font-medium leading-6 text-gray-900">Zones</div>
+		</div>
+		<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="flex items-center gap-x-2">
+					<span class="h-2 w-2 rounded-full bg-green-600"></span>
+					<span class="text-gray-500">On</span>
+				</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
+			</div>
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="flex items-center gap-x-2">
+					<span class="h-2 w-2 rounded-full bg-gray-400"></span>
+					<span class="text-gray-500">Off</span>
+				</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">0</time></dd>
+			</div>
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="text-gray-500">Total</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
+			</div>
+		</dl>
+	</li>
+	<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+		<div class="flex items-center gap-2 bg-gray-50 p-5">
+			<span class="text-gray-800">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+				</svg>
+			</span>
+			<div class="text-sm font-medium leading-6 text-gray-900">Guests detected</div>
+		</div>
+		<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="text-gray-500">Now</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
+			</div>
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="text-gray-500">Max Today</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">120</time></dd>
+			</div>
+			<div class="flex justify-between gap-x-4 py-3">
+				<dt class="text-gray-500">30-Day Daily Average</dt>
+				<dd class="text-gray-700"><time datetime="2022-12-13">70</time></dd>
+			</div>
+		</dl>
+	</li>
 </ul>
-</div>
 
 <div class="mt-10">
 <Table/>