From 716a2be9ed348d369fe3e8176b39f9397d0ce55e Mon Sep 17 00:00:00 2001
From: Darius Rapalis <darius.rapalis@agmis.com>
Date: Tue, 28 Apr 2026 22:55:33 +0300
Subject: [PATCH] Model: Qwen 3.6 35B A3 Prompt: using `~/Downloads/Clockify -
 Empty Dashboard.html` update dashboard page to look just like the html file.
 Use linked css/js files to copy design exactly

Stats:
Context: 80,256 tokens
Time: 22m 45s
---
 resources/js/components/AppSidebar.vue | 169 +++++-
 resources/js/pages/Dashboard.vue       | 806 ++++++++-----------------
 2 files changed, 397 insertions(+), 578 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index e1873b3..709ba76 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,10 +1,24 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { BookOpen, FolderGit2, LayoutGrid } from 'lucide-vue-next';
+import {
+    BookOpen,
+    Calendar,
+    CircleHelp,
+    FolderGit2,
+    LayoutGrid,
+    PieChart,
+    Settings,
+    Square,
+    SquareStack,
+    Tag,
+    Timer,
+    Users,
+    Wallet,
+    WalletCards,
+} from 'lucide-vue-next';
 import AppLogo from '@/components/AppLogo.vue';
-import NavFooter from '@/components/NavFooter.vue';
-import NavMain from '@/components/NavMain.vue';
 import NavUser from '@/components/NavUser.vue';
