isaaccladandCursor
93bfc3e2d2
Deploy Ladill Woo Manager / deploy (push) Successful in 1m7s
Desktop store switcher now sits after search; mobile shows route-based page titles, bottom nav, and store switching inside the profile sheet. Co-authored-by: Cursor <cursoragent@cursor.com>
88 lines
5.2 KiB
PHP
88 lines
5.2 KiB
PHP
<x-user-layout>
|
|
<x-slot name="title">Products</x-slot>
|
|
<div class="space-y-6">
|
|
<div class="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h1 class="hidden text-xl font-semibold text-slate-900 lg:block">Products</h1>
|
|
<p class="mt-1 text-sm text-slate-500">
|
|
@if($currentStore)
|
|
Products for {{ $currentStore->site_name ?? $currentStore->site_url }}.
|
|
@else
|
|
Connect a store to manage products.
|
|
@endif
|
|
</p>
|
|
@if($productLimit)
|
|
<p class="mt-1 text-xs text-slate-500">{{ $productCount }}/{{ $productLimit }} products on free plan</p>
|
|
@endif
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
@if($currentStore)
|
|
<form method="post" action="{{ route('woo.products.sync') }}">
|
|
@csrf
|
|
<button type="submit" class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Sync from store</button>
|
|
</form>
|
|
<a href="{{ route('woo.products.create') }}" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">New product</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<form method="get" class="flex flex-wrap items-end gap-3">
|
|
<div class="min-w-[12rem] flex-1 max-w-md">
|
|
<input type="search" name="q" value="{{ $search }}" placeholder="Search name or SKU…"
|
|
class="w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
</div>
|
|
<select name="status" class="rounded-xl border-slate-200 text-sm" onchange="this.form.submit()">
|
|
<option value="">All statuses</option>
|
|
@foreach(\App\Models\WooProduct::STATUSES as $val => $label)
|
|
<option value="{{ $val }}" @selected($statusFilter === $val)>{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
</form>
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
|
@if($products->isEmpty())
|
|
<p class="px-6 py-10 text-sm text-slate-500">No products yet. Sync from your connected store or create one here.</p>
|
|
@else
|
|
<div class="overflow-x-auto">
|
|
<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-6 py-3">Image</th>
|
|
<th class="px-6 py-3">Product</th>
|
|
<th class="px-6 py-3">SKU</th>
|
|
<th class="px-6 py-3">Price</th>
|
|
<th class="px-6 py-3">Stock</th>
|
|
<th class="px-6 py-3">Status</th>
|
|
<th class="px-6 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
@foreach($products as $product)
|
|
<tr>
|
|
<td class="px-6 py-4">
|
|
@php $thumb = collect($product->images ?? [])->first(); @endphp
|
|
@if(!empty($thumb['src']))
|
|
<img src="{{ $thumb['src'] }}" alt="" class="h-10 w-10 rounded-lg object-cover bg-slate-100">
|
|
@else
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100 text-slate-400 text-xs">—</div>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 font-medium text-slate-900">{{ $product->name }}</td>
|
|
<td class="px-6 py-4 text-slate-600">{{ $product->sku ?: '—' }}</td>
|
|
<td class="px-6 py-4 text-slate-900">{{ $product->priceFormatted() }}</td>
|
|
<td class="px-6 py-4 text-slate-600">{{ $product->manage_stock ? ($product->stock_quantity ?? 0) : '—' }}</td>
|
|
<td class="px-6 py-4 text-slate-600">{{ \App\Models\WooProduct::STATUSES[$product->status] ?? $product->status }}</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<a href="{{ route('woo.products.edit', $product) }}" class="font-medium text-indigo-600 hover:text-indigo-800">Edit</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="border-t border-slate-100 px-6 py-4">{{ $products->links() }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</x-user-layout>
|