Nest Programmes under Events in sidebar and add programmes index hero.

Match the Events list layout with balance, programme, and session stats so programme management feels consistent with the rest of the app.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/Http/Controllers/Events/ProgrammeController.php

@@ -3,14 +3,16 @@
 namespace App\Http\Controllers\Events;
 
 use App\Http\Controllers\Controller;
-use App\Models\QrCode;
 use App\Models\QrWallet;
+use App\Services\Qr\QrCodeManagerService;
 use App\Support\Qr\QrTypeCatalog;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
 class ProgrammeController extends Controller
 {
+    public function __construct(private QrCodeManagerService $manager) {}
+
     public function create(): View
     {
         return view('events.programme-create', [
@@ -21,12 +23,25 @@ class ProgrammeController extends Controller
     public function index(Request $request): View
     {
         $account = ladill_account();
+        $wallet = $this->manager->walletFor($account);
 
         $programmes = $account->qrCodes()
             ->whereIn('type', QrTypeCatalog::programmeTypes())
             ->latest()
             ->get();
 
-        return view('events.programmes', compact('programmes'));
+        $totalSessions = $programmes->sum(function ($programme) {
+            $days = (array) ($programme->content()['days'] ?? []);
+
+            return collect($days)->sum(fn ($day) => count((array) ($day['items'] ?? [])));
+        });
+
+        return view('events.programmes', [
+            'programmes' => $programmes,
+            'wallet' => $wallet,
+            'totalSessions' => $totalSessions,
+            'pricePerQr' => QrWallet::pricePerQr(),
+            'topupUrl' => 'https://'.config('app.account_domain').'/wallet',
+        ]);
     }
 }

resources/views/events/programmes.blade.php

@@ -1,34 +1,87 @@
 <x-user-layout>
     <x-slot name="title">Programmes</x-slot>
-    <div class="space-y-6">
-        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-                <h1 class="text-xl font-semibold text-slate-900">Programmes</h1>
-                <p class="mt-1 text-sm text-slate-500">Itinerary and schedule outlines you can attach to events and share with attendees.</p>
+
+    <div class="space-y-6"
+         x-data="balanceGate({
+            balance: @js((float) $wallet->spendableBalance()),
+            price: @js((float) $pricePerQr),
+            topupUrl: @js($topupUrl),
+            href: @js(route('programmes.create')),
+         })">
+        @foreach(['success', 'error'] as $flash)
+            @if(session($flash))
+                <div class="rounded-lg border px-4 py-3 {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">
+                    <p class="text-sm">{{ session($flash) }}</p>
+                </div>
+            @endif
+        @endforeach
+
+        <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="absolute inset-0 bg-gradient-to-br from-violet-50/80 via-white to-indigo-50/60"></div>
+            <div class="relative px-6 py-8 sm:px-10">
+                <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+                    <div class="max-w-xl">
+                        <div class="inline-flex items-center gap-1.5 rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700">
+                            Schedules · Sessions · Speaker line-ups
+                        </div>
+                        <h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Your programmes</h1>
+                        <p class="mt-2 text-sm leading-6 text-slate-600">
+                            Build itinerary outlines you can attach to events and share with attendees via Ladill Link.
+                        </p>
+                        <div class="mt-6">
+                            <button type="button"
+                                    @click="goOrTopup($event)"
+                                    class="btn-primary">
+                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                                New programme
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
+                        </div>
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $programmes->count() }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Programmes</p>
+                        </div>
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($totalSessions) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Sessions</p>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <a href="{{ route('programmes.create') }}" class="btn-primary">
-                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
-                New programme
-            </a>
         </div>
 
-        @if($programmes->isEmpty())
-            <div class="rounded-2xl border border-dashed border-slate-200 bg-white px-6 py-12 text-center">
-                <p class="text-sm text-slate-500">No programmes yet.</p>
-                <a href="{{ route('programmes.create') }}" class="mt-3 inline-block text-sm font-medium text-indigo-600 hover:text-indigo-800">Create a programme outline</a>
+        <div class="rounded-2xl border border-slate-200 bg-white overflow-hidden">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">Your programmes</h2>
             </div>
