Samir Boulahtit
e1c0c117c2
- Change icon from 'envelope' to 'mail' (envelope not in icons.js)
- Add default query param to GET /admin/settings/{key} endpoint
- Return AdminSettingDefaultResponse instead of 404 when default provided
- Update loadShippingSettings() to use default param for carrier settings
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
772 lines
48 KiB
HTML
772 lines
48 KiB
HTML
{# app/templates/admin/settings.html #}
|
|
{% extends "admin/base.html" %}
|
|
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
|
|
{% from 'shared/macros/headers.html' import page_header_refresh %}
|
|
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
|
|
{% from 'shared/macros/inputs.html' import number_stepper %}
|
|
|
|
{% block title %}Platform Settings{% endblock %}
|
|
|
|
{% block alpine_data %}adminSettings(){% endblock %}
|
|
|
|
{% block content %}
|
|
{{ page_header_refresh('Platform Settings') }}
|
|
|
|
{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
|
|
|
|
{{ error_state('Error', show_condition='error') }}
|
|
|
|
<!-- Settings Categories Tabs -->
|
|
{% call tabs_nav() %}
|
|
{{ tab_button('display', 'Display', icon='view-grid') }}
|
|
{{ tab_button('logging', 'Logging', icon='document-text') }}
|
|
{{ tab_button('email', 'Email', icon='mail') }}
|
|
{{ tab_button('shipping', 'Shipping', icon='truck') }}
|
|
{{ tab_button('system', 'System', icon='cog') }}
|
|
{{ tab_button('security', 'Security', icon='shield-check') }}
|
|
{{ tab_button('notifications', 'Notifications', icon='bell') }}
|
|
{% endcall %}
|
|
|
|
<!-- Display Settings Tab -->
|
|
<div x-show="activeTab === 'display'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
|
|
Display Configuration
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure how data is displayed across the admin interface.
|
|
</p>
|
|
|
|
<!-- Rows Per Page Setting -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Default Rows Per Page
|
|
</label>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
|
|
Set the default number of rows shown in tables across the admin interface.
|
|
</p>
|
|
<div class="flex items-center gap-3">
|
|
<template x-for="option in [10, 20, 50, 100]" :key="option">
|
|
<button
|
|
@click="displaySettings.rows_per_page = option"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors"
|
|
:class="displaySettings.rows_per_page === option
|
|
? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
|
|
: 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
|
|
x-text="option"
|
|
></button>
|
|
</template>
|
|
</div>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
This setting applies to: Orders, Products, Customers, Inventory, and other tables.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Info Box -->
|
|
<div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3 flex-shrink-0')"></span>
|
|
<div class="text-sm text-blue-800 dark:text-blue-200">
|
|
<p class="font-medium mb-1">When does this take effect?</p>
|
|
<p>Changes to the rows per page setting will apply immediately to all admin tables when refreshed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="saveDisplaySettings()"
|
|
:disabled="saving"
|
|
class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!saving">Save Display Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logging Settings Tab -->
|
|
<div x-show="activeTab === 'logging'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
|
|
Logging Configuration
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure application logging behavior, file rotation, and retention policies.
|
|
</p>
|
|
|
|
<!-- Log Level -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Log Level
|
|
</label>
|
|
<select
|
|
x-model="logSettings.log_level"
|
|
class="block w-full md:w-1/2 px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
>
|
|
<option value="DEBUG">DEBUG - Detailed information for diagnosing problems</option>
|
|
<option value="INFO">INFO - General informational messages</option>
|
|
<option value="WARNING">WARNING - Warning messages</option>
|
|
<option value="ERROR">ERROR - Error messages</option>
|
|
<option value="CRITICAL">CRITICAL - Critical errors only</option>
|
|
</select>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Changes take effect immediately without restart.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- File Rotation Settings -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Max File Size (MB)
|
|
</label>
|
|
{{ number_stepper(model='logSettings.log_file_max_size_mb', min=1, max=1000, step=10, label='Max File Size') }}
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Log file will rotate when it reaches this size.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Backup File Count
|
|
</label>
|
|
{{ number_stepper(model='logSettings.log_file_backup_count', min=0, max=50, step=1, label='Backup File Count') }}
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Number of rotated backup files to keep.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Retention -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Database Log Retention (Days)
|
|
</label>
|
|
{{ number_stepper(model='logSettings.db_log_retention_days', min=1, max=365, step=7, label='Retention Days') }}
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Logs older than this will be automatically deleted from database.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Logging Toggles -->
|
|
<div class="space-y-4 mb-6">
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-200">File Logging</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Write logs to rotating files on disk</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="logSettings.file_logging_enabled" class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-200">Database Logging</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Store WARNING/ERROR/CRITICAL logs in database for searching</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="logSettings.db_logging_enabled" class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
<span x-html="$icon('information-circle', 'inline w-4 h-4 mr-1')"></span>
|
|
File rotation settings require application restart to take effect.
|
|
</p>
|
|
<button
|
|
@click="saveLogSettings()"
|
|
:disabled="saving"
|
|
class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!saving">Save Logging Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="mt-8">
|
|
<div class="mb-8 p-6 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<h4 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Quick Actions
|
|
</h4>
|
|
<div class="flex flex-wrap gap-3">
|
|
<a
|
|
href="/admin/logs"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
|
|
>
|
|
<span x-html="$icon('document-text', 'w-4 h-4 mr-2')"></span>
|
|
View Logs
|
|
</a>
|
|
<button
|
|
@click="cleanupOldLogs()"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:shadow-outline-gray"
|
|
>
|
|
<span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
|
|
Cleanup Old Logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Settings Tab -->
|
|
<div x-show="activeTab === 'email'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Platform Email Configuration
|
|
</h3>
|
|
<!-- Edit/Cancel buttons -->
|
|
<div class="flex items-center gap-2">
|
|
<template x-if="!emailEditMode">
|
|
<button
|
|
@click="enableEmailEditing()"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
|
|
>
|
|
<span x-html="$icon('pencil', 'w-4 h-4 inline mr-1')"></span>
|
|
Edit Settings
|
|
</button>
|
|
</template>
|
|
<template x-if="emailEditMode">
|
|
<button
|
|
@click="cancelEmailEditing()"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure the platform's email settings for system emails (billing, subscriptions, admin notifications).
|
|
Vendor emails use each vendor's own email settings.
|
|
</p>
|
|
|
|
<!-- Current Status -->
|
|
<div class="mb-6 p-4 rounded-lg" :class="emailSettings.is_configured ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800'">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<template x-if="emailSettings.is_configured">
|
|
<div class="flex items-center">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400 mr-2')"></span>
|
|
<span class="text-green-800 dark:text-green-300 font-medium">Email configured</span>
|
|
</div>
|
|
</template>
|
|
<template x-if="!emailSettings.is_configured">
|
|
<div class="flex items-center">
|
|
<span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-2')"></span>
|
|
<span class="text-yellow-800 dark:text-yellow-300 font-medium">Email not fully configured</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<template x-if="emailSettings.has_db_overrides">
|
|
<span class="px-2 py-1 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">
|
|
Database overrides active
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== READ-ONLY VIEW ===== -->
|
|
<template x-if="!emailEditMode">
|
|
<div>
|
|
<!-- Provider Selection (Read-only) -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Email Provider
|
|
</label>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
<template x-for="provider in ['smtp', 'sendgrid', 'mailgun', 'ses', 'debug']" :key="provider">
|
|
<div
|
|
class="p-3 border-2 rounded-lg text-center"
|
|
:class="emailSettings.provider === provider
|
|
? 'border-purple-500 bg-purple-50 dark:bg-purple-900/30'
|
|
: 'border-gray-200 dark:border-gray-600'"
|
|
>
|
|
<div class="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize" x-text="provider === 'ses' ? 'Amazon SES' : provider"></div>
|
|
<template x-if="emailSettings.provider === provider">
|
|
<span x-html="$icon('check-circle', 'w-4 h-4 text-purple-600 dark:text-purple-400 mx-auto mt-1')"></span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Settings (Read-only) -->
|
|
<div class="space-y-4">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 border-b dark:border-gray-600 pb-2">
|
|
Current Configuration
|
|
</h4>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Email</label>
|
|
<div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.from_email || 'Not configured'"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Name</label>
|
|
<div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.from_name || 'Not configured'"></div>
|
|
</div>
|
|
<template x-if="emailSettings.provider === 'smtp'">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Host</label>
|
|
<div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.smtp_host || 'Not configured'"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="emailSettings.provider === 'smtp'">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Port</label>
|
|
<div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.smtp_port || 'Not configured'"></div>
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Debug Mode</label>
|
|
<div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm" :class="emailSettings.debug ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-700 dark:text-gray-300'" x-text="emailSettings.debug ? 'Enabled (emails logged, not sent)' : 'Disabled'"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Sending</label>
|
|
<div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm" :class="emailSettings.enabled ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" x-text="emailSettings.enabled ? 'Enabled' : 'Disabled'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Box -->
|
|
<div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3 flex-shrink-0')"></span>
|
|
<div class="text-sm text-blue-800 dark:text-blue-200">
|
|
<p class="font-medium mb-1">Configuration Priority</p>
|
|
<p>Settings can be configured via environment variables (.env) or overridden in the database using the Edit button above. Database settings take priority over .env values.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reset to .env button (only show if DB overrides exist) -->
|
|
<template x-if="emailSettings.has_db_overrides">
|
|
<div class="mt-4">
|
|
<button
|
|
@click="resetEmailSettings()"
|
|
:disabled="saving"
|
|
class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-700 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
|
|
>
|
|
<span x-html="$icon('refresh', 'w-4 h-4 inline mr-1')"></span>
|
|
Reset to .env Defaults
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ===== EDIT MODE ===== -->
|
|
<template x-if="emailEditMode">
|
|
<div>
|
|
<!-- Provider Selection (Editable) -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Email Provider
|
|
</label>
|
|
<select
|
|
x-model="emailForm.provider"
|
|
class="block w-full md:w-1/2 px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
>
|
|
<option value="smtp">SMTP</option>
|
|
<option value="sendgrid">SendGrid</option>
|
|
<option value="mailgun">Mailgun</option>
|
|
<option value="ses">Amazon SES</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Common Settings -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Email *</label>
|
|
<input
|
|
type="email"
|
|
x-model="emailForm.from_email"
|
|
placeholder="noreply@yourplatform.com"
|
|
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Name *</label>
|
|
<input
|
|
type="text"
|
|
x-model="emailForm.from_name"
|
|
placeholder="Your Platform"
|
|
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reply-To Email</label>
|
|
<input
|
|
type="email"
|
|
x-model="emailForm.reply_to"
|
|
placeholder="support@yourplatform.com"
|
|
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMTP Settings -->
|
|
<template x-if="emailForm.provider === 'smtp'">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">SMTP Settings</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Host</label>
|
|
<input type="text" x-model="emailForm.smtp_host" placeholder="smtp.example.com" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Port</label>
|
|
<input type="number" x-model="emailForm.smtp_port" placeholder="587" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Username</label>
|
|
<input type="text" x-model="emailForm.smtp_user" placeholder="username" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Password</label>
|
|
<input type="password" x-model="emailForm.smtp_password" placeholder="Enter new password" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" x-model="emailForm.smtp_use_tls" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use TLS</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" x-model="emailForm.smtp_use_ssl" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use SSL</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- SendGrid Settings -->
|
|
<template x-if="emailForm.provider === 'sendgrid'">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">SendGrid Settings</h4>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
|
|
<input type="password" x-model="emailForm.sendgrid_api_key" placeholder="Enter API key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Mailgun Settings -->
|
|
<template x-if="emailForm.provider === 'mailgun'">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Mailgun Settings</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
|
|
<input type="password" x-model="emailForm.mailgun_api_key" placeholder="Enter API key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Domain</label>
|
|
<input type="text" x-model="emailForm.mailgun_domain" placeholder="mg.yourdomain.com" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- SES Settings -->
|
|
<template x-if="emailForm.provider === 'ses'">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Amazon SES Settings</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Access Key ID</label>
|
|
<input type="password" x-model="emailForm.aws_access_key_id" placeholder="Enter access key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Secret Access Key</label>
|
|
<input type="password" x-model="emailForm.aws_secret_access_key" placeholder="Enter secret key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Region</label>
|
|
<select x-model="emailForm.aws_region" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
|
|
<option value="us-east-1">US East (N. Virginia)</option>
|
|
<option value="us-west-2">US West (Oregon)</option>
|
|
<option value="eu-west-1">EU (Ireland)</option>
|
|
<option value="eu-central-1">EU (Frankfurt)</option>
|
|
<option value="ap-southeast-1">Asia Pacific (Singapore)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Behavior Settings -->
|
|
<div class="flex items-center gap-6 mb-6">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" x-model="emailForm.enabled" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Enable email sending</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" x-model="emailForm.debug" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Debug mode (log only, don't send)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="saveEmailSettings()"
|
|
:disabled="saving"
|
|
class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!saving">Save Email Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Test Email -->
|
|
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Send Test Email</h4>
|
|
<div class="flex items-center gap-3">
|
|
<input
|
|
type="email"
|
|
x-model="testEmailAddress"
|
|
placeholder="test@example.com"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
<button
|
|
@click="sendTestEmail()"
|
|
:disabled="!testEmailAddress || sendingTestEmail"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!sendingTestEmail">Send Test</span>
|
|
<span x-show="sendingTestEmail">Sending...</span>
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Send a test email to verify the platform email configuration is working.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shipping Settings Tab -->
|
|
<div x-show="activeTab === 'shipping'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
|
|
Shipping & Carrier Configuration
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure shipping carrier label URL prefixes. These are used to generate shipping label download links.
|
|
</p>
|
|
|
|
<!-- Carrier Label URL Settings -->
|
|
<div class="space-y-6">
|
|
<!-- Greco (Letzshop default) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<span class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">Greco</span>
|
|
Label URL Prefix
|
|
</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="shippingSettings.carrier_greco_label_url"
|
|
placeholder="https://dispatchweb.fr/Tracky/Home/"
|
|
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
The shipment number will be appended to this URL. Default for Letzshop: <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">https://dispatchweb.fr/Tracky/Home/</code>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Colissimo -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<span class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded">Colissimo</span>
|
|
Label URL Prefix
|
|
</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="shippingSettings.carrier_colissimo_label_url"
|
|
placeholder="https://www.laposte.fr/outils/suivre-vos-envois?code="
|
|
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Enter the tracking URL prefix for Colissimo shipments.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- XpressLogistics -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<span class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">XpressLogistics</span>
|
|
Label URL Prefix
|
|
</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
x-model="shippingSettings.carrier_xpresslogistics_label_url"
|
|
placeholder="https://tracking.xpresslogistics.com/"
|
|
class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
/>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Enter the tracking URL prefix for XpressLogistics shipments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Box -->
|
|
<div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3 flex-shrink-0')"></span>
|
|
<div class="text-sm text-blue-800 dark:text-blue-200">
|
|
<p class="font-medium mb-1">How label URLs work</p>
|
|
<p>When viewing an order, the system will combine the URL prefix with the shipment number to create a downloadable label link.</p>
|
|
<p class="mt-1">Example: <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">https://dispatchweb.fr/Tracky/Home/</code> + <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">H74683403433</code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-end pt-6 mt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="saveShippingSettings()"
|
|
:disabled="saving"
|
|
class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!saving">Save Shipping Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Settings Tab -->
|
|
<div x-show="activeTab === 'system'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
|
|
System Configuration
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
General system settings and configuration options.
|
|
</p>
|
|
<div class="text-center py-12 text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('cog', 'inline w-12 h-12 mb-4')"></span>
|
|
<p>System settings coming soon...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Settings Tab -->
|
|
<div x-show="activeTab === 'security'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
|
|
Security Configuration
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Security and authentication settings.
|
|
</p>
|
|
<div class="text-center py-12 text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('shield-check', 'inline w-12 h-12 mb-4')"></span>
|
|
<p>Security settings coming soon...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications Settings Tab -->
|
|
<div x-show="activeTab === 'notifications'" x-transition>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
|
|
Notification Settings
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure platform notification preferences and delivery channels.
|
|
</p>
|
|
|
|
<!-- Quick Link to Full Notifications Page -->
|
|
<div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 mr-3 flex-shrink-0')"></span>
|
|
<div>
|
|
<p class="text-sm text-purple-800 dark:text-purple-200">
|
|
For detailed notification management including templates and delivery logs, visit the full
|
|
<a href="/admin/notifications-settings" class="font-medium underline hover:text-purple-600">Notifications page</a>
|
|
in Platform Monitoring.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Notifications Toggle -->
|
|
<div class="space-y-4 mb-6">
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-200">Email Notifications</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Send notification emails for important events</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="notificationSettings.email_enabled" class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-200">In-App Notifications</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Show notifications in the admin interface</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="notificationSettings.in_app_enabled" class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-200">Critical Alerts Only</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Only receive notifications for critical system events</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="notificationSettings.critical_only" class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="saveNotificationSettings()"
|
|
:disabled="saving"
|
|
class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span x-show="!saving">Save Notification Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='admin/js/settings.js') }}"></script>
|
|
{% endblock %}
|