Add 3-tier plans, Paystack prepaid Pro, and Enterprise contact-sales card.

Sidebar settings and upgrade share one footer with consistent spacing.

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

resources/views/frontdesk/pro/index.blade.php

@@ -1,56 +1,124 @@
-<x-app-layout title="Pro" heading="Frontdesk Pro">
+<x-app-layout title="Plans" heading="Frontdesk plans">
     @php
-        $price = number_format($priceMinor / 100, 2);
+        $proPrice = number_format($proPriceMinor / 100, 0);
     @endphp
 
-    <div class="mx-auto max-w-2xl">
+    <div class="mx-auto max-w-5xl space-y-6" x-data="{ billing: 'monthly' }">
         @if (session('upsell'))
-            <div class="mb-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ session('upsell') }}</div>
+            <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ session('upsell') }}</div>
+        @endif
+        @if (session('success'))
+            <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
+        @endif
+        @if (session('error'))
+            <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
         @endif
 
-        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
-            <div class="bg-gradient-to-r from-indigo-700 via-teal-600 to-cyan-500 px-6 py-7 text-white">
-                <div class="flex items-center gap-2">
-                    <span class="rounded-md bg-white/20 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide">Pro</span>
-                    @if ($isPro)
-                        <span class="rounded-md bg-emerald-400/90 px-2 py-0.5 text-[11px] font-semibold text-emerald-950">Active</span>
-                    @endif
-                </div>
-                <h1 class="mt-3 text-2xl font-bold">Ladill Frontdesk Pro</h1>
-                <p class="mt-1 text-sm text-white/80">Everything in Free, plus unlimited scale, integrations, and unlimited host email alerts.</p>
-                <p class="mt-4 text-3xl font-bold">{{ $currency }} {{ $price }}<span class="text-base font-medium text-white/70"> / month</span></p>
+        <div class="rounded-2xl border border-slate-200 bg-white px-6 py-5">
+            <h1 class="text-2xl font-bold text-slate-900">Choose your Frontdesk plan</h1>
+            <p class="mt-1 text-sm text-slate-600">
+                Pay monthly from your Ladill wallet, or prepay 6/12/24 months via Paystack for Pro.
+                Enterprise is custom — <a href="{{ $salesUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800" target="_blank" rel="noopener">contact sales</a> for multi-site onboarding.
+            </p>
+            <div class="mt-4 flex flex-wrap gap-2">
+                <button type="button" @click="billing = 'monthly'"
+                        :class="billing === 'monthly' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
+                        class="rounded-lg px-3 py-1.5 text-sm font-medium transition">Monthly · wallet</button>
+                @foreach ($prepaidMonths as $months)
+                    <button type="button" @click="billing = '{{ $months }}'"
+                            :class="billing === '{{ $months }}' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
+                            class="rounded-lg px-3 py-1.5 text-sm font-medium transition">{{ $months }} months · Paystack</button>
+                @endforeach
+            </div>
+        </div>
+
+        <div class="grid gap-5 lg:grid-cols-3">
+            {{-- Free --}}
+            <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'free' ? 'ring-2 ring-indigo-500' : '' }}">
+                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Free</p>
+                <p class="mt-2 text-3xl font-bold text-slate-900">GHS 0</p>
+                <p class="mt-1 text-sm text-slate-500">1 branch · 1 kiosk</p>
+                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
+                    <li>Core check-in & badges</li>
+                    <li>100 host emails / month</li>
+                    <li>Watchlist & hosts</li>
+                </ul>
+                @if ($planKey === 'free')
+                    <p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>
+                @endif
             </div>
 
-            <div class="px-6 py-6">
-                <ul class="grid gap-3 sm:grid-cols-2">
-                    @foreach ($proFeatures as $feature)
-                        <li class="flex items-start gap-2 text-sm text-slate-700">
-                            <svg class="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
-                            <span>{{ $feature }}</span>
-                        </li>
-                    @endforeach
+            {{-- Pro --}}
+            <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'pro' ? 'ring-2 ring-indigo-500' : '' }}">
+                <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Pro</p>
+                <p class="mt-2 text-3xl font-bold text-slate-900">{{ $currency }} {{ $proPrice }}<span class="text-base font-medium text-slate-500">/mo</span></p>
+                <p class="mt-1 text-sm text-slate-500" x-show="billing !== 'monthly'" x-cloak>
+                    <span x-text="billing === 'monthly' ? '' : '{{ $currency }} ' + ({{ $proPriceMinor }} * billing / 100).toLocaleString() + ' total'"></span>
+                </p>
+                <p class="mt-1 text-sm text-slate-500" x-show="billing === 'monthly'">Unlimited branches & kiosks</p>
+                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
+                    <li>Unlimited host email alerts</li>
+                    <li>Webhooks & iCal feeds</li>
+                    <li>Scheduled report exports</li>
+                    <li>Custom badge templates</li>
                 </ul>
-
-                <div class="mt-6 border-t border-slate-100 pt-6">
-                    @if ($isPro)
-                        <div class="text-sm text-slate-600">
+                <div class="mt-6">
+                    @if ($planKey === 'pro')
+                        <p class="text-sm text-slate-600">
+                            Active
                             @if ($planExpiresAt)
