6f45f71b9f
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
612 lines
22 KiB
Vue
612 lines
22 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { dashboard } from '@/routes';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Dashboard',
|
|
href: dashboard(),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<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>
|
|
|
|
<!-- 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 -->
|
|
<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>
|