ui: ui for dashboard widgets
This commit is contained in:
parent
3c3d76c33c
commit
e726997708
@ -14,6 +14,7 @@
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"pnpm": "^8.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
|
||||
@ -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'}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -3,38 +3,93 @@
|
||||
</script>
|
||||
|
||||
<!-- Pinned projects -->
|
||||
<div class="">
|
||||
<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="relative col-span-1 flex rounded-md shadow-sm">
|
||||
<div class="flex w-16 flex-shrink-0 items-center justify-center bg-green-500 rounded-l-md text-sm font-medium text-white">
|
||||
<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">
|
||||
<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" />
|
||||
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
|
||||
<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="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>
|
||||
<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">123</time></dd>
|
||||
</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">
|
||||
<div class="flex-1 truncate px-4 py-2 text-sm">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-600">Total devices</a>
|
||||
<p class="text-gray-500">863</p>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
<li class="relative col-span-1 flex rounded-md shadow-sm">
|
||||
<div class="flex w-16 flex-shrink-0 items-center justify-center bg-pink-600 rounded-l-md text-sm font-medium text-white">
|
||||
<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">
|
||||
<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" />
|
||||
<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">
|
||||
<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="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>
|
||||
<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>
|
||||
</span>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<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 class="mt-10">
|
||||
<Table/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user