refactor: remove redundant dashboard widgets and clean up layout structure

This commit is contained in:
I-Fun
2026-04-04 23:19:08 +07:00
parent 79f2f22e5d
commit 1e7a35ad4f
5 changed files with 955 additions and 626 deletions

View File

@@ -1,5 +1,6 @@
<!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">
@@ -15,301 +16,276 @@
<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>
{{-- ── 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
{{-- ── 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>
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>
{{-- 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>
<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('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 / CRM
</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('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('contracts.index') }}"
@click="sidebarOpen = false"
class="nav-item {{ request()->routeIs('contracts.*') ? 'active' : '' }}">
<span class="text-lg shrink-0">📋</span> Brand Contracts
</a>
<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('contracts.index') }}" @click="sidebarOpen = false"
class="nav-item {{ request()->routeIs('contracts.*') ? 'active' : '' }}">
<span class="text-lg shrink-0">📋</span> Brand 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>
<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('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>
<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>
<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('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('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>
<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>
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider mt-4 mb-1 px-2">Settings</div>
<a href="{{ route('settings.notifications') }}" @click="sidebarOpen = false"
class="nav-item {{ request()->routeIs('settings.*') ? 'active' : '' }}">
<span class="text-lg shrink-0">🔔</span> Notifications
</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"
{{-- 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>
<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">
{{-- ── Main wrapper ─────────────────────────────────────────────── --}}
<div class="min-h-screen flex flex-col lg:ml-64">
<div class="flex-1 flex flex-col min-w-0">
<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">
{{-- ── 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>
{{-- 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>
{{-- 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…
{{-- ── 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"
@click="closeSearch()">
🔍 See all results for "<span x-text="searchQuery"></span>"
</a>
</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"
@click="closeSearch()">
🔍 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>
{{-- 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>
</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
{{-- ── 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
@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>
{{-- ── Page Content ─────────────────────────────────────── --}}
<main class="flex-1 p-4 lg:p-8 overflow-x-hidden">
@yield('content')
</main>
</div>
</div>
</div>
@stack('scripts')
@stack('scripts')
<script>
function appShell() {
return {
sidebarOpen: false,
searchOpen: false,
searchQuery: '',
searchResults: [],
searchLoading: false,
_searchTimer: null,
<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 = [];
}
},
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 = [];
},
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>
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>
</html>