isaacclad
f45fdcd159
Deploy Ladill Link / deploy (push) Successful in 1m26s
Let accounts organise links by promo or launch, attach or detach links, and view combined click 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-emerald-50/80 via-white to-teal-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-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">
|
|
Group links · 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 short links by launch, promo, or channel and see combined click totals in one place.
|
|
</p>
|
|
<div class="mt-6">
|
|
<a href="{{ route('link.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($linksInCampaigns) }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Links 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 short links 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">Links</th>
|
|
<th class="hidden px-5 py-3 md:table-cell">Clicks</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('link.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->short_links_count) }}</td>
|
|
<td class="hidden px-5 py-3 text-slate-600 md:table-cell">{{ number_format((int) $campaign->short_links_sum_clicks_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>
|