192 lines
8.8 KiB
PHP
192 lines
8.8 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">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<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="{ sidebarOpen: false }">
|
|
|
|
{{-- ── 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 / Close trigger --}}
|
|
<div class="flex items-center justify-between gap-3 mb-8 px-2">
|
|
<button
|
|
@click="sidebarOpen = false"
|
|
class="flex items-center gap-3 group focus:outline-none"
|
|
aria-label="Close menu"
|
|
>
|
|
<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">KOL Manager</div>
|
|
<div class="text-xs text-gray-400">Your Purr-fect Assistant</div>
|
|
</div>
|
|
</button>
|
|
{{-- X button — mobile only --}}
|
|
<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>
|
|
@if($alertCount > 0)
|
|
<span class="badge-sakura shrink-0">{{ $alertCount }}</span>
|
|
@endif
|
|
</a>
|
|
|
|
<a href="{{ route('clients.index') }}"
|
|
@click="sidebarOpen = false"
|
|
class="nav-item {{ request()->routeIs('clients.*') ? 'active' : '' }}">
|
|
<span class="text-lg shrink-0">👥</span> Clients / CRM
|
|
</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>
|
|
</nav>
|
|
|
|
{{-- Meow Toggle --}}
|
|
<div class="mt-4 px-2 border-t border-pink-50 pt-4">
|
|
<button onclick="window.KolManager.toggleMeow()"
|
|
class="flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors w-full">
|
|
<span class="text-base">🔔</span>
|
|
<span>Meow Sounds</span>
|
|
</button>
|
|
<div class="text-xs text-gray-400 mt-1">Toggle notification sounds</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{{-- ── Main wrapper ─────────────────────────────────────────────── --}}
|
|
<div class="min-h-screen flex flex-col lg:ml-64">
|
|
|
|
<div class="flex-1 flex flex-col min-w-0">
|
|
|
|
{{-- ── Mobile / Desktop 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">
|
|
|
|
{{-- Cat icon — hamburger for 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>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<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>
|
|
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
@if($alertCount > 0)
|
|
<a href="{{ route('schedule.index') }}"
|
|
class="hidden sm:flex items-center gap-1.5 bg-pink-50 text-pink-600 text-xs px-3 py-1.5 rounded-full border border-pink-200">
|
|
<span>🔔</span>
|
|
<span class="font-semibold">{{ $alertCount }} alert{{ $alertCount > 1 ? 's' : '' }}</span>
|
|
</a>
|
|
{{-- Mobile: just the badge --}}
|
|
<a href="{{ route('schedule.index') }}" class="sm:hidden badge-sakura flex items-center gap-1">
|
|
🔔 {{ $alertCount }}
|
|
</a>
|
|
@endif
|
|
<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);">
|
|
KOL
|
|
</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')
|
|
</body>
|
|
</html>
|