frontdev/no-copy-admin-panel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tariff management page layout

Browse Source
This commit is contained in:
smanylov 2026-01-21 19:31:10 +07:00
parent 6d38cce4e8
commit 2de0cc444d
4 changed files with 176 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/[locale]/tariff-management/page.tsx Normal file
View File

@ -0,0 +1,78 @@
export default function Page() {
return (
<div className="admin-content">
<div className="content-header">
<h3>📋 Управление тарифными планами</h3>
<div className="content-header-actions">
<button className="btn btn-primary">
<span>➕</span>
<span>Создать тариф</span>
</button>
</div>
</div>
<div className="content-body" id="plans-container">
<div className="stats-grid">
<div className="stat-card">
<div className="stat-card-header">
<span className="stat-card-title">FREE</span>
<div className="stat-card-icon blue">🆓</div>
</div>
<div className="stat-card-value">₽0</div>
<div className="stat-card-label">100 токенов</div>
<div className="stat-card-footer">
<button className="btn btn-outline btn-sm">Редактировать</button>
</div>
</div>
<div className="stat-card">
<div className="stat-card-header">
<span className="stat-card-title">MINI (TELEGRAM)</span>
<div className="stat-card-icon cyan">✈️</div>
</div>
<div className="stat-card-value">₽500</div>
<div className="stat-card-label">500 токенов</div>
<div className="stat-card-footer">
<button className="btn btn-outline btn-sm">Редактировать</button>
</div>
</div>
<div className="stat-card">
<div className="stat-card-header">
<span className="stat-card-title">BASIC</span>
<div className="stat-card-icon green">⭐</div>
</div>
<div className="stat-card-value">₽990</div>
<div className="stat-card-label">1,000 токенов</div>
<div className="stat-card-footer">
<button className="btn btn-outline btn-sm">Редактировать</button>
</div>
</div>
<div className="stat-card">
<div className="stat-card-header">
<span className="stat-card-title">PRO</span>
<div className="stat-card-icon purple">💎</div>
</div>
<div className="stat-card-value">₽2,990</div>
<div className="stat-card-label">5,000 токенов</div>
<div className="stat-card-footer">
<button className="btn btn-outline btn-sm">Редактировать</button>
</div>
</div>
<div className="stat-card">
<div className="stat-card-header">
<span className="stat-card-title">BUSINESS</span>
<div className="stat-card-icon orange">🏢</div>
</div>
<div className="stat-card-value">₽9,990</div>
<div className="stat-card-label">20,000 токенов</div>
<div className="stat-card-footer">
<button className="btn btn-outline btn-sm">Редактировать</button>
</div>
</div>
</div>
</div>
</div>
)
}

84
src/app/styles/global-styles.scss
View File

@ -87,7 +87,7 @@
.admin-panel {
.admin-sidebar {
width: 280px;
width: var(--side-bar-width);
background: var(--surface);
border-right: 1px solid var(--border);
position: fixed;
@ -321,6 +321,13 @@
overflow-x: auto;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.admin-table {
width: 100%;
border-collapse: collapse;
@ -732,4 +739,79 @@
}
}
}
}
#plans-container {
.stats-grid {
.stat-card {
background: var(--surface);
padding: 20px;
border-radius: 12px;
box-shadow: var(--shadow);
transition: all 0.3s;
border: 1px solid var(--border);
&:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.stat-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.stat-card-title {
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: #eff6ff;
}
.stat-card-value {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.stat-card-label {
font-size: 12px;
color: var(--text-secondary);
}
.stat-card-footer {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-secondary);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text-primary);
&:hover {
background: var(--background);
}
}
}
}
}

5
src/app/ui/admin-nav-links.tsx
View File

@ -24,6 +24,11 @@ export default function AdminNavLinks() {
name: 'subscriptions',
href: '/subscriptions',
img: 'M22 6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2zm-2 2H4V6h16zM4 11h16v7H4z'
},
{
name: 'tariff management',
href: '/tariff-management',
img: 'M4 14v-2h7v2zm0-4V8h11v2zm0-4V4h11v2zm9 14v-3.075l5.525-5.5q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.5 5.5zm6.575-5.6l.925-.975l-.925-.925l-.95.95z'
}
];

10
tailwind.config.ts Normal file
View File

@ -0,0 +1,10 @@
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
};
export default config;