From a98b2b7ad69cf140f182a599ed48431a12d5435c Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Fri, 16 Jan 2026 02:22:53 +0300
Subject: [PATCH] Update AdminTickets.tsx

---
 src/pages/AdminTickets.tsx | 211 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 208 insertions(+), 3 deletions(-)

diff --git a/src/pages/AdminTickets.tsx b/src/pages/AdminTickets.tsx
index 85a6aef..34742ce 100644
--- a/src/pages/AdminTickets.tsx
+++ b/src/pages/AdminTickets.tsx
@@ -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">
-      <h1 className="text-2xl sm:text-3xl font-bold text-dark-50">{t('admin.tickets.title')}</h1>
+      <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>
   )
 }