Update Balance.tsx

src/pages/Balance.tsx

@@ -213,10 +213,27 @@ export default function Balance() {
         ) : transactions?.items && transactions.items.length > 0 ? (
           <div className="space-y-3">
             {transactions.items.map((tx) => {
-              // Determine if this is a debit (negative) or credit (positive) transaction
+              // Determine if this is a credit (positive) or debit (negative) transaction
-              const isDebit = normalizeType(tx.type) === 'SUBSCRIPTION_PAYMENT' || normalizeType(tx.type) === 'WITHDRAWAL'
+              // Credits: DEPOSIT, REFERRAL_REWARD, REFUND, POLL_REWARD
-              const sign = isDebit ? '-' : '+'
+              // Debits: SUBSCRIPTION_PAYMENT, WITHDRAWAL, everything else
-              const colorClass = isDebit ? 'text-error-400' : 'text-success-400'
+              const txType = normalizeType(tx.type)
+              const isCredit = txType === 'DEPOSIT' || txType === 'REFERRAL_REWARD' || txType === 'REFUND' || txType === 'POLL_REWARD'
+
+              // If amount is already negative in DB, use it as-is. Otherwise, determine sign by type
+              const isNegativeInDb = tx.amount_rubles < 0
+              let displayAmount = Math.abs(tx.amount_rubles)
+              let sign = ''
+              let colorClass = ''
+
+              if (isNegativeInDb) {
+                // DB has negative value - use it directly
+                sign = '-'
+                colorClass = 'text-error-400'
+              } else {
+                // DB has positive value - determine sign by type
+                sign = isCredit ? '+' : '-'
+                colorClass = isCredit ? 'text-success-400' : 'text-error-400'
+              }
 
               return (
               <div
@@ -237,7 +254,7 @@ export default function Balance() {
                   )}
                 </div>
                 <div className={`text-lg font-semibold ${colorClass}`}>
-                  {sign}{formatAmount(tx.amount_rubles)} {currencySymbol}
+                  {sign}{formatAmount(displayAmount)} {currencySymbol}
                 </div>
               </div>
               )