small details
This commit is contained in:
parent
61ae2807de
commit
86c92a7c65
GPG key ID:
883EDBAA726BD96C
11 changed files with 328 additions and 184 deletions
|
|
@ -224,168 +224,212 @@ export default function AdminPricingPage() {
|
|||
isLoading={isLoading}
|
||||
isAuthorized={isAuthorized}
|
||||
error={displayError}
|
||||
contentStyle={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
padding: "2rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<div style={cardStyles.card}>
|
||||
<h1 style={cardStyles.title}>{t("pricing.title")}</h1>
|
||||
<p style={cardStyles.subtitle}>{t("pricing.subtitle")}</p>
|
||||
<div style={{ ...cardStyles.card, width: "100%", maxWidth: "1400px" }}>
|
||||
<h1 style={cardStyles.cardTitle}>{t("pricing.title")}</h1>
|
||||
<p style={cardStyles.cardSubtitle}>{t("pricing.subtitle")}</p>
|
||||
|
||||
{success && <div style={bannerStyles.success}>{t("pricing.success")}</div>}
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
setIsConfirming(true);
|
||||
}}
|
||||
>
|
||||
{/* Premium Settings - Full Width */}
|
||||
<div style={formStyles.section}>
|
||||
<h2 style={formStyles.sectionTitle}>{t("pricing.premiumSettings")}</h2>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, minmax(200px, 1fr))",
|
||||
gap: "1.5rem",
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.premiumBuy")} (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.premium_buy}
|
||||
onChange={(e) => handleFieldChange("premium_buy", e.target.value)}
|
||||
min={-100}
|
||||
max={100}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.premium_buy ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.premium_buy && <div style={formStyles.error}>{errors.premium_buy}</div>}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.premiumBuy")} (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.premium_buy}
|
||||
onChange={(e) => handleFieldChange("premium_buy", e.target.value)}
|
||||
min={-100}
|
||||
max={100}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.premium_buy ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.premium_buy && <div style={formStyles.error}>{errors.premium_buy}</div>}
|
||||
</div>
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.premiumSell")} (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.premium_sell}
|
||||
onChange={(e) => handleFieldChange("premium_sell", e.target.value)}
|
||||
min={-100}
|
||||
max={100}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.premium_sell ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.premium_sell && <div style={formStyles.error}>{errors.premium_sell}</div>}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.premiumSell")} (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.premium_sell}
|
||||
onChange={(e) => handleFieldChange("premium_sell", e.target.value)}
|
||||
min={-100}
|
||||
max={100}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.premium_sell ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.premium_sell && <div style={formStyles.error}>{errors.premium_sell}</div>}
|
||||
</div>
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.smallTradeThreshold")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.small_trade_threshold_eur / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange(
|
||||
"small_trade_threshold_eur",
|
||||
(parseFloat(e.target.value) * 100).toString()
|
||||
)
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.small_trade_threshold_eur ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.small_trade_threshold_eur && (
|
||||
<div style={formStyles.error}>{errors.small_trade_threshold_eur}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.smallTradeThreshold")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.small_trade_threshold_eur / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange(
|
||||
"small_trade_threshold_eur",
|
||||
(parseFloat(e.target.value) * 100).toString()
|
||||
)
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.small_trade_threshold_eur ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.small_trade_threshold_eur && (
|
||||
<div style={formStyles.error}>{errors.small_trade_threshold_eur}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.smallTradeExtraPremium")} (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.small_trade_extra_premium}
|
||||
onChange={(e) => handleFieldChange("small_trade_extra_premium", e.target.value)}
|
||||
min={-100}
|
||||
max={100}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.small_trade_extra_premium ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.small_trade_extra_premium && (
|
||||
<div style={formStyles.error}>{errors.small_trade_extra_premium}</div>
|
||||
)}
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.smallTradeExtraPremium")} (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.small_trade_extra_premium}
|
||||
onChange={(e) => handleFieldChange("small_trade_extra_premium", e.target.value)}
|
||||
min={-100}
|
||||
max={100}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.small_trade_extra_premium ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.small_trade_extra_premium && (
|
||||
<div style={formStyles.error}>{errors.small_trade_extra_premium}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={formStyles.section}>
|
||||
<h2 style={formStyles.sectionTitle}>{t("pricing.tradeLimitsBuy")}</h2>
|
||||
{/* Trade Limits - Side by Side */}
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, minmax(300px, 1fr))",
|
||||
gap: "2rem",
|
||||
marginBottom: "2rem",
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<div style={{ ...formStyles.section, marginBottom: 0 }}>
|
||||
<h2 style={formStyles.sectionTitle}>{t("pricing.tradeLimitsBuy")}</h2>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.minAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_min_buy / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_min_buy", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.eur_min_buy ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_min_buy && <div style={formStyles.error}>{errors.eur_min_buy}</div>}
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.minAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_min_buy / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_min_buy", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.eur_min_buy ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_min_buy && <div style={formStyles.error}>{errors.eur_min_buy}</div>}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.maxAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_max_buy / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_max_buy", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.eur_max_buy ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_max_buy && <div style={formStyles.error}>{errors.eur_max_buy}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.maxAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_max_buy / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_max_buy", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.eur_max_buy ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_max_buy && <div style={formStyles.error}>{errors.eur_max_buy}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...formStyles.section, marginBottom: 0 }}>
|
||||
<h2 style={formStyles.sectionTitle}>{t("pricing.tradeLimitsSell")}</h2>
|
||||
|
||||
<div style={formStyles.section}>
|
||||
<h2 style={formStyles.sectionTitle}>{t("pricing.tradeLimitsSell")}</h2>
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.minAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_min_sell / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_min_sell", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.eur_min_sell ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_min_sell && <div style={formStyles.error}>{errors.eur_min_sell}</div>}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.minAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_min_sell / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_min_sell", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.eur_min_sell ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_min_sell && <div style={formStyles.error}>{errors.eur_min_sell}</div>}
|
||||
</div>
|
||||
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.maxAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_max_sell / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_max_sell", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
...(errors.eur_max_sell ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_max_sell && <div style={formStyles.error}>{errors.eur_max_sell}</div>}
|
||||
<div style={formStyles.field}>
|
||||
<label style={formStyles.label}>{t("pricing.maxAmount")} (EUR)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.eur_max_sell / 100}
|
||||
onChange={(e) =>
|
||||
handleFieldChange("eur_max_sell", (parseFloat(e.target.value) * 100).toString())
|
||||
}
|
||||
min={1}
|
||||
style={{
|
||||
...formStyles.input,
|
||||
width: "100%",
|
||||
maxWidth: "180px",
|
||||
...(errors.eur_max_sell ? formStyles.inputError : {}),
|
||||
}}
|
||||
/>
|
||||
{errors.eur_max_sell && <div style={formStyles.error}>{errors.eur_max_sell}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue