Resource Pages

{{--
    Admin Overview — the resource index as an operator actually uses it.

    Generalised from the Noord-C admin's `orders/index.blade.php`: primary
    action, a freshness indicator for the upstream system the figures depend
    on, an operational alert zone above the fold, KPI tiles that double as
    filters into the list, saved views, search + filters with an
    applied-filter readout, a selectable table with row actions, an async
    bulk-job progress panel, and a list footer with a per-page control.

    Left out on purpose (domain logic the consumer supplies): VAT/tax
    handling, carrier/warehouse integrations, payment provider specifics, and
    any eligibility rule for which action a given row may take — `rows[].actions`
    arrives already filtered to what the viewer may do, exactly like
    <x-ui.row-actions> expects.
--}}
@props([
    'title' => 'Orders',
    'description' => 'Track, fulfil, and manage every order placed through your storefronts.',
    'freshness' => null,
    'alerts' => null,
    'kpis' => null,
    'views' => null,
    'searchValue' => '',
    'searchAction' => null,
    'statusFilterValue' => '',
    'statusFilterOptions' => null,
    'activeFilters' => null,
    'clearFiltersHref' => null,
    'createHref' => '#',
    'createLabel' => 'New order',
    'rows' => null,
    'statusOptions' => null,
    'bulkActions' => null,
    'bulkActionUrl' => null,
    'bulkJob' => null,
    'perPage' => 25,
    'perPageOptions' => null,
    'perPageAction' => null,
    'pagination' => null,
])

