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

Complete back button logic for all admin pages in Telegram Mini App

Browse Source 
Main sections navigate to /admin (15 pages)
Detail/edit pages navigate to parent lists (16 pages)
All pages use useBackButton hook with proper navigation paths
Native Telegram back button in Mini App, UI button on web
Email template pages keep UI-only back buttons as required
This commit is contained in:
c0mrade
2026-02-04 05:03:06 +03:00
parent 98d90a99c6
commit e948cdc8d2
31 changed files with 522 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/AdminPaymentMethodEdit.tsx
View File

@@ -1,9 +1,11 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
import type { PromoGroupSimple } from '../types';
import { useBackButton } from '../platform/hooks/useBackButton';
import { usePlatform } from '../platform/hooks/usePlatform';
const BackIcon = () => (
<svg
@@ -68,6 +70,10 @@ export default function AdminPaymentMethodEdit() {
const { methodId } = useParams<{ methodId: string }>();
const navigate = useNavigate();
const queryClient = useQueryClient();
const { capabilities } = usePlatform();
// Use native Telegram back button in Mini App
useBackButton(() => navigate('/admin/payment-methods'));
// Fetch payment methods
const { data: methods, isLoading } = useQuery({
@@ -174,12 +180,15 @@ export default function AdminPaymentMethodEdit() {
return (
<div className="space-y-6">
<div className="flex items-center gap-3">
<Link
to="/admin/payment-methods"
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"
>
<BackIcon />
</Link>
{/* Show back button only on web, not in Telegram Mini App */}
{!capabilities.hasBackButton && (
<button
onClick={() => navigate('/admin/payment-methods')}
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"
>
<BackIcon />
</button>
)}
<h1 className="text-2xl font-bold text-dark-50">
{t('admin.paymentMethods.notFound', 'Payment method not found')}
</h1>
@@ -195,12 +204,15 @@ export default function AdminPaymentMethodEdit() {
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-3">
<Link
to="/admin/payment-methods"
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"
>
<BackIcon />
</Link>
{/* Show back button only on web, not in Telegram Mini App */}
{!capabilities.hasBackButton && (
<button
onClick={() => navigate('/admin/payment-methods')}
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"
>
<BackIcon />
</button>
)}
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-dark-700/50 text-xl">
{icon}
</div>