Robert Perez
d8a4e43bcc
- Top header bar + narrow sidebar layout - Dashboard: calendar-style schedule with timeline cards - Clients: card-based layout with avatar initials and pet count - Services: grid cards with emoji indicators and pricing - Bookings: timeline cards with time slots, status chips, inline actions - Invoices: cards with status badges, action buttons - All pages: search bars, empty states, modal forms - Consistent color system: indigo primary, amber alerts, gray hierarchy
484 lines
27 KiB
HTML
484 lines
27 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 1: Command Center</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: #0a0a0a; color: #e4e4e7; }
|
|
.sidebar { border-right: 1px solid #27272a; }
|
|
.card { background: #18181b; border: 1px solid #27272a; }
|
|
.card:hover { border-color: #3f3f46; }
|
|
.badge { font-size: 11px; padding: 2px 8px; border-radius: 9999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.badge-scheduled { background: #1c1917; color: #f59e0b; border: 1px solid #44403c; }
|
|
.badge-confirmed { background: #0c1a2e; color: #3b82f6; border: 1px solid #1e3a5f; }
|
|
.badge-completed { background: #052e16; color: #22c55e; border: 1px solid #14532d; }
|
|
.badge-unpaid { background: #1c1917; color: #ef4444; border: 1px solid #44403c; }
|
|
.badge-paid { background: #052e16; color: #22c55e; border: 1px solid #14532d; }
|
|
.stat-card { transition: all 0.15s ease; }
|
|
.stat-card:hover { border-color: #6366f1; transform: translateY(-1px); }
|
|
.nav-item { transition: all 0.15s ease; border-left: 2px solid transparent; }
|
|
.nav-item:hover { background: #1c1c20; }
|
|
.nav-item.active { background: #1c1c20; border-left-color: #6366f1; color: #e4e4e7; }
|
|
.modal-overlay { backdrop-filter: blur(4px); }
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
|
|
.input { background: #27272a; border: 1px solid #3f3f46; color: #e4e4e7; }
|
|
.input:focus { outline: none; border-color: #6366f1; }
|
|
.select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; }
|
|
.btn-primary { background: #6366f1; color: white; font-weight: 600; transition: all 0.15s; }
|
|
.btn-primary:hover { background: #4f46e5; }
|
|
.btn-secondary { background: #27272a; color: #a1a1aa; border: 1px solid #3f3f46; font-weight: 500; transition: all 0.15s; }
|
|
.btn-secondary:hover { background: #3f3f46; color: #e4e4e7; }
|
|
.search-bar { background: #18181b; border: 1px solid #27272a; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar fixed left-0 top-0 h-screen w-56 bg-black z-50 flex flex-col">
|
|
<div class="p-4 border-b border-zinc-800">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-2xl">🐾</span>
|
|
<div>
|
|
<div class="text-sm font-bold tracking-tight">Petmaster</div>
|
|
<div class="text-[10px] text-zinc-500 uppercase tracking-widest">CRM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 p-2 space-y-0.5">
|
|
<a href="#" onclick="showPage('dashboard')" class="nav-item active flex items-center gap-3 px-3 py-2 text-sm rounded-r-sm">
|
|
<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="#" onclick="showPage('clients')" class="nav-item flex items-center gap-3 px-3 py-2 text-sm text-zinc-400 rounded-r-sm">
|
|
<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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
Clients
|
|
</a>
|
|
<a href="#" onclick="showPage('services')" class="nav-item flex items-center gap-3 px-3 py-2 text-sm text-zinc-400 rounded-r-sm">
|
|
<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="#" onclick="showPage('bookings')" class="nav-item flex items-center gap-3 px-3 py-2 text-sm text-zinc-400 rounded-r-sm">
|
|
<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>
|
|
Bookings
|
|
</a>
|
|
<a href="#" onclick="showPage('invoices')" class="nav-item flex items-center gap-3 px-3 py-2 text-sm text-zinc-400 rounded-r-sm">
|
|
<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="#" onclick="showPage('messages')" class="nav-item flex items-center gap-3 px-3 py-2 text-sm text-zinc-400 rounded-r-sm">
|
|
<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
|
|
<span class="ml-auto bg-indigo-500/20 text-indigo-400 text-[10px] px-1.5 py-0.5 rounded-full">3</span>
|
|
</a>
|
|
<a href="#" onclick="showPage('self-booking')" class="nav-item flex items-center gap-3 px-3 py-2 text-sm text-zinc-400 rounded-r-sm">
|
|
<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>
|
|
<div class="p-3 border-t border-zinc-800">
|
|
<div class="flex items-center gap-2 px-3 py-2">
|
|
<div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center text-xs font-bold">E</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs font-medium truncate">Elliot</div>
|
|
<div class="text-[10px] text-zinc-500">Operator</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="ml-56 min-h-screen">
|
|
|
|
<!-- Dashboard Page -->
|
|
<div id="page-dashboard" class="page p-6">
|
|
<!-- Top bar -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-lg font-semibold tracking-tight">Dashboard</h1>
|
|
<p class="text-xs text-zinc-500 mt-0.5">Wednesday, July 13, 2026 · 7 bookings today</p>
|
|
</div>
|
|
<button class="btn-primary px-4 py-2 rounded text-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>
|
|
|
|
<!-- Stats Row -->
|
|
<div class="grid grid-cols-4 gap-3 mb-6">
|
|
<div class="stat-card card rounded-lg p-4 border-l-2 border-l-indigo-500">
|
|
<div class="text-[10px] uppercase tracking-wider text-zinc-500 font-medium">Active Clients</div>
|
|
<div class="text-2xl font-bold mt-1">124</div>
|
|
<div class="text-[11px] text-zinc-500 mt-1">+12 this month</div>
|
|
</div>
|
|
<div class="stat-card card rounded-lg p-4 border-l-2 border-l-amber-500">
|
|
<div class="text-[10px] uppercase tracking-wider text-zinc-500 font-medium">Scheduled</div>
|
|
<div class="text-2xl font-bold mt-1">7</div>
|
|
<div class="text-[11px] text-zinc-500 mt-1">3 today</div>
|
|
</div>
|
|
<div class="stat-card card rounded-lg p-4 border-l-2 border-l-red-500">
|
|
<div class="text-[10px] uppercase tracking-wider text-zinc-500 font-medium">Unpaid</div>
|
|
<div class="text-2xl font-bold mt-1">$1,240</div>
|
|
<div class="text-[11px] text-zinc-500 mt-1">4 invoices</div>
|
|
</div>
|
|
<div class="stat-card card rounded-lg p-4 border-l-2 border-l-emerald-500">
|
|
<div class="text-[10px] uppercase tracking-wider text-zinc-500 font-medium">Revenue</div>
|
|
<div class="text-2xl font-bold mt-1">$8,420</div>
|
|
<div class="text-[11px] text-zinc-500 mt-1">This month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Two Column Layout -->
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<!-- Left: Today's Schedule -->
|
|
<div class="card rounded-lg col-span-2">
|
|
<div class="p-4 border-b border-zinc-800 flex items-center justify-between">
|
|
<h2 class="text-sm font-semibold">Today's Schedule</h2>
|
|
<a href="#" class="text-xs text-indigo-400 hover:text-indigo-300">View Calendar →</a>
|
|
</div>
|
|
<div class="divide-y divide-zinc-800">
|
|
<div class="p-3 flex items-center gap-3 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="text-xs font-mono text-zinc-500 w-16">9:00 AM</div>
|
|
<div class="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-xs">🐕</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium truncate">Alice Johnson</div>
|
|
<div class="text-xs text-zinc-500">Full Groom · Max (Golden Retriever)</div>
|
|
</div>
|
|
<span class="badge badge-scheduled">Scheduled</span>
|
|
</div>
|
|
<div class="p-3 flex items-center gap-3 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="text-xs font-mono text-zinc-500 w-16">10:30 AM</div>
|
|
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-xs">🐈</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium truncate">Bob Smith</div>
|
|
<div class="text-xs text-zinc-500">Nail Trim · Luna (Persian Cat)</div>
|
|
</div>
|
|
<span class="badge badge-confirmed">Confirmed</span>
|
|
</div>
|
|
<div class="p-3 flex items-center gap-3 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="text-xs font-mono text-zinc-500 w-16">1:00 PM</div>
|
|
<div class="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center text-xs">🐕</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium truncate">Carol Davis</div>
|
|
<div class="text-xs text-zinc-500">Boarding · Rex (Labrador)</div>
|
|
</div>
|
|
<span class="badge badge-completed">Completed</span>
|
|
</div>
|
|
<div class="p-3 flex items-center gap-3 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="text-xs font-mono text-zinc-500 w-16">2:30 PM</div>
|
|
<div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-xs">🐕</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium truncate">Dave Wilson</div>
|
|
<div class="text-xs text-zinc-500">Dog Walking · Buddy (Beagle)</div>
|
|
</div>
|
|
<span class="badge badge-scheduled">Scheduled</span>
|
|
</div>
|
|
<div class="p-3 flex items-center gap-3 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="text-xs font-mono text-zinc-500 w-16">4:00 PM</div>
|
|
<div class="w-8 h-8 rounded-full bg-pink-500/20 flex items-center justify-center text-xs">🐈</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium truncate">Eve Martinez</div>
|
|
<div class="text-xs text-zinc-500">Cat Groom · Whiskers (Siamese)</div>
|
|
</div>
|
|
<span class="badge badge-scheduled">Scheduled</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Quick Actions + Alerts -->
|
|
<div class="space-y-3">
|
|
<div class="card rounded-lg">
|
|
<div class="p-4 border-b border-zinc-800">
|
|
<h2 class="text-sm font-semibold">Quick Actions</h2>
|
|
</div>
|
|
<div class="p-3 space-y-1.5">
|
|
<button class="w-full text-left px-3 py-2 text-sm rounded hover:bg-zinc-800/50 text-zinc-400 hover:text-zinc-200 transition-colors 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
|
|
Add Client
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 text-sm rounded hover:bg-zinc-800/50 text-zinc-400 hover:text-zinc-200 transition-colors 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="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>
|
|
Create Invoice
|
|
</button>
|
|
<button class="w-full text-left px-3 py-2 text-sm rounded hover:bg-zinc-800/50 text-zinc-400 hover:text-zinc-200 transition-colors 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="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>
|
|
Send Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card rounded-lg border-l-2 border-l-amber-500">
|
|
<div class="p-4">
|
|
<h2 class="text-sm font-semibold flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
|
Alerts
|
|
</h2>
|
|
<div class="mt-3 space-y-2">
|
|
<div class="text-xs text-amber-400/80 flex items-start gap-2">
|
|
<span class="mt-0.5">●</span> 2 invoices overdue
|
|
</div>
|
|
<div class="text-xs text-zinc-500 flex items-start gap-2">
|
|
<span class="mt-0.5">●</span> 1 pet vaccination expiring
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clients Page -->
|
|
<div id="page-clients" class="page p-6 hidden">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-lg font-semibold tracking-tight">Clients</h1>
|
|
<p class="text-xs text-zinc-500 mt-0.5">124 active clients</p>
|
|
</div>
|
|
<button class="btn-primary px-4 py-2 rounded text-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>
|
|
Add Client
|
|
</button>
|
|
</div>
|
|
<div class="search-bar rounded-lg p-2 flex items-center gap-2 mb-4 max-w-sm">
|
|
<svg class="w-4 h-4 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
<input type="text" placeholder="Search clients, pets, phones..." class="flex-1 bg-transparent text-sm text-zinc-300 placeholder-zinc-500 outline-none">
|
|
</div>
|
|
<!-- Client List -->
|
|
<div class="card rounded-lg divide-y divide-zinc-800">
|
|
<div class="p-4 flex items-center gap-4 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-sm font-bold">AJ</div>
|
|
<div class="flex-1">
|
|
<div class="text-sm font-medium">Alice Johnson</div>
|
|
<div class="text-xs text-zinc-500">alice@email.com · (555) 123-4567</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Pets</div>
|
|
<div class="text-sm font-medium">2</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Bookings</div>
|
|
<div class="text-sm font-medium text-amber-400">3 active</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Balance</div>
|
|
<div class="text-sm font-medium text-emerald-400">$0</div>
|
|
</div>
|
|
<button class="text-zinc-500 hover:text-zinc-300 ml-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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 flex items-center gap-4 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 rounded-full bg-emerald-600 flex items-center justify-center text-sm font-bold">BS</div>
|
|
<div class="flex-1">
|
|
<div class="text-sm font-medium">Bob Smith</div>
|
|
<div class="text-xs text-zinc-500">bob@email.com · (555) 234-5678</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Pets</div>
|
|
<div class="text-sm font-medium">1</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Bookings</div>
|
|
<div class="text-sm font-medium">0</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Balance</div>
|
|
<div class="text-sm font-medium text-amber-400">$45</div>
|
|
</div>
|
|
<button class="text-zinc-500 hover:text-zinc-300 ml-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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 flex items-center gap-4 hover:bg-zinc-800/50 transition-colors cursor-pointer">
|
|
<div class="w-10 h-10 rounded-full bg-rose-600 flex items-center justify-center text-sm font-bold">CD</div>
|
|
<div class="flex-1">
|
|
<div class="text-sm font-medium">Carol Davis</div>
|
|
<div class="text-xs text-zinc-500">carol@email.com · (555) 345-6789</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Pets</div>
|
|
<div class="text-sm font-medium">3</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Bookings</div>
|
|
<div class="text-sm font-medium text-emerald-400">5 active</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xs text-zinc-500">Balance</div>
|
|
<div class="text-sm font-medium text-emerald-400">$0</div>
|
|
</div>
|
|
<button class="text-zinc-500 hover:text-zinc-300 ml-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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages Page (compact) -->
|
|
<div id="page-messages" class="page p-6 hidden">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-lg font-semibold tracking-tight">Messages</h1>
|
|
</div>
|
|
<div class="card rounded-lg h-[calc(100vh-12rem)] flex">
|
|
<!-- Conversation List -->
|
|
<div class="w-80 border-r border-zinc-800 flex flex-col">
|
|
<div class="p-3 border-b border-zinc-800">
|
|
<input type="text" placeholder="Search conversations..." class="search-bar w-full rounded px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="p-3 border-l-2 border-indigo-500 bg-zinc-800/50 cursor-pointer">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full bg-indigo-600 flex items-center justify-center text-xs font-bold">AJ</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium flex items-center gap-2">Alice Johnson <span class="badge bg-red-500/20 text-red-400">2</span></div>
|
|
<div class="text-xs text-zinc-500 truncate">Hey, can Max come Friday?</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 border-l-2 border-transparent cursor-pointer hover:bg-zinc-800/30">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full bg-amber-600 flex items-center justify-center text-xs font-bold">BS</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm text-zinc-300">Bob Smith</div>
|
|
<div class="text-xs text-zinc-500 truncate">Thanks for the update</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat Area -->
|
|
<div class="flex-1 flex flex-col">
|
|
<div class="p-4 border-b border-zinc-800 flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full bg-indigo-600 flex items-center justify-center text-xs font-bold">AJ</div>
|
|
<div>
|
|
<div class="text-sm font-medium">Alice Johnson</div>
|
|
<div class="text-xs text-emerald-400">● Online</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-4 space-y-3">
|
|
<div class="flex justify-start">
|
|
<div class="bg-zinc-800 rounded-xl rounded-tl-sm px-4 py-2.5 max-w-md">
|
|
<p class="text-sm text-zinc-300">Can Max come for grooming this Friday at 9am?</p>
|
|
<p class="text-[10px] text-zinc-600 mt-1">10:30 AM</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<div class="bg-indigo-600 rounded-xl rounded-tr-sm px-4 py-2.5 max-w-md">
|
|
<p class="text-sm text-white">Hi Alice! Yes, Max is all set for Friday at 9am. Full grooming package.</p>
|
|
<p class="text-[10px] text-indigo-300 mt-1">10:32 AM</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-start">
|
|
<div class="bg-zinc-800 rounded-xl rounded-tl-sm px-4 py-2.5 max-w-md">
|
|
<p class="text-sm text-zinc-300">Perfect, thank you! 🙏</p>
|
|
<p class="text-[10px] text-zinc-600 mt-1">10:35 AM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-zinc-800">
|
|
<div class="flex gap-2">
|
|
<input type="text" placeholder="Type a message..." class="input flex-1 rounded-lg px-4 py-2.5 text-sm outline-none">
|
|
<button class="btn-primary px-5 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoices Page -->
|
|
<div id="page-invoices" class="page p-6 hidden">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-lg font-semibold tracking-tight">Invoices</h1>
|
|
<button class="btn-primary px-4 py-2 rounded text-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 Invoice
|
|
</button>
|
|
</div>
|
|
<div class="card rounded-lg divide-y divide-zinc-800">
|
|
<div class="p-4 hover:bg-zinc-800/50 transition-colors">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-amber-500/20 flex items-center justify-center text-sm">📄</div>
|
|
<div>
|
|
<div class="text-sm font-mono text-zinc-400">INV-0042</div>
|
|
<div class="text-xs text-zinc-500">Alice Johnson</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm font-bold">$125.00</div>
|
|
<span class="badge badge-unpaid">Unpaid</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-xs text-zinc-500">
|
|
<span>Full Grooming · Full Groom · Max</span>
|
|
<span>Due: Jul 20, 2026</span>
|
|
</div>
|
|
<div class="flex gap-2 mt-3">
|
|
<button class="btn-secondary px-3 py-1.5 rounded text-xs">Mark Paid</button>
|
|
<button class="btn-secondary px-3 py-1.5 rounded text-xs">Stripe</button>
|
|
<button class="btn-secondary px-3 py-1.5 rounded text-xs">Email</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 hover:bg-zinc-800/50 transition-colors">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center text-sm">✅</div>
|
|
<div>
|
|
<div class="text-sm font-mono text-zinc-400">INV-0041</div>
|
|
<div class="text-xs text-zinc-500">Carol Davis</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm font-bold">$210.00</div>
|
|
<span class="badge badge-paid">Paid</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-xs text-zinc-500">
|
|
<span>Boarding (3 days) · Rex</span>
|
|
<span>Due: Jul 10, 2026</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 hover:bg-zinc-800/50 transition-colors">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-amber-500/20 flex items-center justify-center text-sm">📄</div>
|
|
<div>
|
|
<div class="text-sm font-mono text-zinc-400">INV-0040</div>
|
|
<div class="text-xs text-zinc-500">Bob Smith</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm font-bold">$45.00</div>
|
|
<span class="badge badge-unpaid">Unpaid</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-xs text-zinc-500">
|
|
<span>Nail Trim · Luna</span>
|
|
<span>Due: Jul 15, 2026</span>
|
|
</div>
|
|
<div class="flex gap-2 mt-3">
|
|
<button class="btn-secondary px-3 py-1.5 rounded text-xs">Mark Paid</button>
|
|
<button class="btn-secondary px-3 py-1.5 rounded text-xs">Stripe</button>
|
|
<button class="btn-secondary px-3 py-1.5 rounded text-xs">Email</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showPage(page) {
|
|
document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
|
|
document.getElementById('page-' + page).classList.remove('hidden');
|
|
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
|
event.currentTarget.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|