@php
    $freshness ??= [
        'source' => 'Payment provider',
        'syncedAt' => now()->subMinutes(2)->toIso8601String(),
        'stale' => false,
    ];

    $alerts ??= [
        [
            'tone' => 'warning',
            'title' => 'Payment sync delayed',
            'description' => 'Mollie has not confirmed a status for 6 orders in the last 15 minutes. Figures for those orders may be out of date.',
            'actionLabel' => 'View affected orders',
            'actionHref' => '#',
        ],
    ];

    $kpis ??= [
        ['label' => 'Awaiting payment', 'value' => '14', 'tone' => 'attention', 'href' => '?status=awaiting_payment', 'description' => 'Older than 1 hour'],
        ['label' => 'On hold', 'value' => '3', 'tone' => 'attention', 'href' => '?status=on_hold'],
        ['label' => 'Shipped today', 'value' => '42', 'tone' => 'positive', 'href' => '?status=shipped'],
        ['label' => 'Refund requests', 'value' => '5', 'tone' => 'negative', 'href' => '?status=refund_requested'],
    ];

    $views ??= [
        ['key' => 'all', 'label' => 'All orders', 'href' => '?view=all', 'count' => 128, 'active' => true, 'system' => true],
        ['key' => 'attention', 'label' => 'Needs attention', 'href' => '?view=attention', 'count' => 9, 'tone' => 'attention', 'system' => true],
        ['key' => 'fulfilment', 'label' => 'Awaiting fulfilment', 'href' => '?view=fulfilment', 'count' => 23, 'system' => true],
        ['key' => 'mine', 'label' => 'Assigned to me', 'href' => '?view=mine', 'count' => 4, 'system' => true],
    ];

    $statusOptions ??= [
        ['value' => 'awaiting_payment', 'label' => 'Awaiting payment', 'tone' => 'soft-warning'],
        ['value' => 'processing', 'label' => 'Processing', 'tone' => 'soft-info'],
        ['value' => 'shipped', 'label' => 'Shipped', 'tone' => 'soft-info'],
        ['value' => 'on_hold', 'label' => 'On hold', 'tone' => 'soft-destructive'],
        ['value' => 'refund_requested', 'label' => 'Refund requested', 'tone' => 'soft-destructive'],
        ['value' => 'delivered', 'label' => 'Delivered', 'tone' => 'soft-success'],
    ];

    $statusFilterOptions ??= ['' => 'All statuses'] + collect($statusOptions)->mapWithKeys(fn ($o) => [$o['value'] => $o['label']])->all();

    $rows ??= [
        [
            'id' => 'ord_1042', 'number' => '#1042', 'customer' => 'Els Bakker', 'channel' => 'Webshop',
            'total' => '€128.50', 'status' => 'awaiting_payment', 'updatedAt' => now()->subMinutes(8)->toIso8601String(), 'href' => '#',
            'actions' => [
                ['key' => 'view', 'label' => 'View', 'kind' => 'link', 'url' => '#', 'quick' => true],
                ['key' => 'remind', 'label' => 'Send payment reminder', 'kind' => 'submit', 'url' => '#'],
                ['key' => 'cancel', 'label' => 'Cancel order', 'kind' => 'dialog'],
            ],
        ],
        [
            'id' => 'ord_1041', 'number' => '#1041', 'customer' => 'Noah de Groot', 'channel' => 'Marketplace',
            'total' => '€64.00', 'status' => 'processing', 'updatedAt' => now()->subDay()->toIso8601String(), 'href' => '#',
            'actions' => [
                ['key' => 'view', 'label' => 'View', 'kind' => 'link', 'url' => '#', 'quick' => true],
                ['key' => 'resend', 'label' => 'Resend confirmation', 'kind' => 'submit', 'url' => '#'],
            ],
        ],
        [
            'id' => 'ord_1040', 'number' => '#1040', 'customer' => 'Fenna van Dijk', 'channel' => 'Webshop',
            'total' => '€212.10', 'status' => 'shipped', 'updatedAt' => now()->subDays(2)->toIso8601String(), 'href' => '#',
            'actions' => [
                ['key' => 'view', 'label' => 'View', 'kind' => 'link', 'url' => '#', 'quick' => true],
                ['key' => 'track', 'label' => 'Track shipment', 'kind' => 'link', 'url' => '#', 'newTab' => true],
            ],
        ],
        [
            'id' => 'ord_1038', 'number' => '#1038', 'customer' => 'Sven Jansen', 'channel' => 'Phone order',
            'total' => '€39.95', 'status' => 'on_hold', 'updatedAt' => now()->subDays(3)->toIso8601String(), 'href' => '#',
            'actions' => [
                ['key' => 'review', 'label' => 'Review hold', 'kind' => 'link', 'url' => '#', 'quick' => true],
                ['key' => 'view', 'label' => 'View', 'kind' => 'link', 'url' => '#'],
            ],
        ],
        [
            'id' => 'ord_1035', 'number' => '#1035', 'customer' => 'Mila Peters', 'channel' => 'Webshop',
            'total' => '€87.20', 'status' => 'refund_requested', 'updatedAt' => now()->subDays(5)->toIso8601String(), 'href' => '#',
            'actions' => [
                ['key' => 'review-refund', 'label' => 'Review refund', 'kind' => 'link', 'url' => '#', 'quick' => true],
                ['key' => 'view', 'label' => 'View', 'kind' => 'link', 'url' => '#'],
            ],
        ],
        [
            'id' => 'ord_1031', 'number' => '#1031', 'customer' => 'Daan Willems', 'channel' => 'Marketplace',
            'total' => '€154.00', 'status' => 'delivered', 'updatedAt' => now()->subDays(8)->toIso8601String(), 'href' => '#',
            'actions' => [
                ['key' => 'view', 'label' => 'View', 'kind' => 'link', 'url' => '#', 'quick' => true],
                ['key' => 'invoice', 'label' => 'Download invoice', 'kind' => 'link', 'url' => '#'],
            ],
        ],
    ];

    $activeFilters ??= [
        ['key' => 'status', 'label' => 'Status', 'value' => 'Awaiting payment', 'href' => '?status='],
        ['key' => 'channel', 'label' => 'Channel', 'value' => 'Webshop', 'href' => '?channel='],
    ];
    $clearFiltersHref ??= '?';

    $bulkActions ??= [
        ['key' => 'archive', 'label' => 'Archive'],
        ['key' => 'export', 'label' => 'Export'],
        ['key' => 'cancel', 'label' => 'Cancel selected', 'destructive' => true, 'confirmation' => 'destructive', 'confirmationLabel' => 'Cancel the selected orders? This cannot be undone.'],
    ];

    $bulkJob ??= [
        'action' => 'Archiving 6 orders',
        'state' => 'done',
        'done' => 5,
        'total' => 6,
        'failed' => [
            ['id' => '#1038', 'reason' => 'On hold — cannot archive while a hold is open.'],
        ],
        'retryUrl' => '#',
        'reportUrl' => '#',
    ];

    $perPageOptions ??= [10, 25, 50, 100];

    $columns = [
        ['key' => 'order', 'label' => __('Order'), 'sortable' => false],
        ['key' => 'channel', 'label' => __('Channel'), 'sortable' => false, 'tier' => 2],
        ['key' => 'total', 'label' => __('Total'), 'align' => 'end', 'sortable' => false],
        ['key' => 'status', 'label' => __('Status'), 'sortable' => false],
        ['key' => 'updated', 'label' => __('Updated'), 'sortable' => false, 'tier' => 2],
        ['key' => 'actions', 'label' => __('Actions'), 'align' => 'end', 'sortable' => false],
    ];
