mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
refactor: convert partner/withdrawal modals to separate pages
Replace 7 modal dialogs with 8 dedicated page routes for better mobile/Telegram WebApp UX. Add campaign management (assign/create with auto-assign) to partner detail page. New pages: AdminApplicationReview, AdminPartnerCommission, AdminPartnerRevoke, AdminWithdrawalReject, AdminPartnerCampaignAssign, AdminPartnerCampaignCreate, ReferralPartnerApply, ReferralWithdrawalRequest. ~610 lines removed from parent pages, ~425 lines removed net.
This commit is contained in:
Fringg
228
src/pages/AdminApplicationReview.tsx
Normal file
228
src/pages/AdminApplicationReview.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams, useNavigate, useLocation } from 'react-router';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { partnerApi, type AdminPartnerApplicationItem } from '../api/partners';
|
||||
import { AdminBackButton } from '../components/admin';
|
||||
|
||||
export default function AdminApplicationReview() {
|
||||
const { t } = useTranslation();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [commission, setCommission] = useState('10');
|
||||
const [rejectComment, setRejectComment] = useState('');
|
||||
|
||||
// Try to get application from navigate state, fallback to fetching
|
||||
const passedApp = (location.state as { application?: AdminPartnerApplicationItem } | null)
|
||||
?.application;
|
||||
|
||||
const { data: fetchedApps } = useQuery({
|
||||
queryKey: ['admin-partner-applications'],
|
||||
queryFn: () => partnerApi.getApplications({ status: 'pending' }),
|
||||
enabled: !passedApp && !!id,
|
||||
});
|
||||
|
||||
const app = passedApp ?? fetchedApps?.items.find((a) => a.id === Number(id));
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: ({ appId, commissionPercent }: { appId: number; commissionPercent: number }) =>
|
||||
partnerApi.approveApplication(appId, { commission_percent: commissionPercent }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-partner-applications'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-partners'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-partner-stats'] });
|
||||
navigate('/admin/partners');
|
||||
},
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: ({ appId, comment }: { appId: number; comment?: string }) =>
|
||||
partnerApi.rejectApplication(appId, { comment }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-partner-applications'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-partner-stats'] });
|
||||
navigate('/admin/partners');
|
||||
},
|
||||
});
|
||||
|
||||
if (!app) {
|
||||
return (
|
||||
<div className="animate-fade-in">
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<AdminBackButton to="/admin/partners" />
|
||||
<h1 className="text-xl font-semibold text-dark-100">
|
||||
{t('admin.partners.approveDialog.title')}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const displayName = app.first_name || app.username || `#${app.user_id}`;
|
||||
|
||||
return (
|
||||
<div className="animate-fade-in">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<AdminBackButton to="/admin/partners" />
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-dark-100">
|
||||
{t('admin.partners.actions.review')}
|
||||
</h1>
|
||||
<p className="text-sm text-dark-400">{displayName}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Application Details */}
|
||||
<div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
|
||||
<h3 className="mb-4 font-medium text-dark-200">
|
||||
{t('admin.partners.tabs.applications')}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span className="font-medium text-dark-100">{displayName}</span>
|
||||
{app.username && <span className="text-sm text-dark-500">@{app.username}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm text-dark-400">
|
||||
{app.company_name && (
|
||||
<div className="rounded-lg bg-dark-700/50 p-3">
|
||||
<span className="text-dark-500">
|
||||
{t('admin.partners.applicationFields.companyName')}:
|
||||
</span>{' '}
|
||||
<span className="text-dark-200">{app.company_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{app.website_url && (
|
||||
<div className="rounded-lg bg-dark-700/50 p-3">
|
||||
<span className="text-dark-500">
|
||||
{t('admin.partners.applicationFields.website')}:
|
||||
</span>{' '}
|
||||
<span className="text-dark-200">{app.website_url}</span>
|
||||
</div>
|
||||
)}
|
||||
{app.telegram_channel && (
|
||||
<div className="rounded-lg bg-dark-700/50 p-3">
|
||||
<span className="text-dark-500">
|
||||
{t('admin.partners.applicationFields.channel')}:
|
||||
</span>{' '}
|
||||
<span className="text-dark-200">{app.telegram_channel}</span>
|
||||
</div>
|
||||
)}
|
||||
{app.description && (
|
||||
<div className="rounded-lg bg-dark-700/50 p-3">
|
||||
<span className="text-dark-500">
|
||||
{t('admin.partners.applicationFields.description')}:
|
||||
</span>{' '}
|
||||
<span className="text-dark-200">{app.description}</span>
|
||||
</div>
|
||||
)}
|
||||
{app.expected_monthly_referrals != null && (
|
||||
<div className="rounded-lg bg-dark-700/50 p-3">
|
||||
<span className="text-dark-500">
|
||||
{t('admin.partners.applicationFields.expectedReferrals')}:
|
||||
</span>{' '}
|
||||
<span className="text-dark-200">{app.expected_monthly_referrals}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Approve Section */}
|
||||
<div className="rounded-xl border border-success-500/30 bg-dark-800 p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold text-dark-100">
|
||||
{t('admin.partners.approveDialog.title')}
|
||||
</h3>
|
||||
<p className="mb-4 text-sm text-dark-400">
|
||||
{t('admin.partners.approveDialog.description', { name: displayName })}
|
||||
</p>
|
||||
<label className="mb-1 block text-sm font-medium text-dark-300">
|
||||
{t('admin.partners.approveDialog.commissionLabel')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
value={commission}
|
||||
onChange={(e) => setCommission(e.target.value)}
|
||||
className="mb-4 w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 outline-none focus:border-accent-500"
|
||||
placeholder="10"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
const val = Number(commission);
|
||||
if (val >= 1 && val <= 100) {
|
||||
approveMutation.mutate({ appId: app.id, commissionPercent: val });
|
||||
}
|
||||
}}
|
||||
disabled={
|
||||
approveMutation.isPending ||
|
||||
!commission ||
|
||||
Number(commission) < 1 ||
|
||||
Number(commission) > 100
|
||||
}
|
||||
className="w-full rounded-lg bg-success-500 px-4 py-3 font-medium text-white transition-colors hover:bg-success-600 disabled:opacity-50"
|
||||
>
|
||||
{approveMutation.isPending ? t('common.saving') : t('admin.partners.actions.approve')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{approveMutation.isError && (
|
||||
<div className="rounded-lg bg-error-500/10 p-3 text-sm text-error-400">
|
||||
{t('common.error')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reject Section */}
|
||||
<div className="rounded-xl border border-error-500/30 bg-dark-800 p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold text-dark-100">
|
||||
{t('admin.partners.rejectDialog.title')}
|
||||
</h3>
|
||||
<p className="mb-4 text-sm text-dark-400">
|
||||
{t('admin.partners.rejectDialog.description', { name: displayName })}
|
||||
</p>
|
||||
<label className="mb-1 block text-sm font-medium text-dark-300">
|
||||
{t('admin.partners.rejectDialog.commentLabel')}
|
||||
</label>
|
||||
<textarea
|
||||
value={rejectComment}
|
||||
onChange={(e) => setRejectComment(e.target.value)}
|
||||
className="mb-4 w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 outline-none focus:border-accent-500"
|
||||
rows={3}
|
||||
placeholder={t('admin.partners.rejectDialog.commentPlaceholder')}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
rejectMutation.mutate({
|
||||
appId: app.id,
|
||||
comment: rejectComment || undefined,
|
||||
})
|
||||
}
|
||||
disabled={rejectMutation.isPending}
|
||||
className="w-full rounded-lg bg-error-500 px-4 py-3 font-medium text-white transition-colors hover:bg-error-600 disabled:opacity-50"
|
||||
>
|
||||
{rejectMutation.isPending ? t('common.saving') : t('admin.partners.actions.reject')}
|
||||
</button>
|
||||
|
||||
{rejectMutation.isError && (
|
||||
<div className="mt-4 rounded-lg bg-error-500/10 p-3 text-sm text-error-400">
|
||||
{t('common.error')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user