add priceUtils -- formatter price
This commit is contained in:
parent
2c6c8ad6e1
commit
2cd5a9987d
3 changed files with 46 additions and 4 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ArrowDownCircle, ArrowDownIcon, ArrowUp, ArrowUpCircle } from 'lucide-react';
|
import { ArrowDownCircle, ArrowDownIcon, ArrowUp, ArrowUpCircle } from 'lucide-react';
|
||||||
|
import { formatPriceWithToman } from '@/lib/utils/priceUtils';
|
||||||
|
|
||||||
interface TransactionItemProps {
|
interface TransactionItemProps {
|
||||||
amount: number;
|
amount: number;
|
||||||
|
|
@ -20,8 +21,6 @@ const TransactionItem = ({
|
||||||
const bgColor = isDeposit ? 'bg-[#2E7D3210]' : 'bg-[#D32F2F10]';
|
const bgColor = isDeposit ? 'bg-[#2E7D3210]' : 'bg-[#D32F2F10]';
|
||||||
const iconColor = isDeposit ? 'text-[#2E7D32]' : 'text-[#D32F2F]';
|
const iconColor = isDeposit ? 'text-[#2E7D32]' : 'text-[#D32F2F]';
|
||||||
|
|
||||||
const formattedAmount = amount.toLocaleString('fa-IR');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`
|
className={`
|
||||||
|
|
@ -38,7 +37,7 @@ const TransactionItem = ({
|
||||||
|
|
||||||
<div className="flex flex-col items-end gap-1">
|
<div className="flex flex-col items-end gap-1">
|
||||||
<span className={`text-sm font-medium ${amountColor}`}>
|
<span className={`text-sm font-medium ${amountColor}`}>
|
||||||
{isDeposit ? '+' : '-'} {formattedAmount} تومان
|
{isDeposit ? '+' : '-'} {formatPriceWithToman(amount)}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm text-gray-500">۱۴۰۳/۰۸/۲۴</span>
|
<span className="text-sm text-gray-500">۱۴۰۳/۰۸/۲۴</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
|
import { formatPriceWithToman } from '@/lib/utils/priceUtils';
|
||||||
import { LogOutIcon, PlusIcon } from 'lucide-react'
|
import { LogOutIcon, PlusIcon } from 'lucide-react'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
|
|
@ -7,7 +8,7 @@ const WalletBlancCard = () => {
|
||||||
return (
|
return (
|
||||||
<div className='w-full min-h-12 rounded-2xl my-6 py-6 px-6 flex flex-col justify-start bg-gradient-to-l from-[#004D4D] to-[#223D5D] shadow-[0_12px_24px_#006A6A40] border border-[#006A6A40]'>
|
<div className='w-full min-h-12 rounded-2xl my-6 py-6 px-6 flex flex-col justify-start bg-gradient-to-l from-[#004D4D] to-[#223D5D] shadow-[0_12px_24px_#006A6A40] border border-[#006A6A40]'>
|
||||||
<h4 className='text-sm font-medium text-gray-200'>موجودی کیف پول</h4>
|
<h4 className='text-sm font-medium text-gray-200'>موجودی کیف پول</h4>
|
||||||
<h1 className='text-2xl font-bold my-4 text-white'>35000000 تومان</h1>
|
<h1 className='text-2xl font-bold my-4 text-white'>{formatPriceWithToman(35000000)}</h1>
|
||||||
|
|
||||||
<div className="flex w-full gap-4">
|
<div className="flex w-full gap-4">
|
||||||
<button className='w-full bg-white h-12 rounded-xl cursor-pointer flex items-center justify-center gap-2'
|
<button className='w-full bg-white h-12 rounded-xl cursor-pointer flex items-center justify-center gap-2'
|
||||||
|
|
|
||||||
42
src/lib/utils/priceUtils.ts
Normal file
42
src/lib/utils/priceUtils.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
/**
|
||||||
|
* Converts Rial to Toman (divides by 10)
|
||||||
|
*/
|
||||||
|
export const convertRialToToman = (rialAmount: number): number => {
|
||||||
|
return Math.round(rialAmount / 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats number with comma separators (e.g., 3,000,000)
|
||||||
|
*/
|
||||||
|
export const formatNumberWithCommas = (amount: number): string => {
|
||||||
|
return amount.toLocaleString('fa-IR'); // for Persian digits
|
||||||
|
// Or for English digits: return amount.toLocaleString('en-US');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Main function: receives amount in Rial or Toman, returns formatted with comma separators and "Toman" label
|
||||||
|
*
|
||||||
|
* @param amount - input amount (in Rial or Toman)
|
||||||
|
* @param inputIsRial - whether the input amount is in Rial (default: true)
|
||||||
|
* @returns string - formatted amount with Toman label (e.g., "۳,۰۰۰,۰۰۰ تومان")
|
||||||
|
*/
|
||||||
|
export const formatPriceWithToman = (
|
||||||
|
amount: number,
|
||||||
|
inputIsRial: boolean = true
|
||||||
|
): string => {
|
||||||
|
// If amount is in Rial, convert to Toman first
|
||||||
|
const tomanAmount = inputIsRial ? convertRialToToman(amount) : amount;
|
||||||
|
|
||||||
|
// Add comma separators
|
||||||
|
const formatted = formatNumberWithCommas(tomanAmount);
|
||||||
|
|
||||||
|
// Return with Toman label
|
||||||
|
return `${formatted} تومان`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simpler version: just take an amount in Toman and format it
|
||||||
|
*/
|
||||||
|
export const formatTomanPrice = (tomanAmount: number): string => {
|
||||||
|
return `${formatNumberWithCommas(tomanAmount)} تومان`;
|
||||||
|
};
|
||||||
Loading…
Add table
Reference in a new issue