290 lines
16 KiB
PHP
290 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<meta name="theme-color" content="#FFB7C5">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="{{ config('app.name') }}">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="apple-touch-icon" href="/icons/icon-192.png">
|
|
<title>{{ config('app.name') }} — @yield('title', 'Dashboard')</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
|
|
<body class="bg-cream font-sans antialiased" x-data="appShell()">
|
|
|
|
{{-- ── Backdrop (mobile only) ─────────────────────────────────── --}}
|
|
<div x-show="sidebarOpen" x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="sidebarOpen = false"
|
|
class="fixed inset-0 z-30 bg-black/40 lg:hidden" style="display:none"></div>
|
|
|
|
{{-- ── Sidebar ─────────────────────────────────────────────────── --}}
|
|
<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-40 w-64 bg-white border-r border-pink-100 shadow-lg
|
|
flex flex-col py-6 px-4
|
|
transition-transform duration-300 ease-in-out
|
|
lg:translate-x-0">
|
|
{{-- Logo --}}
|
|
<div class="flex items-center justify-between gap-3 mb-8 px-2">
|
|
<a href="{{ route('dashboard') }}" @click="sidebarOpen = false"
|
|
class="flex items-center gap-3 group focus:outline-none">
|
|
<span
|
|
class="text-3xl transition-transform duration-200 group-hover:scale-110 group-active:scale-95 select-none">🐱</span>
|
|
<div class="text-left">
|
|
<div class="text-lg font-extrabold text-pink-500 leading-tight">Cathy's App</div>
|
|
<div class="text-xs text-gray-400">Your Purr-fect Assistant</div>
|
|
</div>
|
|
</a>
|
|
<button @click="sidebarOpen = false"
|
|
class="lg:hidden text-gray-400 hover:text-pink-500 text-xl leading-none" aria-label="Close">✕</button>
|
|
</div>
|
|
|
|
{{-- Nav --}}
|
|
<nav class="flex flex-col gap-1 flex-1 overflow-y-auto">
|
|
<a href="{{ route('dashboard') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">🏠</span> Dashboard
|
|
</a>
|
|
|
|
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Manage</div>
|
|
|
|
<a href="{{ route('schedule.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('schedule.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">📅</span>
|
|
<span class="flex-1">Schedule</span>
|
|
</a>
|
|
|
|
<a href="{{ route('clients.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('clients.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">👥</span> Clients
|
|
</a>
|
|
|
|
<a href="{{ route('contracts.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('contracts.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">📋</span> Contracts
|
|
</a>
|
|
<!--
|
|
<a href="{{ route('social-hub.index') }}"
|
|
@click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('social-hub.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">📱</span> Social Hub
|
|
</a>
|
|
-->
|
|
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Finance</div>
|
|
|
|
<a href="{{ route('invoices.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('invoices.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">🧾</span> Invoices
|
|
</a>
|
|
|
|
<a href="{{ route('rate-cards.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('rate-cards.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">💰</span> Rate Cards
|
|
</a>
|
|
|
|
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Content</div>
|
|
|
|
<a href="{{ route('content.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('content.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">🎬</span> Content Board
|
|
</a>
|
|
|
|
<a href="{{ route('files.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('files.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">📁</span> Files
|
|
</a>
|
|
|
|
<a href="{{ route('notes.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('notes.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">📝</span> Notes
|
|
</a>
|
|
|
|
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Settings</div>
|
|
|
|
<a href="{{ route('client-categories.index') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('client-categories.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">🏷️</span> Categories
|
|
</a>
|
|
|
|
<a href="{{ route('settings.notifications') }}" @click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('settings.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">🔔</span> Notifications
|
|
</a>
|
|
|
|
{{-- Logout --}}
|
|
<form method="POST" action="{{ route('gate.logout') }}" class="mt-auto pt-4">
|
|
@csrf
|
|
<button type="submit"
|
|
class="nav-item w-full text-left text-gray-400 hover:text-red-400 hover:bg-red-50 transition-colors">
|
|
<span class="text-lg shrink-0">🚪</span> Lock App
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
</aside>
|
|
|
|
{{-- ── Main wrapper ─────────────────────────────────────────────── --}}
|
|
<div class="min-h-screen flex flex-col lg:ml-64">
|
|
|
|
<div class="flex-1 flex flex-col min-w-0">
|
|
|
|
{{-- ── Topbar ───────────────────────────────────────────── --}}
|
|
<header
|
|
class="sticky top-0 z-20 bg-white border-b border-pink-100 px-4 lg:px-8 py-3 lg:py-4 flex items-center gap-3 shadow-sm">
|
|
|
|
{{-- Hamburger (mobile) --}}
|
|
<button @click="sidebarOpen = true"
|
|
class="lg:hidden text-2xl transition-transform duration-150 active:scale-90 focus:outline-none select-none"
|
|
aria-label="Open menu">🐱</button>
|
|
|
|
{{-- Page title (hidden when search open) --}}
|
|
<div class="flex-1 min-w-0" x-show="!searchOpen" x-transition>
|
|
<h1 class="text-base lg:text-xl font-bold text-gray-800 truncate">@yield('page-title', 'Dashboard')
|
|
</h1>
|
|
<p class="text-xs lg:text-sm text-gray-400 hidden sm:block">
|
|
@yield('page-subtitle', today()->format('l, d F Y'))</p>
|
|
</div>
|
|
|
|
{{-- ── Global Search bar ─────────────────────────── --}}
|
|
<div class="flex-1 min-w-0" x-show="searchOpen" x-transition style="display:none">
|
|
<div class="relative">
|
|
<span
|
|
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
|
|
<input id="global-search-input" type="text" placeholder="Search clients, events, invoices…"
|
|
class="input-soft pl-9 pr-4 py-2 text-sm w-full" x-model="searchQuery"
|
|
@input.debounce.300ms="doSearch()" @keydown.escape="closeSearch()" x-ref="searchInput">
|
|
{{-- Search results dropdown --}}
|
|
<div x-show="searchResults.length > 0 || (searchQuery.length >= 2 && !searchLoading)"
|
|
class="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-pink-100 z-50 max-h-80 overflow-y-auto"
|
|
@click.outside="searchResults = []">
|
|
<template x-if="searchLoading">
|
|
<div class="px-4 py-3 text-sm text-gray-400 flex items-center gap-2">
|
|
<span class="animate-spin">🐾</span> Searching…
|
|
</div>
|
|
</template>
|
|
<template x-if="!searchLoading && searchResults.length === 0 && searchQuery.length >= 2">
|
|
<div class="px-4 py-3 text-sm text-gray-400">No results for "<span
|
|
x-text="searchQuery"></span>"</div>
|
|
</template>
|
|
<template x-for="group in searchResults" :key="group.type">
|
|
<div>
|
|
<div class="px-4 py-1.5 text-xs font-bold text-gray-400 uppercase tracking-wide bg-pink-50/60 sticky top-0"
|
|
x-text="group.label"></div>
|
|
<template x-for="item in group.items" :key="item.url">
|
|
<a :href="item.url"
|
|
class="flex items-center gap-3 px-4 py-2.5 hover:bg-pink-50 transition-colors"
|
|
@click="closeSearch()">
|
|
<span class="text-lg shrink-0" x-text="item.icon"></span>
|
|
<div class="min-w-0">
|
|
<div class="text-sm font-semibold text-gray-700 truncate"
|
|
x-text="item.title"></div>
|
|
<div class="text-xs text-gray-400 truncate" x-text="item.subtitle">
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<div class="border-t border-pink-50 px-4 py-2">
|
|
<a :href="`/search?q=${encodeURIComponent(searchQuery)}`"
|
|
class="text-xs text-pink-500 hover:text-pink-700 font-medium flex items-center gap-1">
|
|
🔍 See all results for "<span x-text="searchQuery"></span>"
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Right actions --}}
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
{{-- Search toggle --}}
|
|
<button @click="toggleSearch()"
|
|
class="w-8 h-8 lg:w-9 lg:h-9 rounded-full flex items-center justify-center hover:bg-pink-50 transition-colors text-gray-500 hover:text-pink-500"
|
|
:title="searchOpen ? 'Close search' : 'Search'" aria-label="Toggle search">
|
|
<span x-text="searchOpen ? '✕' : '🔍'" class="text-sm lg:text-base"></span>
|
|
</button>
|
|
|
|
<!--
|
|
{{-- Avatar --}}
|
|
<div class="w-8 h-8 lg:w-9 lg:h-9 rounded-full flex items-center justify-center text-white font-bold text-xs lg:text-sm shadow-sm"
|
|
style="background: linear-gradient(135deg, #FFB7C5, #E8D5F5);">
|
|
FUN
|
|
</div>
|
|
-->
|
|
</div>
|
|
</header>
|
|
|
|
{{-- ── Flash Messages ───────────────────────────────────── --}}
|
|
@if(session('success'))
|
|
<div id="flash-message"
|
|
class="mx-4 lg:mx-8 mt-4 flex items-center gap-3 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-2xl shadow-sm">
|
|
<span class="text-lg">✅</span>
|
|
<span class="text-sm font-medium">{{ session('success') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div id="flash-message"
|
|
class="mx-4 lg:mx-8 mt-4 flex items-center gap-3 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-2xl shadow-sm">
|
|
<span class="text-lg">❌</span>
|
|
<span class="text-sm font-medium">{{ session('error') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ── Page Content ─────────────────────────────────────── --}}
|
|
<main class="flex-1 p-4 lg:p-8 overflow-x-hidden">
|
|
@yield('content')
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
@stack('scripts')
|
|
|
|
<script>
|
|
function appShell() {
|
|
return {
|
|
sidebarOpen: false,
|
|
searchOpen: false,
|
|
searchQuery: '',
|
|
searchResults: [],
|
|
searchLoading: false,
|
|
_searchTimer: null,
|
|
|
|
toggleSearch() {
|
|
this.searchOpen = !this.searchOpen;
|
|
if (this.searchOpen) {
|
|
this.$nextTick(() => this.$refs.searchInput?.focus());
|
|
} else {
|
|
this.searchQuery = '';
|
|
this.searchResults = [];
|
|
}
|
|
},
|
|
|
|
closeSearch() {
|
|
this.searchOpen = false;
|
|
this.searchQuery = '';
|
|
this.searchResults = [];
|
|
},
|
|
|
|
async doSearch() {
|
|
if (this.searchQuery.length < 2) { this.searchResults = []; return; }
|
|
this.searchLoading = true;
|
|
try {
|
|
const res = await fetch(`/search/quick?q=${encodeURIComponent(this.searchQuery)}`, {
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
|
});
|
|
this.searchResults = await res.json();
|
|
} catch { this.searchResults = []; }
|
|
this.searchLoading = false;
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |