fix(storm-intel): force en-US digit grouping on homes/area/revenue figures

This commit is contained in:
Satyam Rastogi
2026-05-30 05:01:43 +05:30
parent 6cbb1d729c
commit 6f175f4498
+6 -6
View File
@@ -672,7 +672,7 @@ const StormCard = ({ storm, isSelected, isPinned, onSelect, onTogglePin, distanc
<div className="flex items-center gap-1 mt-1.5">
<Home size={10} className="text-zinc-400" />
<span className="text-[10px] text-zinc-400">
~{storm.estimatedHomes.toLocaleString()} homes affected
~{storm.estimatedHomes.toLocaleString('en-US')} homes affected
</span>
</div>
)}
@@ -871,14 +871,14 @@ const StormDetailDrawer = ({ storm, open, onClose, onFlyTo, onAssignZone, canMan
{storm.areaSqMi > 0 && (
<div className="rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-100 dark:border-white/[0.06] p-3">
<p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Warning Area</p>
<p className="text-xl font-black text-zinc-900 dark:text-white">{storm.areaSqMi.toLocaleString()}</p>
<p className="text-xl font-black text-zinc-900 dark:text-white">{storm.areaSqMi.toLocaleString('en-US')}</p>
<p className="text-[10px] text-zinc-400">sq miles covered</p>
</div>
)}
{storm.estimatedHomes > 0 && (
<div className="rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-100 dark:border-white/[0.06] p-3">
<p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Est. Homes Affected</p>
<p className="text-xl font-black text-zinc-900 dark:text-white">{storm.estimatedHomes.toLocaleString()}</p>
<p className="text-xl font-black text-zinc-900 dark:text-white">{storm.estimatedHomes.toLocaleString('en-US')}</p>
<p className="text-[10px] text-zinc-400">
~{storm.damagePct}% damage probability
</p>
@@ -1129,7 +1129,7 @@ const AttributionView = ({ events, sessionLeads }) => {
</div>
<div className="text-right shrink-0">
<p className="text-lg font-black text-zinc-900 dark:text-white">
{item.revenue > 0 ? `$${item.revenue.toLocaleString()}` : '—'}
{item.revenue > 0 ? `$${item.revenue.toLocaleString('en-US')}` : '—'}
</p>
<p className="text-[10px] text-zinc-400">revenue</p>
</div>
@@ -1181,7 +1181,7 @@ const AttributionView = ({ events, sessionLeads }) => {
<div>
<p className="text-[12px] font-black uppercase tracking-wider text-emerald-700 dark:text-emerald-400 mb-0.5">Top Performing Zone</p>
<p className="text-[13px] text-zinc-700 dark:text-zinc-300 font-semibold">
{perStorm[0].storm.areaName} generated ${perStorm[0].revenue.toLocaleString()} from {perStorm[0].closedCount} closed deal{perStorm[0].closedCount !== 1 ? 's' : ''} ({perStorm[0].conversionRate}% conversion).
{perStorm[0].storm.areaName} generated ${perStorm[0].revenue.toLocaleString('en-US')} from {perStorm[0].closedCount} closed deal{perStorm[0].closedCount !== 1 ? 's' : ''} ({perStorm[0].conversionRate}% conversion).
{perStorm[0].pipeline > 0 && ` $${(perStorm[0].pipeline / 1000).toFixed(0)}k more in pipeline.`}
</p>
</div>
@@ -1482,7 +1482,7 @@ const StormIntelPage = () => {
<div className="text-right" title={pinnedHomes !== null ? 'Sum of est. damaged homes across pinned events — zones may overlap' : 'Pin events to see estimated homes affected'}>
<p className={`text-xl font-black ${pinnedHomes !== null ? 'text-amber-500' : 'text-zinc-400'}`}>
{pinnedHomes !== null
? (pinnedHomes >= 1000 ? `${(pinnedHomes / 1000).toFixed(1)}k` : pinnedHomes.toLocaleString())
? (pinnedHomes >= 1000 ? `${(pinnedHomes / 1000).toFixed(1)}k` : pinnedHomes.toLocaleString('en-US'))
: '—'
}
</p>