etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +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> </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}> <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
strokeLinecap="round" </svg>
strokeLinejoin="round" );
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
/> 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> </svg>
); );
@@ -310,23 +312,25 @@ export default function AdminUserDetail() {
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="mb-6 flex rounded-xl border border-dark-700 bg-dark-800/50"> <div className="mb-6 overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50">
{(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => ( <div className="flex min-w-max">
<button {(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
key={tab} <button
onClick={() => setActiveTab(tab)} key={tab}
className={`flex-1 py-3 text-sm font-medium transition-colors ${ onClick={() => setActiveTab(tab)}
activeTab === tab className={`flex-1 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors ${
? 'border-b-2 border-accent-400 text-accent-400' activeTab === tab
: 'text-dark-400 hover:text-dark-200' ? '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 === 'info' && t('admin.users.detail.tabs.info')}
{tab === 'balance' && t('admin.users.detail.tabs.balance')} {tab === 'subscription' && t('admin.users.detail.tabs.subscription')}
{tab === 'sync' && t('admin.users.detail.tabs.sync')} {tab === 'balance' && t('admin.users.detail.tabs.balance')}
</button> {tab === 'sync' && t('admin.users.detail.tabs.sync')}
))} </button>
))}
</div>
</div> </div>
{/* Content */} {/* Content */}
@@ -823,22 +827,26 @@ export default function AdminUserDetail() {
</div> </div>
{/* Sync buttons */} {/* Sync buttons */}
<div className="flex gap-3"> <div className="grid grid-cols-2 gap-3">
<button <button
onClick={handleSyncFromPanel} onClick={handleSyncFromPanel}
disabled={actionLoading} 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' : ''} /> <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
{t('admin.users.detail.sync.fromPanel')} <span className="text-center text-xs font-medium">
{t('admin.users.detail.sync.fromPanel')}
</span>
</button> </button>
<button <button
onClick={handleSyncToPanel} onClick={handleSyncToPanel}
disabled={actionLoading} 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' : ''} /> <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
{t('admin.users.detail.sync.toPanel')} <span className="text-center text-xs font-medium">
{t('admin.users.detail.sync.toPanel')}
</span>
</button> </button>
</div> </div>
</div> </div>