Files
no-copy-frontend/src/app/ui/referral-page/Income-and-payments.tsx
T
2026-01-12 17:31:42 +07:00

123 lines
3.3 KiB
TypeScript

export default function IncomeAndPayments() {
return (
<div className="block-wrapper income-and-payments">
<div className="section-title">
<span className="icon">💳</span>
Доходы и выплаты
</div>
<div className="earnings-cards">
<div className="earning-card success">
<h4>💰 Доступно к выводу</h4>
<p>
135.00 Б
</p>
<small>Минимальная сумма вывода: 100 Б</small>
</div>
<div className="earning-card">
<h4>📈 Всего заработано</h4>
<p>
135.00 Б
</p>
<small>За все время участия в программе</small>
</div>
<div className="earning-card warning">
<h4> Выплачено</h4>
<p>
0.00 Б
</p>
<small>Успешно выплачено на ваши счета</small>
</div>
</div>
<div className="payout-form">
<h4>💸 Запросить выплату</h4>
<div className="payout-wrapper">
<div className="form-group">
<label>Сумма к выводу (Б)</label>
<input type="number" id="payout-amount" min="100.00" max="135.00" step="0.01" placeholder="Введите сумму"></input>
</div>
<div className="form-group" >
<label>Способ выплаты</label>
<select id="payout-method">
<option defaultValue="BALANCE">💳 На баланс аккаунта</option>
<option defaultValue="BANK_TRANSFER">🏦 Банковский перевод</option>
<option defaultValue="PAYPAL">💰 PayPal</option>
<option defaultValue="CARD">💳 Банковская карта</option>
</select>
</div>
<button className="btn-success">💸 Заказать выплату</button>
</div>
</div>
<h4 className="mt-[30px]">📊 История выплат</h4>
<div className="stats-grid">
<div className="stats-item left-top-corner stats-header">
Сумма
</div>
<div className="stats-item stats-header">
Способ
</div>
<div className="stats-item stats-header">
Статус
</div>
<div className="stats-item stats-header">
Дата запроса
</div>
<div className="stats-item last-column right-top-corner stats-header">
Обработано
</div>
<div className="stats-item first-column second-row">
100.00
</div>
<div className="stats-item second-row">
0
</div>
<div className="stats-item second-row">
0
</div>
<div className="stats-item second-row">
0
</div>
<div className="stats-item second-row last-column">
0
</div>
<div className="stats-item first-column">
100.00
</div>
<div className="stats-item">
0
</div>
<div className="stats-item">
0
</div>
<div className="stats-item">
0
</div>
<div className="stats-item last-column">
0
</div>
<div className="stats-item last-row left-bottom-corner first-column">
100.00
</div>
<div className="stats-item last-row">
0
</div>
<div className="stats-item last-row">
0
</div>
<div className="stats-item last-row">
0
</div>
<div className="stats-item last-row last-column right-bottom-corner">
0
</div>
</div>
</div>
)
}