146 lines
7.7 KiB
PHP
146 lines
7.7 KiB
PHP
<div>
|
|
@php $ws = current_workspace(); @endphp
|
|
{{-- Header --}}
|
|
<div class="flex items-center justify-between mb-6 nim-reveal nim-reveal-1">
|
|
<h1 class="text-t1">Links</h1>
|
|
@if($ws)
|
|
<div class="flex items-center gap-2">
|
|
<button @click="$dispatch('openModal', {component: 'modals.utm-builder'})"
|
|
class="px-3 py-2 bg-s2 border border-white/[.06] text-t1 rounded-lg text-sm font-medium hover:bg-s3 transition-colors flex items-center gap-1.5">
|
|
<x-heroicon-o-beaker class="w-4 h-4" />
|
|
UTM Builder
|
|
</button>
|
|
<button @click="$dispatch('openModal', {component: 'modals.create-link', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
|
|
class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
|
|
+ New Link
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Filter Bar --}}
|
|
<div class="flex gap-3 mb-4">
|
|
<input wire:model.live.debounce.300ms="search"
|
|
type="text"
|
|
placeholder="Search links..."
|
|
class="flex-1 px-3 py-2.5 bg-s1 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50" />
|
|
<select wire:model.live="statusFilter"
|
|
class="px-3 py-2.5 bg-s1 border border-white/[.06] rounded-lg text-sm text-t2 focus:outline-none focus:ring-1 focus:ring-blue/50 cursor-pointer">
|
|
<option value="">All statuses</option>
|
|
<option value="active">Active</option>
|
|
<option value="disabled">Disabled</option>
|
|
<option value="expired">Expired</option>
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Table --}}
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl overflow-hidden card-shadow">
|
|
<table class="w-full text-sm">
|
|
<thead class="border-b border-white/[.06] bg-s2/40">
|
|
<tr class="text-t3 text-xs uppercase tracking-widest">
|
|
<th class="px-4 py-3 text-left font-semibold">Link</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Target</th>
|
|
<th class="px-4 py-3 text-left font-semibold hidden md:table-cell">Tags</th>
|
|
<th class="px-4 py-3 text-right font-semibold">Clicks</th>
|
|
<th class="px-4 py-3 text-center font-semibold">Status</th>
|
|
<th class="px-4 py-3 w-32"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($links as $link)
|
|
<tr class="border-b border-white/[.03] last:border-0 table-row-hover hover:bg-white/[.015] group relative">
|
|
{{-- Slug + title --}}
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-t3 text-xs">nimu.li/</span>
|
|
<span class="font-mono text-blue text-sm font-semibold">{{ $link->slug }}</span>
|
|
</div>
|
|
@if($link->title)
|
|
<div class="text-t3 text-xs mt-0.5 truncate max-w-xs">{{ $link->title }}</div>
|
|
@endif
|
|
</td>
|
|
|
|
{{-- Target URL --}}
|
|
<td class="px-4 py-3 text-t3 text-xs max-w-xs">
|
|
<span class="block truncate" title="{{ $link->target_url }}">{{ $link->target_url }}</span>
|
|
</td>
|
|
|
|
{{-- Tags --}}
|
|
<td class="px-4 py-3 hidden md:table-cell">
|
|
@if(!empty($link->tags))
|
|
<div class="flex flex-wrap gap-1">
|
|
@foreach($link->tags as $tag)
|
|
<span class="badge bg-s3 text-t3">{{ $tag }}</span>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<span class="text-t3 text-xs">—</span>
|
|
@endif
|
|
</td>
|
|
|
|
{{-- Clicks --}}
|
|
<td class="px-4 py-3 text-right font-mono text-t1 text-sm font-bold tabular-nums">
|
|
{{ number_format($link->clicks_count ?? 0) }}
|
|
</td>
|
|
|
|
{{-- Status Badge --}}
|
|
<td class="px-4 py-3 text-center">
|
|
@if($link->status === 'active')
|
|
<span class="badge bg-green/10 text-green">
|
|
<span class="w-1 h-1 rounded-full bg-green inline-block"></span>
|
|
active
|
|
</span>
|
|
@elseif($link->status === 'expired')
|
|
<span class="badge bg-amber/10 text-amber">expired</span>
|
|
@else
|
|
<span class="badge bg-white/[.06] text-t3">{{ $link->status }}</span>
|
|
@endif
|
|
</td>
|
|
|
|
{{-- Actions --}}
|
|
<td class="px-4 py-3 text-right">
|
|
<div class="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all duration-150">
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.link-variants', arguments: {linkUlid: '{{ $link->ulid }}'}})"
|
|
class="text-t3 text-xs hover:text-blue transition-colors flex items-center gap-1">
|
|
<x-heroicon-o-chart-bar class="w-3 h-3" />
|
|
A/B
|
|
</button>
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.edit-link', arguments: {linkUlid: '{{ $link->ulid }}'}})"
|
|
class="text-t2 text-xs hover:text-t1 transition-colors">
|
|
Edit
|
|
</button>
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.delete-link', arguments: {linkUlid: '{{ $link->ulid }}'}})"
|
|
class="text-t3 text-xs hover:text-red transition-colors">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-16 text-center">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<svg class="w-10 h-10 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<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" />
|
|
</svg>
|
|
<p class="text-t3 text-sm">No links yet.</p>
|
|
@if($ws)
|
|
<button @click="$dispatch('openModal', {component: 'modals.create-link', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
|
|
class="text-blue text-sm hover:underline">Create your first short link</button>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if($links->hasPages())
|
|
<div class="mt-4">{{ $links->links() }}</div>
|
|
@endif
|
|
</div>
|