Implement support ticket system with role request and bug report functionalities

- Introduced a new support ticket system allowing users to submit bug reports and role requests. - Implemented endpoints for creating, updating, and managing support tickets, including file attachments. - Enhanced Telegram bot integration to handle role requests directly within the bot, enabling admins to approve or reject requests without accessing the website. - Updated database schema to include support ticket entities and their relationships. - Improved API documentation to reflect new support ticket endpoints and their usage. - Added necessary localization for support ticket features in both Russian and English.
2026-07-14 06:49:05 +03:00
parent 14b64a3140
commit b5630b2685
98 changed files with 4463 additions and 6 deletions
@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/shared/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card'
+import { CreateBugReportDialog } from './CreateBugReportDialog'
+import { CreateRoleRequestDialog } from './CreateRoleRequestDialog'
+import { TicketDetailDialog } from './TicketDetailDialog'
+import { TicketStatusBadge } from './TicketStatusBadge'
+import { listMyTickets } from './api'
+
+const PAGE_SIZE = 20
+
+export function SupportTicketList() {
+  const { t } = useTranslation()
+  const [page, setPage] = useState(1)
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
+
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ['my-tickets', page],
+    queryFn: () => listMyTickets(undefined, undefined, page, PAGE_SIZE),
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap gap-2">
+        <CreateBugReportDialog />
+        <CreateRoleRequestDialog />
+      </div>
+
+      {isLoading && <p className="text-sm text-muted-foreground">…</p>}
+
+      {isError && (
+        <div className="flex items-center gap-2">
+          <p className="text-sm text-muted-foreground">{t('auth.genericError')}</p>
+          <Button variant="outline" size="sm" onClick={() => void refetch()}>
+            {t('activation.retry')}
+          </Button>
+        </div>
+      )}
+
+      {data?.items.length === 0 && <p className="text-sm text-muted-foreground">{t('support.empty')}</p>}
+
+      {data && data.items.length > 0 && (
+        <div className="flex flex-col gap-3">
+          {data.items.map((ticket) => (
+            <Card key={ticket.id} className="cursor-pointer" onClick={() => setSelectedTicketId(ticket.id)}>
+              <CardHeader className="flex-row items-center justify-between gap-2">
+                <CardTitle className="text-base">{t(`support.type.${ticket.type}`)}</CardTitle>
+                <TicketStatusBadge status={ticket.status} />
+              </CardHeader>
+              <CardContent>
+                <p className="text-xs text-muted-foreground">
+                  {t('support.lastActivity', { date: new Date(ticket.lastActivityAt).toLocaleString() })}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {data && data.total > PAGE_SIZE && (
+        <div className="flex justify-end gap-2 text-sm">
+          <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+            {t('admin.prev')}
+          </Button>
+          <Button variant="outline" size="sm" disabled={page * PAGE_SIZE >= data.total} onClick={() => setPage((p) => p + 1)}>
+            {t('admin.next')}
+          </Button>
+        </div>
+      )}
+
+      {selectedTicketId && (
+        <TicketDetailDialog ticketId={selectedTicketId} onOpenChange={(open) => !open && setSelectedTicketId(null)} />
+      )}
+    </div>
+  )
+}