-                                Pro is active until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>.
-                            @else
-                                Your organization is on Frontdesk Pro.
+                                until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>
                             @endif
-                        </div>
-                        <p class="mt-3 text-xs text-slate-400">SMS host alerts still bill at Ladill platform rates from your wallet.</p>
+                            .
+                        </p>
+                        <p class="mt-2 text-xs text-slate-400">SMS host alerts bill at platform rates from your wallet.</p>
                     @elseif ($canManage)
-                        <form method="post" action="{{ route('frontdesk.pro.subscribe') }}">
+                        <form x-show="billing === 'monthly'" method="post" action="{{ route('frontdesk.pro.subscribe') }}">
                             @csrf
-                            <button class="btn-primary w-full sm:w-auto">
-                                Upgrade to Pro — {{ $currency }} {{ $price }}/mo from wallet
-                            </button>
+                            <button class="btn-primary w-full">Upgrade to Pro — monthly wallet</button>
                         </form>
-                        <p class="mt-3 text-xs text-slate-400">Billed monthly from your Ladill wallet. Host SMS remains pay-as-you-go on every plan.</p>
+                        <template x-for="months in @js($prepaidMonths)" :key="months">
+                            <form x-show="billing == months" method="post" action="{{ route('frontdesk.pro.subscribe-prepaid') }}">
+                                @csrf
+                                <input type="hidden" name="plan" value="pro">
+                                <input type="hidden" name="months" :value="months">
+                                <button type="submit" class="btn-primary w-full" x-text="'Pay ' + months + ' months via Paystack'"></button>
+                            </form>
+                        </template>
                     @else
-                        <p class="rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">Ask an organization administrator to upgrade this workspace to Pro.</p>
+                        <p class="text-sm text-slate-500">Ask an admin to upgrade.</p>
+                    @endif
+                </div>
+            </div>
+
+            {{-- Enterprise --}}
+            <div class="flex flex-col rounded-2xl border border-slate-200 bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-white {{ $planKey === 'enterprise' ? 'ring-2 ring-amber-400' : '' }}">
+                <p class="text-xs font-semibold uppercase tracking-wide text-amber-300">Enterprise</p>
+                <p class="mt-2 text-3xl font-bold">Custom</p>
+                <p class="mt-1 text-sm text-slate-300">Multi-site · SLA · dedicated onboarding</p>
+                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
+                    <li>Everything in Pro</li>
+                    <li>Custom integrations</li>
+                    <li>Volume SMS rates</li>
+                    <li>Dedicated support & SLA</li>
+                </ul>
+                <div class="mt-6 space-y-2">
+                    @if ($planKey === 'enterprise')
+                        <p class="text-sm text-slate-200">
+                            Active
+                            @if ($planExpiresAt)
+                                until <strong class="text-white">{{ $planExpiresAt->format('d M Y') }}</strong>
+                            @endif
+                            .
+                        </p>
+                    @elseif ($canManage)
+                        <a href="{{ $salesUrl }}" target="_blank" rel="noopener"
+                           class="block w-full rounded-xl bg-amber-400 px-4 py-2.5 text-center text-sm font-semibold text-slate-900 hover:bg-amber-300">
+                            Contact sales
+                        </a>
+                        <p class="text-center text-xs text-amber-200">Includes one-time setup fee</p>
+                    @else
+                        <p class="text-sm text-slate-300">Ask an admin to contact sales.</p>
                     @endif
                 </div>
             </div>

resources/views/partials/sidebar.blade.php

@@ -137,7 +137,7 @@
         @endif
     </nav>
 
-    <div class="shrink-0 border-t border-slate-100 px-3 py-3">
+    <div class="shrink-0 border-t border-slate-200 px-3 py-3">
         <a href="{{ route('frontdesk.settings') }}"
            class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ request()->routeIs('frontdesk.settings') && ! request()->routeIs('frontdesk.pro.*') ? '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 {{ request()->routeIs('frontdesk.settings') && ! request()->routeIs('frontdesk.pro.*') ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -147,10 +147,10 @@
         </a>
 
         @php $proActive = request()->routeIs('frontdesk.pro.*'); @endphp
-        @if (! empty($isPro))
+        @if (! empty($hasPaidPlan) || ! empty($isEnterprise))
             <a href="{{ route('frontdesk.pro.index') }}" class="group mt-0.5 flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ $proActive ? '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 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25c.3 0 .58.18.7.46l2.36 5.5 5.96.5a.75.75 0 0 1 .43 1.31l-4.53 3.9 1.36 5.83a.75.75 0 0 1-1.12.81L12 17.77l-5.16 3a.75.75 0 0 1-1.12-.81l1.36-5.83-4.53-3.9a.75.75 0 0 1 .43-1.31l5.96-.5 2.36-5.5c.12-.28.4-.46.7-.46Z"/></svg>
-                <span>Frontdesk Pro</span>
+                <span>{{ ! empty($isEnterprise) ? 'Frontdesk Enterprise' : 'Frontdesk Pro' }}</span>
             </a>
         @else
             <a href="{{ route('frontdesk.pro.index') }}" class="group mt-0.5 flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-600 to-emerald-500 px-3 py-2 text-[13px] font-semibold text-white shadow-sm transition hover:opacity-95">