rdarius/ClockyFly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Model: Qwen 3.6 35B A3

Browse Source 
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: 65,301 tokens
Time: 34m 20s
This commit is contained in:
Darius Rapalis
2026-04-28 22:30:06 +03:00
parent 3ed92810c3
commit 6f45f71b9f
36 changed files with 3770 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

604
resources/js/pages/Dashboard.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
import { dashboard } from '@/routes';
defineOptions({
@@ -18,30 +17,595 @@ defineOptions({
<template>
<Head title="Dashboard" />
<div
class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
>
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
>
<PlaceholderPattern />
<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>
<div
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
>
<PlaceholderPattern />
</div>
<div
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
>
<PlaceholderPattern />
<!-- 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="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border"
class="cl-content-area"
style="
margin-left: 65px;
flex: 1;
background-color: #f2f6f8;
min-height: 100vh;
position: relative;
"
>
<PlaceholderPattern />
<!-- 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 -->
<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;
"
>
<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;
"
>
W
</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 -->
<div
class="cl-search"
style="
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
"
>
<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%;
"
>
<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>
</div>
<!-- Notifications -->
<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;
"
>
<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
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;
"
>
U
</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>
</template>