From 6e7eb36f761532202e89b690d0e6b6876e5cef5e Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Fri, 6 Feb 2026 19:37:07 +0300
Subject: [PATCH] fix: standardize admin form inputs, validation, and sync with
 backend constraints

- Unified all inputs to use .input CSS class, consistent label styles, and btn-primary/btn-secondary buttons
- Fixed number inputs to use number | '' pattern allowing field clearing without default replacement
- Added field-level validation with inline error borders and messages
- Synced frontend constraints with backend Pydantic schemas (maxLength, min/max values)
- Fixed toggle switch dimensions across all admin forms
---
 src/pages/AdminBanSystem.tsx              |   6 +-
 src/pages/AdminCampaignCreate.tsx         |  24 +++-
 src/pages/AdminCampaignEdit.tsx           |  24 +++-
 src/pages/AdminEmailTemplates.tsx         |   8 +-
 src/pages/AdminPaymentMethodEdit.tsx      |  35 ++---
 src/pages/AdminPromoGroupCreate.tsx       |  60 ++++----
 src/pages/AdminPromoOfferSend.tsx         |  19 ++-
 src/pages/AdminPromoOfferTemplateEdit.tsx |  42 +++---
 src/pages/AdminPromocodeCreate.tsx        |  29 +---
 src/pages/AdminServerEdit.tsx             |  18 +--
 src/pages/AdminTicketSettings.tsx         | 113 +++++++++++----
 src/pages/AdminUserDetail.tsx             |  46 +++---
 src/pages/AdminWheel.tsx                  | 167 +++++++++++++++-------
 13 files changed, 364 insertions(+), 227 deletions(-)

