Implement catalog CRUD overhaul, snapshot fallback activation, and billing/UX hardening

This commit is contained in:
Dwindi Ramadhana
2026-02-17 00:03:35 +07:00
parent e6aef31dd1
commit 2726b6c312
37 changed files with 2936 additions and 204 deletions

View File

@@ -0,0 +1,129 @@
@extends('dashboard.app')
@php
$isEdit = ($mode ?? 'create') === 'edit';
$formAction = $isEdit
? route('dashboard.admin.catalog.update', data_get($selected, 'emoji_id'))
: route('dashboard.admin.catalog.store');
$textareas = [
'aliases' => data_get($selected, 'aliases', []),
'shortcodes' => data_get($selected, 'shortcodes', []),
'alt_shortcodes' => data_get($selected, 'alt_shortcodes', []),
'keywords_en' => data_get($selected, 'keywords_en', []),
'keywords_id' => data_get($selected, 'keywords_id', []),
];
@endphp
@section('page_title', $isEdit ? 'Edit Emoji' : 'Create Emoji')
@section('page_subtitle', 'Edit/add emoji data in database. Publish frozen JSON from Catalog page after batch updates.')
@section('dashboard_content')
@if (session('status'))
<div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-200">
{{ session('status') }}
</div>
@endif
@if (session('error'))
<div class="mb-6 rounded-2xl border border-red-300/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-200">
{{ session('error') }}
</div>
@endif
@if ($errors->any())
<div class="mb-6 rounded-2xl border border-amber-300/40 bg-amber-400/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-200">
{{ $errors->first() }}
</div>
@endif
<div class="rounded-2xl glass-card p-5">
<form method="POST" action="{{ $formAction }}" class="grid gap-4">
@csrf
@if ($isEdit)
@method('PUT')
@endif
<div class="grid gap-4 md:grid-cols-3">
<label class="text-sm text-slate-700 dark:text-gray-300">
Emoji
<input name="emoji" value="{{ old('emoji', data_get($selected, 'emoji', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300 md:col-span-2">
Slug
<input name="slug" value="{{ old('slug', data_get($selected, 'slug', '')) }}" required class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
</div>
<div class="grid gap-4 md:grid-cols-2">
<label class="text-sm text-slate-700 dark:text-gray-300">
Name
<input name="name" value="{{ old('name', data_get($selected, 'name', '')) }}" required class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Category
<input name="category" value="{{ old('category', data_get($selected, 'category', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Subcategory
<input name="subcategory" value="{{ old('subcategory', data_get($selected, 'subcategory', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Unified
<input name="unified" value="{{ old('unified', data_get($selected, 'unified', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Version
<input name="version" value="{{ old('version', data_get($selected, 'version', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
</div>
<div class="grid gap-4 md:grid-cols-2">
@foreach ($textareas as $field => $values)
<label class="text-sm text-slate-700 dark:text-gray-300">
{{ strtoupper(str_replace('_', ' ', $field)) }} (comma or line-separated)
<textarea name="{{ $field }}" rows="3" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">{{ old($field, is_array($values) ? implode(PHP_EOL, $values) : '') }}</textarea>
</label>
@endforeach
</div>
<label class="text-sm text-slate-700 dark:text-gray-300">
Description
<textarea name="description" rows="3" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">{{ old('description', data_get($selected, 'description', '')) }}</textarea>
</label>
<div class="grid gap-4 md:grid-cols-2">
<label class="text-sm text-slate-700 dark:text-gray-300">
Permalink
<input name="permalink" value="{{ old('permalink', data_get($selected, 'permalink', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Title
<input name="title" value="{{ old('title', data_get($selected, 'title', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Meta title
<input name="meta_title" value="{{ old('meta_title', data_get($selected, 'meta_title', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
<label class="text-sm text-slate-700 dark:text-gray-300">
Meta description
<input name="meta_description" value="{{ old('meta_description', data_get($selected, 'meta_description', '')) }}" class="mt-2 w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-slate-900 dark:text-slate-100 theme-surface bg-white dark:bg-slate-900 placeholder:text-slate-400 dark:placeholder:text-slate-500">
</label>
</div>
<div class="flex flex-wrap items-center justify-between gap-3">
<label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-gray-300">
<input type="hidden" name="supports_skin_tone" value="0">
<input type="checkbox" name="supports_skin_tone" value="1" @checked(old('supports_skin_tone', data_get($selected, 'supports_skin_tone', false)))>
<span>Supports skin tone</span>
</label>
<div class="flex items-center gap-2">
<a href="{{ route('dashboard.admin.catalog') }}" class="rounded-xl border border-slate-200 dark:border-slate-700 px-4 py-2 text-sm text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-white/5">Back to catalog</a>
<button class="rounded-xl bg-slate-900 dark:bg-white/10 border border-slate-900 dark:border-slate-700 px-4 py-2 text-sm font-semibold text-white force-white hover:opacity-90">
{{ $isEdit ? 'Update emoji' : 'Create emoji' }}
</button>
</div>
</div>
</form>
</div>
@endsection

View File