-        @else
-            <div class="divide-y divide-slate-100 rounded-2xl border border-slate-200 bg-white">
-                @foreach($programmes as $programme)
-                    <a href="{{ route('events.show', $programme) }}" class="flex items-center justify-between px-6 py-4 hover:bg-slate-50">
-                        <div>
-                            <p class="font-medium text-slate-900">{{ $programme->content()['title'] ?? $programme->label }}</p>
-                            <p class="text-xs text-slate-500">{{ $programme->content()['event_date'] ?? 'No date set' }}</p>
-                        </div>
-                        <span class="text-xs text-slate-400">{{ $programme->publicUrl() }}</span>
-                    </a>
-                @endforeach
-            </div>
-        @endif
+            @if($programmes->isEmpty())
+                <p class="px-6 py-10 text-center text-sm text-slate-500">No programmes yet. Create your first programme outline to get started.</p>
+            @else
+                <div class="divide-y divide-slate-100">
+                    @foreach($programmes as $programme)
+                        <a href="{{ route('events.show', $programme) }}" class="flex items-center gap-4 px-6 py-4 transition hover:bg-slate-50">
+                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {{ $programme->is_active ? 'bg-violet-100' : 'bg-slate-100 opacity-50' }}">
+                                <svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />
+                                </svg>
+                            </div>
+                            <div class="min-w-0 flex-1">
+                                <p class="truncate text-sm font-semibold text-slate-900">{{ $programme->content()['title'] ?? $programme->label }}</p>
+                                <p class="truncate text-xs text-slate-500">{{ $programme->content()['event_date'] ?? 'No date set' }} · {{ $programme->publicUrl() }}</p>
+                            </div>
+                            <div class="text-right text-xs text-slate-500">
+                                <p class="font-semibold text-slate-900">{{ $programme->is_active ? 'Active' : 'Paused' }}</p>
+                            </div>
+                        </a>
+                    @endforeach
+                </div>
+            @endif
+        </div>
     </div>
 </x-user-layout>

resources/views/partials/sidebar.blade.php

@@ -5,25 +5,42 @@
         </a>
     </div>
     @php
+        $eventsActive = request()->routeIs('events.index') || request()->routeIs('events.create') || request()->routeIs('events.show');
+        $programmesActive = request()->routeIs('programmes.*');
+        $eventsSectionActive = $eventsActive || $programmesActive;
+
         $main = [
             ['name' => 'Overview', 'route' => route('events.dashboard'), 'active' => request()->routeIs('events.dashboard'),
              'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12 11.2 3.05c.44-.44 1.15-.44 1.59 0L21.75 12M4.5 9.75v10.5a.75.75 0 0 0 .75.75H9.75v-6a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v6h4.5a.75.75 0 0 0 .75-.75V9.75" />'],
-            ['name' => 'Events', 'route' => route('events.index'), 'active' => request()->routeIs('events.index') || request()->routeIs('events.create') || request()->routeIs('events.show'),
-             'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />'],
             ['name' => 'Attendees', 'route' => route('attendees.index'), 'active' => request()->routeIs('attendees.*') || request()->routeIs('events.attendees*'),
              'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />'],
             ['name' => 'Badge printing', 'route' => route('badges.index'), 'active' => request()->routeIs('badges.*') || request()->routeIs('events.badge-printing') || request()->routeIs('events.badges*'),
              'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />'],
-            ['name' => 'Programmes', 'route' => route('programmes.index'), 'active' => request()->routeIs('programmes.*'),
-             'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25Z" />'],
             ['name' => 'Speakers', 'route' => route('speakers.index'), 'active' => request()->routeIs('speakers.*'),
              'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z" />'],
             ['name' => 'Payments & Payouts', 'route' => route('events.payouts'), 'active' => request()->routeIs('events.payouts'),
              'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />'],
         ];
+
+        $eventsIcon = '<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />';
     @endphp
     <nav class="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
-        @foreach($main as $item)
+        <a href="{{ $main[0]['route'] }}" class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ $main[0]['active'] ? 'bg-indigo-50 text-indigo-700 font-semibold' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
+            <svg class="h-[18px] w-[18px] shrink-0 {{ $main[0]['active'] ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">{!! $main[0]['icon'] !!}</svg>
+            <span>{{ $main[0]['name'] }}</span>
+        </a>
+
+        <div class="space-y-0.5">
+            <a href="{{ route('events.index') }}" class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ $eventsActive ? 'bg-indigo-50 text-indigo-700 font-semibold' : ($eventsSectionActive ? 'text-slate-700 font-medium' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900') }}">
+                <svg class="h-[18px] w-[18px] shrink-0 {{ $eventsActive ? 'text-indigo-600' : ($eventsSectionActive ? 'text-slate-500' : 'text-slate-400') }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">{!! $eventsIcon !!}</svg>
+                <span>Events</span>
+            </a>
+            <a href="{{ route('programmes.index') }}" class="group flex items-center gap-3 rounded-lg py-2 pl-9 pr-3 text-[13px] transition {{ $programmesActive ? 'bg-indigo-50 text-indigo-700 font-semibold' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
+                <span>Programmes</span>
+            </a>
+        </div>
+
+        @foreach(array_slice($main, 1) as $item)
             <a href="{{ $item['route'] }}" class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ $item['active'] ? 'bg-indigo-50 text-indigo-700 font-semibold' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                 <svg class="h-[18px] w-[18px] shrink-0 {{ $item['active'] ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">{!! $item['icon'] !!}</svg>
                 <span>{{ $item['name'] }}</span>