Format Currency
This commit is contained in:
parent
801fcdda2f
commit
f1cf351ca4
@ -4,7 +4,12 @@ import { TextField, Typography, useTheme } from '@mui/material'
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||||
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||||||
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
|
import {
|
||||||
|
formatCurrency,
|
||||||
|
formatDateDDMMYYYY,
|
||||||
|
formatForInputDate,
|
||||||
|
formatShortCurrency
|
||||||
|
} from '../../../../../../utils/transform'
|
||||||
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||||
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||||
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||||
@ -115,14 +120,14 @@ const DashboardOverview = () => {
|
|||||||
<MetricCard
|
<MetricCard
|
||||||
iconClass='tabler-cash'
|
iconClass='tabler-cash'
|
||||||
title='Total Sales'
|
title='Total Sales'
|
||||||
value={formatShortCurrency(salesData.overview.total_sales)}
|
value={formatCurrency(salesData.overview.total_sales)}
|
||||||
bgColor='bg-green-500'
|
bgColor='bg-green-500'
|
||||||
isCurrency={true}
|
isCurrency={true}
|
||||||
/>
|
/>
|
||||||
<MetricCard
|
<MetricCard
|
||||||
iconClass='tabler-trending-up'
|
iconClass='tabler-trending-up'
|
||||||
title='Average Order Value'
|
title='Average Order Value'
|
||||||
value={formatShortCurrency(salesData.overview.average_order_value)}
|
value={formatCurrency(salesData.overview.average_order_value)}
|
||||||
bgColor='bg-purple-500'
|
bgColor='bg-purple-500'
|
||||||
isCurrency={true}
|
isCurrency={true}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -162,21 +162,21 @@ const DashboardProfitloss = () => {
|
|||||||
<MetricCard
|
<MetricCard
|
||||||
iconClass='tabler-currency-dollar'
|
iconClass='tabler-currency-dollar'
|
||||||
title='Total Revenue'
|
title='Total Revenue'
|
||||||
value={formatShortCurrency(profitData.summary.total_revenue)}
|
value={formatCurrency(profitData.summary.total_revenue)}
|
||||||
bgColor='bg-green-500'
|
bgColor='bg-green-500'
|
||||||
isCurrency={true}
|
isCurrency={true}
|
||||||
/>
|
/>
|
||||||
<MetricCard
|
<MetricCard
|
||||||
iconClass='tabler-receipt'
|
iconClass='tabler-receipt'
|
||||||
title='Total Cost'
|
title='Total Cost'
|
||||||
value={formatShortCurrency(profitData.summary.total_cost)}
|
value={formatCurrency(profitData.summary.total_cost)}
|
||||||
bgColor='bg-red-500'
|
bgColor='bg-red-500'
|
||||||
isCurrency={true}
|
isCurrency={true}
|
||||||
/>
|
/>
|
||||||
<MetricCard
|
<MetricCard
|
||||||
iconClass='tabler-trending-up'
|
iconClass='tabler-trending-up'
|
||||||
title='Gross Profit'
|
title='Gross Profit'
|
||||||
value={formatShortCurrency(profitData.summary.gross_profit)}
|
value={formatCurrency(profitData.summary.gross_profit)}
|
||||||
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
||||||
bgColor='bg-blue-500'
|
bgColor='bg-blue-500'
|
||||||
isNegative={profitData.summary.gross_profit < 0}
|
isNegative={profitData.summary.gross_profit < 0}
|
||||||
@ -186,7 +186,7 @@ const DashboardProfitloss = () => {
|
|||||||
iconClass='tabler-percentage'
|
iconClass='tabler-percentage'
|
||||||
title='Profitability Ratio'
|
title='Profitability Ratio'
|
||||||
value={formatPercentage(profitData.summary.profitability_ratio)}
|
value={formatPercentage(profitData.summary.profitability_ratio)}
|
||||||
subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
|
subtitle={`Avg Profit: ${formatCurrency(profitData.summary.average_profit)}`}
|
||||||
bgColor='bg-purple-500'
|
bgColor='bg-purple-500'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -199,7 +199,7 @@ const DashboardProfitloss = () => {
|
|||||||
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className='text-3xl font-bold text-green-600 mb-2'>
|
<p className='text-3xl font-bold text-green-600 mb-2'>
|
||||||
Rp {formatShortCurrency(profitData.summary.net_profit)}
|
{formatCurrency(profitData.summary.net_profit)}
|
||||||
</p>
|
</p>
|
||||||
<p className='text-sm text-gray-600'>
|
<p className='text-sm text-gray-600'>
|
||||||
Margin: {formatPercentage(profitData.summary.net_profit_margin)}
|
Margin: {formatPercentage(profitData.summary.net_profit_margin)}
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import classnames from 'classnames'
|
|||||||
import CustomAvatar, { CustomAvatarProps } from '../../../@core/components/mui/Avatar'
|
import CustomAvatar, { CustomAvatarProps } from '../../../@core/components/mui/Avatar'
|
||||||
import { ThemeColor } from '../../../@core/types'
|
import { ThemeColor } from '../../../@core/types'
|
||||||
import { Skeleton, Typography } from '@mui/material'
|
import { Skeleton, Typography } from '@mui/material'
|
||||||
import { formatShortCurrency } from '../../../utils/transform'
|
import { formatCurrency, formatShortCurrency } from '../../../utils/transform'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title: string
|
title: string
|
||||||
@ -46,7 +46,7 @@ const DistributedBarChartOrder = ({
|
|||||||
{title}
|
{title}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography color='text.primary' variant='h4'>
|
<Typography color='text.primary' variant='h4'>
|
||||||
{isCurrency ? 'Rp ' + formatShortCurrency(value) : formatShortCurrency(value)}
|
{isCurrency ? formatCurrency(value) : formatShortCurrency(value)}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
<CustomAvatar variant='rounded' skin={avatarSkin} size={52} color={avatarColor}>
|
<CustomAvatar variant='rounded' skin={avatarSkin} size={52} color={avatarColor}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user