+import { useCurrentUrl } from '@/composables/useCurrentUrl';
 import {
     Sidebar,
     SidebarContent,
@@ -17,31 +31,97 @@ import {
 import { dashboard } from '@/routes';
 import type { NavItem } from '@/types';
 
+const { isCurrentUrl } = useCurrentUrl();
+
 const mainNavItems: NavItem[] = [
     {
         title: 'Dashboard',
         href: dashboard(),
         icon: LayoutGrid,
     },
+    {
+        title: 'Time Tracker',
+        href: '#',
+        icon: Timer,
+    },
+    {
+        title: 'Projects',
+        href: '#',
+        icon: FolderGit2,
+    },
+    {
+        title: 'Timesheet',
+        href: '#',
+        icon: Square,
+    },
+    {
+        title: 'Reports',
+        href: '#',
+        icon: PieChart,
+    },
+    {
+        title: 'Teams',
+        href: '#',
+        icon: Users,
+    },
+    {
+        title: 'Clients',
+        href: '#',
+        icon: Users,
+    },
+    {
+        title: 'Expenses',
+        href: '#',
+        icon: Wallet,
+    },
+    {
+        title: 'Invoices',
+        href: '#',
+        icon: WalletCards,
+    },
+    {
+        title: 'Approvals',
+        href: '#',
+        icon: SquareStack,
+    },
+    {
+        title: 'Calendar',
+        href: '#',
+        icon: Calendar,
+    },
 ];
 
 const footerNavItems: NavItem[] = [
+    {
+        title: 'Settings',
+        href: '#',
+        icon: Settings,
+    },
     {
         title: 'Repository',
         href: 'https://github.com/laravel/vue-starter-kit',
-        icon: FolderGit2,
+        icon: BookOpen,
     },
     {
         title: 'Documentation',
         href: 'https://laravel.com/docs/starter-kits#vue',
         icon: BookOpen,
     },
+    {
+        title: 'Help',
+        href: '#',
+        icon: CircleHelp,
+    },
 ];
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="inset">
-        <SidebarHeader>
+    <Sidebar
+        collapsible="icon"
+        variant="inset"
+        class="!bg-[#1d272c] dark:!bg-[#12191d]"
+    >
+        <SidebarHeader class="border-b border-white/10">
             <SidebarMenu>
                 <SidebarMenuItem>
                     <SidebarMenuButton size="lg" as-child>
@@ -53,13 +133,80 @@ const footerNavItems: NavItem[] = [
             </SidebarMenu>
         </SidebarHeader>
 
-        <SidebarContent>
-            <NavMain :items="mainNavItems" />
+        <SidebarContent class="!bg-[#1d272c] dark:!bg-[#12191d]">
+            <SidebarMenu>
+                <SidebarMenuItem
+                    v-for="item in mainNavItems"
+                    :key="item.title"
+                    class="relative"
+                >
+                    <SidebarMenuButton
+                        as-child
+                        :is-active="isCurrentUrl(item.href)"
+                        :tooltip="item.title"
+                        class="!h-10 !justify-center !px-3 !text-white/60 hover:!text-white !bg-transparent hover:!bg-white/10 data-[active=true]:!text-white data-[active=true]:![&>svg]:!text-white group-data-[collapsible=icon]:!p-0"
+                    >
+                        <Link
+                            :href="item.href"
+                            class="flex items-center gap-3"
+                        >
+                            <component
+                                :is="item.icon"
+                                class="!h-5 !w-5"
+                            />
+                            <span class="truncate">{{ item.title }}</span>
+                        </Link>
+                    </SidebarMenuButton>
+                    <div
+                        v-if="isCurrentUrl(item.href)"
+                        class="absolute left-0 top-0 h-full w-[3px] bg-[#03a9f4] rounded-r"
+                    />
+                </SidebarMenuItem>
+            </SidebarMenu>
         </SidebarContent>
 
-        <SidebarFooter>
-            <NavFooter :items="footerNavItems" />
-            <NavUser />
+        <SidebarFooter class="!bg-[#1d272c] dark:!bg-[#12191d]">
+            <SidebarMenu>
+                <SidebarMenuItem
+                    v-for="item in footerNavItems"
+                    :key="item.title"
+                    class="relative"
+                >
+                    <SidebarMenuButton
+                        as-child
+                        :tooltip="item.title"
+                        class="!h-10 !justify-center !px-3 !text-white/60 hover:!text-white !bg-transparent hover:!bg-white/10 data-[active=true]:!text-white data-[active=true]:![&>svg]:!text-white group-data-[collapsible=icon]:!p-0"
+                    >
+                        <a
+                            v-if="item.href.startsWith('http')"
+                            :href="item.href"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="flex items-center gap-3"
+                        >
+                            <component
+                                :is="item.icon"
+                                class="!h-5 !w-5"
+                            />
+                            <span class="truncate">{{ item.title }}</span>
+                        </a>
+                        <Link
+                            v-else
+                            :href="item.href"
+                            class="flex items-center gap-3"
+                        >
+                            <component
+                                :is="item.icon"
+                                class="!h-5 !w-5"
+                            />
+                            <span class="truncate">{{ item.title }}</span>
+                        </Link>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
+            <div class="mt-2">
+                <NavUser />
+            </div>
         </SidebarFooter>
     </Sidebar>
     <slot />
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 0008516..4e9f2f0 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
+import AppShell from '@/components/AppShell.vue';
+import AppSidebar from '@/components/AppSidebar.vue';
+import AppContent from '@/components/AppContent.vue';
+import AppSidebarHeader from '@/components/AppSidebarHeader.vue';
+import { Toaster } from '@/components/ui/sonner';
 import { dashboard } from '@/routes';
 
 defineOptions({
@@ -17,595 +22,262 @@ defineOptions({
 <template>
     <Head title="Dashboard" />
 
-    <div class="cl-main-wrapper" style="display: flex">
-        <!-- Clockify-style Sidebar -->
-        <div
-            class="cl-sidebar-header"
-            style="
-                width: 65px;
-                position: fixed;
-                top: 0;
-                bottom: 0;
-                right: 100%;
-                display: flex;
-                align-items: center;
-                background-color: #1d272c;
-                z-index: 1055;
-                flex-direction: column;
-                padding: 10px 0;
-            "
-        >
-            <!-- Logo -->
-            <div class="cl-sidebar-logo" style="padding: 0 12px 20px">
-                <img
-                    src="/clockify-logo.svg"
-                    alt="Clockify"
-                    style="width: 40px; height: auto"
-                />
-            </div>
+    <AppShell variant="sidebar">
+        <AppSidebar />
+        <AppContent variant="sidebar" class="overflow-x-hidden">
+            <AppSidebarHeader :breadcrumbs="[$route.props.breadcrumbs]" />
 
-            <!-- Navigation Icons -->
-            <nav style="display: flex; flex-direction: column; width: 100%; flex: 1; overflow-y: auto; padding-top: 10px">
-                <!-- Dashboard -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                        border-left: 3px solid #03a9f4;
-                    "
-                >
-                    <img
-                        src="/dashboard.svg"
-                        alt="Dashboard"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.9"
-                    />
-                </a>
-
-                <!-- Time Tracker -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/time-tracker.svg"
-                        alt="Time Tracker"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Projects -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/projects.svg"
-                        alt="Projects"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Timesheet -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/timesheet.svg"
-                        alt="Timesheet"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Reports -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/reports.svg"
-                        alt="Reports"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Teams -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/teams.svg"
-                        alt="Teams"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Clients -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/clients.svg"
-                        alt="Clients"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Expenses -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/expenses.svg"
-                        alt="Expenses"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Invoices -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/invoices.svg"
-                        alt="Invoices"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Approvals -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/approvals.svg"
-                        alt="Approvals"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-
-                <!-- Calendar -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                        position: relative;
-                    "
-                >
-                    <img
-                        src="/calendar.svg"
-                        alt="Calendar"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-            </nav>
-
-            <!-- Bottom icons -->
-            <div style="display: flex; flex-direction: column; width: 100%; padding-bottom: 10px">
-                <!-- Help -->
-                <a
-                    href="#"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        padding: 10px 0;
-                        color: #f2f6f8;
-                        text-decoration: none;
-                    "
-                >
-                    <img
-                        src="/help.svg"
-                        alt="Help"
-                        style="width: 24px; height: 24px; margin: 0 auto; display: block; opacity: 0.6"
-                    />
-                </a>
-            </div>
-        </div>
-
-        <!-- Main Content Area -->
-        <div
-            class="cl-content-area"
-            style="
-                margin-left: 65px;
-                flex: 1;
-                background-color: #f2f6f8;
-                min-height: 100vh;
-                position: relative;
-            "
-        >
-            <!-- Top Bar -->
-            <div
-                class="cl-topbar"
-                style="
-                    height: 60px;
-                    background-color: #fff;
-                    display: flex;
-                    align-items: center;
-                    padding: 0 20px;
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-                    position: sticky;
-                    top: 0;
-                    z-index: 100;
-                "
-            >
-                <!-- Workspace/Org Switcher -->
+            <!-- Main Content -->
+            <div class="flex h-full flex-1 flex-col">
+                <!-- Top Bar -->
                 <div
-                    class="cl-org-switcher"
-                    style="
-                        display: flex;
-                        align-items: center;
-                        gap: 8px;
-                        padding: 6px 12px;
-                        border-radius: 6px;
-                        cursor: pointer;
-                        color: #0a0e10;
-                        font-size: 14px;
-                        font-weight: 500;
-                    "
+                    class="h-[60px] bg-white border-b border-gray-200 flex items-center px-4 shadow-sm sticky top-0 z-10"
                 >
+                    <!-- Workspace Switcher -->
                     <div
-                        style="
-                            width: 28px;
-                            height: 28px;
-                            background-color: #03a9f4;
-                            border-radius: 6px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            color: #fff;
-                            font-size: 14px;
-                            font-weight: 600;
-                        "
+                        class="flex items-center gap-2 px-3 py-1.5 rounded-lg cursor-pointer text-sm font-medium text-gray-900 hover:bg-gray-100"
                     >
-                        W
+                        <div
+                            class="w-7 h-7 bg-[#03a9f4] rounded-lg flex items-center justify-center text-white text-xs font-semibold"
+                        >
+                            W
+                        </div>
+                        <span>Workspace</span>
+                        <svg
+                            width="12"
+                            height="12"
+                            viewBox="0 0 12 12"
+                            fill="none"
+                            class="text-gray-500"
+                        >
+                            <path
+                                d="M3 4.5L6 7.5L9 4.5"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </div>
+
+                    <!-- Search & Actions -->
+                    <div class="ml-auto flex items-center gap-3">
+                        <!-- Search -->
+                        <div
+                            class="flex items-center gap-2 px-3.5 py-2 bg-gray-100 rounded-lg text-gray-500 text-sm cursor-pointer max-w-[280px] w-full"
+                        >
+                            <svg
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <circle cx="11" cy="11" r="8" />
+                                <path d="m21 21-4.3-4.3" />
+                            </svg>
+                            <span>Search</span>
+                            <span
+                                class="ml-auto text-xs text-gray-400 whitespace-nowrap"
+                                >⌘K</span
+                            >
+                        </div>
+
+                        <!-- Notifications -->
+                        <button
+                            class="w-9 h-9 border-0 bg-transparent rounded-lg cursor-pointer flex items-center justify-center text-gray-600"
+                        >
+                            <svg
+                                width="20"
+                                height="20"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <path
+                                    d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"
+                                />
+                                <path
+                                    d="M10.3 21a3.5 3.5 0 0 0 3.4 0"
+                                />
+                            </svg>
+                        </button>
+
+                        <!-- User Avatar -->
+                        <div
+                            class="w-9 h-9 rounded-full bg-[#03a9f4] flex items-center justify-center text-white text-sm font-semibold cursor-pointer"
+                        >
+                            U
+                        </div>
                     </div>
-                    <span>Workspace</span>
-                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="opacity: 0.5">
-                        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
                 </div>
 
-                <!-- Search -->
+                <!-- Time Tracker Recorder -->
                 <div
-                    class="cl-search"
-                    style="
-                        margin-left: auto;
-                        display: flex;
-                        align-items: center;
-                        gap: 12px;
-                    "
+                    class="sticky top-[60px] z-[99] bg-[#1d272c] flex items-center gap-4 px-6 shadow-md"
                 >
+                    <!-- Timer Display -->
                     <div
-                        style="
-                            display: flex;
-                            align-items: center;
-                            gap: 8px;
-                            padding: 7px 14px;
-                            background-color: #f2f6f8;
-                            border-radius: 6px;
-                            color: #75919f;
-                            font-size: 14px;
-                            cursor: pointer;
-                            max-width: 280px;
-                            width: 100%;
-                        "
+                        class="font-mono text-[28px] font-normal text-gray-200 tracking-wide min-w-[140px]"
                     >
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="11" cy="11" r="8"/>
-                            <path d="m21 21-4.3-4.3"/>
-                        </svg>
-                        <span>Search</span>
-                        <span style="margin-left: auto; font-size: 12px; opacity: 0.6; white-space: nowrap">⌘K</span>
+                        00:00:00
                     </div>
 
-                    <!-- Notifications -->
+                    <!-- Start Button -->
                     <button
-                        style="
-                            width: 36px;
-                            height: 36px;
-                            border: none;
-                            background: transparent;
-                            border-radius: 6px;
-                            cursor: pointer;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            color: #607d8b;
-                            position: relative;
-                        "
+                        class="w-11 h-11 rounded-full bg-[#4caf50] border-0 cursor-pointer flex items-center justify-center transition-colors hover:bg-[#43a047]"
                     >
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
-                            <path d="M10.3 21a3.5 3.5 0 0 0 3.4 0"/>
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="white"
+                        >
+                            <polygon points="5,3 19,12 5,21" />
                         </svg>
                     </button>
 
-                    <!-- User Avatar -->
+                    <!-- Task Input -->
                     <div
-                        style="
-                            width: 36px;
-                            height: 36px;
-                            border-radius: 50%;
-                            background-color: #03a9f4;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            color: #fff;
-                            font-size: 14px;
-                            font-weight: 600;
-                            cursor: pointer;
-                        "
+                        class="flex-1 flex items-center px-3.5 py-2 bg-[#263238] rounded-lg text-gray-500 text-sm cursor-text"
                     >
-                        U
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class="mr-2.5 opacity-50"
+                        >
+                            <path
+                                d="M12 20h9"
+                            />
+                            <path
+                                d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
+                            />
+                        </svg>
+                        <span>Add a description</span>
+                    </div>
+
+                    <!-- Project Selector -->
+                    <button
+                        class="flex items-center gap-1.5 px-3.5 py-2 bg-[#263238] border border-[#37474f] rounded-lg text-gray-200 text-sm cursor-pointer whitespace-nowrap"
+                    >
+                        <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <path
+                                d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                            />
+                        </svg>
+                        <span>No project</span>
+                        <svg
+                            width="12"
+                            height="12"
+                            viewBox="0 0 12 12"
+                            fill="none"
+                            class="opacity-50"
+                        >
+                            <path
+                                d="M3 4.5L6 7.5L9 4.5"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+
+                    <!-- Stop Button -->
+                    <button
+                        class="w-11 h-11 rounded-full border-2 border-[#f44336] bg-transparent cursor-pointer flex items-center justify-center transition-colors hover:bg-red-500/10"
+                    >
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="#f44336"
+                        >
+                            <rect
+                                x="6"
+                                y="6"
+                                width="12"
+                                height="12"
+                                rx="1"
+                            />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Tracker Entries -->
+                <div class="p-6 max-w-[1400px] w-full mx-auto">
+                    <!-- Empty State -->
+                    <div
+                        class="flex flex-col items-center justify-center text-center py-16 mt-5"
+                    >
+                        <img
+                            src="/empty-tracker-icon.webp"
+                            alt="No time entries"
+                            class="max-w-[80px] mb-6 opacity-70"
+                        />
+                        <h2
+                            class="text-xl font-medium text-gray-700 mb-2"
+                        >
+                            No time entries yet
+                        </h2>
+                        <p
+                            class="text-sm text-gray-500 mb-6 max-w-[400px] leading-relaxed"
+                        >
+                            Start tracking your time by clicking the play button above. Your time entries will appear here.
+                        </p>
+                        <button
+                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-[#03a9f4] text-white border-0 rounded-lg text-sm font-medium cursor-pointer transition-colors hover:bg-[#0290d4]"
+                        >
+                            <svg
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <line
+                                    x1="12"
+                                    y1="5"
+                                    x2="12"
+                                    y2="19"
+                                />
+                                <line
+                                    x1="5"
+                                    y1="12"
+                                    x2="19"
+                                    y2="12"
+                                />
+                            </svg>
+                            Start Tracking
+                        </button>
                     </div>
                 </div>
             </div>
-
-            <!-- Time Tracker Recorder -->
-            <div
-                class="cl-time-tracker-recorder"
-                style="
-                    position: sticky;
-                    top: 60px;
-                    z-index: 99;
-                    padding: 12px 24px;
-                    background-color: #1d272c;
-                    display: flex;
-                    align-items: center;
-                    gap: 16px;
-                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-                "
-            >
-                <!-- Timer Display -->
-                <div
-                    style="
-                        font-family: 'Roboto Mono', 'Courier New', monospace;
-                        font-size: 28px;
-                        font-weight: 400;
-                        color: #f2f6f8;
-                        letter-spacing: 1px;
-                        min-width: 140px;
-                    "
-                >
-                    00:00:00
-                </div>
-
-                <!-- Start Button -->
-                <button
-                    style="
-                        width: 44px;
-                        height: 44px;
-                        border-radius: 50%;
-                        background-color: #4caf50;
-                        border: none;
-                        cursor: pointer;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        transition: background-color 0.2s;
-                    "
-                >
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
-                        <polygon points="5,3 19,12 5,21"/>
-                    </svg>
-                </button>
-
-                <!-- Task Input -->
-                <div
-                    style="
-                        flex: 1;
-                        display: flex;
-                        align-items: center;
-                        padding: 8px 14px;
-                        background-color: #263238;
-                        border-radius: 6px;
-                        color: #75919f;
-                        font-size: 14px;
-                        cursor: text;
-                    "
-                >
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; opacity: 0.5">
-                        <path d="M12 20h9"/>
-                        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
-                    </svg>
-                    <span>Add a description</span>
-                </div>
-
-                <!-- Project Selector -->
-                <button
-                    style="
-                        display: flex;
-                        align-items: center;
-                        gap: 6px;
-                        padding: 8px 14px;
-                        background-color: #263238;
-                        border: 1px solid #37474f;
-                        border-radius: 6px;
-                        color: #f2f6f8;
-                        font-size: 14px;
-                        cursor: pointer;
-                        white-space: nowrap;
-                    "
-                >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-                    </svg>
-                    <span>No project</span>
-                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="opacity: 0.5">
-                        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                </button>
-
-                <!-- Stop Button -->
-                <button
-                    style="
-                        width: 44px;
-                        height: 44px;
-                        border-radius: 50%;
-                        background-color: transparent;
-                        border: 2px solid #f44336;
-                        cursor: pointer;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        transition: background-color 0.2s;
-                    "
-                >
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="#f44336">
-                        <rect x="6" y="6" width="12" height="12" rx="1"/>
-                    </svg>
-                </button>
-            </div>
-
-            <!-- Tracker Entries Wrapper -->
-            <div
-                class="cl-tracker-entries-wrapper"
-                style="
-                    padding: 24px;
-                    max-width: 1400px;
-                    margin: 0 auto;
-                "
-            >
-                <!-- Empty State -->
-                <div
-                    class="cl-tracker-no-entries"
-                    style="
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        justify-content: center;
-                        text-align: center;
-                        padding: 60px 20px;
-                        margin-top: 20px;
-                    "
-                >
-                    <img
-                        src="/empty-tracker-icon.webp"
-                        alt="No time entries"
-                        style="max-width: 80px; margin-bottom: 24px; opacity: 0.7"
-                    />
-                    <h2
-                        style="
-                            font-size: 20px;
-                            font-weight: 500;
-                            color: #37474f;
-                            margin: 0 0 8px;
-                        "
-                    >
-                        No time entries yet
-                    </h2>
-                    <p
-                        style="
-                            font-size: 14px;
-                            color: #75919f;
-                            margin: 0 0 24px;
-                            max-width: 400px;
-                            line-height: 1.6;
-                        "
-                    >
-                        Start tracking your time by clicking the play button above. Your time entries will appear here.
-                    </p>
-                    <button
-                        style="
-                            display: inline-flex;
-                            align-items: center;
-                            gap: 8px;
-                            padding: 10px 24px;
-                            background-color: #03a9f4;
-                            color: #fff;
-                            border: none;
-                            border-radius: 6px;
-                            font-size: 14px;
-                            font-weight: 500;
-                            cursor: pointer;
-                            transition: background-color 0.2s;
-                        "
-                    >
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <line x1="12" y1="5" x2="12" y2="19"/>
-                            <line x1="5" y1="12" x2="19" y2="12"/>
-                        </svg>
-                        Start Tracking
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
+        </AppContent>
+        <Toaster />
+    </AppShell>
 </template>