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

refactor: migrate to eslint flat config and format codebase with prettier

Browse Source 
- Remove legacy .eslintrc.cjs and .eslintignore
- Add eslint.config.js with flat config, security rules (no-eval, no-implied-eval, no-new-func, no-script-url)
- Add .prettierrc and .prettierignore
- Format entire codebase with prettier
This commit is contained in:
c0mrade
2026-01-27 17:37:31 +03:00
parent 111ccc4e7a
commit bc90ba3779
133 changed files with 19972 additions and 15523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/pages/AdminPayments.tsx
View File

@@ -1,37 +1,42 @@
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { adminPaymentsApi } from '../api/adminPayments'
import { useCurrency } from '../hooks/useCurrency'
import type { PendingPayment, PaginatedResponse } from '../types'
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { adminPaymentsApi } from '../api/adminPayments';
import { useCurrency } from '../hooks/useCurrency';
import type { PendingPayment, PaginatedResponse } from '../types';
export default function AdminPayments() {
const { t } = useTranslation()
const queryClient = useQueryClient()
const { formatAmount, currencySymbol } = useCurrency()
const { t } = useTranslation();
const queryClient = useQueryClient();
const { formatAmount, currencySymbol } = useCurrency();
const [page, setPage] = useState(1)
const [methodFilter, setMethodFilter] = useState<string>('')
const [checkingPaymentId, setCheckingPaymentId] = useState<string | null>(null)
const [page, setPage] = useState(1);
const [methodFilter, setMethodFilter] = useState<string>('');
const [checkingPaymentId, setCheckingPaymentId] = useState<string | null>(null);
// Fetch payments
const { data: payments, isLoading, refetch } = useQuery<PaginatedResponse<PendingPayment>>({
const {
data: payments,
isLoading,
refetch,
} = useQuery<PaginatedResponse<PendingPayment>>({
queryKey: ['admin-payments', page, methodFilter],
queryFn: () => adminPaymentsApi.getPendingPayments({
page,
per_page: 20,
method_filter: methodFilter || undefined,
}),
queryFn: () =>
adminPaymentsApi.getPendingPayments({
page,
per_page: 20,
method_filter: methodFilter || undefined,
}),
refetchInterval: 30000, // Auto-refresh every 30 seconds
})
});
// Fetch stats
const { data: stats } = useQuery({
queryKey: ['admin-payments-stats'],
queryFn: adminPaymentsApi.getStats,
refetchInterval: 30000,
})
});
// Check payment mutation
const checkPaymentMutation = useMutation({
@@ -39,49 +44,66 @@ export default function AdminPayments() {
adminPaymentsApi.checkPaymentStatus(method, paymentId),
onSuccess: async (result) => {
if (result.status_changed) {
await refetch()
queryClient.invalidateQueries({ queryKey: ['admin-payments-stats'] })
await refetch();
queryClient.invalidateQueries({ queryKey: ['admin-payments-stats'] });
} else {
await refetch()
await refetch();
}
},
onSettled: () => {
setCheckingPaymentId(null)
setCheckingPaymentId(null);
},
})
});
const handleCheckPayment = (payment: PendingPayment) => {
setCheckingPaymentId(`${payment.method}_${payment.id}`)
checkPaymentMutation.mutate({ method: payment.method, paymentId: payment.id })
}
setCheckingPaymentId(`${payment.method}_${payment.id}`);
checkPaymentMutation.mutate({ method: payment.method, paymentId: payment.id });
};
// Get unique methods from stats for filter
const methodOptions = stats?.by_method ? Object.keys(stats.by_method) : []
const methodOptions = stats?.by_method ? Object.keys(stats.by_method) : [];
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between flex-wrap gap-4">
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-3">
<Link
to="/admin"
className="w-10 h-10 flex items-center justify-center rounded-xl bg-dark-800 border border-dark-700 hover:border-dark-600 transition-colors"
className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
>
<svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg
className="h-5 w-5 text-dark-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</Link>
<div>
<h1 className="text-2xl font-bold text-dark-50">{t('admin.payments.title', 'Проверка платежей')}</h1>
<p className="text-sm text-dark-400">{t('admin.payments.description', 'Ожидающие платежи за последние 24 часа')}</p>
<h1 className="text-2xl font-bold text-dark-50">
{t('admin.payments.title', 'Проверка платежей')}
</h1>
<p className="text-sm text-dark-400">
{t('admin.payments.description', 'Ожидающие платежи за последние 24 часа')}
</p>
</div>
</div>
<button
onClick={() => refetch()}
className="btn-secondary flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
<button onClick={() => refetch()} className="btn-secondary flex items-center gap-2">
<svg
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
{t('common.refresh', 'Обновить')}
</button>
@@ -89,18 +111,20 @@ export default function AdminPayments() {
{/* Stats cards */}
{stats && (
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
<div className="p-4 rounded-xl bg-dark-800/50 border border-dark-700/50">
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
<div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-4">
<div className="text-2xl font-bold text-dark-50">{stats.total_pending}</div>
<div className="text-sm text-dark-400">{t('admin.payments.totalPending', 'Всего ожидает')}</div>
<div className="text-sm text-dark-400">
{t('admin.payments.totalPending', 'Всего ожидает')}
</div>
</div>
{Object.entries(stats.by_method).map(([method, count]) => (
<div
key={method}
className={`p-4 rounded-xl border cursor-pointer transition-all ${
className={`cursor-pointer rounded-xl border p-4 transition-all ${
methodFilter === method
? 'bg-accent-500/20 border-accent-500/50'
: 'bg-dark-800/50 border-dark-700/50 hover:border-dark-600'
? 'border-accent-500/50 bg-accent-500/20'
: 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
}`}
onClick={() => setMethodFilter(methodFilter === method ? '' : method)}
>
@@ -113,11 +137,13 @@ export default function AdminPayments() {
{/* Filter */}
{methodOptions.length > 0 && (
<div className="flex items-center gap-3 flex-wrap">
<span className="text-sm text-dark-400">{t('admin.payments.filterByMethod', 'Фильтр по методу')}:</span>
<div className="flex flex-wrap items-center gap-3">
<span className="text-sm text-dark-400">
{t('admin.payments.filterByMethod', 'Фильтр по методу')}:
</span>
<button
onClick={() => setMethodFilter('')}
className={`px-3 py-1.5 rounded-lg text-sm transition-all ${
className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
methodFilter === ''
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700'
@@ -129,7 +155,7 @@ export default function AdminPayments() {
<button
key={method}
onClick={() => setMethodFilter(method)}
className={`px-3 py-1.5 rounded-lg text-sm transition-all ${
className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
methodFilter === method
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700'
@@ -145,28 +171,30 @@ export default function AdminPayments() {
<div className="card">
{isLoading ? (
<div className="flex items-center justify-center py-12">
<div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
</div>
) : payments?.items && payments.items.length > 0 ? (
<div className="space-y-3">
{payments.items.map((payment) => {
const paymentKey = `${payment.method}_${payment.id}`
const isChecking = checkingPaymentId === paymentKey
const paymentKey = `${payment.method}_${payment.id}`;
const isChecking = checkingPaymentId === paymentKey;
return (
<div
key={paymentKey}
className="p-4 rounded-xl bg-dark-800/30 border border-dark-700/30"
className="rounded-xl border border-dark-700/30 bg-dark-800/30 p-4"
>
<div className="flex items-start justify-between gap-4 flex-wrap">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2 flex-wrap">
<span className="font-semibold text-dark-100">{payment.method_display}</span>
<span className="text-sm px-2 py-0.5 rounded-full bg-dark-700/50 text-dark-300">
<div className="flex flex-wrap items-start justify-between gap-4">
<div className="min-w-0 flex-1">
<div className="mb-2 flex flex-wrap items-center gap-2">
<span className="font-semibold text-dark-100">
{payment.method_display}
</span>
<span className="rounded-full bg-dark-700/50 px-2 py-0.5 text-sm text-dark-300">
{payment.status_emoji} {payment.status_text}
</span>
{payment.is_paid && (
<span className="text-sm px-2 py-0.5 rounded-full bg-success-500/20 text-success-400">
<span className="rounded-full bg-success-500/20 px-2 py-0.5 text-sm text-success-400">
{t('admin.payments.paid', 'Оплачено')}
</span>
)}
@@ -174,16 +202,18 @@ export default function AdminPayments() {
<div className="text-lg font-semibold text-dark-50">
{formatAmount(payment.amount_rubles)} {currencySymbol}
</div>
<div className="text-sm text-dark-400 mt-1">
<div className="mt-1 text-sm text-dark-400">
ID: <code className="text-dark-300">{payment.identifier}</code>
</div>
<div className="text-xs text-dark-500 mt-1">
<div className="mt-1 text-xs text-dark-500">
{new Date(payment.created_at).toLocaleString()}
</div>
{/* User info */}
{(payment.user_username || payment.user_telegram_id) && (
<div className="text-sm text-dark-400 mt-2">
<span className="text-dark-500">{t('admin.payments.user', 'Пользователь')}:</span>{' '}
<div className="mt-2 text-sm text-dark-400">
<span className="text-dark-500">
{t('admin.payments.user', 'Пользователь')}:
</span>{' '}
{payment.user_username ? (
<span className="text-dark-200">@{payment.user_username}</span>
) : (
@@ -198,7 +228,7 @@ export default function AdminPayments() {
href={payment.payment_url}
target="_blank"
rel="noopener noreferrer"
className="btn-secondary text-xs px-3 py-1.5"
className="btn-secondary px-3 py-1.5 text-xs"
>
{t('admin.payments.openLink', 'Открыть ссылку')}
</a>
@@ -207,13 +237,24 @@ export default function AdminPayments() {
<button
onClick={() => handleCheckPayment(payment)}
disabled={isChecking}
className="btn-primary text-xs px-3 py-1.5"
className="btn-primary px-3 py-1.5 text-xs"
>
{isChecking ? (
<span className="flex items-center gap-1">
<svg className="w-3 h-3 animate-spin" viewBox="0 0 24 24" fill="none">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
<svg className="h-3 w-3 animate-spin" viewBox="0 0 24 24" fill="none">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
{t('admin.payments.checking', 'Проверка...')}
</span>
@@ -225,52 +266,70 @@ export default function AdminPayments() {
</div>
</div>
{/* Show result after check */}
{checkPaymentMutation.isSuccess && checkPaymentMutation.variables?.paymentId === payment.id && (
<div className={`mt-3 p-2 rounded-lg text-sm ${
checkPaymentMutation.data?.status_changed
? 'bg-success-500/10 border border-success-500/30 text-success-400'
: 'bg-dark-700/30 text-dark-400'
}`}>
{checkPaymentMutation.data?.message}
</div>
)}
{checkPaymentMutation.isSuccess &&
checkPaymentMutation.variables?.paymentId === payment.id && (
<div
className={`mt-3 rounded-lg p-2 text-sm ${
checkPaymentMutation.data?.status_changed
? 'border border-success-500/30 bg-success-500/10 text-success-400'
: 'bg-dark-700/30 text-dark-400'
}`}
>
{checkPaymentMutation.data?.message}
</div>
)}
</div>
)
);
})}
</div>
) : (
<div className="text-center py-12">
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-800 flex items-center justify-center">
<svg className="w-8 h-8 text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<div className="py-12 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-dark-800">
<svg
className="h-8 w-8 text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="text-dark-400">{t('admin.payments.noPayments', 'Нет ожидающих платежей')}</div>
<div className="text-dark-400">
{t('admin.payments.noPayments', 'Нет ожидающих платежей')}
</div>
</div>
)}
{/* Pagination */}
{payments && payments.pages > 1 && (
<div className="mt-4 flex items-center gap-3 flex-wrap text-sm text-dark-500">
<div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-dark-500">
<button
type="button"
onClick={() => setPage((prev) => Math.max(1, prev - 1))}
disabled={payments.page <= 1}
className={`btn-secondary text-xs sm:text-sm flex-1 sm:flex-none min-w-[100px] ${
payments.page <= 1 ? 'opacity-50 cursor-not-allowed' : ''
className={`btn-secondary min-w-[100px] flex-1 text-xs sm:flex-none sm:text-sm ${
payments.page <= 1 ? 'cursor-not-allowed opacity-50' : ''
}`}
>
{t('common.back', 'Назад')}
</button>
<div className="flex-1 text-center">
{t('balance.page', '{current} / {total}', { current: payments.page, total: payments.pages })}
{t('balance.page', '{current} / {total}', {
current: payments.page,
total: payments.pages,
})}
</div>
<button
type="button"
onClick={() => setPage((prev) => Math.min(payments.pages, prev + 1))}
disabled={payments.page >= payments.pages}
className={`btn-secondary text-xs sm:text-sm flex-1 sm:flex-none min-w-[100px] ${
payments.page >= payments.pages ? 'opacity-50 cursor-not-allowed' : ''
className={`btn-secondary min-w-[100px] flex-1 text-xs sm:flex-none sm:text-sm ${
payments.page >= payments.pages ? 'cursor-not-allowed opacity-50' : ''
}`}
>
{t('common.next', 'Далее')}
@@ -279,5 +338,5 @@ export default function AdminPayments() {
)}
</div>
</div>
)
);
}