initial commit

resources/views/layouts/app.blade.php

@@ -0,0 +1,191 @@
+<!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>