@@ -0,0 +1,175 @@
@extends('dashboard.app')
@section('page_title', 'Emoji Catalog')
@section('page_subtitle', 'Manage emojis in database, then publish one frozen JSON snapshot when ready.')
@section('dashboard_content')
@if (session('status'))
<div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-200">
{{ session('status') }}
</div>
@endif
@if (session('error'))
<div class="mb-6 rounded-2xl border border-red-300/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-200">
{{ session('error') }}
</div>
@endif
<div class="grid gap-6 lg:grid-cols-3">
<div class="rounded-2xl glass-card p-5">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Catalog rows</div>
<div class="mt-3 text-3xl font-semibold text-slate-900 dark:text-white">{{ number_format($totalRows ?? $items->total()) }}</div>
<div class="mt-2 text-sm text-slate-600 dark:text-gray-400">Read from `emojis` table</div>
@if (($filters['q'] ?? '') !== '')
<div class="mt-1 text-xs text-slate-500 dark:text-gray-500">Filtered result: {{ number_format($items->total()) }}</div>
@endif
</div>
<div class="rounded-2xl glass-card p-5">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Active snapshot</div>
<div class="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{{ $activeVersion ?: 'None' }}</div>
<div class="mt-2 text-sm text-slate-600 dark:text-gray-400">{{ $activeVersion ? 'Published' : 'Not published yet' }}</div>
</div>
<div class="rounded-2xl glass-card p-5">
<div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Active file path</div>
<div class="mt-3 text-sm font-mono text-slate-800 dark:text-gray-200 break-all">{{ $activePath ?: config('dewemoji.data_path') }}</div>
<div class="mt-2 text-xs text-slate-500 dark:text-gray-500">Public search/API uses this dataset.</div>
</div>
</div>
<div class="mt-8 rounded-2xl glass-card p-5">
<div class="flex flex-wrap items-center justify-between gap-3">
<form method="GET" action="{{ route('dashboard.admin.catalog') }}" class="flex flex-wrap items-center gap-2">
<input
type="text"
name="q"
value="{{ $filters['q'] ?? '' }}"
placeholder="Search slug, name, category, subcategory"
class="w-72 max-w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 bg-white dark:bg-slate-900"
>
<button class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Search</button>
<a href="{{ route('dashboard.admin.catalog') }}" class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Reset</a>
</form>
<div class="flex flex-wrap items-center gap-2">
<a href="{{ route('dashboard.admin.catalog.create') }}" class="rounded-xl bg-slate-900 dark:bg-white/10 border border-slate-900 dark:border-white/10 px-4 py-2 text-sm font-semibold text-white force-white dark:text-white hover:opacity-90">
Add Emoji
</a>
<form method="POST" action="{{ route('dashboard.admin.catalog.publish') }}">
@csrf
<button class="rounded-xl bg-brand-ocean px-4 py-2 text-sm font-semibold text-white force-white hover:opacity-90">Publish Frozen JSON</button>
</form>
<form method="POST" action="{{ route('dashboard.admin.catalog.import_json') }}">
@csrf
<button class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Import Current JSON (new only)</button>
</form>
</div>
</div>
<div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 dark:bg-slate-900/80">
<tr class="text-left text-xs uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400">
<th class="px-3 py-3">ID</th>
<th class="px-3 py-3">Emoji</th>
<th class="px-3 py-3">Slug</th>
<th class="px-3 py-3">Name</th>
<th class="px-3 py-3">Category</th>
<th class="px-3 py-3">Updated</th>
<th class="px-3 py-3 text-right">Actions</th>
</tr>
</thead>
<tbody>
@forelse ($items as $item)
<tr class="border-t border-slate-200 dark:border-white/10 text-slate-800 dark:text-gray-200">
<td class="px-3 py-3">#{{ $item->emoji_id }}</td>
<td class="px-3 py-3">{{ $item->emoji ?: '⬚' }}</td>
<td class="px-3 py-3 font-mono text-xs">{{ $item->slug }}</td>
<td class="px-3 py-3">{{ $item->name }}</td>
<td class="px-3 py-3 text-slate-600 dark:text-gray-400">{{ $item->category }}</td>
<td class="px-3 py-3 text-xs text-slate-500 dark:text-gray-400">{{ $item->updated_at ? \Illuminate\Support\Carbon::parse($item->updated_at)->format('Y-m-d H:i') : '—' }}</td>
<td class="px-3 py-3">
<div class="flex items-center justify-end gap-2">
<a href="{{ route('dashboard.admin.catalog.edit', ['emojiId' => $item->emoji_id]) }}" class="rounded-lg border border-slate-300 dark:border-white/10 px-3 py-1.5 text-xs text-slate-700 dark:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/10">Edit</a>
<form method="POST" action="{{ route('dashboard.admin.catalog.delete', $item->emoji_id) }}" onsubmit="return confirm('Delete this emoji and related public records?');">
@csrf
@method('DELETE')
<button class="rounded-lg border border-red-300/50 bg-red-50 dark:bg-red-500/10 px-3 py-1.5 text-xs text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-500/20">Delete</button>
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="7" class="px-3 py-6 text-center text-slate-500 dark:text-gray-400">
@if (($filters['q'] ?? '') !== '')
No rows match "<span class="font-semibold text-slate-700 dark:text-gray-300">{{ $filters['q'] }}</span>".
@else
No catalog rows in database.
@endif
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="mt-4">
{{ $items->links('vendor.pagination.dashboard') }}
</div>
</div>
<div class="mt-8 rounded-2xl glass-card p-5">
<div class="flex items-center justify-between gap-3">
<div>
<div class="text-xs uppercase tracking-[0.2em] text-slate-600 dark:text-gray-400 font-semibold">Snapshot Versions</div>
<div class="mt-1 text-sm text-slate-700 dark:text-gray-300">Use this for quick rollback if latest publish is broken.</div>
</div>
</div>
<div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 dark:bg-slate-900/80">
<tr class="text-left text-xs uppercase tracking-[0.16em] text-slate-600 dark:text-gray-400">
<th class="px-3 py-3">Version</th>
<th class="px-3 py-3">File</th>
<th class="px-3 py-3">Updated</th>
<th class="px-3 py-3">Status</th>
<th class="px-3 py-3 text-right">Action</th>
</tr>
</thead>
<tbody>
@forelse (($snapshots ?? []) as $snapshot)
<tr class="border-t border-slate-200 dark:border-white/10 text-slate-900 dark:text-gray-200">
<td class="px-3 py-3 font-mono text-xs text-slate-800 dark:text-gray-100">{{ $snapshot['version'] }}</td>
<td class="px-3 py-3 font-mono text-xs text-slate-700 dark:text-gray-300">{{ $snapshot['name'] }}</td>
<td class="px-3 py-3 text-xs text-slate-700 dark:text-gray-300">
{{ $snapshot['modified_at'] > 0 ? \Illuminate\Support\Carbon::createFromTimestamp($snapshot['modified_at'])->format('Y-m-d H:i') : '—' }}
</td>
<td class="px-3 py-3">
@if ($snapshot['is_active'])
<span class="rounded-full border border-emerald-400 bg-emerald-100 px-2 py-1 text-xs font-semibold text-emerald-800 dark:border-emerald-300/40 dark:bg-emerald-500/20 dark:text-emerald-200">Active</span>
@else
<span class="rounded-full border border-slate-300 dark:border-white/10 bg-slate-100 dark:bg-white/5 px-2 py-1 text-xs font-medium text-slate-700 dark:text-gray-300">Inactive</span>
@endif
</td>
<td class="px-3 py-3 text-right">
@if (!$snapshot['is_active'])
<form method="POST" action="{{ route('dashboard.admin.catalog.snapshot.activate') }}" class="inline">
@csrf
<input type="hidden" name="snapshot" value="{{ $snapshot['name'] }}">
<button class="rounded-lg border border-slate-300 dark:border-white/10 bg-white dark:bg-transparent px-3 py-1.5 text-xs font-medium text-slate-800 dark:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/10">
Activate
</button>
</form>
@endif
</td>
</tr>
@empty
<tr><td colspan="5" class="px-3 py-6 text-center text-slate-600 dark:text-gray-400">No snapshot files found yet. Publish once to create versioned snapshots.</td></tr>
@endforelse
</tbody>
</table>
</div>
</div>
@endsection

