Improve mobile dashboard menus and keyword actions
This commit is contained in:
Dwindi Ramadhana
@@ -105,47 +105,47 @@
|
||||
<button id="quick-action-btn" class="rounded-full bg-white/10 text-white border border-white/10 px-5 py-2 text-sm font-semibold hover:bg-white/20 transition-colors">
|
||||
Quick action
|
||||
</button>
|
||||
<div id="quick-action-menu" class="hidden absolute right-0 mt-2 w-60 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
|
||||
<div id="quick-action-menu" class="hidden absolute left-0 sm:left-auto sm:right-0 mt-2 w-60 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-2 shadow-xl z-50 dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
|
||||
<div class="text-[11px] uppercase tracking-[0.3em] text-slate-500 px-3 py-2 dark:text-gray-500">Actions</div>
|
||||
@if ($isAdmin)
|
||||
<a href="{{ route('dashboard.admin.users') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.users') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="users" class="w-4 h-4"></i><span>Manage users</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="credit-card" class="w-4 h-4"></i><span>Grant subscription</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="package-search" class="w-4 h-4"></i><span>Manage catalog</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="webhook" class="w-4 h-4"></i><span>Review webhooks</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.audit_logs') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.audit_logs') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="list-checks" class="w-4 h-4"></i><span>Audit logs</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.settings') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.settings') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i><span>Update settings</span>
|
||||
</a>
|
||||
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="user-round" class="w-4 h-4"></i><span>Edit profile</span>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('dashboard.keywords') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.keywords') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="hash" class="w-4 h-4"></i><span>My keywords</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.keywords') }}#add" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.keywords') }}#add" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="plus-circle" class="w-4 h-4"></i><span>Add keyword</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.api-keys') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.api-keys') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="key-round" class="w-4 h-4"></i><span>Manage API keys</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.billing') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.billing') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="badge-dollar-sign" class="w-4 h-4"></i><span>Billing overview</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.preferences') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.preferences') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="settings-2" class="w-4 h-4"></i><span>Preferences</span>
|
||||
</a>
|
||||
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="user-round" class="w-4 h-4"></i><span>Edit profile</span>
|
||||
</a>
|
||||
@endif
|
||||
@@ -156,15 +156,15 @@
|
||||
<button id="export-btn" class="rounded-full border border-white/10 px-5 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">
|
||||
Export
|
||||
</button>
|
||||
<div id="export-menu" class="hidden absolute right-0 mt-2 w-56 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
|
||||
<div id="export-menu" class="hidden absolute left-0 sm:left-auto sm:right-0 mt-2 w-56 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-2 shadow-xl z-50 dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
|
||||
<div class="text-[11px] uppercase tracking-[0.3em] text-slate-500 px-3 py-2 dark:text-gray-500">Export CSV</div>
|
||||
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'users'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'users'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="users" class="w-4 h-4"></i><span>Users</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'subscriptions'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'subscriptions'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="credit-card" class="w-4 h-4"></i><span>Subscriptions</span>
|
||||
</a>
|
||||
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'webhooks'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'webhooks'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
|
||||
<i data-lucide="webhook" class="w-4 h-4"></i><span>Webhooks</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
<th class="px-4 py-3 text-left">Keyword</th>
|
||||
<th class="px-4 py-3 text-left">Language</th>
|
||||
<th class="px-4 py-3 text-left">Status</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
<th class="hidden px-4 py-3 text-right md:table-cell">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="keyword-table">
|
||||
@@ -104,7 +104,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 font-semibold text-white">{{ $item->keyword }}</td>
|
||||
<td class="px-4 py-3 font-semibold text-white">
|
||||
{{ $item->keyword }}
|
||||
@php
|
||||
$isActiveMobile = (bool) ($item->is_active ?? true);
|
||||
$canActivateMobile = $isActiveMobile || $isPersonal || !$limitReached;
|
||||
@endphp
|
||||
<div class="mt-3 flex flex-wrap gap-2 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
class="edit-btn rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10"
|
||||
data-id="{{ $item->id }}"
|
||||
data-emoji="{{ $item->emoji_slug }}"
|
||||
data-keyword="{{ $item->keyword }}"
|
||||
data-lang="{{ $item->lang }}"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<form method="POST" action="{{ route('dashboard.keywords.toggle_active', $item->id) }}" class="inline">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<input type="hidden" name="is_active" value="{{ $isActiveMobile ? '0' : '1' }}">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10 {{ (!$canActivateMobile && !$isActiveMobile) ? 'opacity-50 cursor-not-allowed' : '' }}"
|
||||
{{ (!$canActivateMobile && !$isActiveMobile) ? 'disabled' : '' }}
|
||||
>
|
||||
{{ $isActiveMobile ? 'Deactivate' : 'Activate' }}
|
||||
</button>
|
||||
</form>
|
||||
<form method="POST" action="{{ route('dashboard.keywords.delete', $item->id) }}" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs uppercase tracking-[0.15em] text-gray-400">{{ $item->lang ?? 'und' }}</td>
|
||||
<td class="px-4 py-3">
|
||||
@php
|
||||
@@ -115,7 +152,7 @@
|
||||
{{ $isActive ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<td class="hidden px-4 py-3 text-right md:table-cell">
|
||||
<button
|
||||
type="button"
|
||||
class="edit-btn rounded-full border border-white/10 px-3 py-1 text-xs text-gray-200 hover:bg-white/10"
|
||||
|
||||
Reference in New Issue
Block a user