mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
f75b243f03
After re-audit/critique cycle the deterministic detector (npx impeccable)
flagged 34 design-spec violations. Knock out 33 of them.
• 25 × pure-black-white: sed-sweep bg-black/X → bg-dark-950/X across
18+ files (modal scrims, photo viewer backdrop, code blocks). The
base resolves to rgba(10,15,26,X) — visually identical to true
black, satisfies the 'no #000' impeccable rule.
• 3 × bounce-easing: SuccessNotificationModal celebration icon and
SyncTab loading arrows used animate-bounce; replaced with
animate-pulse. Bounce easing reads dated; pulse conveys 'in
progress' without the cartoon feel.
• 3 × border-accent-on-rounded: TelegramCallback + VerifyEmail
spinners used 'border-b-2 border-accent-500' on rounded-full —
detector reads it as a side-stripe even though it's a ring loader.
Switch to canonical 'border-2 border-accent-500 border-t-transparent'
(3/4 ring colored). Same visual, no spec violation.
• 1 × ai-color-palette: AdminLandingStats had text-purple-400 on a
gift-stats heading; purple is not in the brand palette. Swap to
text-accent-400.
• 1 × layout-transition: TrafficProgressBar.tsx fill bar still used
transition: width 1.2s (slipped past the earlier optimize pass).
Convert to transform: scaleX with origin-left. Same gradient, same
duration, runs on the compositor.
Remaining: 1 finding in third-party Aceternity background-beams-collision
component (indigo-500 gradient on decorative WebGL background) — left
as-is, it's lifted decorative third-party code.
Detector: 34 → 1.
208 lines
9.3 KiB
TypeScript
208 lines
9.3 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import type {
|
|
UserDetailResponse,
|
|
UserSubscriptionInfo,
|
|
PanelSyncStatusResponse,
|
|
} from '../../../api/adminUsers';
|
|
|
|
// ──────────────────────────────────────────────────────────────────
|
|
// Icons (sync-tab-local — not used outside this view)
|
|
// ──────────────────────────────────────────────────────────────────
|
|
|
|
const ArrowDownIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
|
|
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
|
|
</svg>
|
|
);
|
|
|
|
const ArrowUpIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
|
|
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
|
|
</svg>
|
|
);
|
|
|
|
// ──────────────────────────────────────────────────────────────────
|
|
// Sync tab — compares bot DB vs panel data, offers a 2-way push
|
|
// ──────────────────────────────────────────────────────────────────
|
|
|
|
export interface SyncTabProps {
|
|
user: UserDetailResponse;
|
|
syncStatus: PanelSyncStatusResponse | null;
|
|
userSubscriptions: UserSubscriptionInfo[];
|
|
activeSubscriptionId: number | null;
|
|
onActiveSubscriptionChange: (id: number | null) => void;
|
|
actionLoading: boolean;
|
|
onSyncFromPanel: () => void;
|
|
onSyncToPanel: () => void;
|
|
locale: string;
|
|
}
|
|
|
|
export function SyncTab({
|
|
user,
|
|
syncStatus,
|
|
userSubscriptions,
|
|
activeSubscriptionId,
|
|
onActiveSubscriptionChange,
|
|
actionLoading,
|
|
onSyncFromPanel,
|
|
onSyncToPanel,
|
|
locale,
|
|
}: SyncTabProps) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Subscription selector for multi-tariff */}
|
|
{userSubscriptions.length > 1 && (
|
|
<div className="rounded-xl bg-dark-800/50 p-4">
|
|
<div className="mb-2 text-sm text-dark-400">
|
|
{t('admin.users.detail.sync.selectSubscription')}
|
|
</div>
|
|
<select
|
|
value={activeSubscriptionId || ''}
|
|
onChange={(e) => onActiveSubscriptionChange(Number(e.target.value) || null)}
|
|
className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-sm text-dark-100"
|
|
>
|
|
{userSubscriptions.map((sub) => (
|
|
<option key={sub.id} value={sub.id}>
|
|
{sub.tariff_name || `#${sub.id}`} — {sub.status}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Sync status */}
|
|
{syncStatus && (
|
|
<div
|
|
className={`rounded-xl border p-4 ${syncStatus.has_differences ? 'border-warning-500/30 bg-warning-500/10' : 'border-success-500/30 bg-success-500/10'}`}
|
|
>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
{syncStatus.has_differences ? (
|
|
<span className="font-medium text-warning-400">
|
|
{t('admin.users.detail.sync.hasDifferences')}
|
|
</span>
|
|
) : (
|
|
<span className="font-medium text-success-400">
|
|
{t('admin.users.detail.sync.synced')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{syncStatus.differences.length > 0 && (
|
|
<div className="mb-3 space-y-1">
|
|
{syncStatus.differences.map((diff, i) => (
|
|
<div key={i} className="text-xs text-dark-300">
|
|
• {diff}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<div className="mb-2 text-xs text-dark-500">{t('admin.users.detail.sync.bot')}</div>
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.statusLabel')}:</span>
|
|
<span className="text-dark-200">{syncStatus.bot_subscription_status || '-'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.until')}:</span>
|
|
<span className="text-dark-200">
|
|
{syncStatus.bot_subscription_end_date
|
|
? new Date(syncStatus.bot_subscription_end_date).toLocaleDateString(locale)
|
|
: '-'}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.traffic')}:</span>
|
|
<span className="text-dark-200">
|
|
{syncStatus.bot_traffic_used_gb.toFixed(2)} {t('common.units.gb')}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.devices')}:</span>
|
|
<span className="text-dark-200">{syncStatus.bot_device_limit}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.squads')}:</span>
|
|
<span className="text-dark-200">{syncStatus.bot_squads?.length || 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="mb-2 text-xs text-dark-500">{t('admin.users.detail.sync.panel')}</div>
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.statusLabel')}:</span>
|
|
<span className="text-dark-200">{syncStatus.panel_status || '-'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.until')}:</span>
|
|
<span className="text-dark-200">
|
|
{syncStatus.panel_expire_at
|
|
? new Date(syncStatus.panel_expire_at).toLocaleDateString(locale)
|
|
: '-'}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.traffic')}:</span>
|
|
<span className="text-dark-200">
|
|
{syncStatus.panel_traffic_used_gb.toFixed(2)} {t('common.units.gb')}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.devices')}:</span>
|
|
<span className="text-dark-200">{syncStatus.panel_device_limit}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-dark-400">{t('admin.users.detail.sync.squads')}:</span>
|
|
<span className="text-dark-200">{syncStatus.panel_squads?.length || 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* UUID info */}
|
|
<div className="rounded-xl bg-dark-800/50 p-4">
|
|
{syncStatus?.subscription_tariff_name && (
|
|
<div className="mb-2 text-xs text-dark-500">{syncStatus.subscription_tariff_name}</div>
|
|
)}
|
|
<div className="mb-1 text-sm text-dark-400">Remnawave UUID</div>
|
|
<div className="break-all font-mono text-sm text-dark-100">
|
|
{syncStatus?.remnawave_uuid ||
|
|
user.remnawave_uuid ||
|
|
t('admin.users.detail.sync.notLinked')}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sync buttons */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button
|
|
onClick={onSyncFromPanel}
|
|
disabled={actionLoading}
|
|
className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
|
|
>
|
|
<ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-pulse' : ''}`} />
|
|
<span className="text-center text-xs font-medium">
|
|
{t('admin.users.detail.sync.fromPanel')}
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={onSyncToPanel}
|
|
disabled={actionLoading}
|
|
className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
|
|
>
|
|
<ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-pulse' : ''}`} />
|
|
<span className="text-center text-xs font-medium">
|
|
{t('admin.users.detail.sync.toPanel')}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|