@endphp

<main
    id="main-content"
    data-slot="admin-overview-page"
    data-surface="admin"
    data-visual-contracts="VC-005"
    {{ $attributes->merge(['class' => 'min-h-screen bg-background text-foreground']) }}
>
    <header class="border-b border-border bg-background px-4 py-4 sm:px-6" data-slot="admin-overview-header">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                    <h1 class="text-xl font-semibold tracking-tight">{{ __($title) }}</h1>
                    <x-ui.badge variant="secondary">{{ trans_choice(':count order|:count orders', count($rows), ['count' => count($rows)]) }}</x-ui.badge>
                </div>
                <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($description) }}</p>
            </div>

            <div class="flex shrink-0 flex-wrap items-center gap-2">
                @if ($freshness)
                    <span
                        title="{{ __(':source synced :time', ['source' => $freshness['source'] ?? __($title), 'time' => \Illuminate\Support\Carbon::parse($freshness['syncedAt'])->diffForHumans()]) }}"
                        @class([
                            'inline-flex h-8 items-center gap-2 rounded-md border px-2 text-xs',
                            'border-warning-line bg-warning-soft text-warning-text' => $freshness['stale'] ?? false,
                            'border-border text-muted-foreground' => ! ($freshness['stale'] ?? false),
                        ])
                    >
                        <span
                            @class(['size-2 rounded-full', 'bg-warning' => $freshness['stale'] ?? false, 'bg-success' => ! ($freshness['stale'] ?? false)])
                            aria-hidden="true"
                        ></span>
                        <x-ui.relative-time :datetime="$freshness['syncedAt']" />
                    </span>
                @endif

                <x-ui.button :href="$createHref">
                    <x-slot:icon>
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M12 5v14M5 12h14" />
                        </svg>
                    </x-slot:icon>
                    {{ __($createLabel) }}
                </x-ui.button>
            </div>
        </div>
    </header>

    <div class="mx-auto max-w-screen-2xl px-4 py-6 sm:px-6">
        @if ($alerts !== [])
            <div class="mb-6 space-y-2" data-slot="admin-overview-alerts">
                @foreach ($alerts as $alert)
                    <x-ui.alert :variant="$alert['tone'] ?? 'warning'">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="min-w-0">
                                <div class="text-sm font-semibold">{{ __($alert['title'] ?? '') }}</div>
                                @if (! empty($alert['description']))
                                    <p class="mt-2 max-w-2xl text-xs leading-5 text-pretty opacity-90">{{ __($alert['description']) }}</p>
                                @endif
                            </div>
                            @if (! empty($alert['actionLabel']))
                                <x-ui.button variant="outline" size="sm" :href="$alert['actionHref'] ?? '#'" class="shrink-0">
                                    {{ __($alert['actionLabel']) }}
                                </x-ui.button>
                            @endif
                        </div>
                    </x-ui.alert>
                @endforeach
            </div>
        @endif

        <div class="mb-6 grid grid-cols-2 gap-4 xl:grid-cols-4" data-slot="admin-overview-kpis">
            @foreach ($kpis as $kpi)
                <x-ui.stat
                    :label="__($kpi['label'] ?? '')"
                    :value="$kpi['value'] ?? null"
                    :tone="$kpi['tone'] ?? null"
                    :href="$kpi['href'] ?? null"
                    :description="isset($kpi['description']) ? __($kpi['description']) : null"
                />
            @endforeach
        </div>

        <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
            <x-ui.saved-views :views="$views" mode="tabs" />

            <div class="flex min-w-0 flex-wrap items-center gap-2">
                {{-- A live, debounced lookup across several identifiers — dispatches
                     `record-search:query` for the host to re-render results; the
                     status filter below is the server-side GET refinement. --}}
                <x-ui.record-search
                    :value="$searchValue"
                    placeholder="{{ __('Search by order number, customer, or reference…') }}"
                    hint="{{ __('Matches the order number, customer name, or reference.') }}"
                    class="max-w-xs"
                />
                <x-ui.form method="GET" :action="$searchAction" class="flex items-center gap-2 !space-y-0">
                    <label for="admin-overview-status" class="sr-only">{{ __('Status') }}</label>
                    <x-ui.select name="status" id="admin-overview-status" aria-label="{{ __('Status') }}">
                        @foreach ($statusFilterOptions as $value => $label)
                            <option value="{{ $value }}" @selected((string) $statusFilterValue === (string) $value)>{{ __($label) }}</option>
                        @endforeach
                    </x-ui.select>
                    <x-ui.button type="submit" variant="secondary" size="sm">{{ __('Apply') }}</x-ui.button>
                </x-ui.form>
            </div>
        </div>

        @if (! empty($activeFilters))
            <div class="mb-4">
                <x-ui.active-filters :filters="$activeFilters" :clear-href="$clearFiltersHref" />
            </div>
        @endif

        @if ($bulkJob)
            <div class="mb-4" data-slot="admin-overview-bulk-job">
                <x-ui.bulk-job
                    :action="$bulkJob['action'] ?? ''"
                    :state="$bulkJob['state'] ?? 'running'"
                    :done="$bulkJob['done'] ?? 0"
                    :total="$bulkJob['total'] ?? 0"
                    :failed="$bulkJob['failed'] ?? []"
                    :retry-url="$bulkJob['retryUrl'] ?? null"
                    :download-url="$bulkJob['downloadUrl'] ?? null"
                    :report-url="$bulkJob['reportUrl'] ?? null"
                />
            </div>
        @endif

        <x-ui.admin-table
            :columns="$columns"
            :selectable="true"
            :pinned="true"
            :summary="trans_choice('Showing :count order|Showing :count orders', count($rows), ['count' => count($rows)])"
            :bulk-actions="$bulkActions"
            :bulk-action-url="$bulkActionUrl"
        >
            @forelse ($rows as $row)
                <x-ui.admin-table.row :key="$row['id']" select-label="Select order :record">
                    <x-ui.admin-table.cell column="order" :pinned="true" class="py-4">
                        <a href="{{ $row['href'] ?? '#' }}" class="block min-w-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                            <span class="block truncate font-medium">{{ $row['number'] ?? $row['id'] }}</span>
                            <span class="block truncate text-xs text-muted-foreground">{{ $row['customer'] ?? '' }}</span>
                        </a>
                    </x-ui.admin-table.cell>
                    <x-ui.admin-table.cell column="channel" :tier="2" class="py-4 text-muted-foreground">
                        {{ $row['channel'] ?? '' }}
                    </x-ui.admin-table.cell>
                    <x-ui.admin-table.cell column="total" align="end" class="py-4 font-medium tabular-nums">
                        {{ $row['total'] ?? '' }}
                    </x-ui.admin-table.cell>
                    <x-ui.admin-table.cell column="status" class="py-4">
                        <x-ui.status-select :value="$row['status'] ?? null" :options="$statusOptions" />
                    </x-ui.admin-table.cell>
                    <x-ui.admin-table.cell column="updated" :tier="2" class="py-4 text-muted-foreground">
                        <x-ui.relative-time :datetime="$row['updatedAt'] ?? null" />
                    </x-ui.admin-table.cell>
                    <x-ui.admin-table.cell column="actions" align="end" class="py-4">
                        <x-ui.row-actions :actions="$row['actions'] ?? []" :row-label="__('order :number', ['number' => $row['number'] ?? $row['id']])" />
                    </x-ui.admin-table.cell>
                </x-ui.admin-table.row>
            @empty
                <x-ui.admin-table.empty>
                    <x-ui.empty variant="plain" size="sm">
                        <x-ui.empty.header>
                            <x-ui.empty.title as="h2">{{ __('No orders match') }}</x-ui.empty.title>
                            <x-ui.empty.description>{{ __('Change the search, status, or saved view, or clear every filter.') }}</x-ui.empty.description>
                        </x-ui.empty.header>
                        <x-ui.empty.content>
                            <x-ui.button variant="outline" :href="$clearFiltersHref ?? '#'">{{ __('Reset view') }}</x-ui.button>
                        </x-ui.empty.content>
                    </x-ui.empty>
                </x-ui.admin-table.empty>
            @endforelse

            <x-slot:footer>
                <label for="admin-overview-per-page" class="sr-only">{{ __('Rows per page') }}</label>
                <x-ui.form method="GET" :action="$perPageAction" class="!space-y-0">
                    <x-ui.select name="per_page" id="admin-overview-per-page" aria-label="{{ __('Rows per page') }}" class="h-8 text-xs" onchange="this.form.requestSubmit()">
                        @foreach ($perPageOptions as $option)
                            <option value="{{ $option }}" @selected((int) $perPage === (int) $option)>{{ __(':count / page', ['count' => $option]) }}</option>
                        @endforeach
                    </x-ui.select>
                </x-ui.form>

                @if ($pagination && method_exists($pagination, 'links'))
                    {{ $pagination->links() }}
                @else
                    <x-ui.button variant="ghost" size="sm" disabled>{{ __('Previous') }}</x-ui.button>
                    <span aria-current="page" class="text-foreground">{{ __('Page 1') }}</span>
                    <x-ui.button variant="ghost" size="sm" disabled>{{ __('Next') }}</x-ui.button>
                @endif
            </x-slot:footer>

            <x-slot:bulk>
                <x-ui.alert-dialog>
                    <x-ui.alert-dialog.trigger class="min-h-11 rounded-md border border-border px-4 text-sm font-medium hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:min-h-9">
                        {{ __('Delete') }}
                    </x-ui.alert-dialog.trigger>
                    <x-ui.alert-dialog.content>
                        <x-ui.alert-dialog.header>
                            <x-ui.alert-dialog.title>{{ __('Delete selected orders?') }}</x-ui.alert-dialog.title>
                            <x-ui.alert-dialog.description>{{ __('This action cannot be undone. Only the selected orders will be deleted.') }}</x-ui.alert-dialog.description>
                        </x-ui.alert-dialog.header>
                        <x-ui.alert-dialog.footer>
                            <x-ui.alert-dialog.cancel>{{ __('Cancel') }}</x-ui.alert-dialog.cancel>
                            <x-ui.form method="DELETE" :action="$bulkActionUrl ?? '#'" class="!space-y-0">
                                <template x-for="key in Array.from(selected)" :key="key">
                                    <input type="hidden" name="selected[]" :value="key" />
                                </template>
                                <x-ui.button type="submit" variant="destructive">{{ __('Delete selected') }}</x-ui.button>
                            </x-ui.form>
                        </x-ui.alert-dialog.footer>
                    </x-ui.alert-dialog.content>
                </x-ui.alert-dialog>
            </x-slot:bulk>
        </x-ui.admin-table>
    </div>
</main>