ui: add column Connected Devices

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

@@ -79,6 +79,7 @@
 							<th class="text-left max-w-xs" scope="col">Name</th>
 							<th class="text-left" scope="col">Status</th>
 							<th class="text-left" scope="col">Comment / Fault reason</th>
+							<th class="text-right" scope="col">Connected Devices</th>
 							<th class="text-right" scope="col">Actions</th>
 						</tr>
 					</thead>
@@ -88,6 +89,7 @@
 								<td class="text-gray-900"> Gateway 001 </td>
 								<td><Badge text="Not Working" color="red" /></td>
 								<td> Zero power consumed </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -99,6 +101,7 @@
 								<td class="text-gray-900"> Gateway 002 </td>
 								<td><Badge text="No signal" color="gray" /></td>
 								<td> Offline </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -110,6 +113,7 @@
 								<td class="text-gray-900"> Gateway 003 </td>
 								<td><Badge text="Too much voltage" color="orange" /></td>
 								<td> Too high measures </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -154,7 +158,8 @@
 						>
 							<th class="text-left max-w-xs" scope="col">Name</th>
 							<th class="text-left" scope="col">Type</th>
-							<th class="text-left" scope="col">Fault reason</th>
+							<th class="text-left" scope="col">Comment / Fault reason</th>
+							<th class="text-right" scope="col">Connected Devices</th>
 							<th class="text-right" scope="col">Actions</th>
 						</tr>
 					</thead>
@@ -164,6 +169,7 @@
 								<td class="text-gray-900"> Lamp 001 </td>
 								<td><Badge text="Not Working" color="red" /></td>
 								<td> Zero power consumed </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -175,6 +181,7 @@
 								<td class="text-gray-900"> Lamp 002 </td>
 								<td><Badge text="No signal" color="gray" /></td>
 								<td> Offline </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -186,6 +193,7 @@
 								<td class="text-gray-900"> Lamp 003 </td>
 								<td><Badge text="Too much voltage" color="orange" /></td>
 								<td> Too high measures </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -230,7 +238,8 @@
 						>
 							<th class="text-left max-w-xs" scope="col">Name</th>
 							<th class="text-left" scope="col">Type</th>
-							<th class="text-left" scope="col">Fault reason</th>
+							<th class="text-left" scope="col">Comment / Fault reason</th>
+							<th class="text-right" scope="col">Connected Devices</th>
 							<th class="text-right" scope="col">Actions</th>
 						</tr>
 					</thead>
@@ -240,6 +249,7 @@
 								<td class="text-gray-900"> Motion sensor 001 </td>
 								<td><Badge text="Not Working" color="red" /></td>
 								<td> Zero power consumed </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -251,6 +261,7 @@
 								<td class="text-gray-900"> Motion sensor 002 </td>
 								<td><Badge text="No signal" color="gray" /></td>
 								<td> Offline </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>
@@ -262,6 +273,7 @@
 								<td class="text-gray-900"> Motion sensor 003 </td>
 								<td><Badge text="Too much voltage" color="orange" /></td>
 								<td> Too high measures </td>
+								<td class="text-right">12</td>
 								<td>
 									<div class="flex gap-4 items-center justify-end">
 										<a href="/" class="text-purple-800">Edit</a>