View File

@@ -42,7 +42,7 @@
<option value="active" @selected(($filters['status'] ?? '') === 'active')>Active</option>
<option value="pending" @selected(($filters['status'] ?? '') === 'pending')>Pending</option>
<option value="revoked" @selected(($filters['status'] ?? '') === 'revoked')>Revoked</option>
<option value="cancelled" @selected(($filters['status'] ?? '') === 'cancelled')>Cancelled</option>
<option value="canceled" @selected(($filters['status'] ?? '') === 'canceled')>Canceled</option>
<option value="suspended" @selected(($filters['status'] ?? '') === 'suspended')>Suspended</option>
</select>
<button class="rounded-xl border border-white/10 px-4 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">Filter</button>
@@ -165,7 +165,7 @@
<td class="py-4 pr-4">{{ $row->plan }}</td>
<td class="py-4 pr-4">
@php
$inactive = in_array($row->status, ['revoked', 'cancelled', 'suspended'], true);
$inactive = in_array($row->status, ['revoked', 'canceled', 'cancelled', 'suspended'], true);
$pill = $inactive
? ['bg' => 'bg-rose-100 dark:bg-rose-500/20', 'text' => 'text-rose-800 dark:text-rose-200']
: ($row->status === 'pending'

View File

@@ -59,7 +59,7 @@
<td class="py-4 pr-4">{{ $row->plan }}</td>
<td class="py-4 pr-4">
@php
$inactive = in_array($row->status, ['revoked', 'cancelled', 'suspended'], true);
$inactive = in_array($row->status, ['revoked', 'canceled', 'cancelled', 'suspended'], true);
$pill = $inactive
? ['bg' => 'bg-rose-100 dark:bg-rose-500/20', 'text' => 'text-rose-800 dark:text-rose-200']
: ($row->status === 'pending'