cb495e18e3
- Fix model_pricing table references (model_id -> model, display_name -> model)
- Fix price columns (output_price_per_1k -> output_price_per_million)
- Add price conversion (per_million / 1000 = per_1k) in all API responses
- Add whereNotNull('model') filters to exclude invalid entries
- Add getModelDisplayName() helper method to all controllers
- Fix AccountController to use gateway_users budget fields directly
- Remove Budget model dependencies from AccountController
- Add custom Scramble server URL configuration for API docs
- Create ScrambleServiceProvider to set correct /api prefix
- Add migration to rename user_id to gateway_user_id in llm_requests
- Add custom ApiGuard for gateway_users authentication
- Update all API controllers: AccountController, ModelController, PricingController, ProviderController
All API endpoints now working correctly:
- GET /api/account
- GET /api/models
- GET /api/pricing
- GET /api/providers/{provider}
224 lines
13 KiB
PHP
224 lines
13 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
{{ __('Create New API Key') }}
|
|
</h2>
|
|
<a href="{{ route('keys.index') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
|
</svg>
|
|
Back to List
|
|
</a>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
|
|
<!-- Info Box -->
|
|
<div class="mb-6 bg-blue-50 border-l-4 border-blue-400 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-blue-800">Important Information</h3>
|
|
<div class="mt-2 text-sm text-blue-700">
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>The API key will be shown only once after creation</li>
|
|
<li>Make sure to copy and store it securely</li>
|
|
<li>Keys are associated with a specific user and inherit their budget limits</li>
|
|
<li>Expired keys can be deleted but not renewed</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Messages -->
|
|
@if ($errors->any())
|
|
<div class="mb-6 bg-red-50 border-l-4 border-red-400 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-red-800">There were errors with your submission</h3>
|
|
<div class="mt-2 text-sm text-red-700">
|
|
<ul class="list-disc list-inside space-y-1">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Create Form -->
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6 text-gray-900">
|
|
<form method="POST" action="{{ route('keys.store') }}" class="space-y-6">
|
|
@csrf
|
|
|
|
<!-- Key Name -->
|
|
<div>
|
|
<label for="key_name" class="block text-sm font-medium text-gray-700">
|
|
Key Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="mt-1">
|
|
<input type="text"
|
|
name="key_name"
|
|
id="key_name"
|
|
value="{{ old('key_name') }}"
|
|
required
|
|
placeholder="e.g., Production API Key, Development Key, Mobile App Key"
|
|
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md @error('key_name') border-red-300 @enderror">
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500">
|
|
A descriptive name to identify this key's purpose.
|
|
</p>
|
|
@error('key_name')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- User Selection -->
|
|
<div>
|
|
<label for="user_id" class="block text-sm font-medium text-gray-700">
|
|
Associated User <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="mt-1">
|
|
<select name="user_id"
|
|
id="user_id"
|
|
required
|
|
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md @error('user_id') border-red-300 @enderror">
|
|
<option value="">-- Select User --</option>
|
|
@foreach($gatewayUsers as $user)
|
|
<option value="{{ $user->user_id }}"
|
|
{{ old('user_id') == $user->user_id ? 'selected' : '' }}
|
|
data-spend="{{ $user->spend }}"
|
|
data-budget="{{ $user->budget ? $user->budget->max_budget : 'N/A' }}">
|
|
{{ $user->alias ?? $user->user_id }}
|
|
(Spend: ${{ number_format($user->spend, 2) }}
|
|
@if($user->budget)
|
|
/ Budget: ${{ number_format($user->budget->max_budget, 2) }})
|
|
@else
|
|
/ No Budget)
|
|
@endif
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500">
|
|
The user whose budget and limits will apply to this key.
|
|
</p>
|
|
@error('user_id')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Expiration Date (Optional) -->
|
|
<div>
|
|
<label for="expires_at" class="block text-sm font-medium text-gray-700">
|
|
Expiration Date (Optional)
|
|
</label>
|
|
<div class="mt-1">
|
|
<input type="datetime-local"
|
|
name="expires_at"
|
|
id="expires_at"
|
|
value="{{ old('expires_at') }}"
|
|
min="{{ now()->format('Y-m-d\TH:i') }}"
|
|
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md @error('expires_at') border-red-300 @enderror">
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500">
|
|
Leave empty for a key that never expires. The key will be automatically deactivated after this date.
|
|
</p>
|
|
@error('expires_at')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Metadata (Optional) -->
|
|
<div>
|
|
<label for="metadata" class="block text-sm font-medium text-gray-700">
|
|
Metadata (Optional)
|
|
</label>
|
|
<div class="mt-1">
|
|
<textarea name="metadata"
|
|
id="metadata"
|
|
rows="3"
|
|
placeholder='{"environment": "production", "app": "mobile"}'
|
|
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md @error('metadata') border-red-300 @enderror">{{ old('metadata') }}</textarea>
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500">
|
|
Optional JSON metadata for tracking additional information about this key.
|
|
</p>
|
|
@error('metadata')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Submit Buttons -->
|
|
<div class="flex items-center justify-end space-x-4 pt-4">
|
|
<a href="{{ route('keys.index') }}"
|
|
class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Cancel
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Create API Key
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Info Display -->
|
|
<div id="user-info" class="mt-6 bg-white overflow-hidden shadow-sm sm:rounded-lg hidden">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Selected User Information</h3>
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Current Spend</dt>
|
|
<dd id="user-spend" class="mt-1 text-sm text-gray-900">-</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Budget Limit</dt>
|
|
<dd id="user-budget" class="mt-1 text-sm text-gray-900">-</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Show user info when a user is selected
|
|
document.getElementById('user_id').addEventListener('change', function() {
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
const userInfo = document.getElementById('user-info');
|
|
|
|
if (this.value) {
|
|
const spend = selectedOption.dataset.spend;
|
|
const budget = selectedOption.dataset.budget;
|
|
|
|
document.getElementById('user-spend').textContent = '$' + parseFloat(spend).toFixed(2);
|
|
document.getElementById('user-budget').textContent = budget !== 'N/A' ? '$' + parseFloat(budget).toFixed(2) : 'No Limit';
|
|
|
|
userInfo.classList.remove('hidden');
|
|
} else {
|
|
userInfo.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|