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
This commit is contained in:
Darius Rapalis
@@ -1,10 +1,24 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Link } from '@inertiajs/vue3';
|
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 AppLogo from '@/components/AppLogo.vue';
|
||||||
import NavFooter from '@/components/NavFooter.vue';
|
|
||||||
import NavMain from '@/components/NavMain.vue';
|
|
||||||
import NavUser from '@/components/NavUser.vue';
|
import NavUser from '@/components/NavUser.vue';
|
||||||
|
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
SidebarContent,
|
SidebarContent,
|
||||||
@@ -17,31 +31,97 @@ import {
|
|||||||
import { dashboard } from '@/routes';
|
import { dashboard } from '@/routes';
|
||||||
import type { NavItem } from '@/types';
|
import type { NavItem } from '@/types';
|
||||||
|
|
||||||
|
const { isCurrentUrl } = useCurrentUrl();
|
||||||
|
|
||||||
const mainNavItems: NavItem[] = [
|
const mainNavItems: NavItem[] = [
|
||||||
{
|
{
|
||||||
title: 'Dashboard',
|
title: 'Dashboard',
|
||||||
href: dashboard(),
|
href: dashboard(),
|
||||||
icon: LayoutGrid,
|
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[] = [
|
const footerNavItems: NavItem[] = [
|
||||||
|
{
|
||||||
|
title: 'Settings',
|
||||||
|
href: '#',
|
||||||
|
icon: Settings,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Repository',
|
title: 'Repository',
|
||||||
href: 'https://github.com/laravel/vue-starter-kit',
|
href: 'https://github.com/laravel/vue-starter-kit',
|
||||||
icon: FolderGit2,
|
icon: BookOpen,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Documentation',
|
title: 'Documentation',
|
||||||
href: 'https://laravel.com/docs/starter-kits#vue',
|
href: 'https://laravel.com/docs/starter-kits#vue',
|
||||||
icon: BookOpen,
|
icon: BookOpen,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Help',
|
||||||
|
href: '#',
|
||||||
|
icon: CircleHelp,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Sidebar collapsible="icon" variant="inset">
|
<Sidebar
|
||||||
<SidebarHeader>
|
collapsible="icon"
|
||||||
|
variant="inset"
|
||||||
|
class="!bg-[#1d272c] dark:!bg-[#12191d]"
|
||||||
|
>
|
||||||
|
<SidebarHeader class="border-b border-white/10">
|
||||||
<SidebarMenu>
|
<SidebarMenu>
|
||||||
<SidebarMenuItem>
|
<SidebarMenuItem>
|
||||||
<SidebarMenuButton size="lg" as-child>
|
<SidebarMenuButton size="lg" as-child>
|
||||||
@@ -53,13 +133,80 @@ const footerNavItems: NavItem[] = [
|
|||||||
</SidebarMenu>
|
</SidebarMenu>
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
|
|
||||||
<SidebarContent>
|
<SidebarContent class="!bg-[#1d272c] dark:!bg-[#12191d]">
|
||||||
<NavMain :items="mainNavItems" />
|
<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>
|
</SidebarContent>
|
||||||
|
|
||||||
<SidebarFooter>
|
<SidebarFooter class="!bg-[#1d272c] dark:!bg-[#12191d]">
|
||||||
<NavFooter :items="footerNavItems" />
|
<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 />
|
<NavUser />
|
||||||
|
</div>
|
||||||
</SidebarFooter>
|
</SidebarFooter>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@@ -1,5 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Head } from '@inertiajs/vue3';
|
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';
|
import { dashboard } from '@/routes';
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
@@ -17,401 +22,96 @@ defineOptions({
|
|||||||
<template>
|
<template>
|
||||||
<Head title="Dashboard" />
|
<Head title="Dashboard" />
|
||||||
|
|
||||||
<div class="cl-main-wrapper" style="display: flex">
|
<AppShell variant="sidebar">
|
||||||
<!-- Clockify-style Sidebar -->
|
<AppSidebar />
|
||||||
<div
|
<AppContent variant="sidebar" class="overflow-x-hidden">
|
||||||
class="cl-sidebar-header"
|
<AppSidebarHeader :breadcrumbs="[$route.props.breadcrumbs]" />
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- Navigation Icons -->
|
<!-- Main Content -->
|
||||||
<nav style="display: flex; flex-direction: column; width: 100%; flex: 1; overflow-y: auto; padding-top: 10px">
|
<div class="flex h-full flex-1 flex-col">
|
||||||
<!-- 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 -->
|
<!-- Top Bar -->
|
||||||
<div
|
<div
|
||||||
class="cl-topbar"
|
class="h-[60px] bg-white border-b border-gray-200 flex items-center px-4 shadow-sm sticky top-0 z-10"
|
||||||
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 -->
|
<!-- Workspace Switcher -->
|
||||||
<div
|
<div
|
||||||
class="cl-org-switcher"
|
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"
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #0a0e10;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="
|
class="w-7 h-7 bg-[#03a9f4] rounded-lg flex items-center justify-center text-white text-xs font-semibold"
|
||||||
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;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
W
|
W
|
||||||
</div>
|
</div>
|
||||||
<span>Workspace</span>
|
<span>Workspace</span>
|
||||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="opacity: 0.5">
|
<svg
|
||||||
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Search & Actions -->
|
||||||
|
<div class="ml-auto flex items-center gap-3">
|
||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<div
|
<div
|
||||||
class="cl-search"
|
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"
|
||||||
style="
|
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<svg
|
||||||
style="
|
width="16"
|
||||||
display: flex;
|
height="16"
|
||||||
align-items: center;
|
viewBox="0 0 24 24"
|
||||||
gap: 8px;
|
fill="none"
|
||||||
padding: 7px 14px;
|
stroke="currentColor"
|
||||||
background-color: #f2f6f8;
|
stroke-width="2"
|
||||||
border-radius: 6px;
|
stroke-linecap="round"
|
||||||
color: #75919f;
|
stroke-linejoin="round"
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
max-width: 280px;
|
|
||||||
width: 100%;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<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" />
|
<circle cx="11" cy="11" r="8" />
|
||||||
<path d="m21 21-4.3-4.3" />
|
<path d="m21 21-4.3-4.3" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Search</span>
|
<span>Search</span>
|
||||||
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; white-space: nowrap">⌘K</span>
|
<span
|
||||||
|
class="ml-auto text-xs text-gray-400 whitespace-nowrap"
|
||||||
|
>⌘K</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Notifications -->
|
<!-- Notifications -->
|
||||||
<button
|
<button
|
||||||
style="
|
class="w-9 h-9 border-0 bg-transparent rounded-lg cursor-pointer flex items-center justify-center text-gray-600"
|
||||||
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;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<svg
|
||||||
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
|
width="20"
|
||||||
<path d="M10.3 21a3.5 3.5 0 0 0 3.4 0"/>
|
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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- User Avatar -->
|
<!-- User Avatar -->
|
||||||
<div
|
<div
|
||||||
style="
|
class="w-9 h-9 rounded-full bg-[#03a9f4] flex items-center justify-center text-white text-sm font-semibold cursor-pointer"
|
||||||
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;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
U
|
U
|
||||||
</div>
|
</div>
|
||||||
@@ -420,192 +120,164 @@ defineOptions({
|
|||||||
|
|
||||||
<!-- Time Tracker Recorder -->
|
<!-- Time Tracker Recorder -->
|
||||||
<div
|
<div
|
||||||
class="cl-time-tracker-recorder"
|
class="sticky top-[60px] z-[99] bg-[#1d272c] flex items-center gap-4 px-6 shadow-md"
|
||||||
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 -->
|
<!-- Timer Display -->
|
||||||
<div
|
<div
|
||||||
style="
|
class="font-mono text-[28px] font-normal text-gray-200 tracking-wide min-w-[140px]"
|
||||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #f2f6f8;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
min-width: 140px;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
00:00:00
|
00:00:00
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Start Button -->
|
<!-- Start Button -->
|
||||||
<button
|
<button
|
||||||
style="
|
class="w-11 h-11 rounded-full bg-[#4caf50] border-0 cursor-pointer flex items-center justify-center transition-colors hover:bg-[#43a047]"
|
||||||
width: 44px;
|
>
|
||||||
height: 44px;
|
<svg
|
||||||
border-radius: 50%;
|
width="18"
|
||||||
background-color: #4caf50;
|
height="18"
|
||||||
border: none;
|
viewBox="0 0 24 24"
|
||||||
cursor: pointer;
|
fill="white"
|
||||||
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" />
|
<polygon points="5,3 19,12 5,21" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Task Input -->
|
<!-- Task Input -->
|
||||||
<div
|
<div
|
||||||
style="
|
class="flex-1 flex items-center px-3.5 py-2 bg-[#263238] rounded-lg text-gray-500 text-sm cursor-text"
|
||||||
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">
|
<svg
|
||||||
<path d="M12 20h9"/>
|
width="16"
|
||||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
|
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>
|
</svg>
|
||||||
<span>Add a description</span>
|
<span>Add a description</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Project Selector -->
|
<!-- Project Selector -->
|
||||||
<button
|
<button
|
||||||
style="
|
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"
|
||||||
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">
|
<svg
|
||||||
<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"/>
|
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>
|
</svg>
|
||||||
<span>No project</span>
|
<span>No project</span>
|
||||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="opacity: 0.5">
|
<svg
|
||||||
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Stop Button -->
|
<!-- Stop Button -->
|
||||||
<button
|
<button
|
||||||
style="
|
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"
|
||||||
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">
|
<svg
|
||||||
<rect x="6" y="6" width="12" height="12" rx="1"/>
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="#f44336"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
x="6"
|
||||||
|
y="6"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
rx="1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tracker Entries Wrapper -->
|
<!-- Tracker Entries -->
|
||||||
<div
|
<div class="p-6 max-w-[1400px] w-full mx-auto">
|
||||||
class="cl-tracker-entries-wrapper"
|
|
||||||
style="
|
|
||||||
padding: 24px;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- Empty State -->
|
<!-- Empty State -->
|
||||||
<div
|
<div
|
||||||
class="cl-tracker-no-entries"
|
class="flex flex-col items-center justify-center text-center py-16 mt-5"
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/empty-tracker-icon.webp"
|
src="/empty-tracker-icon.webp"
|
||||||
alt="No time entries"
|
alt="No time entries"
|
||||||
style="max-width: 80px; margin-bottom: 24px; opacity: 0.7"
|
class="max-w-[80px] mb-6 opacity-70"
|
||||||
/>
|
/>
|
||||||
<h2
|
<h2
|
||||||
style="
|
class="text-xl font-medium text-gray-700 mb-2"
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #37474f;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
No time entries yet
|
No time entries yet
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
<p
|
||||||
style="
|
class="text-sm text-gray-500 mb-6 max-w-[400px] leading-relaxed"
|
||||||
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.
|
Start tracking your time by clicking the play button above. Your time entries will appear here.
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
style="
|
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]"
|
||||||
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">
|
<svg
|
||||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
width="16"
|
||||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
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>
|
</svg>
|
||||||
Start Tracking
|
Start Tracking
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</AppContent>
|
||||||
|
<Toaster />
|
||||||
|
</AppShell>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user