diff --git a/src/pages/AdminBanSystem.tsx b/src/pages/AdminBanSystem.tsx
index 89f11d2..39932fc 100644
--- a/src/pages/AdminBanSystem.tsx
+++ b/src/pages/AdminBanSystem.tsx
@@ -675,7 +675,7 @@ export default function AdminBanSystem() {
                     onChange={(e) => setSearchQuery(e.target.value)}
                     onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                     placeholder={t('banSystem.users.searchPlaceholder')}
-                    className="w-full rounded-lg border border-dark-700 bg-dark-800 py-2 pl-10 pr-4 text-dark-100 placeholder-dark-500 focus:border-accent-500 focus:outline-none"
+                    className="input pl-10"
                   />
                 </div>
                 <button
@@ -1333,7 +1333,7 @@ export default function AdminBanSystem() {
                                 min={setting.min_value ?? undefined}
                                 max={setting.max_value ?? undefined}
                                 disabled={!setting.editable || settingLoading === setting.key}
-                                className="w-24 rounded-lg border border-dark-700 bg-dark-900 px-3 py-1.5 text-sm text-dark-100 focus:border-accent-500 focus:outline-none disabled:opacity-50"
+                                className="input w-24"
                               />
                             ) : setting.type === 'list' ? (
                               <div className="flex max-w-xs flex-wrap justify-end gap-1.5">
@@ -1353,7 +1353,7 @@ export default function AdminBanSystem() {
                                 )}
                                 {setting.editable && nodes && setting.key.includes('nodes') && (
                                   <select
-                                    className="rounded border border-dark-700 bg-dark-900 px-2 py-1 text-xs text-dark-300 focus:border-accent-500 focus:outline-none"
+                                    className="input py-1 text-xs"
                                     onChange={(e) => {
                                       if (e.target.value) {
                                         const currentList = Array.isArray(setting.value)
diff --git a/src/pages/AdminCampaignCreate.tsx b/src/pages/AdminCampaignCreate.tsx
index 5baf676..87c3bec 100644
--- a/src/pages/AdminCampaignCreate.tsx
+++ b/src/pages/AdminCampaignCreate.tsx
@@ -224,7 +224,10 @@ export default function AdminCampaignCreate() {
     createMutation.mutate(data);
   };
 
-  const isValid = name.trim() && startParameter.trim() && /^[a-zA-Z0-9_-]+$/.test(startParameter);
+  const isNameValid = name.trim().length > 0;
+  const isStartParamValid =
+    startParameter.trim().length > 0 && /^[a-zA-Z0-9_-]+$/.test(startParameter);
+  const isValid = isNameValid && isStartParamValid;
 
   return (
     <div className="space-y-6">
@@ -250,27 +253,36 @@ export default function AdminCampaignCreate() {
         <div>
           <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.campaigns.form.name')}
+            <span className="text-error-400">*</span>
           </label>
           <input
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="input"
+            className={`input ${name.length > 0 && !isNameValid ? 'border-error-500/50' : ''}`}
             placeholder={t('admin.campaigns.form.namePlaceholder')}
+            maxLength={255}
           />
+          {name.length > 0 && !isNameValid && (
+            <p className="mt-1 text-xs text-error-400">
+              {t('admin.campaigns.validation.nameRequired')}
+            </p>
+          )}
         </div>
 
         {/* Start Parameter */}
         <div>
           <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.campaigns.form.startParameter')}
+            <span className="text-error-400">*</span>
           </label>
           <input
             type="text"
             value={startParameter}
             onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
-            className="input font-mono"
+            className={`input font-mono ${startParameter.length > 0 && !isStartParamValid ? 'border-error-500/50' : ''}`}
             placeholder="instagram_jan2024"
+            maxLength={100}
           />
           <p className="mt-1 text-xs text-dark-500">
             {t('admin.campaigns.form.startParameterHint')}
@@ -354,7 +366,7 @@ export default function AdminCampaignCreate() {
 
           <div className="grid grid-cols-3 gap-4">
             <div>
-              <label className="mb-2 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.campaigns.form.days')}
               </label>
               <input
@@ -366,7 +378,7 @@ export default function AdminCampaignCreate() {
               />
             </div>
             <div>
-              <label className="mb-2 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.campaigns.form.trafficGb')}
               </label>
               <input
@@ -378,7 +390,7 @@ export default function AdminCampaignCreate() {
               />
             </div>
             <div>
-              <label className="mb-2 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.campaigns.form.devices')}
               </label>
               <input
diff --git a/src/pages/AdminCampaignEdit.tsx b/src/pages/AdminCampaignEdit.tsx
index ae9478c..3795b46 100644
--- a/src/pages/AdminCampaignEdit.tsx
+++ b/src/pages/AdminCampaignEdit.tsx
@@ -230,7 +230,10 @@ export default function AdminCampaignEdit() {
     updateMutation.mutate(data);
   };
 
-  const isValid = name.trim() && startParameter.trim() && /^[a-zA-Z0-9_-]+$/.test(startParameter);
+  const isNameValid = name.trim().length > 0;
+  const isStartParamValid =
+    startParameter.trim().length > 0 && /^[a-zA-Z0-9_-]+$/.test(startParameter);
+  const isValid = isNameValid && isStartParamValid;
 
   if (isLoading) {
     return (
@@ -286,27 +289,36 @@ export default function AdminCampaignEdit() {
         <div>
           <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.campaigns.form.name')}
+            <span className="text-error-400">*</span>
           </label>
           <input
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="input"
+            className={`input ${name.length > 0 && !isNameValid ? 'border-error-500/50' : ''}`}
             placeholder={t('admin.campaigns.form.namePlaceholder')}
+            maxLength={255}
           />
+          {name.length > 0 && !isNameValid && (
+            <p className="mt-1 text-xs text-error-400">
+              {t('admin.campaigns.validation.nameRequired')}
+            </p>
+          )}
         </div>
 
         {/* Start Parameter */}
         <div>
           <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.campaigns.form.startParameter')}
+            <span className="text-error-400">*</span>
           </label>
           <input
             type="text"
             value={startParameter}
             onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
-            className="input font-mono"
+            className={`input font-mono ${startParameter.length > 0 && !isStartParamValid ? 'border-error-500/50' : ''}`}
             placeholder="instagram_jan2024"
+            maxLength={100}
           />
           <p className="mt-1 text-xs text-dark-500">
             {t('admin.campaigns.form.startParameterHint')}
@@ -390,7 +402,7 @@ export default function AdminCampaignEdit() {
 
           <div className="grid grid-cols-3 gap-4">
             <div>
-              <label className="mb-2 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.campaigns.form.days')}
               </label>
               <input
@@ -402,7 +414,7 @@ export default function AdminCampaignEdit() {
               />
             </div>
             <div>
-              <label className="mb-2 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.campaigns.form.trafficGb')}
               </label>
               <input
@@ -414,7 +426,7 @@ export default function AdminCampaignEdit() {
               />
             </div>
             <div>
-              <label className="mb-2 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.campaigns.form.devices')}
               </label>
               <input
diff --git a/src/pages/AdminEmailTemplates.tsx b/src/pages/AdminEmailTemplates.tsx
index 792745a..360a075 100644
--- a/src/pages/AdminEmailTemplates.tsx
+++ b/src/pages/AdminEmailTemplates.tsx
@@ -334,14 +334,14 @@ function TemplateEditor({
 
       {/* Subject */}
       <div>
-        <label className="mb-1.5 block text-xs font-medium text-dark-300">
+        <label className="mb-2 block text-sm font-medium text-dark-300">
           {t('admin.emailTemplates.subject')}
         </label>
         <input
           type="text"
           value={editSubject}
           onChange={(e) => handleSubjectChange(e.target.value)}
-          className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2.5 text-sm text-dark-100 placeholder-dark-500 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500"
+          className="input"
           placeholder={t('admin.emailTemplates.subjectPlaceholder')}
         />
       </div>
@@ -372,7 +372,7 @@ function TemplateEditor({
 
       {/* Body HTML editor */}
       <div>
-        <label className="mb-1.5 block text-xs font-medium text-dark-300">
+        <label className="mb-2 block text-sm font-medium text-dark-300">
           {t('admin.emailTemplates.body')}
         </label>
         <textarea
@@ -380,7 +380,7 @@ function TemplateEditor({
           value={editBody}
           onChange={(e) => handleBodyChange(e.target.value)}
           rows={12}
-          className="min-h-[200px] w-full resize-y rounded-lg border border-dark-600 bg-dark-900 px-3 py-2.5 font-mono text-xs leading-relaxed text-dark-100 placeholder-dark-500 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 sm:min-h-[300px] sm:text-sm"
+          className="input min-h-[200px] resize-y font-mono text-xs leading-relaxed sm:min-h-[300px] sm:text-sm"
           placeholder="<h2>Title</h2><p>Content...</p>"
           spellCheck={false}
         />
diff --git a/src/pages/AdminPaymentMethodEdit.tsx b/src/pages/AdminPaymentMethodEdit.tsx
index fd49d8b..b1e3622 100644
--- a/src/pages/AdminPaymentMethodEdit.tsx
+++ b/src/pages/AdminPaymentMethodEdit.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
 import type { PromoGroupSimple } from '../types';
 import { usePlatform } from '../platform/hooks/usePlatform';
+import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
 
 const BackIcon = () => (
   <svg
@@ -89,8 +90,8 @@ export default function AdminPaymentMethodEdit() {
   const [isEnabled, setIsEnabled] = useState(false);
   const [customName, setCustomName] = useState('');
   const [subOptions, setSubOptions] = useState<Record<string, boolean>>({});
-  const [minAmount, setMinAmount] = useState('');
-  const [maxAmount, setMaxAmount] = useState('');
+  const [minAmount, setMinAmount] = useState<number | ''>('');
+  const [maxAmount, setMaxAmount] = useState<number | ''>('');
   const [userTypeFilter, setUserTypeFilter] = useState<'all' | 'telegram' | 'email'>('all');
   const [firstTopupFilter, setFirstTopupFilter] = useState<'any' | 'yes' | 'no'>('any');
   const [promoGroupFilterMode, setPromoGroupFilterMode] = useState<'all' | 'selected'>('all');
@@ -102,8 +103,8 @@ export default function AdminPaymentMethodEdit() {
       setIsEnabled(config.is_enabled);
       setCustomName(config.display_name || '');
       setSubOptions(config.sub_options || {});
-      setMinAmount(config.min_amount_kopeks?.toString() || '');
-      setMaxAmount(config.max_amount_kopeks?.toString() || '');
+      setMinAmount(config.min_amount_kopeks ?? '');
+      setMaxAmount(config.max_amount_kopeks ?? '');
       setUserTypeFilter(config.user_type_filter);
       setFirstTopupFilter(config.first_topup_filter);
       setPromoGroupFilterMode(config.promo_group_filter_mode);
@@ -144,13 +145,13 @@ export default function AdminPaymentMethodEdit() {
     }
 
     // Amounts
-    if (minAmount.trim()) {
-      data.min_amount_kopeks = parseInt(minAmount, 10) || null;
+    if (minAmount !== '') {
+      data.min_amount_kopeks = toNumber(minAmount) || null;
     } else {
       data.reset_min_amount = true;
     }
-    if (maxAmount.trim()) {
-      data.max_amount_kopeks = parseInt(maxAmount, 10) || null;
+    if (maxAmount !== '') {
+      data.max_amount_kopeks = toNumber(maxAmount) || null;
     } else {
       data.reset_max_amount = true;
     }
@@ -236,13 +237,13 @@ export default function AdminPaymentMethodEdit() {
           </div>
           <button
             onClick={() => setIsEnabled(!isEnabled)}
-            className={`relative h-7 w-12 rounded-full transition-colors ${
+            className={`relative h-6 w-11 rounded-full transition-colors ${
               isEnabled ? 'bg-accent-500' : 'bg-dark-600'
             }`}
           >
             <span
-              className={`absolute top-0.5 h-6 w-6 rounded-full bg-white shadow transition-transform ${
-                isEnabled ? 'left-[calc(100%-1.625rem)]' : 'left-0.5'
+              className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
+                isEnabled ? 'left-6' : 'left-1'
               }`}
             />
           </button>
@@ -250,7 +251,7 @@ export default function AdminPaymentMethodEdit() {
 
         {/* Display name */}
         <div>
-          <label className="mb-2 block text-sm font-medium text-dark-200">
+          <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.paymentMethods.displayName')}
           </label>
           <input
@@ -268,7 +269,7 @@ export default function AdminPaymentMethodEdit() {
         {/* Sub-options */}
         {config.available_sub_options && config.available_sub_options.length > 0 && (
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-200">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.paymentMethods.subOptions')}
             </label>
             <div className="space-y-2">
@@ -302,25 +303,25 @@ export default function AdminPaymentMethodEdit() {
         {/* Min/Max amounts */}
         <div className="grid grid-cols-2 gap-3">
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-200">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.paymentMethods.minAmount')}
             </label>
             <input
               type="number"
               value={minAmount}
-              onChange={(e) => setMinAmount(e.target.value)}
+              onChange={createNumberInputHandler(setMinAmount, 0)}
               placeholder={config.default_min_amount_kopeks.toString()}
               className="input"
             />
           </div>
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-200">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.paymentMethods.maxAmount')}
             </label>
             <input
               type="number"
               value={maxAmount}
-              onChange={(e) => setMaxAmount(e.target.value)}
+              onChange={createNumberInputHandler(setMaxAmount, 0)}
               placeholder={config.default_max_amount_kopeks.toString()}
               className="input"
             />
diff --git a/src/pages/AdminPromoGroupCreate.tsx b/src/pages/AdminPromoGroupCreate.tsx
index 3120b24..a10a793 100644
--- a/src/pages/AdminPromoGroupCreate.tsx
+++ b/src/pages/AdminPromoGroupCreate.tsx
@@ -44,8 +44,8 @@ const RefreshIcon = () => (
 );
 
 interface PeriodDiscount {
-  days: number;
-  percent: number;
+  days: number | '';
+  percent: number | '';
 }
 
 export default function AdminPromoGroupCreate() {
@@ -121,18 +121,20 @@ export default function AdminPromoGroupCreate() {
     setPeriodDiscounts(periodDiscounts.filter((_, i) => i !== index));
   };
 
-  const updatePeriodDiscount = (index: number, field: 'days' | 'percent', value: number) => {
-    const updated = [...periodDiscounts];
-    updated[index][field] = value;
-    setPeriodDiscounts(updated);
+  const updatePeriodDiscount = (index: number, field: 'days' | 'percent', value: number | '') => {
+    setPeriodDiscounts(
+      periodDiscounts.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
+    );
   };
 
   const handleSubmit = () => {
     // Convert periodDiscounts array to Record<number, number>
     const periodDiscountsRecord: Record<number, number> = {};
     periodDiscounts.forEach((pd) => {
-      if (pd.days > 0 && pd.percent > 0) {
-        periodDiscountsRecord[pd.days] = pd.percent;
+      const days = pd.days === '' ? 0 : pd.days;
+      const percent = pd.percent === '' ? 0 : pd.percent;
+      if (days > 0 && percent > 0) {
+        periodDiscountsRecord[days] = percent;
       }
     });
 
@@ -196,9 +198,14 @@ export default function AdminPromoGroupCreate() {
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="input"
+            className={`input ${name.length > 0 && name.trim().length === 0 ? 'border-error-500/50' : ''}`}
             placeholder={t('admin.promoGroups.form.namePlaceholder')}
           />
+          {name.length > 0 && name.trim().length === 0 && (
+            <p className="mt-1 text-xs text-error-400">
+              {t('admin.promoGroups.form.nameRequired')}
+            </p>
+          )}
         </div>
 
         {/* Category Discounts */}
@@ -299,13 +306,12 @@ export default function AdminPromoGroupCreate() {
                   <input
                     type="number"
                     value={pd.days}
-                    onChange={(e) =>
-                      updatePeriodDiscount(
-                        index,
-                        'days',
-                        Math.max(1, parseInt(e.target.value) || 1),
-                      )
-                    }
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      if (val === '') return updatePeriodDiscount(index, 'days', '');
+                      const num = parseInt(val);
+                      if (!isNaN(num)) updatePeriodDiscount(index, 'days', num);
+                    }}
                     className="input w-20"
                     min={1}
                     placeholder={t('admin.promoGroups.form.daysPlaceholder')}
@@ -314,13 +320,12 @@ export default function AdminPromoGroupCreate() {
                   <input
                     type="number"
                     value={pd.percent}
-                    onChange={(e) =>
-                      updatePeriodDiscount(
-                        index,
-                        'percent',
-                        Math.min(100, Math.max(0, parseInt(e.target.value) || 0)),
-                      )
-                    }
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      if (val === '') return updatePeriodDiscount(index, 'percent', '');
+                      const num = parseInt(val);
+                      if (!isNaN(num)) updatePeriodDiscount(index, 'percent', num);
+                    }}
                     className="input w-20"
                     min={0}
                     max={100}
@@ -371,13 +376,13 @@ export default function AdminPromoGroupCreate() {
           <button
             type="button"
             onClick={() => setApplyToAddons(!applyToAddons)}
-            className={`relative h-6 w-10 rounded-full transition-colors ${
+            className={`relative h-6 w-11 rounded-full transition-colors ${
               applyToAddons ? 'bg-accent-500' : 'bg-dark-600'
             }`}
           >
             <span
               className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
-                applyToAddons ? 'left-5' : 'left-1'
+                applyToAddons ? 'left-6' : 'left-1'
               }`}
             />
           </button>
@@ -388,10 +393,7 @@ export default function AdminPromoGroupCreate() {
       {/* Footer */}
       <div className="card">
         <div className="flex justify-end gap-3">
-          <button
-            onClick={() => navigate('/admin/promo-groups')}
-            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-          >
+          <button onClick={() => navigate('/admin/promo-groups')} className="btn-secondary">
             {t('admin.promoGroups.form.cancel')}
           </button>
           <button
diff --git a/src/pages/AdminPromoOfferSend.tsx b/src/pages/AdminPromoOfferSend.tsx
index ddb2f55..8c78eca 100644
--- a/src/pages/AdminPromoOfferSend.tsx
+++ b/src/pages/AdminPromoOfferSend.tsx
@@ -300,8 +300,9 @@ export default function AdminPromoOfferSend() {
         <div className="mx-auto max-w-2xl space-y-6">
           {/* Template Selection */}
           <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
-            <label className="mb-3 block text-sm font-medium text-dark-200">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.promoOffers.send.offerTemplate')}
+              <span className="text-error-400">*</span>
             </label>
             <div className="space-y-2">
               {activeTemplates.map((template) => (
@@ -344,8 +345,9 @@ export default function AdminPromoOfferSend() {
 
           {/* Send Mode */}
           <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
-            <label className="mb-3 block text-sm font-medium text-dark-200">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.promoOffers.send.sendTo')}
+              <span className="text-error-400">*</span>
             </label>
             <div className="mb-4 flex gap-2">
               <button
@@ -376,7 +378,7 @@ export default function AdminPromoOfferSend() {
               <select
                 value={selectedTarget}
                 onChange={(e) => setSelectedTarget(e.target.value as TargetSegment)}
-                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2.5 text-dark-100 focus:border-accent-500 focus:outline-none"
+                className="input"
               >
                 {Object.entries(TARGET_SEGMENTS).map(([key, labelKey]) => (
                   <option key={key} value={key}>
@@ -428,7 +430,7 @@ export default function AdminPromoOfferSend() {
                         }}
                         onFocus={() => setShowDropdown(true)}
                         placeholder={t('admin.promoOffers.send.searchUserPlaceholder')}
-                        className="w-full rounded-lg border border-dark-600 bg-dark-700 py-2.5 pl-10 pr-3 text-dark-100 focus:border-accent-500 focus:outline-none"
+                        className="input pl-10"
                       />
                       {isSearching && (
                         <div className="absolute right-3 top-1/2 -translate-y-1/2">
@@ -482,7 +484,7 @@ export default function AdminPromoOfferSend() {
           {/* Preview */}
           {selectedTemplate && (
             <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
-              <h4 className="mb-3 text-sm font-medium text-dark-200">
+              <h4 className="mb-2 text-sm font-medium text-dark-300">
                 {t('admin.promoOffers.send.preview')}
               </h4>
               <div className="rounded-lg bg-dark-700/50 p-4">
@@ -500,16 +502,13 @@ export default function AdminPromoOfferSend() {
 
           {/* Actions */}
           <div className="flex justify-end gap-3">
-            <button
-              onClick={() => navigate('/admin/promo-offers')}
-              className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-            >
+            <button onClick={() => navigate('/admin/promo-offers')} className="btn-secondary">
               {t('common.cancel')}
             </button>
             <button
               onClick={handleSubmit}
               disabled={!isValid() || broadcastMutation.isPending}
-              className="flex items-center gap-2 rounded-lg bg-accent-500 px-6 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+              className="btn-primary flex items-center gap-2"
             >
               <SendIcon />
               {broadcastMutation.isPending
diff --git a/src/pages/AdminPromoOfferTemplateEdit.tsx b/src/pages/AdminPromoOfferTemplateEdit.tsx
index f90d0b4..21c7c0b 100644
--- a/src/pages/AdminPromoOfferTemplateEdit.tsx
+++ b/src/pages/AdminPromoOfferTemplateEdit.tsx
@@ -126,51 +126,54 @@ export default function AdminPromoOfferTemplateEdit() {
         <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm text-dark-300">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.promoOffers.form.templateName')}
+                <span className="text-error-400">*</span>
               </label>
               <input
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                className={`input ${name.length > 0 && !name.trim() ? 'border-error-500/50' : ''}`}
               />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-dark-300">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.promoOffers.form.messageText')}
+                <span className="text-error-400">*</span>
               </label>
               <textarea
                 value={messageText}
                 onChange={(e) => setMessageText(e.target.value)}
                 rows={4}
-                className="w-full resize-none rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                className={`input resize-none ${messageText.length > 0 && !messageText.trim() ? 'border-error-500/50' : ''}`}
               />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-dark-300">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.promoOffers.form.buttonText')}
+                <span className="text-error-400">*</span>
               </label>
               <input
                 type="text"
                 value={buttonText}
                 onChange={(e) => setButtonText(e.target.value)}
-                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                className={`input ${buttonText.length > 0 && !buttonText.trim() ? 'border-error-500/50' : ''}`}
               />
             </div>
 
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <div>
-                <label className="mb-1 block text-sm text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.promoOffers.form.validHours')}
                 </label>
                 <input
                   type="number"
                   value={validHours}
                   onChange={createNumberInputHandler(setValidHours, 1)}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                  className="input"
                   min={1}
                   placeholder="0"
                 />
@@ -181,14 +184,14 @@ export default function AdminPromoOfferTemplateEdit() {
 
               {!isTestAccess && (
                 <div>
-                  <label className="mb-1 block text-sm text-dark-300">
+                  <label className="mb-2 block text-sm font-medium text-dark-300">
                     {t('admin.promoOffers.form.discountPercent')}
                   </label>
                   <input
                     type="number"
                     value={discountPercent}
                     onChange={createNumberInputHandler(setDiscountPercent, 0, 100)}
-                    className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                    className="input"
                     min={0}
                     max={100}
                     placeholder="0"
@@ -199,14 +202,14 @@ export default function AdminPromoOfferTemplateEdit() {
 
             {isTestAccess ? (
               <div>
-                <label className="mb-1 block text-sm text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.promoOffers.form.testDurationHours')}
                 </label>
                 <input
                   type="number"
                   value={testDurationHours}
                   onChange={createNumberInputHandler(setTestDurationHours, 0)}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                  className="input"
                   min={0}
                   placeholder="0"
                 />
@@ -216,14 +219,14 @@ export default function AdminPromoOfferTemplateEdit() {
               </div>
             ) : (
               <div>
-                <label className="mb-1 block text-sm text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.promoOffers.form.activeDiscountHours')}
                 </label>
                 <input
                   type="number"
                   value={activeDiscountHours}
                   onChange={createNumberInputHandler(setActiveDiscountHours, 0)}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+                  className="input"
                   min={0}
                   placeholder="0"
                 />
@@ -237,13 +240,13 @@ export default function AdminPromoOfferTemplateEdit() {
               <button
                 type="button"
                 onClick={() => setIsActive(!isActive)}
-                className={`relative h-6 w-10 rounded-full transition-colors ${
+                className={`relative h-6 w-11 rounded-full transition-colors ${
                   isActive ? 'bg-accent-500' : 'bg-dark-600'
                 }`}
               >
                 <span
                   className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
-                    isActive ? 'left-5' : 'left-1'
+                    isActive ? 'left-6' : 'left-1'
                   }`}
                 />
               </button>
@@ -256,16 +259,13 @@ export default function AdminPromoOfferTemplateEdit() {
 
         {/* Actions */}
         <div className="flex justify-end gap-3">
-          <button
-            onClick={() => navigate('/admin/promo-offers')}
-            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-          >
+          <button onClick={() => navigate('/admin/promo-offers')} className="btn-secondary">
             {t('common.cancel')}
           </button>
           <button
             onClick={handleSubmit}
             disabled={!name.trim() || updateMutation.isPending}
-            className="rounded-lg bg-accent-500 px-6 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+            className="btn-primary"
           >
             {updateMutation.isPending ? t('admin.promoOffers.form.saving') : t('common.save')}
           </button>
diff --git a/src/pages/AdminPromocodeCreate.tsx b/src/pages/AdminPromocodeCreate.tsx
index dfea764..280b67b 100644
--- a/src/pages/AdminPromocodeCreate.tsx
+++ b/src/pages/AdminPromocodeCreate.tsx
@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
+import { createNumberInputHandler } from '../utils/inputHelpers';
 import {
   promocodesApi,
   PromoCodeDetail,
@@ -232,6 +233,7 @@ export default function AdminPromocodeCreate() {
             onChange={(e) => setCode(e.target.value.toUpperCase())}
             className={`input uppercase ${!isCodeValid && code.length > 0 ? 'border-error-500/50' : ''}`}
             placeholder="SUMMER2025"
+            maxLength={50}
           />
         </div>
 
@@ -268,14 +270,7 @@ export default function AdminPromocodeCreate() {
               <input
                 type="number"
                 value={balanceBonusRubles}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (val === '') {
-                    setBalanceBonusRubles('');
-                  } else {
-                    setBalanceBonusRubles(Math.max(0, parseFloat(val) || 0));
-                  }
-                }}
+                onChange={createNumberInputHandler(setBalanceBonusRubles, 0)}
                 className="input w-32"
                 min={0}
                 step={1}
@@ -296,14 +291,7 @@ export default function AdminPromocodeCreate() {
               <input
                 type="number"
                 value={subscriptionDays}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (val === '') {
-                    setSubscriptionDays('');
-                  } else {
-                    setSubscriptionDays(Math.max(0, parseInt(val) || 0));
-                  }
-                }}
+                onChange={createNumberInputHandler(setSubscriptionDays, 0)}
                 className="input w-32"
                 min={1}
                 placeholder="0"
@@ -403,14 +391,7 @@ export default function AdminPromocodeCreate() {
             <input
               type="number"
               value={maxUses}
-              onChange={(e) => {
-                const val = e.target.value;
-                if (val === '') {
-                  setMaxUses('');
-                } else {
-                  setMaxUses(Math.max(0, parseInt(val) || 0));
-                }
-              }}
+              onChange={createNumberInputHandler(setMaxUses, 0)}
               className="input w-32"
               min={0}
               placeholder="0"
diff --git a/src/pages/AdminServerEdit.tsx b/src/pages/AdminServerEdit.tsx
index c40f91e..797cbbf 100644
--- a/src/pages/AdminServerEdit.tsx
+++ b/src/pages/AdminServerEdit.tsx
@@ -152,7 +152,7 @@ export default function AdminServerEdit() {
 
           {/* Original Name (readonly) */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.originalName')}
             </label>
             <div className="rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-2 text-dark-400">
@@ -162,21 +162,23 @@ export default function AdminServerEdit() {
 
           {/* Display Name */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.displayName')}
+              <span className="text-error-400">*</span>
             </label>
             <input
               type="text"
               value={displayName}
               onChange={(e) => setDisplayName(e.target.value)}
-              className="input"
+              className={`input ${displayName.length > 0 && !displayName.trim() ? 'border-error-500/50' : ''}`}
               placeholder={t('admin.servers.displayNamePlaceholder')}
+              maxLength={255}
             />
           </div>
 
           {/* Description */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.description')}
             </label>
             <textarea
@@ -190,7 +192,7 @@ export default function AdminServerEdit() {
 
           {/* Country Code */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.countryCode')}
             </label>
             <div className="flex items-center gap-2">
@@ -215,7 +217,7 @@ export default function AdminServerEdit() {
 
           {/* Price */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.price')}
             </label>
             <div className="flex items-center gap-2">
@@ -241,7 +243,7 @@ export default function AdminServerEdit() {
 
           {/* Max Users */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.maxUsers')}
             </label>
             <div className="flex items-center gap-2">
@@ -263,7 +265,7 @@ export default function AdminServerEdit() {
 
           {/* Sort Order */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.sortOrder')}
             </label>
             <input
diff --git a/src/pages/AdminTicketSettings.tsx b/src/pages/AdminTicketSettings.tsx
index c51d957..f69c44f 100644
--- a/src/pages/AdminTicketSettings.tsx
+++ b/src/pages/AdminTicketSettings.tsx
@@ -4,6 +4,9 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { adminApi } from '../api/admin';
 import { AdminBackButton } from '../components/admin';
+import { toNumber } from '../utils/inputHelpers';
+
+type NumberOrEmpty = number | '';
 
 const SettingsIcon = () => (
   <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -30,7 +33,15 @@ export default function AdminTicketSettings() {
     queryFn: adminApi.getTicketSettings,
   });
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<{
+    sla_enabled: boolean;
+    sla_minutes: NumberOrEmpty;
+    sla_check_interval_seconds: NumberOrEmpty;
+    sla_reminder_cooldown_minutes: NumberOrEmpty;
+    support_system_mode: string;
+    cabinet_user_notifications_enabled: boolean;
+    cabinet_admin_notifications_enabled: boolean;
+  }>({
     sla_enabled: true,
     sla_minutes: 5,
     sla_check_interval_seconds: 60,
@@ -62,9 +73,29 @@ export default function AdminTicketSettings() {
     },
   });
 
+  // Validation
+  const isSlaMinutesValid =
+    formData.sla_minutes !== '' && formData.sla_minutes >= 1 && formData.sla_minutes <= 1440;
+  const isCheckIntervalValid =
+    formData.sla_check_interval_seconds !== '' &&
+    formData.sla_check_interval_seconds >= 30 &&
+    formData.sla_check_interval_seconds <= 600;
+  const isReminderCooldownValid =
+    formData.sla_reminder_cooldown_minutes !== '' &&
+    formData.sla_reminder_cooldown_minutes >= 1 &&
+    formData.sla_reminder_cooldown_minutes <= 120;
+  const isValid =
+    !formData.sla_enabled || (isSlaMinutesValid && isCheckIntervalValid && isReminderCooldownValid);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    updateMutation.mutate(formData);
+    if (!isValid) return;
+    updateMutation.mutate({
+      ...formData,
+      sla_minutes: toNumber(formData.sla_minutes, 5),
+      sla_check_interval_seconds: toNumber(formData.sla_check_interval_seconds, 60),
+      sla_reminder_cooldown_minutes: toNumber(formData.sla_reminder_cooldown_minutes, 15),
+    });
   };
 
   if (isLoading) {
@@ -208,59 +239,87 @@ export default function AdminTicketSettings() {
 
           {/* SLA Minutes */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.tickets.slaMinutes')}
             </label>
             <input
               type="number"
-              min="1"
-              max="1440"
+              min={1}
+              max={1440}
               value={formData.sla_minutes}
-              onChange={(e) => setFormData({ ...formData, sla_minutes: parseInt(e.target.value) })}
-              className="input"
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === '') return setFormData({ ...formData, sla_minutes: '' });
+                const num = parseInt(val);
+                if (!isNaN(num)) setFormData({ ...formData, sla_minutes: num });
+              }}
+              className={`input ${formData.sla_enabled && !isSlaMinutesValid && formData.sla_minutes !== '' ? 'border-error-500/50' : ''}`}
               disabled={!formData.sla_enabled}
             />
+            {formData.sla_enabled && formData.sla_minutes !== '' && !isSlaMinutesValid && (
+              <p className="mt-1 text-xs text-error-400">
+                {t('admin.tickets.validation.slaMinutesRange')}
+              </p>
+            )}
             <p className="mt-1 text-xs text-dark-500">{t('admin.tickets.slaMinutesDesc')}</p>
           </div>
 
           {/* Check Interval */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.tickets.checkInterval')}
             </label>
             <input
               type="number"
-              min="30"
-              max="600"
+              min={30}
+              max={600}
               value={formData.sla_check_interval_seconds}
-              onChange={(e) =>
-                setFormData({ ...formData, sla_check_interval_seconds: parseInt(e.target.value) })
-              }
-              className="input"
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === '') return setFormData({ ...formData, sla_check_interval_seconds: '' });
+                const num = parseInt(val);
+                if (!isNaN(num)) setFormData({ ...formData, sla_check_interval_seconds: num });
+              }}
+              className={`input ${formData.sla_enabled && !isCheckIntervalValid && formData.sla_check_interval_seconds !== '' ? 'border-error-500/50' : ''}`}
               disabled={!formData.sla_enabled}
             />
+            {formData.sla_enabled &&
+              formData.sla_check_interval_seconds !== '' &&
+              !isCheckIntervalValid && (
+                <p className="mt-1 text-xs text-error-400">
+                  {t('admin.tickets.validation.checkIntervalRange')}
+                </p>
+              )}
             <p className="mt-1 text-xs text-dark-500">{t('admin.tickets.checkIntervalDesc')}</p>
           </div>
 
           {/* Reminder Cooldown */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-100">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.tickets.reminderCooldown')}
             </label>
             <input
               type="number"
-              min="1"
-              max="120"
+              min={1}
+              max={120}
               value={formData.sla_reminder_cooldown_minutes}
-              onChange={(e) =>
-                setFormData({
-                  ...formData,
-                  sla_reminder_cooldown_minutes: parseInt(e.target.value),
-                })
-              }
-              className="input"
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === '')
+                  return setFormData({ ...formData, sla_reminder_cooldown_minutes: '' });
+                const num = parseInt(val);
+                if (!isNaN(num)) setFormData({ ...formData, sla_reminder_cooldown_minutes: num });
+              }}
+              className={`input ${formData.sla_enabled && !isReminderCooldownValid && formData.sla_reminder_cooldown_minutes !== '' ? 'border-error-500/50' : ''}`}
               disabled={!formData.sla_enabled}
             />
+            {formData.sla_enabled &&
+              formData.sla_reminder_cooldown_minutes !== '' &&
+              !isReminderCooldownValid && (
+                <p className="mt-1 text-xs text-error-400">
+                  {t('admin.tickets.validation.reminderCooldownRange')}
+                </p>
+              )}
             <p className="mt-1 text-xs text-dark-500">{t('admin.tickets.reminderCooldownDesc')}</p>
           </div>
         </div>
@@ -274,7 +333,11 @@ export default function AdminTicketSettings() {
           >
             {t('common.cancel')}
           </button>
-          <button type="submit" disabled={updateMutation.isPending} className="btn-primary">
+          <button
+            type="submit"
+            disabled={!isValid || updateMutation.isPending}
+            className="btn-primary"
+          >
             {updateMutation.isPending ? (
               <span className="flex items-center gap-2">
                 <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
diff --git a/src/pages/AdminUserDetail.tsx b/src/pages/AdminUserDetail.tsx
index 9153ff2..40c2c67 100644
--- a/src/pages/AdminUserDetail.tsx
+++ b/src/pages/AdminUserDetail.tsx
@@ -11,6 +11,7 @@ import {
   type UpdateSubscriptionRequest,
 } from '../api/adminUsers';
 import { AdminBackButton } from '../components/admin';
+import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
 
 // ============ Icons ============
 
@@ -92,12 +93,12 @@ export default function AdminUserDetail() {
   const [actionLoading, setActionLoading] = useState(false);
 
   // Balance form
-  const [balanceAmount, setBalanceAmount] = useState('');
+  const [balanceAmount, setBalanceAmount] = useState<number | ''>('');
   const [balanceDescription, setBalanceDescription] = useState('');
 
   // Subscription form
   const [subAction, setSubAction] = useState<string>('extend');
-  const [subDays, setSubDays] = useState('30');
+  const [subDays, setSubDays] = useState<number | ''>(30);
   const [selectedTariffId, setSelectedTariffId] = useState<number | null>(null);
 
   const userId = id ? parseInt(id, 10) : null;
@@ -150,10 +151,10 @@ export default function AdminUserDetail() {
   }, [activeTab, loadSyncStatus, loadTariffs]);
 
   const handleUpdateBalance = async (isAdd: boolean) => {
-    if (!balanceAmount || !userId) return;
+    if (balanceAmount === '' || !userId) return;
     setActionLoading(true);
     try {
-      const amount = Math.abs(parseFloat(balanceAmount) * 100);
+      const amount = Math.abs(toNumber(balanceAmount) * 100);
       await adminUsersApi.updateBalance(userId, {
         amount_kopeks: isAdd ? amount : -amount,
         description:
@@ -178,13 +179,13 @@ export default function AdminUserDetail() {
     try {
       const data: UpdateSubscriptionRequest = {
         action: subAction as UpdateSubscriptionRequest['action'],
-        ...(subAction === 'extend' ? { days: parseInt(subDays) } : {}),
+        ...(subAction === 'extend' ? { days: toNumber(subDays, 30) } : {}),
         ...(subAction === 'change_tariff' && selectedTariffId
           ? { tariff_id: selectedTariffId }
           : {}),
         ...(subAction === 'create'
           ? {
-              days: parseInt(subDays),
+              days: toNumber(subDays, 30),
               ...(selectedTariffId ? { tariff_id: selectedTariffId } : {}),
             }
           : {}),
@@ -517,7 +518,7 @@ export default function AdminUserDetail() {
                     <select
                       value={subAction}
                       onChange={(e) => setSubAction(e.target.value)}
-                      className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                      className="input"
                     >
                       <option value="extend">{t('admin.users.detail.subscription.extend')}</option>
                       <option value="change_tariff">
@@ -533,9 +534,11 @@ export default function AdminUserDetail() {
                       <input
                         type="number"
                         value={subDays}
-                        onChange={(e) => setSubDays(e.target.value)}
+                        onChange={createNumberInputHandler(setSubDays, 1)}
                         placeholder={t('admin.users.detail.subscription.days')}
-                        className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                        className="input"
+                        min={1}
+                        max={3650}
                       />
                     )}
 
@@ -545,7 +548,7 @@ export default function AdminUserDetail() {
                         onChange={(e) =>
                           setSelectedTariffId(e.target.value ? parseInt(e.target.value) : null)
                         }
-                        className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                        className="input"
                       >
                         <option value="">
                           {t('admin.users.detail.subscription.selectTariff')}
@@ -563,7 +566,7 @@ export default function AdminUserDetail() {
                     <button
                       onClick={handleUpdateSubscription}
                       disabled={actionLoading}
-                      className="w-full rounded-lg bg-accent-500 py-2 text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+                      className="btn-primary w-full"
                     >
                       {actionLoading
                         ? t('admin.users.actions.applying')
@@ -583,7 +586,7 @@ export default function AdminUserDetail() {
                     onChange={(e) =>
                       setSelectedTariffId(e.target.value ? parseInt(e.target.value) : null)
                     }
-                    className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                    className="input"
                   >
                     <option value="">{t('admin.users.detail.subscription.selectTariff')}</option>
                     {tariffs.map((tariffItem) => (
@@ -595,9 +598,11 @@ export default function AdminUserDetail() {
                   <input
                     type="number"
                     value={subDays}
-                    onChange={(e) => setSubDays(e.target.value)}
+                    onChange={createNumberInputHandler(setSubDays, 1)}
                     placeholder={t('admin.users.detail.subscription.days')}
-                    className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                    className="input"
+                    min={1}
+                    max={3650}
                   />
                   <button
                     onClick={() => {
@@ -605,7 +610,7 @@ export default function AdminUserDetail() {
                       handleUpdateSubscription();
                     }}
                     disabled={actionLoading}
-                    className="w-full rounded-lg bg-success-500 py-2 text-white transition-colors hover:bg-success-600 disabled:opacity-50"
+                    className="btn-primary w-full"
                   >
                     {actionLoading
                       ? t('admin.users.detail.subscription.creating')
@@ -635,28 +640,29 @@ export default function AdminUserDetail() {
               <input
                 type="number"
                 value={balanceAmount}
-                onChange={(e) => setBalanceAmount(e.target.value)}
+                onChange={createNumberInputHandler(setBalanceAmount)}
                 placeholder={t('admin.users.detail.balance.amountPlaceholder')}
-                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                className="input"
               />
               <input
                 type="text"
                 value={balanceDescription}
                 onChange={(e) => setBalanceDescription(e.target.value)}
                 placeholder={t('admin.users.detail.balance.descriptionPlaceholder')}
-                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100"
+                className="input"
+                maxLength={500}
               />
               <div className="flex gap-2">
                 <button
                   onClick={() => handleUpdateBalance(true)}
-                  disabled={actionLoading || !balanceAmount}
+                  disabled={actionLoading || balanceAmount === ''}
                   className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-success-500 py-2 text-white transition-colors hover:bg-success-600 disabled:opacity-50"
                 >
                   <PlusIcon /> {t('admin.users.detail.balance.add')}
                 </button>
                 <button
                   onClick={() => handleUpdateBalance(false)}
-                  disabled={actionLoading || !balanceAmount}
+                  disabled={actionLoading || balanceAmount === ''}
                   className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-error-500 py-2 text-white transition-colors hover:bg-error-600 disabled:opacity-50"
                 >
                   <MinusIcon /> {t('admin.users.detail.balance.subtract')}
diff --git a/src/pages/AdminWheel.tsx b/src/pages/AdminWheel.tsx
index 496dd5b..51c1ed5 100644
--- a/src/pages/AdminWheel.tsx
+++ b/src/pages/AdminWheel.tsx
@@ -27,6 +27,7 @@ import { useNotify } from '@/platform/hooks/useNotify';
 import FortuneWheel from '../components/wheel/FortuneWheel';
 import { ColorPicker } from '@/components/ColorPicker';
 import { usePlatform } from '../platform/hooks/usePlatform';
+import { toNumber } from '../utils/inputHelpers';
 
 // Icons
 
@@ -303,13 +304,13 @@ export default function AdminWheel() {
   // Settings form state
   const [settingsForm, setSettingsForm] = useState<{
     is_enabled: boolean;
-    spin_cost_stars: number;
+    spin_cost_stars: number | '';
     spin_cost_stars_enabled: boolean;
-    spin_cost_days: number;
+    spin_cost_days: number | '';
     spin_cost_days_enabled: boolean;
     rtp_percent: number;
-    daily_spin_limit: number;
-    min_subscription_days_for_day_payment: number;
+    daily_spin_limit: number | '';
+    min_subscription_days_for_day_payment: number | '';
     promo_prefix: string;
   } | null>(null);
 
@@ -601,18 +602,25 @@ export default function AdminWheel() {
             </h3>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div>
-                <label className="mb-1 block text-sm font-medium text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.wheel.settings.costInStars')}
                 </label>
                 <div className="flex gap-2">
                   <input
                     type="number"
                     value={settingsForm?.spin_cost_stars ?? config.spin_cost_stars}
-                    onChange={(e) =>
-                      setSettingsForm((prev) =>
-                        prev ? { ...prev, spin_cost_stars: parseInt(e.target.value) || 1 } : null,
-                      )
-                    }
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      if (val === '')
+                        return setSettingsForm((prev) =>
+                          prev ? { ...prev, spin_cost_stars: '' } : null,
+                        );
+                      const num = parseInt(val);
+                      if (!isNaN(num))
+                        setSettingsForm((prev) =>
+                          prev ? { ...prev, spin_cost_stars: num } : null,
+                        );
+                    }}
                     min={1}
                     max={1000}
                     className="input flex-1"
@@ -636,18 +644,23 @@ export default function AdminWheel() {
               </div>
 
               <div>
-                <label className="mb-1 block text-sm font-medium text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.wheel.settings.costInDays')}
                 </label>
                 <div className="flex gap-2">
                   <input
                     type="number"
                     value={settingsForm?.spin_cost_days ?? config.spin_cost_days}
-                    onChange={(e) =>
-                      setSettingsForm((prev) =>
-                        prev ? { ...prev, spin_cost_days: parseInt(e.target.value) || 1 } : null,
-                      )
-                    }
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      if (val === '')
+                        return setSettingsForm((prev) =>
+                          prev ? { ...prev, spin_cost_days: '' } : null,
+                        );
+                      const num = parseInt(val);
+                      if (!isNaN(num))
+                        setSettingsForm((prev) => (prev ? { ...prev, spin_cost_days: num } : null));
+                    }}
                     min={1}
                     max={30}
                     className="input flex-1"
@@ -682,7 +695,7 @@ export default function AdminWheel() {
             </h3>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div>
-                <label className="mb-1 block text-sm font-medium text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.wheel.settings.rtpPercent')}
                 </label>
                 <input
@@ -707,17 +720,22 @@ export default function AdminWheel() {
               </div>
 
               <div>
-                <label className="mb-1 block text-sm font-medium text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.wheel.settings.dailyLimit')}
                 </label>
                 <input
                   type="number"
                   value={settingsForm?.daily_spin_limit ?? config.daily_spin_limit}
-                  onChange={(e) =>
-                    setSettingsForm((prev) =>
-                      prev ? { ...prev, daily_spin_limit: parseInt(e.target.value) || 0 } : null,
-                    )
-                  }
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (val === '')
+                      return setSettingsForm((prev) =>
+                        prev ? { ...prev, daily_spin_limit: '' } : null,
+                      );
+                    const num = parseInt(val);
+                    if (!isNaN(num))
+                      setSettingsForm((prev) => (prev ? { ...prev, daily_spin_limit: num } : null));
+                  }}
                   min={0}
                   max={100}
                   className="input w-full"
@@ -725,7 +743,7 @@ export default function AdminWheel() {
               </div>
 
               <div>
-                <label className="mb-1 block text-sm font-medium text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.wheel.settings.minSubDays')}
                 </label>
                 <input
@@ -734,16 +752,18 @@ export default function AdminWheel() {
                     settingsForm?.min_subscription_days_for_day_payment ??
                     config.min_subscription_days_for_day_payment
                   }
-                  onChange={(e) =>
-                    setSettingsForm((prev) =>
-                      prev
-                        ? {
-                            ...prev,
-                            min_subscription_days_for_day_payment: parseInt(e.target.value) || 1,
-                          }
-                        : null,
-                    )
-                  }
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (val === '')
+                      return setSettingsForm((prev) =>
+                        prev ? { ...prev, min_subscription_days_for_day_payment: '' } : null,
+                      );
+                    const num = parseInt(val);
+                    if (!isNaN(num))
+                      setSettingsForm((prev) =>
+                        prev ? { ...prev, min_subscription_days_for_day_payment: num } : null,
+                      );
+                  }}
                   min={1}
                   max={30}
                   className="input w-full"
@@ -762,7 +782,7 @@ export default function AdminWheel() {
             </h3>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div>
-                <label className="mb-1 block text-sm font-medium text-dark-300">
+                <label className="mb-2 block text-sm font-medium text-dark-300">
                   {t('admin.wheel.settings.promoPrefix')}
                 </label>
                 <input
@@ -798,7 +818,19 @@ export default function AdminWheel() {
                       // If we can't check, allow saving
                     }
                   }
-                  updateConfigMutation.mutate(settingsForm);
+                  updateConfigMutation.mutate({
+                    ...settingsForm,
+                    spin_cost_stars: toNumber(settingsForm.spin_cost_stars, config.spin_cost_stars),
+                    spin_cost_days: toNumber(settingsForm.spin_cost_days, config.spin_cost_days),
+                    daily_spin_limit: toNumber(
+                      settingsForm.daily_spin_limit,
+                      config.daily_spin_limit,
+                    ),
+                    min_subscription_days_for_day_payment: toNumber(
+                      settingsForm.min_subscription_days_for_day_payment,
+                      config.min_subscription_days_for_day_payment,
+                    ),
+                  });
                 }}
                 disabled={updateConfigMutation.isPending}
                 className="btn-primary flex items-center gap-2"
@@ -1022,7 +1054,19 @@ function InlinePrizeForm({
   isLoading?: boolean;
 }) {
   const { t } = useTranslation();
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<{
+    prize_type: string;
+    prize_value: number | '';
+    display_name: string;
+    emoji: string;
+    color: string;
+    prize_value_kopeks: number | '';
+    is_active: boolean;
+    manual_probability: number | null;
+    promo_balance_bonus_kopeks: number | '';
+    promo_subscription_days: number | '';
+    promo_traffic_gb: number | '';
+  }>({
     prize_type: prize?.prize_type || 'balance_bonus',
     prize_value: prize?.prize_value || 0,
     display_name: prize?.display_name || '',
@@ -1038,7 +1082,14 @@ function InlinePrizeForm({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onSave(formData);
+    onSave({
+      ...formData,
+      prize_value: toNumber(formData.prize_value),
+      prize_value_kopeks: toNumber(formData.prize_value_kopeks),
+      promo_balance_bonus_kopeks: toNumber(formData.promo_balance_bonus_kopeks),
+      promo_subscription_days: toNumber(formData.promo_subscription_days),
+      promo_traffic_gb: toNumber(formData.promo_traffic_gb),
+    });
   };
 
   return (
@@ -1057,7 +1108,7 @@ function InlinePrizeForm({
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {/* Prize type */}
         <div>
-          <label className="mb-1 block text-sm font-medium text-dark-300">
+          <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.wheel.prizes.fields.type')}
           </label>
           <select
@@ -1075,7 +1126,7 @@ function InlinePrizeForm({
 
         {/* Display name */}
         <div>
-          <label className="mb-1 block text-sm font-medium text-dark-300">
+          <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.wheel.prizes.fields.displayName')}
           </label>
           <input
@@ -1092,7 +1143,7 @@ function InlinePrizeForm({
         {/* Prize value */}
         {formData.prize_type !== 'nothing' && (
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.wheel.prizes.fields.value')} (
               {formData.prize_type === 'balance_bonus'
                 ? 'kopeks'
@@ -1104,9 +1155,12 @@ function InlinePrizeForm({
             <input
               type="number"
               value={formData.prize_value}
-              onChange={(e) =>
-                setFormData({ ...formData, prize_value: parseInt(e.target.value) || 0 })
-              }
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === '') return setFormData({ ...formData, prize_value: '' });
+                const num = parseInt(val);
+                if (!isNaN(num)) setFormData({ ...formData, prize_value: num });
+              }}
               min={0}
               className="input w-full"
             />
@@ -1115,26 +1169,29 @@ function InlinePrizeForm({
 
         {/* Prize value in kopeks (for RTP calculation) */}
         <div>
-          <label className="mb-1 block text-sm font-medium text-dark-300">
+          <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.wheel.prizes.fields.valueKopeks')}
           </label>
           <input
             type="number"
             value={formData.prize_value_kopeks}
-            onChange={(e) =>
-              setFormData({ ...formData, prize_value_kopeks: parseInt(e.target.value) || 0 })
-            }
+            onChange={(e) => {
+              const val = e.target.value;
+              if (val === '') return setFormData({ ...formData, prize_value_kopeks: '' });
+              const num = parseInt(val);
+              if (!isNaN(num)) setFormData({ ...formData, prize_value_kopeks: num });
+            }}
             min={0}
             className="input w-full"
           />
           <p className="mt-1 text-xs text-dark-500">
-            = {(formData.prize_value_kopeks / 100).toFixed(2)} RUB
+            = {(toNumber(formData.prize_value_kopeks) / 100).toFixed(2)} RUB
           </p>
         </div>
 
         {/* Emoji */}
         <div>
-          <label className="mb-1 block text-sm font-medium text-dark-300">
+          <label className="mb-2 block text-sm font-medium text-dark-300">
             {t('admin.wheel.prizes.fields.emoji')}
           </label>
           <input
@@ -1174,7 +1231,7 @@ function InlinePrizeForm({
           <h4 className="font-medium text-dark-200">{t('admin.wheel.prizes.promo.title')}</h4>
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <label className="mb-1 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.prizes.promo.balanceBonus')}
               </label>
               <input
@@ -1183,7 +1240,8 @@ function InlinePrizeForm({
                 onChange={(e) =>
                   setFormData({
                     ...formData,
-                    promo_balance_bonus_kopeks: parseInt(e.target.value) || 0,
+                    promo_balance_bonus_kopeks:
+                      e.target.value === '' ? '' : parseInt(e.target.value) || 0,
                   })
                 }
                 min={0}
@@ -1191,7 +1249,7 @@ function InlinePrizeForm({
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm text-dark-400">
+              <label className="mb-2 block text-sm font-medium text-dark-300">
                 {t('admin.wheel.prizes.promo.subscriptionDays')}
               </label>
               <input
@@ -1200,7 +1258,8 @@ function InlinePrizeForm({
                 onChange={(e) =>
                   setFormData({
                     ...formData,
-                    promo_subscription_days: parseInt(e.target.value) || 0,
+                    promo_subscription_days:
+                      e.target.value === '' ? '' : parseInt(e.target.value) || 0,
                   })
                 }
                 min={0}