370 lines
21 KiB
HTML
370 lines
21 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Petmaster CRM — Variant 2: Schedule-First</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body { font-family: 'Inter', -apple-system, sans-serif; background: #FAFBFC; color: #1a1a2e; }
|
||
|
|
.sidebar { border-right: 1px solid #E5E7EB; }
|
||
|
|
.nav-item { transition: all 0.15s ease; }
|
||
|
|
.nav-item:hover { background: #F3F4F6; }
|
||
|
|
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||
|
|
.calendar-day { transition: all 0.15s; }
|
||
|
|
.calendar-day:hover { background: #EEF2FF; }
|
||
|
|
.calendar-day.today { background: #4F46E5; color: white; }
|
||
|
|
.calendar-day.today:hover { background: #4338CA; }
|
||
|
|
.booking-card { transition: all 0.2s; border-left: 3px solid transparent; }
|
||
|
|
.booking-card:hover { border-left-color: #4F46E5; box-shadow: 0 2px 8px rgba(79,70,229,0.08); }
|
||
|
|
.booking-scheduled { border-left-color: #F59E0B; }
|
||
|
|
.booking-confirmed { border-left-color: #3B82F6; }
|
||
|
|
.booking-completed { border-left-color: #22C55E; }
|
||
|
|
.btn-primary { background: #4F46E5; color: white; font-weight: 600; transition: all 0.15s; }
|
||
|
|
.btn-primary:hover { background: #4338CA; }
|
||
|
|
.btn-secondary { background: white; color: #4B5563; border: 1px solid #D1D5DB; font-weight: 500; transition: all 0.15s; }
|
||
|
|
.btn-secondary:hover { background: #F9FAFB; border-color: #9CA3AF; }
|
||
|
|
.btn-sm { padding: 6px 12px; font-size: 13px; }
|
||
|
|
.input { background: white; border: 1px solid #D1D5DB; color: #1a1a2e; }
|
||
|
|
.input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
|
||
|
|
.badge { font-size: 11px; padding: 3px 10px; border-radius: 9999px; font-weight: 600; }
|
||
|
|
.badge-scheduled { background: #FEF3C7; color: #92400E; }
|
||
|
|
.badge-confirmed { background: #DBEAFE; color: #1E40AF; }
|
||
|
|
.badge-completed { background: #D1FAE5; color: #065F46; }
|
||
|
|
.modal-overlay { background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
|
||
|
|
.tab { padding: 8px 16px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s; }
|
||
|
|
.tab:hover { color: #4F46E5; }
|
||
|
|
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; }
|
||
|
|
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #4F46E5; background: white; }
|
||
|
|
.timeline-dot.connected { background: #4F46E5; }
|
||
|
|
::-webkit-scrollbar { width: 6px; }
|
||
|
|
::-webkit-scrollbar-track { background: transparent; }
|
||
|
|
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="min-h-screen">
|
||
|
|
|
||
|
|
<!-- Top Header -->
|
||
|
|
<header class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<span class="text-2xl">🐾</span>
|
||
|
|
<div>
|
||
|
|
<div class="text-base font-bold tracking-tight text-slate-800">Petmaster</div>
|
||
|
|
<div class="text-[10px] text-gray-400 uppercase tracking-widest">Schedule Management</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<button class="btn-primary btn-sm flex items-center gap-2">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||
|
|
New Booking
|
||
|
|
</button>
|
||
|
|
<div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-bold">E</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="flex min-h-[calc(100vh-52px)]">
|
||
|
|
|
||
|
|
<!-- Narrow Sidebar -->
|
||
|
|
<aside class="sidebar w-48 bg-white flex flex-col flex-shrink-0">
|
||
|
|
<nav class="flex-1 p-3 space-y-1">
|
||
|
|
<a href="#" class="nav-item flex items-center gap-2 px-3 py-2 text-sm rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
|
||
|
|
Dashboard
|
||
|
|
</a>
|
||
|
|
<a href="#" class="nav-item flex items-center gap-2 px-3 py-2 text-sm text-gray-600 rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
|
|
Clients
|
||
|
|
</a>
|
||
|
|
<a href="#" class="nav-item flex items-center gap-2 px-3 py-2 text-sm text-gray-600 rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.241-4.241zm0 0V21"/></svg>
|
||
|
|
Services
|
||
|
|
</a>
|
||
|
|
<a href="#" class="nav-item active flex items-center gap-2 px-3 py-2 text-sm rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||
|
|
Schedule
|
||
|
|
</a>
|
||
|
|
<a href="#" class="nav-item flex items-center gap-2 px-3 py-2 text-sm text-gray-600 rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg>
|
||
|
|
Invoices
|
||
|
|
</a>
|
||
|
|
<a href="#" class="nav-item flex items-center gap-2 px-3 py-2 text-sm text-gray-600 rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
|
||
|
|
Messages
|
||
|
|
</a>
|
||
|
|
<a href="#" class="nav-item flex items-center gap-2 px-3 py-2 text-sm text-gray-600 rounded-lg">
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||
|
|
Self-Booking
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="flex-1 p-6 overflow-auto">
|
||
|
|
|
||
|
|
<!-- Calendar Header -->
|
||
|
|
<div class="bg-white rounded-xl border border-gray-200 p-4 mb-4">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<button class="text-gray-400 hover:text-gray-600">
|
||
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
|
||
|
|
</button>
|
||
|
|
<h2 class="text-lg font-bold text-slate-800">July 2026</h2>
|
||
|
|
<button class="text-gray-400 hover:text-gray-600">
|
||
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="tab active">Day</div>
|
||
|
|
<div class="tab" onclick="this.parentElement.querySelector('.active').classList.remove('active'); this.classList.add('active')">Week</div>
|
||
|
|
<div class="tab" onclick="this.parentElement.querySelector('.active').classList.remove('active'); this.classList.add('active')">Month</div>
|
||
|
|
<button class="btn-secondary btn-sm ml-3">
|
||
|
|
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||
|
|
Today
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Calendar Grid -->
|
||
|
|
<div class="grid grid-cols-7 gap-px bg-gray-200 rounded-lg overflow-hidden">
|
||
|
|
<!-- Day Headers -->
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Mon</div>
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Tue</div>
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Wed</div>
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Thu</div>
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Fri</div>
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Sat</div>
|
||
|
|
<div class="bg-gray-50 p-2 text-center text-xs font-semibold text-gray-500">Sun</div>
|
||
|
|
|
||
|
|
<!-- Week 1 (Jun 29 - Jul 5) -->
|
||
|
|
<div class="bg-white p-2 min-h-[80px] opacity-40"><span class="text-xs text-gray-400">29</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">30</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">1</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">2</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">3</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">4</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">5</span></div>
|
||
|
|
|
||
|
|
<!-- Week 2 (Jul 6-12) -->
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">6</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">7</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">8</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">9</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">10</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">11</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">12</span></div>
|
||
|
|
|
||
|
|
<!-- Week 3 (Jul 13-19) - TODAY -->
|
||
|
|
<div class="bg-white p-2 min-h-[80px] calendar-day today">
|
||
|
|
<span class="text-sm font-bold">13</span>
|
||
|
|
<div class="mt-1 space-y-0.5">
|
||
|
|
<div class="h-1.5 bg-amber-400 rounded-full" style="width:80%"></div>
|
||
|
|
<div class="h-1.5 bg-blue-400 rounded-full" style="width:60%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">14</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">15</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">16</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">17</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">18</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">19</span></div>
|
||
|
|
|
||
|
|
<!-- Week 4 -->
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">20</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">21</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">22</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">23</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">24</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">25</span></div>
|
||
|
|
<div class="bg-white p-2 min-h-[80px]"><span class="text-xs text-gray-500">26</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Today's Schedule -->
|
||
|
|
<div class="grid grid-cols-3 gap-4">
|
||
|
|
<!-- Timeline (2 columns) -->
|
||
|
|
<div class="col-span-2 bg-white rounded-xl border border-gray-200 p-5">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="text-base font-bold text-slate-800 flex items-center gap-2">
|
||
|
|
<svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||
|
|
Today's Schedule · July 13
|
||
|
|
</h3>
|
||
|
|
<span class="text-xs text-gray-500">5 bookings · $520 total</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Timeline -->
|
||
|
|
<div class="space-y-0">
|
||
|
|
<!-- 9:00 AM -->
|
||
|
|
<div class="flex gap-4 booking-card booking-scheduled bg-amber-50/50 rounded-lg p-4">
|
||
|
|
<div class="w-20 flex-shrink-0 pt-1">
|
||
|
|
<div class="text-sm font-bold text-slate-800">9:00 AM</div>
|
||
|
|
<div class="text-xs text-gray-400">90 min</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="flex items-center gap-2 mb-1">
|
||
|
|
<span class="text-lg">🐕</span>
|
||
|
|
<span class="font-semibold text-slate-800">Full Grooming</span>
|
||
|
|
<span class="badge badge-scheduled">Scheduled</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm text-gray-600">
|
||
|
|
<span class="font-medium">Alice Johnson</span> · <span class="text-gray-500">Max · Golden Retriever</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-4 mt-2">
|
||
|
|
<span class="text-xs text-gray-500">Staff: Elliot</span>
|
||
|
|
<span class="text-xs text-gray-500">Note: Sensitive skin</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-shrink-0 space-y-1">
|
||
|
|
<button class="btn-secondary btn-sm w-full">Confirm</button>
|
||
|
|
<button class="btn-secondary btn-sm w-full text-xs">Complete</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 10:30 AM -->
|
||
|
|
<div class="flex gap-4 booking-card booking-confirmed bg-blue-50/50 rounded-lg p-4">
|
||
|
|
<div class="w-20 flex-shrink-0 pt-1">
|
||
|
|
<div class="text-sm font-bold text-slate-800">10:30 AM</div>
|
||
|
|
<div class="text-xs text-gray-400">30 min</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="flex items-center gap-2 mb-1">
|
||
|
|
<span class="text-lg">🐈</span>
|
||
|
|
<span class="font-semibold text-slate-800">Nail Trim</span>
|
||
|
|
<span class="badge badge-confirmed">Confirmed</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm text-gray-600">
|
||
|
|
<span class="font-medium">Bob Smith</span> · <span class="text-gray-500">Luna · Persian Cat</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-shrink-0 space-y-1">
|
||
|
|
<button class="btn-secondary btn-sm w-full text-xs">Complete</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 1:00 PM -->
|
||
|
|
<div class="flex gap-4 booking-card booking-completed bg-emerald-50/50 rounded-lg p-4">
|
||
|
|
<div class="w-20 flex-shrink-0 pt-1">
|
||
|
|
<div class="text-sm font-bold text-slate-800">1:00 PM</div>
|
||
|
|
<div class="text-xs text-gray-400">2 hrs</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="flex items-center gap-2 mb-1">
|
||
|
|
<span class="text-lg">🐕</span>
|
||
|
|
<span class="font-semibold text-slate-800">Boarding Check-in</span>
|
||
|
|
<span class="badge badge-completed">Completed</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm text-gray-600">
|
||
|
|
<span class="font-medium">Carol Davis</span> · <span class="text-gray-500">Rex · Labrador</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-xs text-emerald-600 mt-1">✓ Checked in · 3-night stay</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3:00 PM -->
|
||
|
|
<div class="flex gap-4 booking-card rounded-lg p-4 border border-dashed border-gray-300 bg-gray-50/50">
|
||
|
|
<div class="w-20 flex-shrink-0 pt-1">
|
||
|
|
<div class="text-sm font-bold text-gray-400">3:00 PM</div>
|
||
|
|
<div class="text-xs text-gray-300">—</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex items-center justify-center">
|
||
|
|
<button class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">+ Add Booking</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 4:00 PM -->
|
||
|
|
<div class="flex gap-4 booking-card booking-scheduled bg-amber-50/50 rounded-lg p-4">
|
||
|
|
<div class="w-20 flex-shrink-0 pt-1">
|
||
|
|
<div class="text-sm font-bold text-slate-800">4:00 PM</div>
|
||
|
|
<div class="text-xs text-gray-400">60 min</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="flex items-center gap-2 mb-1">
|
||
|
|
<span class="text-lg">🐕</span>
|
||
|
|
<span class="font-semibold text-slate-800">Dog Walking</span>
|
||
|
|
<span class="badge badge-scheduled">Scheduled</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm text-gray-600">
|
||
|
|
<span class="font-medium">Dave Wilson</span> · <span class="text-gray-500">Buddy · Beagle</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-shrink-0 space-y-1">
|
||
|
|
<button class="btn-secondary btn-sm w-full">Confirm</button>
|
||
|
|
<button class="btn-secondary btn-sm w-full text-xs">Complete</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right Sidebar: Stats + Upcoming -->
|
||
|
|
<div class="space-y-4">
|
||
|
|
<!-- Today Stats -->
|
||
|
|
<div class="bg-white rounded-xl border border-gray-200 p-4">
|
||
|
|
<h3 class="text-sm font-bold text-slate-800 mb-3">Today</h3>
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-sm text-gray-600">Bookings</span>
|
||
|
|
<span class="text-lg font-bold text-slate-800">5</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-sm text-gray-600">Revenue</span>
|
||
|
|
<span class="text-lg font-bold text-emerald-600">$520</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="text-sm text-gray-600">Pending</span>
|
||
|
|
<span class="text-sm font-semibold text-amber-600">3 to confirm</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Upcoming This Week -->
|
||
|
|
<div class="bg-white rounded-xl border border-gray-200 p-4">
|
||
|
|
<h3 class="text-sm font-bold text-slate-800 mb-3">This Week</h3>
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center gap-3 p-2 rounded-lg bg-gray-50">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center text-xs font-bold text-indigo-700">J14</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="text-xs font-medium">3 bookings</div>
|
||
|
|
<div class="text-[10px] text-gray-400">24 more this week</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-3 p-2 rounded-lg bg-gray-50">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center text-xs font-bold text-amber-700">J15</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="text-xs font-medium">5 bookings</div>
|
||
|
|
<div class="text-[10px] text-gray-400">Full schedule</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-3 p-2 rounded-lg bg-gray-50">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center text-xs font-bold text-emerald-700">J16</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="text-xs font-medium">2 bookings</div>
|
||
|
|
<div class="text-[10px] text-gray-400">2 open slots</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Quick Actions -->
|
||
|
|
<div class="bg-white rounded-xl border border-gray-200 p-4">
|
||
|
|
<h3 class="text-sm font-bold text-slate-800 mb-3">Quick Actions</h3>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<button class="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
|
||
|
|
📋 View All Bookings
|
||
|
|
</button>
|
||
|
|
<button class="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
|
||
|
|
📄 Generate Reports
|
||
|
|
</button>
|
||
|
|
<button class="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
|
||
|
|
⚙️ Staff Availability
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|