716a2be9ed
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
284 lines
12 KiB
Vue
284 lines
12 KiB
Vue
<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({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Dashboard',
|
|
href: dashboard(),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Dashboard" />
|
|
|
|
<AppShell variant="sidebar">
|
|
<AppSidebar />
|
|
<AppContent variant="sidebar" class="overflow-x-hidden">
|
|
<AppSidebarHeader :breadcrumbs="[$route.props.breadcrumbs]" />
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex h-full flex-1 flex-col">
|
|
<!-- Top Bar -->
|
|
<div
|
|
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
|
|
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"
|
|
>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Time Tracker Recorder -->
|
|
<div
|
|
class="sticky top-[60px] z-[99] bg-[#1d272c] flex items-center gap-4 px-6 shadow-md"
|
|
>
|
|
<!-- Timer Display -->
|
|
<div
|
|
class="font-mono text-[28px] font-normal text-gray-200 tracking-wide min-w-[140px]"
|
|
>
|
|
00:00:00
|
|
</div>
|
|
|
|
<!-- Start Button -->
|
|
<button
|
|
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="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="white"
|
|
>
|
|
<polygon points="5,3 19,12 5,21" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Task Input -->
|
|
<div
|
|
class="flex-1 flex items-center px-3.5 py-2 bg-[#263238] rounded-lg text-gray-500 text-sm 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"
|
|
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>
|
|
</AppContent>
|
|
<Toaster />
|
|
</AppShell>
|
|
</template>
|