From 67533371355e4088460b259738672bddade3c5b6 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 30 Oct 2025 14:58:10 +0100
Subject: [PATCH] Add numerical formatting to custom amount field in
 calculators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated TripCalculator custom amount field to use formatNumber helper
- Updated MobileCalculator custom amount field to use formatNumber helper
- Changed input type from "number" to "text" to display formatted values
- Strip commas when converting to numbers for calculations
- Custom amount inputs now display thousand separators for better readability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/MobileCalculator.tsx | 17 ++++++++---------
 src/components/TripCalculator.tsx   | 13 ++++++-------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/MobileCalculator.tsx b/src/components/MobileCalculator.tsx
index 812a57d..a740d7a 100644
--- a/src/components/MobileCalculator.tsx
+++ b/src/components/MobileCalculator.tsx
@@ -116,9 +116,9 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
 
 
   const handleCustomAmountChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (value === '' || Number(value) >= 0) {
-      setCustomAmount(value);
+    const value = e.target.value.replace(/,/g, '');
+    if (value === '' || /^\d*\.?\d*$/.test(value)) {
+      setCustomAmount(formatNumber(value));
     }
   }, []);
 
@@ -267,11 +267,10 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
                         <span className="text-gray-500 text-lg">{currencies[currency].symbol}</span>
                       </div>
                       <input
-                        type="number"
+                        type="text"
                         value={customAmount}
                         onChange={handleCustomAmountChange}
                         placeholder="0.00"
-                        min="0"
                         className="w-full pl-10 pr-16 py-4 text-lg border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       />
                       <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
@@ -281,11 +280,11 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
                   </div>
                 </div>
 
-                {customAmount && Number(customAmount) > 0 && (
-                  <motion.button 
+                {customAmount && Number(customAmount.replace(/,/g, '')) > 0 && (
+                  <motion.button
                     onClick={() => {
                       setOffsetTons(0);
-                      setMonetaryAmount(Number(customAmount));
+                      setMonetaryAmount(Number(customAmount.replace(/,/g, '')));
                       setShowOffsetOrder(true);
                     }}
                     className="w-full mt-6 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-md hover:shadow-lg transition-all"
@@ -294,7 +293,7 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
                   >
-                    Offset {formatCurrency(Number(customAmount), getCurrencyByCode(currency))}
+                    Offset {formatCurrency(Number(customAmount.replace(/,/g, '')), getCurrencyByCode(currency))}
                   </motion.button>
                 )}
               </div>
diff --git a/src/components/TripCalculator.tsx b/src/components/TripCalculator.tsx
index d922aa2..9a2f7f6 100644
--- a/src/components/TripCalculator.tsx
+++ b/src/components/TripCalculator.tsx
@@ -97,9 +97,9 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
 
 
   const handleCustomAmountChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (value === '' || Number(value) >= 0) {
-      setCustomAmount(value);
+    const value = e.target.value.replace(/,/g, '');
+    if (value === '' || /^\d*\.?\d*$/.test(value)) {
+      setCustomAmount(formatNumber(value));
     }
   }, []);
 
@@ -241,11 +241,10 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
                   <span className="text-gray-500 text-sm font-semibold">$</span>
                 </div>
                 <input
-                  type="number"
+                  type="text"
                   value={customAmount}
                   onChange={handleCustomAmountChange}
                   placeholder="Enter amount"
-                  min="0"
                   className="block w-full pl-10 pr-16 py-2.5 rounded-lg border border-gray-200 shadow-sm transition-all duration-200 text-sm text-gray-900 font-medium outline-none hover:border-gray-300 hover:shadow-md focus:border-blue-500 focus:ring-2 focus:ring-blue-100 focus:shadow-md"
                   required
                 />
@@ -255,9 +254,9 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
               </div>
             </div>
 
-            {customAmount && Number(customAmount) > 0 && (
+            {customAmount && Number(customAmount.replace(/,/g, '')) > 0 && (
               <motion.button
-                onClick={() => onOffsetClick?.(0, Number(customAmount))}
+                onClick={() => onOffsetClick?.(0, Number(customAmount.replace(/,/g, '')))}
                 className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors mt-6"
                 whileHover={{ scale: 1.03 }}
                 whileTap={{ scale: 0.97 }}