Add Campaigns module for grouping short links.
Deploy Ladill Link / deploy (push) Successful in 1m26s
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.
This commit is contained in:
isaacclad
@@ -0,0 +1,42 @@
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-slate-700">Name</label>
|
||||
<input type="text" name="name" id="name" required value="{{ old('name', $campaign->name) }}"
|
||||
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
|
||||
placeholder="e.g. Product launch · April">
|
||||
@error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium text-slate-700">Description <span class="font-normal text-slate-400">(optional)</span></label>
|
||||
<textarea name="description" id="description" rows="3"
|
||||
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
|
||||
placeholder="What this campaign is for">{{ old('description', $campaign->description) }}</textarea>
|
||||
@error('description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="status" class="block text-sm font-medium text-slate-700">Status</label>
|
||||
<select name="status" id="status" class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
@foreach (\App\Models\Campaign::STATUSES as $value => $label)
|
||||
<option value="{{ $value }}" @selected(old('status', $campaign->status ?? 'active') === $value)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('status')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="starts_at" class="block text-sm font-medium text-slate-700">Starts <span class="font-normal text-slate-400">(optional)</span></label>
|
||||
<input type="date" name="starts_at" id="starts_at"
|
||||
value="{{ old('starts_at', optional($campaign->starts_at)->format('Y-m-d')) }}"
|
||||
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
@error('starts_at')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="ends_at" class="block text-sm font-medium text-slate-700">Ends <span class="font-normal text-slate-400">(optional)</span></label>
|
||||
<input type="date" name="ends_at" id="ends_at"
|
||||
value="{{ old('ends_at', optional($campaign->ends_at)->format('Y-m-d')) }}"
|
||||
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
@error('ends_at')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<x-user-layout>
|
||||
<x-slot name="title">New campaign</x-slot>
|
||||
|
||||
<div class="mx-auto max-w-xl space-y-6">
|
||||
<div>
|
||||
<a href="{{ route('link.campaigns.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← Campaigns</a>
|
||||
<h1 class="mt-2 text-2xl font-semibold text-slate-900">New campaign</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">Name a launch or promo, then attach short links on the next screen.</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('link.campaigns.store') }}" class="space-y-5 rounded-xl border border-slate-200 bg-white p-6">
|
||||
@csrf
|
||||
@include('links.campaigns._form', ['campaign' => $campaign])
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="{{ route('link.campaigns.index') }}" class="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel</a>
|
||||
<button type="submit" class="btn-primary">Create campaign</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</x-user-layout>
|
||||
@@ -0,0 +1,100 @@
|
||||
@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>
|
||||
@@ -0,0 +1,115 @@
|
||||
@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">{{ $campaign->name }}</x-slot>
|
||||
|
||||
<div class="mx-auto max-w-5xl 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="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<a href="{{ route('link.campaigns.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← Campaigns</a>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<h1 class="text-2xl font-semibold text-slate-900">{{ $campaign->name }}</h1>
|
||||
<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>
|
||||
</div>
|
||||
@if ($campaign->description)
|
||||
<p class="mt-1 text-sm text-slate-600">{{ $campaign->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<form method="POST" action="{{ route('link.campaigns.destroy', $campaign) }}" onsubmit="return confirm('Delete this campaign? Links stay; they are only unassigned.')">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="text-sm text-red-600 hover:text-red-700">Delete campaign</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($links->count()) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">Short links</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||
<p class="text-2xl font-bold text-slate-900">{{ number_format($totalClicks) }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">Total clicks</p>
|
||||
</div>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-4 col-span-2 sm:col-span-1">
|
||||
<p class="text-sm font-semibold text-slate-900">
|
||||
@if ($campaign->starts_at || $campaign->ends_at)
|
||||
{{ optional($campaign->starts_at)->format('d M Y') ?? '…' }}
|
||||
→
|
||||
{{ optional($campaign->ends_at)->format('d M Y') ?? '…' }}
|
||||
@else
|
||||
No date range
|
||||
@endif
|
||||
</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">Schedule</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('link.campaigns.update', $campaign) }}" class="space-y-5 rounded-xl border border-slate-200 bg-white p-6">
|
||||
@csrf @method('PATCH')
|
||||
<h2 class="text-base font-semibold text-slate-900">Campaign details</h2>
|
||||
@include('links.campaigns._form', ['campaign' => $campaign])
|
||||
<button type="submit" class="btn-primary">Save changes</button>
|
||||
</form>
|
||||
|
||||
<div class="rounded-xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-base font-semibold text-slate-900">Links in this campaign</h2>
|
||||
</div>
|
||||
@if ($links->isEmpty())
|
||||
<p class="px-6 py-8 text-center text-sm text-slate-500">No links assigned yet.</p>
|
||||
@else
|
||||
<ul class="divide-y divide-slate-100">
|
||||
@foreach ($links as $link)
|
||||
<li class="flex items-center justify-between gap-4 px-6 py-3">
|
||||
<a href="{{ route('user.links.show', $link) }}" class="min-w-0 flex-1 hover:text-emerald-700">
|
||||
<p class="truncate text-sm font-medium text-slate-900">{{ $link->label ?: $link->slug }}</p>
|
||||
<p class="truncate text-xs text-slate-500">{{ $link->publicUrl() }} · {{ number_format($link->clicks_total) }} clicks</p>
|
||||
</a>
|
||||
<form method="POST" action="{{ route('link.campaigns.detach', [$campaign, $link]) }}">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="text-xs font-medium text-red-600 hover:text-red-800">Remove</button>
|
||||
</form>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@php
|
||||
$unassigned = $availableLinks->whereNull('campaign_id');
|
||||
@endphp
|
||||
@if ($unassigned->isNotEmpty())
|
||||
<form method="POST" action="{{ route('link.campaigns.attach', $campaign) }}" class="space-y-4 rounded-xl border border-slate-200 bg-white p-6">
|
||||
@csrf
|
||||
<h2 class="text-base font-semibold text-slate-900">Add short links</h2>
|
||||
<div class="max-h-56 space-y-2 overflow-y-auto rounded-lg border border-slate-100 p-3">
|
||||
@foreach ($unassigned as $link)
|
||||
<label class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm hover:bg-slate-50">
|
||||
<input type="checkbox" name="short_link_ids[]" value="{{ $link->id }}" class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
|
||||
<span class="min-w-0 flex-1 truncate">
|
||||
<span class="font-medium text-slate-900">{{ $link->label ?: $link->slug }}</span>
|
||||
<span class="text-slate-400"> · {{ $link->slug }}</span>
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Add selected</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</x-user-layout>
|
||||
@@ -10,6 +10,8 @@
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12 11.2 3.05c.44-.44 1.15-.44 1.59 0L21.75 12M4.5 9.75v10.5a.75.75 0 0 0 .75.75H9.75v-6a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v6h4.5a.75.75 0 0 0 .75-.75V9.75" />'],
|
||||
['name' => 'My Links', 'route' => route('user.links.index'), 'active' => request()->routeIs('user.links.*'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />'],
|
||||
['name' => 'Campaigns', 'route' => route('link.campaigns.index'), 'active' => request()->routeIs('link.campaigns.*'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.789 2.553c.56.246 1.198-.004 1.434-.56a11.958 11.958 0 0 0 1.15-4.506c.02-.292.02-.585 0-.877a11.958 11.958 0 0 0-1.15-4.506c-.236-.556-.874-.806-1.434-.56a23.848 23.848 0 0 1-8.789 2.553m0 0a23.948 23.948 0 0 0 0 5.634" />'],
|
||||
['name' => 'Analytics', 'route' => route('link.analytics.index'), 'active' => request()->routeIs('link.analytics.*'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />'],
|
||||
['name' => 'Custom Domains', 'route' => route('link.domains.index'), 'active' => request()->routeIs('link.domains.*'),
|
||||
|
||||
Reference in New Issue
Block a user