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

fix: improve admin user detail tabs scroll and sync buttons design

Browse Source
This commit is contained in:
c0mrade
2026-02-01 23:49:52 +03:00
parent f6854c6c3a
commit 45dac039f9
1 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/AdminUserDetail.tsx
View File

@@ -36,13 +36,15 @@ const MinusIcon = () => (
</svg>
);
const SyncIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
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="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
/>
<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>
);
@@ -310,23 +312,25 @@ export default function AdminUserDetail() {
</div>
{/* Tabs */}
<div className="mb-6 flex rounded-xl border border-dark-700 bg-dark-800/50">
{(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`flex-1 py-3 text-sm font-medium transition-colors ${
activeTab === tab
? 'border-b-2 border-accent-400 text-accent-400'
: 'text-dark-400 hover:text-dark-200'
}`}
>
{tab === 'info' && t('admin.users.detail.tabs.info')}
{tab === 'subscription' && t('admin.users.detail.tabs.subscription')}
{tab === 'balance' && t('admin.users.detail.tabs.balance')}
{tab === 'sync' && t('admin.users.detail.tabs.sync')}
</button>
))}
<div className="mb-6 overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50">
<div className="flex min-w-max">
{(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`flex-1 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors ${
activeTab === tab
? 'border-b-2 border-accent-400 text-accent-400'
: 'text-dark-400 hover:text-dark-200'
}`}
>
{tab === 'info' && t('admin.users.detail.tabs.info')}
{tab === 'subscription' && t('admin.users.detail.tabs.subscription')}
{tab === 'balance' && t('admin.users.detail.tabs.balance')}
{tab === 'sync' && t('admin.users.detail.tabs.sync')}
</button>
))}
</div>
</div>
{/* Content */}
@@ -823,22 +827,26 @@ export default function AdminUserDetail() {
</div>
{/* Sync buttons */}
<div className="flex gap-3">
<div className="grid grid-cols-2 gap-3">
<button
onClick={handleSyncFromPanel}
disabled={actionLoading}
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/20 py-3 text-accent-400 transition-colors hover:bg-accent-500/30 disabled:opacity-50"
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"
>
<SyncIcon className={actionLoading ? 'animate-spin' : ''} />
{t('admin.users.detail.sync.fromPanel')}
<ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
<span className="text-center text-xs font-medium">
{t('admin.users.detail.sync.fromPanel')}
</span>
</button>
<button
onClick={handleSyncToPanel}
disabled={actionLoading}
className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/20 py-3 text-accent-400 transition-colors hover:bg-accent-500/30 disabled:opacity-50"
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"
>
<SyncIcon className={actionLoading ? 'animate-spin' : ''} />
{t('admin.users.detail.sync.toPanel')}
<ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
<span className="text-center text-xs font-medium">
{t('admin.users.detail.sync.toPanel')}
</span>
</button>
</div>
</div>