147 lines
9.1 KiB
PHP
147 lines
9.1 KiB
PHP
<x-layouts::app :title="__('Dashboard')">
|
|
@php
|
|
$stats = [
|
|
['label' => __('Actions'), 'value' => number_format($usage['totals']['actions']), 'meta' => __('Last :days days', ['days' => $usage['days']]), 'color' => 'bg-emerald-500'],
|
|
['label' => __('Phrases'), 'value' => number_format($usage['totals']['inputs']), 'meta' => __('Submitted inputs'), 'color' => 'bg-sky-500'],
|
|
['label' => __('Results'), 'value' => number_format($usage['totals']['results']), 'meta' => __('Returned rows'), 'color' => 'bg-amber-500'],
|
|
['label' => __('Models'), 'value' => number_format($usage['totals']['models']), 'meta' => __('Used locally'), 'color' => 'bg-zinc-500'],
|
|
];
|
|
@endphp
|
|
|
|
<section class="flex w-full flex-col gap-6">
|
|
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
|
|
<div>
|
|
<flux:heading size="xl">{{ __('Usage overview') }}</flux:heading>
|
|
<flux:text>{{ __('Last :days days', ['days' => $usage['days']]) }}</flux:text>
|
|
</div>
|
|
|
|
<flux:button icon="sparkles" variant="primary" :href="route('embeddings.embed')" wire:navigate>
|
|
{{ __('New embedding') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
|
@foreach ($stats as $stat)
|
|
<section class="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<flux:text class="text-sm">{{ $stat['label'] }}</flux:text>
|
|
<div class="mt-2 text-3xl font-semibold tabular-nums text-zinc-950 dark:text-zinc-50">{{ $stat['value'] }}</div>
|
|
</div>
|
|
<span class="mt-1 size-2.5 rounded-full {{ $stat['color'] }}"></span>
|
|
</div>
|
|
<div class="mt-3 text-xs text-zinc-500 dark:text-zinc-400">{{ $stat['meta'] }}</div>
|
|
</section>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]">
|
|
<section class="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<flux:heading>{{ __('Activity') }}</flux:heading>
|
|
<flux:badge>{{ __('Actions') }}</flux:badge>
|
|
</div>
|
|
|
|
<div class="mt-5 flex h-56 items-end gap-2">
|
|
@foreach ($usage['daily'] as $day)
|
|
<div class="flex min-w-0 flex-1 flex-col items-center gap-2" title="{{ $day['label'] }}: {{ $day['actions'] }} {{ __('actions') }}, {{ $day['inputs'] }} {{ __('inputs') }}">
|
|
<div class="flex h-44 w-full items-end rounded-md bg-zinc-100 px-1 dark:bg-zinc-800">
|
|
<div
|
|
class="w-full rounded-t-md bg-emerald-500 transition-[height] dark:bg-emerald-400"
|
|
style="height: {{ $day['height'] }}%"
|
|
></div>
|
|
</div>
|
|
<div class="w-full truncate text-center text-[11px] text-zinc-500 dark:text-zinc-400">{{ $day['label'] }}</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:heading>{{ __('Tool mix') }}</flux:heading>
|
|
|
|
<div class="mt-5 flex flex-col gap-4">
|
|
@forelse ($usage['tools'] as $tool)
|
|
<div>
|
|
<div class="flex items-center justify-between gap-3 text-sm">
|
|
<span class="font-medium text-zinc-900 dark:text-zinc-100">{{ $tool['label'] }}</span>
|
|
<span class="tabular-nums text-zinc-500 dark:text-zinc-400">{{ number_format($tool['actions']) }}</span>
|
|
</div>
|
|
<div class="mt-2 h-2 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-2 rounded-full bg-sky-500 dark:bg-sky-400" style="width: {{ $tool['percentage'] }}%"></div>
|
|
</div>
|
|
<div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
|
|
{{ __(':inputs inputs, :results results', ['inputs' => number_format($tool['inputs']), 'results' => number_format($tool['results'])]) }}
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="rounded-lg border border-dashed border-zinc-200 p-4 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
|
|
{{ __('No usage yet.') }}
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="grid gap-4 xl:grid-cols-2">
|
|
<section class="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:heading>{{ __('Models') }}</flux:heading>
|
|
|
|
<div class="mt-5 flex flex-col gap-4">
|
|
@forelse ($usage['models'] as $model)
|
|
<div>
|
|
<div class="flex items-center justify-between gap-3 text-sm">
|
|
<span class="truncate font-medium text-zinc-900 dark:text-zinc-100" title="{{ $model['label'] }}">{{ $model['label'] }}</span>
|
|
<span class="tabular-nums text-zinc-500 dark:text-zinc-400">{{ number_format($model['actions']) }}</span>
|
|
</div>
|
|
<div class="mt-2 h-2 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-2 rounded-full bg-amber-500 dark:bg-amber-400" style="width: {{ $model['percentage'] }}%"></div>
|
|
</div>
|
|
<div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
|
|
{{ __(':inputs inputs', ['inputs' => number_format($model['inputs'])]) }}
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="rounded-lg border border-dashed border-zinc-200 p-4 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
|
|
{{ __('No model usage yet.') }}
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:heading>{{ __('Recent activity') }}</flux:heading>
|
|
|
|
<div class="mt-5 overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
|
|
<thead class="text-zinc-500 dark:text-zinc-400">
|
|
<tr>
|
|
<th class="py-2 text-start font-medium">{{ __('Tool') }}</th>
|
|
<th class="py-2 text-start font-medium">{{ __('Model') }}</th>
|
|
<th class="py-2 text-end font-medium">{{ __('Inputs') }}</th>
|
|
<th class="py-2 text-end font-medium">{{ __('Results') }}</th>
|
|
<th class="py-2 text-end font-medium">{{ __('When') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-700">
|
|
@forelse ($usage['recent'] as $event)
|
|
<tr>
|
|
<td class="py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $event['tool_label'] }}</td>
|
|
<td class="max-w-48 truncate py-3 text-zinc-600 dark:text-zinc-300" title="{{ $event['model'] }}">{{ $event['model'] }}</td>
|
|
<td class="py-3 text-end tabular-nums text-zinc-600 dark:text-zinc-300">{{ number_format($event['inputs']) }}</td>
|
|
<td class="py-3 text-end tabular-nums text-zinc-600 dark:text-zinc-300">{{ number_format($event['results']) }}</td>
|
|
<td class="py-3 text-end text-zinc-500 dark:text-zinc-400">{{ $event['created_at'] }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="py-6 text-center text-sm text-zinc-500 dark:text-zinc-400">{{ __('No recent activity.') }}</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</x-layouts::app>
|