admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): consolidate inline currency formatters into shared lib (GOO-205)

Browse Source 
Remove 8 inline formatPrice/formatVND/formatPriceM2 functions scattered
across components and pages, replacing them with imports from
@/lib/currency. Add formatVNDFull (full locale, no compact notation) for
chuyen-nhuong pages. Fix price-history-chart off-by-1000 bug caused by
double-dividing through priceToMillions then formatMillions. Add k/m²
branch to formatPricePerM2 for sub-million values.

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
This commit is contained in:
Ho Ngoc Hai
2026-04-24 14:17:32 +07:00
parent 9af9e1d84a
commit b2490e209e
10 changed files with 90 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/components/chuyen-nhuong/chuyen-nhuong-detail-client.tsx
View File

@@ -19,14 +19,12 @@ import {
STATUS_LABELS,
} from '@/lib/chuyen-nhuong-api';
import { cn } from '@/lib/utils';
import { formatVNDFull } from '@/lib/currency';
interface ChuyenNhuongDetailClientProps {
listing: TransferListingDetail;
}
function formatVND(value: string): string {
return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
}
export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientProps) {
const statusColor =
@@ -69,13 +67,13 @@ export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientPr
<div className="my-6 grid grid-cols-2 gap-4 rounded-lg border bg-card p-4 sm:grid-cols-4 lg:grid-cols-6">
<QuickStat
label="Giá yêu cầu"
value={formatVND(listing.askingPriceVND)}
value={formatVNDFull(listing.askingPriceVND)}
valueClassName="text-primary"
/>
{listing.aiEstimatePriceVND && (
<QuickStat
label="Giá AI ước tính"
value={formatVND(listing.aiEstimatePriceVND)}
value={formatVNDFull(listing.aiEstimatePriceVND)}
/>
)}
{listing.areaM2 && (
@@ -144,7 +142,7 @@ export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientPr
{listing.monthlyRentVND && (
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Tiền thuê hàng tháng</span>
<span className="font-medium">{formatVND(listing.monthlyRentVND)}</span>
<span className="font-medium">{formatVNDFull(listing.monthlyRentVND)}</span>
</div>
)}
{listing.depositMonths != null && (
@@ -181,14 +179,14 @@ export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientPr
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Giá yêu cầu</span>
<span className="text-lg font-bold text-primary">
{formatVND(listing.askingPriceVND)}
{formatVNDFull(listing.askingPriceVND)}
</span>
</div>
{listing.aiEstimatePriceVND && (
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Giá AI ước tính</span>
<span className="font-semibold">
{formatVND(listing.aiEstimatePriceVND)}
{formatVNDFull(listing.aiEstimatePriceVND)}
</span>
</div>
)}

8
apps/web/components/chuyen-nhuong/transfer-item-table.tsx
View File

@@ -7,14 +7,12 @@ import {
CONDITION_COLORS,
CONDITION_LABELS,
} from '@/lib/chuyen-nhuong-api';
import { formatVNDFull } from '@/lib/currency';
interface TransferItemTableProps {
items: TransferItemData[];
}
function formatVND(value: string): string {
return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
}
export function TransferItemTable({ items }: TransferItemTableProps) {
if (items.length === 0) {
@@ -59,12 +57,12 @@ export function TransferItemTable({ items }: TransferItemTableProps) {
</td>
<td className="px-3 py-2 text-right">{item.quantity}</td>
<td className="px-3 py-2 text-right font-medium">
{formatVND(item.askingPriceVND)}
{formatVNDFull(item.askingPriceVND)}
</td>
<td className="px-3 py-2 text-right text-muted-foreground">
{item.aiEstimatePriceVND ? (
<span title={item.aiConfidence ? `Độ tin cậy: ${Math.round(item.aiConfidence * 100)}%` : undefined}>
{formatVND(item.aiEstimatePriceVND)}
{formatVNDFull(item.aiEstimatePriceVND)}
</span>
) : '—'}
</td>

6
apps/web/components/chuyen-nhuong/transfer-listing-card.tsx
View File

@@ -10,14 +10,12 @@ import {
CATEGORY_LABELS,
STATUS_LABELS,
} from '@/lib/chuyen-nhuong-api';
import { formatVNDFull } from '@/lib/currency';
interface TransferListingCardProps {
listing: TransferListingListItem;
}
function formatVND(value: string): string {
return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
}
export function TransferListingCard({ listing }: TransferListingCardProps) {
const statusColor =
@@ -62,7 +60,7 @@ export function TransferListingCard({ listing }: TransferListingCardProps) {
{/* Price */}
<div className="mb-3">
<p className="text-lg font-bold text-primary">
{formatVND(listing.askingPriceVND)}
{formatVNDFull(listing.askingPriceVND)}
</p>
{listing.isNegotiable && (
<span className="text-xs text-muted-foreground">Thương lượng</span>

16
apps/web/components/listings/price-history-chart.tsx
View File

@@ -11,21 +11,13 @@ import {
} from 'recharts';
import type { PriceHistoryItem } from '@/lib/listings-api';
import { formatPrice } from '@/lib/currency';
interface PriceHistoryChartProps {
data: PriceHistoryItem[];
height?: number;
}
function priceToMillions(priceStr: string): number {
return Math.round(Number(priceStr) / 1_000_000);
}
function formatMillions(value: number): string {
if (value >= 1000) return `${(value / 1000).toFixed(1)} tỷ`;
return `${value} tr`;
}
export function PriceHistoryChart({ data, height = 280 }: PriceHistoryChartProps) {
if (data.length === 0) return null;
@@ -37,7 +29,7 @@ export function PriceHistoryChart({ data, height = 280 }: PriceHistoryChartProps
month: '2-digit',
year: 'numeric',
}),
price: priceToMillions(item.newPrice),
price: Number(item.newPrice),
}));
return (
@@ -48,7 +40,7 @@ export function PriceHistoryChart({ data, height = 280 }: PriceHistoryChartProps
<YAxis
tick={{ fontSize: 11 }}
className="fill-muted-foreground"
tickFormatter={(v: number) => formatMillions(v)}
tickFormatter={(v: number) => formatPrice(v)}
/>
<Tooltip
contentStyle={{
@@ -57,7 +49,7 @@ export function PriceHistoryChart({ data, height = 280 }: PriceHistoryChartProps
borderRadius: '0.5rem',
fontSize: '0.875rem',
}}
formatter={(value) => [formatMillions(Number(value)), 'Giá']}
formatter={(value) => [formatPrice(Number(value)), 'Giá']}
/>
<Line
type="monotone"

8
apps/web/components/map/listing-map.tsx
View File

@@ -6,15 +6,9 @@ import * as React from 'react';
import 'mapbox-gl/dist/mapbox-gl.css';
import { ComponentErrorBoundary } from '@/components/error-boundary';
import type { ListingDetail } from '@/lib/listings-api';
import { formatPrice } from '@/lib/currency';
import { useMapboxStyle } from '@/lib/mapbox-style';
function formatPrice(priceVND: string): string {
const num = Number(priceVND);
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} tr`;
return num.toLocaleString('vi-VN');
}
interface ListingMapProps {
listings: ListingDetail[];
onMarkerClick?: (listing: ListingDetail) => void;

7
apps/web/components/valuation/ai-estimate-button.tsx
View File

@@ -4,17 +4,12 @@ import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useValuationPredictForListing } from '@/lib/hooks/use-valuation';
import { formatPrice } from '@/lib/currency';
interface AiEstimateButtonProps {
listingId: string;
}
function formatPrice(num: number): string {
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(2)} ty`;
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} trieu`;
return num.toLocaleString('vi-VN');
}
export function AiEstimateButton({ listingId }: AiEstimateButtonProps) {
const [showResult, setShowResult] = useState(false);
const mutation = useValuationPredictForListing();