✅ base implementation done, now onto mobile app

apps/main/src/routes/(main)/dashboard/+page.svelte

@@ -1,18 +1,112 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
+    import Icon from "$lib/components/atoms/icon.svelte";
+    import { Button } from "$lib/components/ui/button";
+    import * as Card from "$lib/components/ui/card";
+    import { Input } from "$lib/components/ui/input";
+    import * as Table from "$lib/components/ui/table";
     import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
     import { mainNavTree } from "$lib/core/constants";
+    import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
     import { breadcrumbs } from "$lib/global.stores";
+    import Smartphone from "@lucide/svelte/icons/smartphone";
+    import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+    import Search from "@lucide/svelte/icons/search";
+    import { onDestroy, onMount } from "svelte";
 
     breadcrumbs.set([mainNavTree[0]]);
+
+    onMount(async () => {
+        await mobileVM.fetchDevices();
+        mobileVM.startDevicesPolling(5000);
+    });
+
+    onDestroy(() => {
+        mobileVM.stopDevicesPolling();
+    });
 </script>
 
-<MaxWidthWrapper cls="space-y-8">
-    <div class="space-y-2">
-        <h1 class="text-3xl font-bold tracking-tight">
-            Dashboard Not Yet Implemented
-        </h1>
-        <p class="text-muted-foreground">
-            This is where your implementation will go
-        </p>
-    </div>
+<MaxWidthWrapper cls="space-y-4">
+    <Card.Root>
+        <Card.Header>
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-2">
+                    <Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
+                    <Card.Title>Devices</Card.Title>
+                    <span class="text-muted-foreground text-xs">
+                        {mobileVM.devicesTotal} total
+                    </span>
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onclick={() => mobileVM.fetchDevices()}
+                    disabled={mobileVM.devicesLoading}
+                >
+                    <Icon
+                        icon={RefreshCw}
+                        cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
+                    />
+                    Refresh
+                </Button>
+            </div>
+
+            <div class="relative mt-3 max-w-sm">
+                <Icon
+                    icon={Search}
+                    cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+                />
+                <Input
+                    class="pl-10"
+                    placeholder="Search device name/id/model..."
+                    bind:value={mobileVM.devicesSearch}
+                    oninput={() => {
+                        mobileVM.devicesPage = 1;
+                        mobileVM.fetchDevices();
+                    }}
+                />
+            </div>
+        </Card.Header>
+
+        <Card.Content>
+            {#if !mobileVM.devicesLoading && mobileVM.devices.length === 0}
+                <div class="py-10 text-center text-sm text-muted-foreground">
+                    No devices registered yet.
+                </div>
+            {:else}
+                <Table.Root>
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.Head>Device</Table.Head>
+                            <Table.Head>Manufacturer / Model</Table.Head>
+                            <Table.Head>Android</Table.Head>
+                            <Table.Head>Last Ping</Table.Head>
+                        </Table.Row>
+                    </Table.Header>
+                    <Table.Body>
+                        {#each mobileVM.devices as device (device.id)}
+                            <Table.Row
+                                class="cursor-pointer"
+                                onclick={() => goto(`/devices/${device.id}`)}
+                            >
+                                <Table.Cell>
+                                    <div class="font-medium">{device.name}</div>
+                                    <div class="text-muted-foreground text-xs">
+                                        {device.externalDeviceId}
+                                    </div>
+                                </Table.Cell>
+                                <Table.Cell>
+                                    {device.manufacturer} / {device.model}
+                                </Table.Cell>
+                                <Table.Cell>{device.androidVersion}</Table.Cell>
+                                <Table.Cell>
+                                    {mobileVM.formatLastPing(device.lastPingAt)}
+                                </Table.Cell>
+                            </Table.Row>
+                        {/each}
+                    </Table.Body>
+                </Table.Root>
+            {/if}
+        </Card.Content>
+    </Card.Root>
 </MaxWidthWrapper>