etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AdminTickets.tsx

Browse Source
This commit is contained in:
Egor
2026-01-16 02:22:53 +03:00
committed by GitHub
parent e73a7673f5
commit a98b2b7ad6
1 changed files with 208 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/pages/AdminTickets.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { adminApi, AdminTicket, AdminTicketDetail, AdminTicketMessage } from '../api/admin'
import { adminApi, AdminTicket, AdminTicketDetail, AdminTicketMessage, TicketSettings } from '../api/admin'
import { ticketsApi } from '../api/tickets'
function AdminMessageMedia({ message, t }: { message: AdminTicketMessage; t: (key: string) => string }) {
@@ -86,6 +86,7 @@ export default function AdminTickets() {
const [statusFilter, setStatusFilter] = useState<string>('')
const [replyText, setReplyText] = useState('')
const [page, setPage] = useState(1)
const [showSettings, setShowSettings] = useState(false)
const { data: stats } = useQuery({
queryKey: ['admin-ticket-stats'],
@@ -162,7 +163,19 @@ export default function AdminTickets() {
return (
<div className="space-y-6">
<div className="flex justify-between items-center">
<h1 className="text-2xl sm:text-3xl font-bold text-dark-50">{t('admin.tickets.title')}</h1>
<button
onClick={() => setShowSettings(true)}
className="btn-secondary flex items-center gap-2"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
{t('admin.tickets.settings')}
</button>
</div>
{/* Stats */}
{stats && (
@@ -380,6 +393,198 @@ export default function AdminTickets() {
) : null}
</div>
</div>
{/* Settings Modal */}
{showSettings && <TicketSettingsModal onClose={() => setShowSettings(false)} />}
</div>
)
}
function TicketSettingsModal({ onClose }: { onClose: () => void }) {
const { t } = useTranslation()
const queryClient = useQueryClient()
const { data: settings, isLoading } = useQuery({
queryKey: ['ticket-settings'],
queryFn: adminApi.getTicketSettings,
})
const [formData, setFormData] = useState({
sla_enabled: settings?.sla_enabled ?? true,
sla_minutes: settings?.sla_minutes ?? 5,
sla_check_interval_seconds: settings?.sla_check_interval_seconds ?? 60,
sla_reminder_cooldown_minutes: settings?.sla_reminder_cooldown_minutes ?? 15,
support_system_mode: settings?.support_system_mode ?? 'both',
})
// Update form when settings load
useEffect(() => {
if (settings) {
setFormData({
sla_enabled: settings.sla_enabled,
sla_minutes: settings.sla_minutes,
sla_check_interval_seconds: settings.sla_check_interval_seconds,
sla_reminder_cooldown_minutes: settings.sla_reminder_cooldown_minutes,
support_system_mode: settings.support_system_mode,
})
}
}, [settings])
const updateMutation = useMutation({
mutationFn: adminApi.updateTicketSettings,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['ticket-settings'] })
onClose()
},
})
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
updateMutation.mutate(formData)
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={onClose}>
<div className="card max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-bold text-dark-50">{t('admin.tickets.settings')}</h2>
<button
onClick={onClose}
className="text-dark-400 hover:text-dark-200 transition-colors"
>
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{isLoading ? (
<div className="flex justify-center py-12">
<div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
{/* Support System Mode */}
<div>
<label className="block text-sm font-medium text-dark-100 mb-2">
{t('admin.tickets.supportMode')}
</label>
<select
value={formData.support_system_mode}
onChange={(e) => setFormData({ ...formData, support_system_mode: e.target.value })}
className="input"
>
<option value="both">{t('admin.tickets.modeBoth')}</option>
<option value="tickets">{t('admin.tickets.modeTickets')}</option>
<option value="contact">{t('admin.tickets.modeContact')}</option>
</select>
<p className="text-xs text-dark-500 mt-1">{t('admin.tickets.supportModeDesc')}</p>
</div>
<div className="border-t border-dark-800/50 pt-6">
<h3 className="text-lg font-semibold text-dark-100 mb-4">{t('admin.tickets.slaSettings')}</h3>
{/* SLA Enabled */}
<div>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={formData.sla_enabled}
onChange={(e) => setFormData({ ...formData, sla_enabled: e.target.checked })}
className="w-5 h-5 rounded border-dark-700 bg-dark-800 text-accent-500 focus:ring-2 focus:ring-accent-500 focus:ring-offset-0"
/>
<div>
<div className="text-dark-100 font-medium">{t('admin.tickets.slaEnabled')}</div>
<div className="text-sm text-dark-500">{t('admin.tickets.slaEnabledDesc')}</div>
</div>
</label>
</div>
</div>
{/* SLA Minutes */}
<div>
<label className="block text-sm font-medium text-dark-100 mb-2">
{t('admin.tickets.slaMinutes')}
</label>
<input
type="number"
min="1"
max="1440"
value={formData.sla_minutes}
onChange={(e) => setFormData({ ...formData, sla_minutes: parseInt(e.target.value) })}
className="input"
disabled={!formData.sla_enabled}
/>
<p className="text-xs text-dark-500 mt-1">{t('admin.tickets.slaMinutesDesc')}</p>
</div>
{/* Check Interval */}
<div>
<label className="block text-sm font-medium text-dark-100 mb-2">
{t('admin.tickets.checkInterval')}
</label>
<input
type="number"
min="30"
max="600"
value={formData.sla_check_interval_seconds}
onChange={(e) => setFormData({ ...formData, sla_check_interval_seconds: parseInt(e.target.value) })}
className="input"
disabled={!formData.sla_enabled}
/>
<p className="text-xs text-dark-500 mt-1">{t('admin.tickets.checkIntervalDesc')}</p>
</div>
{/* Reminder Cooldown */}
<div>
<label className="block text-sm font-medium text-dark-100 mb-2">
{t('admin.tickets.reminderCooldown')}
</label>
<input
type="number"
min="1"
max="120"
value={formData.sla_reminder_cooldown_minutes}
onChange={(e) => setFormData({ ...formData, sla_reminder_cooldown_minutes: parseInt(e.target.value) })}
className="input"
disabled={!formData.sla_enabled}
/>
<p className="text-xs text-dark-500 mt-1">{t('admin.tickets.reminderCooldownDesc')}</p>
</div>
{/* Buttons */}
<div className="flex gap-3 justify-end pt-4 border-t border-dark-800/50">
<button
type="button"
onClick={onClose}
className="btn-secondary"
>
{t('common.cancel')}
</button>
<button
type="submit"
disabled={updateMutation.isPending}
className="btn-primary"
>
{updateMutation.isPending ? (
<span className="flex items-center gap-2">
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
{t('common.saving')}
</span>
) : (
t('common.save')
)}
</button>
</div>
{updateMutation.isError && (
<div className="p-3 rounded-lg bg-error-500/10 border border-error-500/30 text-error-400 text-sm">
{t('admin.tickets.settingsUpdateError')}
</div>
)}
</form>
)}
</div>
</div>
)
}