& so it begins

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import Icon from "$lib/components/atoms/icon.svelte";
+    import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
+    import { Button } from "$lib/components/ui/button";
+    import * as Card from "$lib/components/ui/card";
+    import { Input } from "$lib/components/ui/input";
+    import { mainNavTree } from "$lib/core/constants";
+    import { breadcrumbs } from "$lib/global.stores";
+    import { Plus, RefreshCw, Search } from "@lucide/svelte";
+    import { toast } from "svelte-sonner";
+
+    breadcrumbs.set([mainNavTree[1]]);
+</script>
+
+<MaxWidthWrapper cls="">
+    <Card.Root>
+        <Card.Content>
+            <div class="flex items-center justify-between gap-2">
+                <Card.Title>Users</Card.Title>
+                <div class="flex items-center gap-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onclick={() => {
+                            toast("Refreshing users...", {
+                                description: "simulating API call",
+                            });
+                        }}
+                    >
+                        <Icon icon={RefreshCw} cls="h-4 w-auto" />
+                        Refresh
+                    </Button>
+                    <Button
+                        onclick={() => {
+                            toast("Creating user...", {
+                                description: "simulating API call",
+                            });
+                        }}
+                        size="sm"
+                    >
+                        <Icon icon={Plus} cls="h-4 w-auto" />
+                        Create User
+                    </Button>
+                </div>
+            </div>
+
+            <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+                <!-- Search -->
+                <div class="relative">
+                    <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 by email, name, or username..."
+                        oninput={(event) => {
+                            toast.info("Searching...", {
+                                description: "simulating API call",
+                            });
+                        }}
+                    />
+                </div>
+            </div>
+
+            <div class="grid place-items-center p-8 py-32">
+                <span class="text-xl font-semibold"
+                    >INFO: Normally would show all the users table here
+                </span>
+            </div>
+        </Card.Content>
+    </Card.Root>
+</MaxWidthWrapper>