Phase 2 directory quality
This commit is contained in:
Codex
@@ -1,18 +1,117 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header"><h2 class="text-xl font-semibold">Buyers</h2></x-slot>
|
||||
<div class="mx-auto max-w-7xl space-y-4 p-6">
|
||||
<form method="GET" action="{{ route('buyers.index') }}" class="flex gap-3 rounded border bg-white p-4">
|
||||
<input name="q" value="{{ request('q') }}" placeholder="Search buyers..." class="w-full rounded-md border-gray-300">
|
||||
<x-primary-button>Search</x-primary-button>
|
||||
<x-slot name="header">
|
||||
<x-page-header
|
||||
title="Buyers"
|
||||
description="Find companies hiring technical providers by category, region, payment terms, contact visibility, and community reputation."
|
||||
>
|
||||
@auth
|
||||
@role('buyer')
|
||||
<a href="{{ route('buyers.edit') }}" class="rounded-md bg-sky-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-700">Edit profile</a>
|
||||
@endrole
|
||||
@endauth
|
||||
</x-page-header>
|
||||
</x-slot>
|
||||
|
||||
<div class="mx-auto max-w-7xl space-y-5 px-4 py-8 sm:px-6 lg:px-8">
|
||||
<form method="GET" action="{{ route('buyers.index') }}" class="tse-panel p-5">
|
||||
<div class="grid gap-4 lg:grid-cols-4">
|
||||
<div class="lg:col-span-2">
|
||||
<label for="q" class="block text-sm font-medium text-slate-800 dark:text-slate-200">Search</label>
|
||||
<input id="q" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Company, headline, category, or region" class="mt-1 block w-full rounded-md border-slate-300 bg-white text-slate-950 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
|
||||
</div>
|
||||
<div>
|
||||
<label for="category" class="block text-sm font-medium text-slate-800 dark:text-slate-200">Service category</label>
|
||||
<input id="category" name="category" value="{{ $filters['category'] ?? '' }}" placeholder="Retail, IT, cabling" class="mt-1 block w-full rounded-md border-slate-300 bg-white text-slate-950 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
|
||||
</div>
|
||||
<div>
|
||||
<label for="region" class="block text-sm font-medium text-slate-800 dark:text-slate-200">Hiring region</label>
|
||||
<input id="region" name="region" value="{{ $filters['region'] ?? '' }}" placeholder="Oklahoma, national, Midwest" class="mt-1 block w-full rounded-md border-slate-300 bg-white text-slate-950 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
|
||||
</div>
|
||||
<div>
|
||||
<label for="payment" class="block text-sm font-medium text-slate-800 dark:text-slate-200">Payment terms</label>
|
||||
<input id="payment" name="payment" value="{{ $filters['payment'] ?? '' }}" placeholder="ACH, Net 15, direct" class="mt-1 block w-full rounded-md border-slate-300 bg-white text-slate-950 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
|
||||
</div>
|
||||
<div>
|
||||
<label for="sort" class="block text-sm font-medium text-slate-800 dark:text-slate-200">Sort</label>
|
||||
<select id="sort" name="sort" class="mt-1 block w-full rounded-md border-slate-300 bg-white text-slate-950 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
|
||||
<option value="">Newest</option>
|
||||
<option value="name" @selected(($filters['sort'] ?? '') === 'name')>Name</option>
|
||||
<option value="rating" @selected(($filters['sort'] ?? '') === 'rating')>Community rating</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="inline-flex items-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-sm text-slate-700 dark:border-slate-800 dark:text-slate-300">
|
||||
<input type="checkbox" name="public_contact" value="1" @checked(request()->boolean('public_contact')) class="rounded border-slate-300 text-sky-600 shadow-sm focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950">
|
||||
Public contact
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<x-primary-button>Search</x-primary-button>
|
||||
<a href="{{ route('buyers.index') }}" class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@foreach ($profiles as $profile)
|
||||
<a href="{{ route('buyers.show', $profile) }}" class="block rounded border bg-white p-4 shadow-sm">
|
||||
<h3 class="font-semibold">{{ $profile->company_name }}</h3>
|
||||
<p class="text-sm text-gray-600">{{ $profile->headline }}</p>
|
||||
<p class="mt-2 text-sm">{{ $profile->hiring_regions }}</p>
|
||||
<x-rating-summary :ratings="$profile->ratings" />
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
Showing {{ $profiles->firstItem() ?? 0 }}-{{ $profiles->lastItem() ?? 0 }} of {{ $profiles->total() }} buyer profiles.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach (['q' => 'Search', 'category' => 'Category', 'region' => 'Region', 'payment' => 'Payment'] as $key => $label)
|
||||
@if (! empty($filters[$key]))
|
||||
<x-badge tone="sky">{{ $label }}: {{ $filters[$key] }}</x-badge>
|
||||
@endif
|
||||
@endforeach
|
||||
@if (request()->boolean('public_contact'))
|
||||
<x-badge tone="emerald">Public contact</x-badge>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
@forelse ($profiles as $profile)
|
||||
@php
|
||||
$average = $profile->average_stars ? round($profile->average_stars, 1) : null;
|
||||
@endphp
|
||||
<a href="{{ route('buyers.show', $profile) }}" class="tse-panel block p-5 transition hover:border-sky-300 hover:shadow-md dark:hover:border-sky-700">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-slate-950 dark:text-white">{{ $profile->company_name }}</h3>
|
||||
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">{{ $profile->headline ?: 'No headline yet.' }}</p>
|
||||
</div>
|
||||
<div class="text-left sm:text-right">
|
||||
<p class="text-sm font-semibold text-slate-950 dark:text-white">{{ $average ? $average.'/5' : 'No rating' }}</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">{{ $profile->ratings_count }} rating{{ $profile->ratings_count === 1 ? '' : 's' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
@if ($profile->hiring_regions)
|
||||
<x-badge tone="slate">{{ $profile->hiring_regions }}</x-badge>
|
||||
@endif
|
||||
@if ($profile->public_contact)
|
||||
<x-badge tone="emerald">Public contact</x-badge>
|
||||
@endif
|
||||
@if ($profile->payment_terms)
|
||||
<x-badge tone="sky">{{ $profile->payment_terms }}</x-badge>
|
||||
@endif
|
||||
@if ($profile->vendor_onboarding)
|
||||
<x-badge tone="amber">Onboarding notes</x-badge>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if ($profile->service_categories)
|
||||
<p class="mt-4 text-sm leading-6 text-slate-600 dark:text-slate-400">{{ \Illuminate\Support\Str::limit($profile->service_categories, 220) }}</p>
|
||||
@endif
|
||||
</a>
|
||||
@empty
|
||||
<div class="tse-panel p-8 text-center lg:col-span-2">
|
||||
<h3 class="text-base font-semibold text-slate-950 dark:text-white">No buyers matched this search.</h3>
|
||||
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Try removing one filter or broadening the hiring region.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{ $profiles->links() }}
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user