Update pricing UX, billing flows, and API rules

This commit is contained in:
Dwindi Ramadhana
2026-02-12 00:52:40 +07:00
parent cf065fab1e
commit a905256353
202 changed files with 22348 additions and 301 deletions

View File

@@ -0,0 +1,93 @@
@extends('dashboard.app')
@section('title', 'Dashboard')
@section('page_title', 'Your Overview')
@section('page_subtitle', 'Quick stats and recent keyword activity.')
@section('dashboard_content')
@php
$user = auth()->user();
$isPersonal = $user && (string) $user->tier === 'personal';
$subscription = $subscription ?? null;
@endphp
<div class="grid gap-6 lg:grid-cols-4">
<div class="rounded-3xl glass-card p-6">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Total keywords</div>
<div class="mt-3 text-3xl font-semibold text-white">{{ number_format($totalKeywords ?? 0) }}</div>
<div class="mt-2 text-sm text-gray-400">Across your emoji library</div>
</div>
<div class="rounded-3xl glass-card p-6">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Last 7 days</div>
<div class="mt-3 text-3xl font-semibold text-white">{{ number_format($recentWeekCount ?? 0) }}</div>
<div class="mt-2 text-sm text-gray-400">New keywords added</div>
</div>
<div class="rounded-3xl glass-card p-6">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">API keys</div>
<div class="mt-3 text-3xl font-semibold text-white">{{ number_format($apiKeyCount ?? 0) }}</div>
<div class="mt-2 text-sm text-gray-400">Active keys</div>
</div>
<div class="rounded-3xl glass-card p-6">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Plan</div>
<div class="mt-3 text-2xl font-semibold text-white">{{ $isPersonal ? 'Personal' : 'Free' }}</div>
<div class="mt-2 text-sm text-gray-400">
{{ $subscription?->status ? ucfirst($subscription->status) : 'No active subscription' }}
</div>
</div>
<div class="rounded-3xl glass-card p-6">
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Synced devices</div>
<div class="mt-3 text-3xl font-semibold text-white">0</div>
<div class="mt-2 text-sm text-gray-400">Coming soon</div>
</div>
</div>
<div class="mt-8 grid gap-6 lg:grid-cols-3">
<div class="lg:col-span-2 rounded-3xl glass-card p-6">
<div class="flex items-center justify-between">
<div>
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Recent keywords</div>
<div class="mt-2 text-xl font-semibold text-white">Latest additions</div>
</div>
<a href="{{ route('dashboard.keywords') }}" class="rounded-full border border-white/10 px-4 py-2 text-xs text-gray-300 hover:bg-white/5">
Manage keywords
</a>
</div>
<div class="mt-6 grid gap-3 md:grid-cols-2">
@forelse ($recentKeywords ?? [] as $keyword)
<div class="rounded-2xl bg-white/5 border border-white/10 p-4">
<div class="text-xs uppercase tracking-[0.2em] text-gray-500">{{ $keyword->lang ?? 'und' }}</div>
<div class="mt-2 text-lg font-semibold text-white">{{ $keyword->keyword }}</div>
<div class="mt-1 text-xs text-gray-400">Emoji slug: {{ $keyword->emoji_slug }}</div>
</div>
@empty
<div class="rounded-2xl border border-dashed border-white/10 p-6 text-sm text-gray-400">
No keywords yet. Add your first keyword from an emoji detail page or the dashboard.
</div>
@endforelse
</div>
</div>
<div class="rounded-3xl glass-card p-6 flex flex-col gap-4">
<div>
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Next steps</div>
<div class="mt-2 text-xl font-semibold text-white">Personalize faster</div>
</div>
<div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-sm text-gray-300">
Add keywords right on emoji detail pages to speed up your searches.
</div>
@if (!$isPersonal)
<div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-brand-sun/30 dark:bg-brand-sun/10 dark:text-brand-sun">
Upgrade to Personal to unlock private keywords and sync across devices.
</div>
<a href="{{ route('pricing') }}" class="inline-flex items-center justify-center rounded-full bg-brand-sun text-black font-semibold px-4 py-2 text-sm">
Upgrade to Personal
</a>
@else
<a href="{{ route('dashboard.keywords') }}" class="inline-flex items-center justify-center rounded-full bg-brand-ocean text-white font-semibold px-4 py-2 text-sm">
Add keywords
</a>
@endif
</div>
</div>
@endsection