35d7e35223
Session Total cost: $10.61 (costs may be inaccurate due to usage of unknown models) Total duration (API): 1h 26m 37s Total duration (wall): 2h 37m 58s Total code changes: 4209 lines added, 306 lines removed Usage by model: qwen/qwen3.6-35b-a3b: 508.8k input, 126.8k output, 23.7m cache read, 0 cache write ($10.53) claude-haiku-4-5: 9.4k input, 13.3k output, 8.3k cache read, 0 cache write ($0.0767) Runtime: llamacpp Model: Qwen 3.6 35B A3B Q4 K M Coding Agent: ClaudeCode
1061 lines
52 KiB
PHP
1061 lines
52 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Dashboard - TimeLog</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #03a9f4;
|
|
--primary-dark: #0287c5;
|
|
--sidebar-bg: #3e515b;
|
|
--sidebar-hover: #4f6470;
|
|
--sidebar-active: #2f80ed;
|
|
--text-dark: #333;
|
|
--text-medium: #546e7a;
|
|
--text-light: #607d8b;
|
|
--text-muted: #9ba8b0;
|
|
--text-sidebar: #c6d2d9;
|
|
--bg-light: #f2f6f8;
|
|
--bg-white: #fff;
|
|
--border-color: #e9e9ed;
|
|
--input-bg: #f2f6f8;
|
|
--input-border: #e4eaee;
|
|
--input-focus-border: #03a9f4;
|
|
--timer-bg: #03a9f4;
|
|
--timer-text: #fff;
|
|
--error-color: #bf2600;
|
|
--success-color: #4caf50;
|
|
--card-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(11,12,14,0.1);
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: var(--text-dark);
|
|
background: var(--bg-light);
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
a { color: var(--primary); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* === SIDEBAR === */
|
|
.sidebar {
|
|
width: 64px;
|
|
background: var(--sidebar-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 50;
|
|
transition: width 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
.sidebar-logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.sidebar-logo svg {
|
|
height: 24px;
|
|
}
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.sidebar-item {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
margin: 1px 10px;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
position: relative;
|
|
}
|
|
.sidebar-item:hover {
|
|
background: var(--sidebar-hover);
|
|
}
|
|
.sidebar-item.active {
|
|
background: var(--sidebar-active);
|
|
}
|
|
.sidebar-item.active svg path,
|
|
.sidebar-item.active svg circle,
|
|
.sidebar-item.active svg rect {
|
|
fill: #fff !important;
|
|
}
|
|
.sidebar-item svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.sidebar-item .tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
left: 52px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: #333;
|
|
color: #fff;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
z-index: 100;
|
|
}
|
|
.sidebar-item:hover .tooltip {
|
|
display: block;
|
|
}
|
|
.sidebar-spacer {
|
|
flex: 1;
|
|
}
|
|
.sidebar-bottom {
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
.sidebar-profile {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* === TOP BAR === */
|
|
.main-content {
|
|
flex: 1;
|
|
margin-left: 64px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.topbar {
|
|
height: 56px;
|
|
background: var(--bg-white);
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
}
|
|
.topbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.topbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
}
|
|
.topbar-logo svg {
|
|
height: 24px;
|
|
}
|
|
.topbar-org-switcher {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-medium);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
.topbar-org-switcher:hover {
|
|
background: var(--bg-light);
|
|
color: var(--text-dark);
|
|
}
|
|
.topbar-org-switcher svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.topbar-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--text-medium);
|
|
transition: background-color 0.15s;
|
|
}
|
|
.topbar-btn:hover {
|
|
background: var(--bg-light);
|
|
}
|
|
.topbar-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.topbar-btn .notification-dot {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--primary);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--bg-white);
|
|
}
|
|
.topbar-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--border-color);
|
|
margin: 0 4px;
|
|
}
|
|
.topbar-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 8px 4px 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.topbar-profile:hover {
|
|
background: var(--bg-light);
|
|
}
|
|
.topbar-profile-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.topbar-profile-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
/* === TIMER RECORDER === */
|
|
.timer-section {
|
|
padding: 24px;
|
|
max-width: 600px;
|
|
}
|
|
.timer-card {
|
|
background: var(--bg-white);
|
|
border-radius: 8px;
|
|
box-shadow: var(--card-shadow);
|
|
overflow: hidden;
|
|
}
|
|
.timer-card__header {
|
|
padding: 16px 16px 0 16px;
|
|
}
|
|
.timer-card__stopwatch {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px 0 16px;
|
|
gap: 16px;
|
|
}
|
|
.stopwatch-time {
|
|
font-size: 36px;
|
|
font-weight: 400;
|
|
color: var(--text-dark);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 2px;
|
|
}
|
|
.timer-btn {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.timer-btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
.timer-btn--stop {
|
|
background: var(--timer-bg);
|
|
color: #fff;
|
|
}
|
|
.timer-btn--start {
|
|
background: var(--timer-bg);
|
|
color: #fff;
|
|
}
|
|
.timer-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.timer-card__body {
|
|
padding: 0 16px 16px;
|
|
}
|
|
.timer-card__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.timer-card__input {
|
|
flex: 1;
|
|
height: 40px;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 4px;
|
|
background: var(--input-bg);
|
|
color: var(--text-dark);
|
|
outline: none;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
}
|
|
.timer-card__input:focus {
|
|
border-color: var(--input-focus-border);
|
|
box-shadow: 0 0 0 1px var(--input-focus-border);
|
|
background: var(--bg-white);
|
|
}
|
|
.timer-card__input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
.timer-card__addon {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 4px;
|
|
background: var(--bg-light);
|
|
color: var(--text-medium);
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.timer-card__addon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.timer-card__addon:hover {
|
|
background: #e9e9ed;
|
|
}
|
|
.timer-card__footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.timer-card__footer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.timer-card__footer-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.btn-save-timer {
|
|
height: 36px;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.btn-save-timer:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
/* === EMPTY STATE === */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 48px 24px;
|
|
text-align: center;
|
|
}
|
|
.empty-state__image {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.empty-state__image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.empty-state__title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--text-medium);
|
|
margin-bottom: 8px;
|
|
}
|
|
.empty-state__text {
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 24px;
|
|
}
|
|
.empty-state__apps {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.empty-state__app-link {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-white);
|
|
transition: background-color 0.15s;
|
|
}
|
|
.empty-state__app-link:hover {
|
|
background: var(--bg-light);
|
|
}
|
|
.empty-state__app-link svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* === FAVORITE TIME ENTRIES BAR === */
|
|
.favorites-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px 0;
|
|
}
|
|
.favorites-bar__label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-right: 8px;
|
|
}
|
|
.favorites-bar__empty {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* === DROPDOWN === */
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
.dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
right: 0;
|
|
background: var(--bg-white);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
min-width: 220px;
|
|
z-index: 100;
|
|
padding: 4px 0;
|
|
}
|
|
.dropdown-menu.show {
|
|
display: block;
|
|
}
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
color: var(--text-dark);
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
}
|
|
.dropdown-item:hover {
|
|
background: var(--bg-light);
|
|
}
|
|
.dropdown-item svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: var(--border-color);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* === ORG MODAL === */
|
|
.org-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 200;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.org-modal-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
cursor: pointer;
|
|
}
|
|
.org-modal-card {
|
|
position: relative;
|
|
background: var(--bg-white);
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 32px;
|
|
z-index: 1;
|
|
}
|
|
.org-modal__header {
|
|
margin-bottom: 24px;
|
|
}
|
|
.org-modal__header h2 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
margin-bottom: 6px;
|
|
}
|
|
.org-modal__header p {
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
line-height: 1.5;
|
|
}
|
|
.org-modal__body {
|
|
margin-bottom: 24px;
|
|
}
|
|
.org-modal__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
.btn-cancel {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
color: var(--text-medium);
|
|
background: var(--bg-light);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
}
|
|
.btn-cancel:hover {
|
|
background: #e9e9ed;
|
|
}
|
|
.org-error {
|
|
color: var(--error-color);
|
|
font-size: 13px;
|
|
margin-top: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
.auth-info-banner {
|
|
background: #fde8e8;
|
|
color: var(--error-color);
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 0;
|
|
padding: 0;
|
|
}
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
.topbar-profile-name {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- === SIDEBAR === -->
|
|
<nav class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<svg height="24" viewBox="0 0 158 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M31.3333 0H8.66667C3.8802 0 0 3.8802 0 8.66667V31.3333C0 36.1198 3.8802 40 8.66667 40H31.3333C36.1198 40 40 36.1198 40 31.3333V8.66667C40 3.8802 36.1198 0 31.3333 0Z" fill="#03A9F4"/>
|
|
<path d="M25.6947 11.3924C26.3928 10.6932 26.2425 9.51811 25.3206 9.16425C24.0343 8.67046 22.6376 8.3999 21.1779 8.3999C14.7823 8.3999 9.59766 13.5934 9.59766 19.9999C9.59766 26.4064 14.7823 31.5999 21.1779 31.5999C22.6286 31.5999 24.017 31.3327 25.2968 30.8447C26.2211 30.4922 26.3728 29.3149 25.6735 28.6144C25.2203 28.1605 24.5345 28.0545 23.9264 28.257C23.0645 28.544 22.1427 28.6995 21.1846 28.6995C16.3879 28.6995 12.4994 24.8043 12.4994 19.9995C12.4994 15.1946 16.3879 11.2995 21.1846 11.2995C22.1496 11.2995 23.0779 11.4571 23.9451 11.7481C24.5537 11.9523 25.2409 11.847 25.6947 11.3924Z" fill="white"/>
|
|
<path d="M22.9294 20.1332C22.9294 20.9432 22.2728 21.5998 21.4628 21.5998C20.6527 21.5998 19.9961 20.9432 19.9961 20.1332C19.9961 19.3232 20.6527 18.6665 21.4628 18.6665C22.2728 18.6665 22.9294 19.3232 22.9294 20.1332Z" fill="white"/>
|
|
<path d="M23.7261 17.8301C23.2007 17.308 23.2007 16.4616 23.7261 15.9395L28.1021 11.5913C28.6274 11.0692 29.4793 11.0692 30.0047 11.5913C30.53 12.1133 30.53 12.9597 30.0047 13.4818L25.6287 17.8301C25.1033 18.3521 24.2515 18.3521 23.7261 17.8301Z" fill="white"/>
|
|
<path d="M23.7261 22.1693C23.2007 22.6914 23.2007 23.5378 23.7261 24.0599L28.1021 28.4082C28.6274 28.9302 29.4793 28.9302 30.0047 28.4082C30.53 27.8861 30.53 27.0397 30.0047 26.5176L25.6287 22.1693C25.1033 21.6473 24.2515 21.6473 23.7261 22.1693Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="sidebar-nav">
|
|
<!-- Time Tracker -->
|
|
<div class="sidebar-item active" title="Time Tracker">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M9.5 19C4.3 19 0 14.776 0 9.50371C0 4.23146 4.275 0.00371094 9.5 0C14.7 0 19 4.32723 19 9.5C19 14.7722 14.8 19 9.5 19ZM9.5 0.953711C4.8 0.953711 0.95 4.82832 0.95 9.50371C0.95 14.1791 4.8 18.1047 9.5 18.1047C14.2 18.1047 18.05 14.1791 18.05 9.50371C18.05 4.72884 14.2 0.953711 9.5 0.953711ZM13.5 13.5288C13.3 13.5288 13.2 13.4293 13.1 13.3298L9.2 9.45026C9.1 9.35078 9 9.15184 9 9.05236V2.08901C9 1.79058 9.2 1.49215 9.5 1.49215C9.8 1.49215 10 1.69111 10 2.08901V8.75393L13.9 12.6335C14.1 12.8325 14.1 13.1309 13.9 13.3298C13.7258 13.5032 13.6 13.5288 13.5 13.5288Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Time Tracker</span>
|
|
</div>
|
|
|
|
<!-- Calendar -->
|
|
<div class="sidebar-item" title="Calendar">
|
|
<svg viewBox="0 0 19 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 2H15V0.5C15 0.2 14.8 0 14.5 0C14.2 0 14 0.2 14 0.5V2H5V0.5C5 0.2 4.8 0 4.5 0C4.2 0 4 0.2 4 0.5V2H0.5C0.2 2 0 2.2 0 2.5V18.5C0 18.8 0.2 19 0.5 19H18.5C18.6 19 18.6 19 18.7 19C18.9 18.9 19 18.7 19 18.5V2.5C19 2.2 18.8 2 18.5 2ZM18 18H1V7H18V18ZM18 6H1V3H4V4.5C4 4.8 4.2 5 4.5 5C4.8 5 5 4.8 5 4.5V3H14V4.5C14 4.8 14.2 5 14.5 5C14.8 5 15 4.8 15 4.5V3H18V6ZM5 10H4V11H5V10ZM15 10H14V11H15V10ZM13 10H12V11H13V10ZM7 10H6V11H7V10ZM11 10H10V11H11V10ZM9 10H8V11H9V10ZM5 12H4V13H5V12ZM15 12H14V13H15V12ZM13 12H12V13H13V12ZM7 12H6V13H7V12ZM11 12H10V13H11V12ZM9 12H8V13H9V12ZM5 14H4V15H5V14ZM15 14H14V15H15V14ZM13 14H12V15H13V14ZM7 14H6V15H7V14ZM11 14H10V15H11V14ZM9 14H8V15H9V14Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Calendar</span>
|
|
</div>
|
|
|
|
<!-- Scheduling -->
|
|
<div class="sidebar-item" title="Scheduling">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M18.4 20H15.6C15.3 20 15 19.7 15 19.4V0.600006C15 0.300006 15.3 0 15.6 0H18.4C18.7 0 19 0.300006 19 0.600006V19.4C19 19.7 18.7 20 18.4 20ZM18 1H16V19H18V1ZM13.4 20H10.7C10.4 20 10.1 19.7 10.1 19.4V10.6C10.1 10.3 10.4 10 10.7 10H13.4C13.7 10 14 10.3 14 10.6V19.4C14 19.7 13.7 20 13.4 20ZM13 11H11V19H13V11ZM8.4 20H5.7C5.4 20 5.1 19.7 5.1 19.4V6.70001C5.1 6.40001 5.4 6.10001 5.7 6.10001H8.4C8.7 6.10001 9 6.40001 9 6.70001V19.4C9 19.7 8.7 20 8.4 20ZM8 7H6V19H8V7ZM3.3 20H0.6C0.3 20 0 19.7 0 19.4V14.6C0 14.3 0.3 14 0.6 14H3.3C3.6 14 3.9 14.3 3.9 14.6V19.4C3.9 19.7 3.6 20 3.3 20ZM3 15H1V19H3V15Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Scheduling</span>
|
|
</div>
|
|
|
|
<!-- Expenses -->
|
|
<div class="sidebar-item" title="Expenses">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M18.4 20H15.6C15.3 20 15 19.7 15 19.4V0.600006C15 0.300006 15.3 0 15.6 0H18.4C18.7 0 19 0.300006 19 0.600006V19.4C19 19.7 18.7 20 18.4 20ZM18 1H16V19H18V1ZM13.4 20H10.7C10.4 20 10.1 19.7 10.1 19.4V10.6C10.1 10.3 10.4 10 10.7 10H13.4C13.7 10 14 10.3 14 10.6V19.4C14 19.7 13.7 20 13.4 20ZM13 11H11V19H13V11ZM8.4 20H5.7C5.4 20 5.1 19.7 5.1 19.4V6.70001C5.1 6.40001 5.4 6.10001 5.7 6.10001H8.4C8.7 6.10001 9 6.40001 9 6.70001V19.4C9 19.7 8.7 20 8.4 20ZM8 7H6V19H8V7ZM3.3 20H0.6C0.3 20 0 19.7 0 19.4V14.6C0 14.3 0.3 14 0.6 14H3.3C3.6 14 3.9 14.3 3.9 14.6V19.4C3.9 19.7 3.6 20 3.3 20ZM3 15H1V19H3V15Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Expenses</span>
|
|
</div>
|
|
|
|
<!-- Time Off -->
|
|
<div class="sidebar-item" title="Time Off">
|
|
<svg viewBox="0 0 19 19" fill="none"><rect x="9" y="2" width="1" height="8" rx="0.5" fill="#C6D2D9"/><rect x="15" y="9" width="1" height="6" rx="0.5" transform="rotate(90 15 9)" fill="#C6D2D9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.118896C3.48106 0.839122 0 4.74616 0 9.50371C0 14.2592 3.49833 18.1618 8 18.8812V17.9694C4.00783 17.2416 0.95 13.6704 0.95 9.50371C0.95 5.33699 4.00783 1.80628 8 1.08734V0.118896Z" fill="#C6D2D9"/><circle cx="9.5" cy="0.5" r="0.5" fill="#C6D2D9"/><circle cx="18.5" cy="9.5" r="0.5" transform="rotate(90 18.5 9.5)" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Time Off</span>
|
|
</div>
|
|
|
|
<!-- Dashboard -->
|
|
<div class="sidebar-item" title="Dashboard">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M18.4 20H15.6C15.3 20 15 19.7 15 19.4V0.600006C15 0.300006 15.3 0 15.6 0H18.4C18.7 0 19 0.300006 19 0.600006V19.4C19 19.7 18.7 20 18.4 20ZM18 1H16V19H18V1ZM13.4 20H10.7C10.4 20 10.1 19.7 10.1 19.4V10.6C10.1 10.3 10.4 10 10.7 10H13.4C13.7 10 14 10.3 14 10.6V19.4C14 19.7 13.7 20 13.4 20ZM13 11H11V19H13V11ZM8.4 20H5.7C5.4 20 5.1 19.7 5.1 19.4V6.70001C5.1 6.40001 5.4 6.10001 5.7 6.10001H8.4C8.7 6.10001 9 6.40001 9 6.70001V19.4C9 19.7 8.7 20 8.4 20ZM8 7H6V19H8V7ZM3.3 20H0.6C0.3 20 0 19.7 0 19.4V14.6C0 14.3 0.3 14 0.6 14H3.3C3.6 14 3.9 14.3 3.9 14.6V19.4C3.9 19.7 3.6 20 3.3 20ZM3 15H1V19H3V15Z" fill="#fff"/></svg>
|
|
<span class="tooltip">Dashboard</span>
|
|
</div>
|
|
|
|
<!-- Reports -->
|
|
<div class="sidebar-item" title="Reports">
|
|
<svg viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 1C0.447715 1 0 1.44772 0 2V5C0 5.55228 0.447715 6 1 6H13C13.5523 6 14 5.55228 14 5V2C14 1.44772 13.5523 1 13 1H1ZM13 2H1V5H13V2Z" fill="#C6D2D9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 7C6.44772 7 6 7.44772 6 8V11C6 11.5523 6.44772 12 7 12H19C19.5523 12 20 11.5523 20 11V8C20 7.44772 19.5523 7 19 7H7ZM19 8H7V11H19V8Z" fill="#C6D2D9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1 13C0.447715 13 0 13.4477 0 14V17C0 17.5523 0.447715 18 1 18H13C13.5523 18 14 17.5523 14 17V14C14 13.4477 13.5523 13 13 13H1ZM13 14H1V17H13V14Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Reports</span>
|
|
</div>
|
|
|
|
<!-- Projects -->
|
|
<div class="sidebar-item" title="Projects">
|
|
<svg viewBox="0 0 19 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 1C0.447715 1 0 1.44772 0 2V5C0 5.55228 0.447715 6 1 6H13C13.5523 6 14 5.55228 14 5V2C14 1.44772 13.5523 1 13 1H1ZM13 2H1V5H13V2ZM7 7C6.44772 7 6 7.44772 6 8V11C6 11.5523 6.44772 12 7 12H19C19.5523 12 20 11.5523 20 11V8C20 7.44772 19.5523 7 19 7H7ZM19 8H7V11H19V8ZM1 13C0.447715 13 0 13.4477 0 14V17C0 17.5523 0.447715 18 1 18H13C13.5523 18 14 17.5523 14 17V14C14 13.4477 13.5523 13 13 13H1ZM13 14H1V17H13V14Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Projects</span>
|
|
</div>
|
|
|
|
<!-- Teams -->
|
|
<div class="sidebar-item" title="Teams">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M18.4 20H2.63052C2.33052 20 2.03052 19.7 2.03052 19.4V0.600006C2.03052 0.300006 2.33052 0 2.63052 0H13.8999C14.1999 0 14.274 0.0442007 14.3972 0.18629C14.4638 0.263199 14.5253 0.309343 14.5999 0.399994L17.5999 3.19998C17.6999 3.29998 17.6999 3.29999 17.7999 3.39999C17.8999 3.49999 17.9999 3.69999 17.9999 3.89999V19.4C17.9999 19.7 17.6999 20 17.3999 20Z" fill="#C6D2D9"/><path d="M14 0.899994V4H16.9L14 0.899994ZM17 4.89999H13.9C13.3 4.89999 13 4.49999 13 3.89999V0.899994H3.03058V19H17V4.89999Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Teams</span>
|
|
</div>
|
|
|
|
<!-- Clients -->
|
|
<div class="sidebar-item" title="Clients">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M17.4 20H2.63058C2.33058 20 2.03058 19.7 2.03058 19.4V0.600006C2.03058 0.300006 2.33058 0 2.63058 0H13.9C14.2 0 14.2741 0.0442007 14.3972 0.18629C14.4639 0.263199 14.5254 0.309343 14.6 0.399994L17.6 3.19998C17.7 3.29998 17.7 3.29999 17.8 3.39999C17.9 3.49999 18 3.69999 18 3.89999V19.4C18 19.7 17.7 20 17.4 20ZM14 0.899994V4H16.9L14 0.899994ZM17 4.89999H13.9C13.3 4.89999 13 4.49999 13 3.89999V0.899994H3.03058V19H17V4.89999Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Clients</span>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
<div class="sidebar-item" title="Tags">
|
|
<svg viewBox="0 0 20 20" fill="none"><rect x="0.5" y="14.5" width="5" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/><rect x="0.5" y="7.5" width="5" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/><rect x="7.5" y="14.5" width="5" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/><rect x="7.5" y="7.5" width="5" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/><rect x="14.5" y="14.5" width="5" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/><rect x="14.5" y="7.5" width="5" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/><rect x="0.5" y="0.5" width="19" height="5" rx="0.5" stroke="#C6D2D9" stroke-width="1"/></svg>
|
|
<span class="tooltip">Tags</span>
|
|
</div>
|
|
|
|
<!-- Invoices -->
|
|
<div class="sidebar-item" title="Invoices">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M17.4 20H2.63058C2.33058 20 2.03058 19.7 2.03058 19.4V0.600006C2.03058 0.300006 2.33058 0 2.63058 0H13.9C14.2 0 14.2741 0.0442007 14.3972 0.18629C14.4639 0.263199 14.5254 0.309343 14.6 0.399994L17.6 3.19998C17.7 3.29998 17.7 3.29999 17.8 3.39999C17.9 3.49999 18 3.69999 18 3.89999V19.4C18 19.7 17.7 20 17.4 20ZM14 0.899994V4H16.9L14 0.899994ZM17 4.89999H13.9C13.3 4.89999 13 4.49999 13 3.89999V0.899994H3.03058V19H17V4.89999ZM5.53058 4H10.5C10.8 4 11 4.2 11 4.5C11 4.8 10.8 5 10.5 5H5.53058C5.23058 5 5.03058 4.8 5.03058 4.5C5.03058 4.2 5.23058 4 5.53058 4ZM5.53058 7H14.5C14.8 7 15 7.2 15 7.5C15 7.8 14.8 8 14.5 8H5.53058C5.23058 8 5.03058 7.8 5.03058 7.5C5.03058 7.2 5.23058 7 5.53058 7ZM5.53058 10H14.5C14.8 10 15 10.2 15 10.5C15 10.8 14.8 11 14.5 11H5.53058C5.23058 11 5.03058 10.8 5.03058 10.5C5.03058 10.2 5.23058 10 5.53058 10ZM5.53058 13H14.5C14.8 13 15 13.2 15 13.5C15 13.8 14.8 14 14.5 14H5.53058C5.23058 14 5.03058 13.8 5.03058 13.5C5.03058 13.2 5.23058 13 5.53058 13ZM5.53058 16H14.5C14.8 16 15 16.2 15 16.5C15 16.8 14.8 17 14.5 17H5.53058C5.23058 17 5.03058 16.8 5.03058 16.5C5.03058 16.2 5.23058 16 5.53058 16Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Invoices</span>
|
|
</div>
|
|
|
|
<!-- Kiosks -->
|
|
<div class="sidebar-item" title="Kiosks">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M17.4 20H2.63058C2.33058 20 2.03058 19.7 2.03058 19.4V0.600006C2.03058 0.300006 2.33058 0 2.63058 0H13.9C14.2 0 14.2741 0.0442007 14.3972 0.18629C14.4639 0.263199 14.5254 0.309343 14.6 0.399994L17.6 3.19998C17.7 3.29998 17.7 3.29999 17.8 3.39999C17.9 3.49999 18 3.69999 18 3.89999V19.4C18 19.7 17.7 20 17.4 20ZM14 0.899994V4H16.9L14 0.899994ZM17 4.89999H13.9C13.3 4.89999 13 4.49999 13 3.89999V0.899994H3.03058V19H17V4.89999ZM5.53058 4H10.5C10.8 4 11 4.2 11 4.5C11 4.8 10.8 5 10.5 5H5.53058C5.23058 5 5.03058 4.8 5.03058 4.5C5.03058 4.2 5.23058 4 5.53058 4ZM5.53058 7H14.5C14.8 7 15 7.2 15 7.5C15 7.8 14.8 8 14.5 8H5.53058C5.23058 8 5.03058 7.8 5.03058 7.5C5.03058 7.2 5.23058 7 5.53058 7ZM5.53058 10H14.5C14.8 10 15 10.2 15 10.5C15 10.8 14.8 11 14.5 11H5.53058C5.23058 11 5.03058 10.8 5.03058 10.5C5.03058 10.2 5.23058 10 5.53058 10ZM5.53058 13H14.5C14.8 13 15 13.2 15 13.5C15 13.8 14.8 14 14.5 14H5.53058C5.23058 14 5.03058 13.8 5.03058 13.5C5.03058 13.2 5.23058 13 5.53058 13ZM5.53058 16H14.5C14.8 16 15 16.2 15 16.5C15 16.8 14.8 17 14.5 17H5.53058C5.23058 17 5.03058 16.8 5.03058 16.5C5.03058 16.2 5.23058 16 5.53058 16Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Kiosks</span>
|
|
</div>
|
|
|
|
<!-- Approvals -->
|
|
<div class="sidebar-item" title="Approvals">
|
|
<svg viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 1H16.5C16.8 1 17 1.2 17 1.5V9.59971C16.6832 9.43777 16.3486 9.30564 16 9.20703V5H1V16H9.20703C9.30564 16.3486 9.43777 16.6832 9.59971 17H0.5C0.2 17 0 16.8 0 16.5V1.5C0 1.2 0.2 1 0.5 1H4V0.5C4 0.2 4.2 0 4.5 0C4.8 0 5 0.2 5 0.5V1H12V0.5C12 0.2 12.2 0 12.5 0C12.8 0 13 0.2 13 0.5V1ZM13.7 15.9001L11.7 13.9001L11 14.7001L13 16.7001L13.7 17.4001L14.4 16.7001L18 13L17.3 12.3L13.7 15.9001ZM14.5 20C17.5376 20 20 17.5376 20 14.5C20 11.4624 17.5376 9 14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20Z" fill="#C6D2D9"/></svg>
|
|
<span class="tooltip">Approvals</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-bottom">
|
|
<div class="sidebar-profile">{{ auth()->check() ? strtoupper(substr(auth()->user()->name, 0, 1)) : '?' }}</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- === MAIN CONTENT === -->
|
|
<div class="main-content">
|
|
<!-- === TOP BAR === -->
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<div class="topbar-logo">
|
|
<svg height="24" viewBox="0 0 158 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M31.3333 0H8.66667C3.8802 0 0 3.8802 0 8.66667V31.3333C0 36.1198 3.8802 40 8.66667 40H31.3333C36.1198 40 40 36.1198 40 31.3333V8.66667C40 3.8802 36.1198 0 31.3333 0Z" fill="#03A9F4"/>
|
|
<path d="M25.6947 11.3924C26.3928 10.6932 26.2425 9.51811 25.3206 9.16425C24.0343 8.67046 22.6376 8.3999 21.1779 8.3999C14.7823 8.3999 9.59766 13.5934 9.59766 19.9999C9.59766 26.4064 14.7823 31.5999 21.1779 31.5999C22.6286 31.5999 24.017 31.3327 25.2968 30.8447C26.2211 30.4922 26.3728 29.3149 25.6735 28.6144C25.2203 28.1605 24.5345 28.0545 23.9264 28.257C23.0645 28.544 22.1427 28.6995 21.1846 28.6995C16.3879 28.6995 12.4994 24.8043 12.4994 19.9995C12.4994 15.1946 16.3879 11.2995 21.1846 11.2995C22.1496 11.2995 23.0779 11.4571 23.9451 11.7481C24.5537 11.9523 25.2409 11.847 25.6947 11.3924Z" fill="white"/>
|
|
<path d="M22.9294 20.1332C22.9294 20.9432 22.2728 21.5998 21.4628 21.5998C20.6527 21.5998 19.9961 20.9432 19.9961 20.1332C19.9961 19.3232 20.6527 18.6665 21.4628 18.6665C22.2728 18.6665 22.9294 19.3232 22.9294 20.1332Z" fill="white"/>
|
|
<path d="M23.7261 17.8301C23.2007 17.308 23.2007 16.4616 23.7261 15.9395L28.1021 11.5913C28.6274 11.0692 29.4793 11.0692 30.0047 11.5913C30.53 12.1133 30.53 12.9597 30.0047 13.4818L25.6287 17.8301C25.1033 18.3521 24.2515 18.3521 23.7261 17.8301Z" fill="white"/>
|
|
<path d="M23.7261 22.1693C23.2007 22.6914 23.2007 23.5378 23.7261 24.0599L28.1021 28.4082C28.6274 28.9302 29.4793 28.9302 30.0047 28.4082C30.53 27.8861 30.53 27.0397 30.0047 26.5176L25.6287 22.1693C25.1033 21.6473 24.2515 21.6473 23.7261 22.1693Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
|
|
@if(auth()->check() && auth()->user()->currentOrganization)
|
|
<div class="topbar-org-switcher" id="org-switcher-trigger">
|
|
{{ auth()->user()->currentOrganization->name }}
|
|
<svg viewBox="0 0 11 6" fill="none"><path d="M5.35937 5.64063C5.62453 5.9058 6.05443 5.9058 6.31959 5.64063L10.6406 1.31961C10.9058 1.05446 10.9058 0.62455 10.6406 0.359392C10.3754 0.0942327 9.94554 0.0942327 9.68039 0.359392L5.83948 4.20029L1.99857 0.359391C1.73342 0.0942323 1.30351 0.0942323 1.03835 0.359391C0.773185 0.62455 0.773185 1.05446 1.03835 1.31961L5.35937 5.64063Z" fill="#90A4AE"/></svg>
|
|
</div>
|
|
|
|
<!-- Organization dropdown -->
|
|
<div class="dropdown" id="org-dropdown">
|
|
<div class="dropdown-menu" id="org-dropdown-menu">
|
|
@if(auth()->check())
|
|
@foreach(auth()->user()->organizations as $org)
|
|
<form action="{{ route('organizations.switch', $org) }}" method="POST" class="dropdown-item">
|
|
@csrf
|
|
@method('PUT')
|
|
<span>{{ $org->name }}</span>
|
|
</form>
|
|
@endforeach
|
|
@else
|
|
<span class="dropdown-item" style="color: var(--text-muted);">No organizations</span>
|
|
@endif
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item" onclick="event.preventDefault(); document.getElementById('create-org-trigger').click();">
|
|
<svg viewBox="0 0 16 20" fill="none"><path d="M16 14.1C16 10.9 12.4878 10.9 12.4878 6.4C12.4878 4.5 11.4146 2.9 9.7561 2.2C9.7561 2.1 9.7561 2 9.7561 1.8C9.7561 0.799999 8.97561 0 8 0C7.02439 0 6.2439 0.799999 6.2439 1.8C6.2439 1.9 6.2439 2 6.2439 2.2C4.68292 2.9 3.51219 4.5 3.51219 6.4C3.51219 10.9 0 10.9 0 14.1C0 15.5 2.2439 16.7 5.36586 17.1C5.36586 17.2 5.36586 17.2 5.36586 17.3C5.36586 18.8 6.53658 20 8 20C9.46342 20 10.6341 18.8 10.6341 17.3C10.6341 17.2 10.6341 17.2 10.6341 17.1C13.7561 16.7 16 15.5 16 14.1Z" fill="#03A9F4"/></svg>
|
|
Create organization
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="topbar-right">
|
|
<!-- Help -->
|
|
<button class="topbar-btn" title="Help">
|
|
<svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#90A4AE" stroke-width="1.5" fill="none"/><path d="M8.5 8.5C8.5 7.1 9.5 6 10.5 6C11.8 6 12.5 6.9 12.5 8.2C12.5 9.5 11.5 10.2 11 10.8L11 12L9 12L9 10.5C9 10 10 9.2 10 8.2C10 7.6 9.5 7.2 9 7.2C8.5 7.2 8.5 8 8.5 8.5ZM10 14C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12C9.44772 12 9 12.4477 9 13C9 13.5523 9.44772 14 10 14Z" fill="#90A4AE"/></svg>
|
|
</button>
|
|
|
|
<!-- Notifications -->
|
|
<button class="topbar-btn" title="Notifications">
|
|
<svg viewBox="0 0 19 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 19C14.7467 19 19 14.7467 19 9.5C19 4.25329 14.7467 0 9.5 0C4.25329 0 0 4.25329 0 9.5C0 14.7467 4.25329 19 9.5 19ZM9.50001 18.05C14.222 18.05 18.05 14.222 18.05 9.5C18.05 4.77797 14.222 0.95 9.50001 0.95C4.77798 0.95 0.950012 4.77797 0.950012 9.5C0.950012 14.222 4.77798 18.05 9.50001 18.05Z" fill="#03A9F4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.97983 4.75005L9.03938 4.75005L9.03938 9.02062L4.76881 9.02062V9.96107L9.03938 9.96107L9.03938 14.2316L9.97983 14.2316L9.97983 9.96107L14.2504 9.96107V9.02062L9.97983 9.02062L9.97983 4.75005Z" fill="#03A9F4"/></svg>
|
|
</button>
|
|
|
|
<!-- Menu dots -->
|
|
<button class="topbar-btn" title="More">
|
|
<svg viewBox="0 0 20 20" fill="none"><rect y="2" width="20" height="1" fill="#90A4AE"/><rect y="7" width="20" height="1" fill="#90A4AE"/><rect y="12" width="20" height="1" fill="#90A4AE"/><rect y="17" width="20" height="1" fill="#90A4AE"/></svg>
|
|
</button>
|
|
|
|
<div class="topbar-divider"></div>
|
|
|
|
<!-- Profile -->
|
|
<div class="dropdown" id="profile-dropdown">
|
|
<button class="topbar-profile" id="profile-trigger" type="button">
|
|
<div class="topbar-profile-avatar">{{ auth()->check() ? strtoupper(substr(auth()->user()->name, 0, 1)) : '?' }}</div>
|
|
</button>
|
|
<div class="dropdown-menu" id="profile-dropdown-menu" style="right: 0; top: calc(100% + 8px);">
|
|
@if(auth()->check())
|
|
<div class="profile-info" style="padding: 16px; border-bottom: 1px solid var(--border-color);">
|
|
<div class="profile-info__avatar" style="width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin-bottom: 8px;">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
|
|
<div style="font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px;">{{ auth()->user()->name }}</div>
|
|
<div style="font-size: 13px; color: var(--text-muted);">{{ auth()->user()->email }}</div>
|
|
</div>
|
|
<a href="#" class="dropdown-item">
|
|
<svg viewBox="0 0 20 20" fill="none" width="16" height="16"><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 18C5.589 18 2 14.411 2 10S5.589 2 10 2s8 3.589 8 8-3.589 8-8 8z" fill="#90A4AE"/><path d="M10 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-3.314 0-6-1.5-6-3.5S6.686 5 10 5s6 1.5 6 3.5S13.314 12 10 12z" fill="#90A4AE"/></svg>
|
|
My Profile
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<svg viewBox="0 0 20 20" fill="none" width="16" height="16"><path d="M14.5 2H5.5C4.1 2 3 3.1 3 4.5V15.5C3 16.9 4.1 18 5.5 18H14.5C15.9 18 17 16.9 17 15.5V4.5C17 3.1 15.9 2 14.5 2Z" stroke="#90A4AE" stroke-width="1.5" fill="none"/><path d="M12 6H8V14H12V6Z" fill="#90A4AE"/></svg>
|
|
Settings
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<form action="{{ route('logout') }}" method="POST" style="margin: 0;">
|
|
@csrf
|
|
<button type="submit" class="dropdown-item" style="color: var(--error-color); width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font: inherit;">
|
|
<svg viewBox="0 0 20 20" fill="none" width="16" height="16"><path d="M15.5 10H6.5V8.5L11 4L6.5 8.5H3.5V11.5H6.5L11 16L6.5 11.5H15.5V10Z" fill="#bf2600"/></svg>
|
|
Log out
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- === TIMER SECTION === -->
|
|
<main class="timer-section">
|
|
@if(auth()->check() && $errors->any())
|
|
<div class="auth-info-banner">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Timer Card -->
|
|
<div class="timer-card">
|
|
<div class="timer-card__header">
|
|
<div class="timer-card__stopwatch">
|
|
<button class="timer-btn timer-btn--stop" title="Stop timer">
|
|
<svg viewBox="0 0 20 20" fill="none"><rect width="10" height="10" x="5" y="5" rx="1" fill="#fff"/></svg>
|
|
</button>
|
|
<div class="stopwatch-time" id="timer-display">00:00:00</div>
|
|
<button class="timer-btn timer-btn--start" title="Start timer" id="start-timer-btn">
|
|
<svg viewBox="0 0 20 20" fill="none"><path d="M6 4L16 10L6 16V4Z" fill="#fff"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timer-card__body">
|
|
<div class="timer-card__row">
|
|
<input type="text" class="timer-card__input" placeholder="What are you working on?" id="timer-entry-name">
|
|
</div>
|
|
<div class="timer-card__row">
|
|
<input type="text" class="timer-card__input" placeholder="Project" id="timer-project">
|
|
<button class="timer-card__addon" title="Tags">
|
|
<svg viewBox="0 0 20 20" fill="none"><rect x="0.5" y="14.5" width="5" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/><rect x="0.5" y="7.5" width="5" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/><rect x="7.5" y="14.5" width="5" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/><rect x="7.5" y="7.5" width="5" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/><rect x="14.5" y="14.5" width="5" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/><rect x="14.5" y="7.5" width="5" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/><rect x="0.5" y="0.5" width="19" height="5" rx="0.5" stroke="#90A4AE" stroke-width="1" fill="none"/></svg>
|
|
Tags
|
|
</button>
|
|
<button class="timer-card__addon" title="Billable">
|
|
<svg viewBox="0 0 19 19" fill="none"><circle cx="9.5" cy="9.5" r="8.5" stroke="#90A4AE" stroke-width="1" fill="none"/><path d="M7 6.5C7 5.1 8.1 4 9.5 4S12 5.1 12 6.5C12 7.2 11.7 7.8 11.2 8.2L8.5 10.5C8.3 10.7 8.1 10.9 8.1 11.2V13" stroke="#90A4AE" stroke-width="1.2" stroke-linecap="round" fill="none"/></svg>
|
|
$
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timer-card__footer">
|
|
<div class="timer-card__footer-left">
|
|
<button class="timer-card__addon" title="Add entry">
|
|
<svg viewBox="0 0 16 20" fill="none"><path d="M8 0.900002C8.48781 0.900002 8.87804 1.3 8.87804 1.8C8.87804 2.3 8.48781 2.7 8 2.7C7.5122 2.7 7.12196 2.3 7.12196 1.8C7.12196 1.3 7.5122 0.900002 8 0.900002ZM16 14.1C16 10.9 12.4878 10.9 12.4878 6.4C12.4878 4.5 11.4146 2.9 9.7561 2.2C9.7561 2.1 9.7561 2 9.7561 1.8C9.7561 0.799999 8.97561 0 8 0C7.02439 0 6.2439 0.799999 6.2439 1.8C6.2439 1.9 6.2439 2 6.2439 2.2C4.68292 2.9 3.51219 4.5 3.51219 6.4C3.51219 10.9 0 10.9 0 14.1C0 15.5 2.2439 16.7 5.36586 17.1C5.36586 17.2 5.36586 17.2 5.36586 17.3C5.36586 18.8 6.53658 20 8 20C9.46342 20 10.6341 18.8 10.6341 17.3C10.6341 17.2 10.6341 17.2 10.6341 17.1C13.7561 16.7 16 15.5 16 14.1Z" fill="#90A4AE"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="timer-card__footer-right">
|
|
<button class="btn-save-timer" id="save-timer">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Favorites Bar -->
|
|
<div class="favorites-bar">
|
|
<span class="favorites-bar__label">Favorite time entries</span>
|
|
<span class="favorites-bar__empty">Add time entries to your favorites.</span>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div class="empty-state">
|
|
<div class="empty-state__image">
|
|
<img src="{{ asset('images/empty-tracker-icon.webp') }}" alt="Empty tracker illustration">
|
|
</div>
|
|
<h2 class="empty-state__title">Let's start tracking!</h2>
|
|
<p class="empty-state__text">Install TimeLog and track time anywhere.</p>
|
|
<div class="empty-state__apps">
|
|
<a href="#" class="empty-state__app-link" title="Desktop App">
|
|
<svg viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7L12 12L22 7L12 2Z" fill="#4285F4"/><path d="M2 17L12 22L22 17" stroke="#34A853" stroke-width="2" stroke-linecap="round"/><path d="M2 12L12 17L22 12" stroke="#FBBC05" stroke-width="2" stroke-linecap="round"/></svg>
|
|
</a>
|
|
<a href="#" class="empty-state__app-link" title="Chrome Extension">
|
|
<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#4285F4"/><circle cx="12" cy="12" r="4" fill="#fff"/><circle cx="12" cy="12" r="6" stroke="#fff" stroke-width="1.5" fill="none"/></svg>
|
|
</a>
|
|
<a href="#" class="empty-state__app-link" title="Browser Extension">
|
|
<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="3" fill="#34A853"/><path d="M8 12L11 15L16 9" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{{-- Organization creation modal --}}
|
|
@if(auth()->check() && !auth()->user()->has_organization)
|
|
<div id="org-modal" class="org-modal" style="display: flex;">
|
|
<div class="org-modal-backdrop" data-close-modal></div>
|
|
<div class="org-modal-card">
|
|
<div class="org-modal__header">
|
|
<h2>Create your first organization</h2>
|
|
<p>Organizations help you group your projects and team members together.</p>
|
|
</div>
|
|
<div class="org-modal__body">
|
|
<div class="form-control">
|
|
<label for="org-name">Organization name</label>
|
|
<input type="text" id="org-name" name="name" placeholder="e.g. My Company" maxlength="255">
|
|
</div>
|
|
<p id="org-error" class="org-error" style="display:none;"></p>
|
|
</div>
|
|
<div class="org-modal__footer">
|
|
<button type="button" class="btn-cancel" data-close-modal>Cancel</button>
|
|
<button type="button" class="btn-save-timer" id="org-create-btn" onclick="createOrganization()">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<script>
|
|
// === Timer display ===
|
|
let timerSeconds = 0;
|
|
let timerInterval = null;
|
|
|
|
function formatTime(totalSeconds) {
|
|
const h = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
|
|
const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
|
|
const s = String(totalSeconds % 60).padStart(2, '0');
|
|
return `${h}:${m}:${s}`;
|
|
}
|
|
|
|
const startTimerBtn = document.getElementById('start-timer-btn');
|
|
if (startTimerBtn) {
|
|
startTimerBtn.addEventListener('click', function () {
|
|
if (!timerInterval) {
|
|
timerInterval = setInterval(() => {
|
|
timerSeconds++;
|
|
document.getElementById('timer-display').textContent = formatTime(timerSeconds);
|
|
}, 1000);
|
|
this.style.opacity = '0.5';
|
|
} else {
|
|
clearInterval(timerInterval);
|
|
timerInterval = null;
|
|
timerSeconds = 0;
|
|
document.getElementById('timer-display').textContent = '00:00:00';
|
|
this.style.opacity = '1';
|
|
}
|
|
});
|
|
}
|
|
|
|
const saveTimerBtn = document.getElementById('save-timer');
|
|
if (saveTimerBtn) {
|
|
saveTimerBtn.addEventListener('click', function () {
|
|
const name = document.getElementById('timer-entry-name').value.trim();
|
|
if (!name) {
|
|
alert('Please enter a task name.');
|
|
return;
|
|
}
|
|
// TODO: Save time entry via API
|
|
alert('Time entry saved: ' + name);
|
|
});
|
|
}
|
|
|
|
// === Organization modal ===
|
|
function createOrganization() {
|
|
const name = document.getElementById('org-name').value.trim();
|
|
const errorEl = document.getElementById('org-error');
|
|
const btn = document.getElementById('org-create-btn');
|
|
|
|
if (!name) {
|
|
errorEl.textContent = 'Please enter an organization name.';
|
|
errorEl.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
btn.textContent = 'Creating...';
|
|
btn.disabled = true;
|
|
errorEl.style.display = 'none';
|
|
|
|
fetch('{{ route("organizations.store") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ name: name })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.redirect) {
|
|
window.location.href = data.redirect;
|
|
} else if (data.errors) {
|
|
const messages = Object.values(data.errors).flat().join('\n');
|
|
errorEl.textContent = messages;
|
|
errorEl.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
errorEl.textContent = 'Something went wrong. Please try again.';
|
|
errorEl.style.display = 'block';
|
|
})
|
|
.finally(() => {
|
|
btn.textContent = 'Create';
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('[data-close-modal]').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
document.getElementById('org-modal').style.display = 'none';
|
|
});
|
|
});
|
|
|
|
const orgNameEl = document.getElementById('org-name');
|
|
if (orgNameEl) {
|
|
orgNameEl.addEventListener('input', function () {
|
|
document.getElementById('org-error').style.display = 'none';
|
|
});
|
|
|
|
orgNameEl.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
createOrganization();
|
|
}
|
|
});
|
|
}
|
|
|
|
// === Dropdown toggles ===
|
|
const orgSwitcher = document.getElementById('org-switcher-trigger');
|
|
if (orgSwitcher) {
|
|
orgSwitcher.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
document.getElementById('org-dropdown-menu').classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
const profileTrigger = document.getElementById('profile-trigger');
|
|
if (profileTrigger) {
|
|
profileTrigger.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
document.getElementById('profile-dropdown-menu').classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', function () {
|
|
document.getElementById('org-dropdown-menu')?.classList.remove('show');
|
|
document.getElementById('profile-dropdown-menu')?.classList.remove('show');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|