isaacclad
95d73d1367
Deploy Ladill QR Plus / deploy (push) Successful in 1m6s
Let accounts organise codes by promo or launch, attach or detach codes, and view combined scan totals from the sidebar.
101 lines
6.4 KiB
PHP
101 lines
6.4 KiB
PHP
@php
|
|
$statusColor = [
|
|
'draft' => 'bg-slate-100 text-slate-700',
|
|
'active' => 'bg-emerald-50 text-emerald-700',
|
|
'archived' => 'bg-amber-50 text-amber-800',
|
|
];
|
|
@endphp
|
|
<x-user-layout>
|
|
<x-slot name="title">Campaigns</x-slot>
|
|
|
|
<div class="space-y-6">
|
|
@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">
|
|
Group codes · Track performance
|
|
</div>
|
|
<h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Campaigns</h1>
|
|
<p class="mt-2 text-sm leading-6 text-slate-600">
|
|
Organise QR codes by launch, promo, or channel and see combined scan totals in one place.
|
|
</p>
|
|
<div class="mt-6">
|
|
<a href="{{ route('qr.campaigns.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 campaign
|
|
</a>
|
|
</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">{{ number_format($campaignCount) }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Campaigns</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($activeCount) }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Active</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($codesInCampaigns) }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Codes assigned</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
|
<div class="border-b border-slate-100 px-6 py-4">
|
|
<h2 class="text-sm font-semibold text-slate-900">All campaigns</h2>
|
|
</div>
|
|
@if ($campaigns->isEmpty())
|
|
<div class="px-6 py-12 text-center">
|
|
<p class="text-sm text-slate-500">No campaigns yet. Create one to group QR codes for a promo or launch.</p>
|
|
</div>
|
|
@else
|
|
<table class="min-w-full divide-y divide-slate-100 text-sm">
|
|
<thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
|
|
<tr>
|
|
<th class="px-5 py-3">Campaign</th>
|
|
<th class="hidden px-5 py-3 sm:table-cell">Codes</th>
|
|
<th class="hidden px-5 py-3 md:table-cell">Scans</th>
|
|
<th class="px-5 py-3">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50">
|
|
@foreach ($campaigns as $campaign)
|
|
<tr class="cursor-pointer hover:bg-slate-50" onclick="window.location='{{ route('qr.campaigns.show', $campaign) }}'">
|
|
<td class="px-5 py-3">
|
|
<p class="font-medium text-slate-900">{{ $campaign->name }}</p>
|
|
@if ($campaign->description)
|
|
<p class="mt-0.5 line-clamp-1 text-xs text-slate-500">{{ $campaign->description }}</p>
|
|
@endif
|
|
</td>
|
|
<td class="hidden px-5 py-3 text-slate-600 sm:table-cell">{{ number_format($campaign->qr_codes_count) }}</td>
|
|
<td class="hidden px-5 py-3 text-slate-600 md:table-cell">{{ number_format((int) $campaign->qr_codes_sum_scans_total) }}</td>
|
|
<td class="px-5 py-3">
|
|
<span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $statusColor[$campaign->status] ?? 'bg-slate-100 text-slate-700' }}">
|
|
{{ $campaign->statusLabel() }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<div class="border-t border-slate-100 px-5 py-3">{{ $campaigns->links() }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</x-user-layout>
|