From 4523c8861f578553358710692a50a2a1e9bb5fc2 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 15 Jun 2026 15:46:25 +0330
Subject: [PATCH] feat(ui): grouped thousands separators for price/amount
 inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Price fields showed raw digits (1490000) while typing — hard to read for
Toman amounts. New shared MoneyInput groups as you type (1,490,000),
accepts Persian/Arabic digits, and reports a raw digit string so callers
keep parsing unchanged. Applied to menu item price, branch price override,
expense amount, and payment-correction replacement amount. Displays already
group via formatCurrency (incl. the QR guest-menu preview).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/expenses/expenses-screen.tsx   |  9 +--
 .../components/menu/branch-menu-overrides.tsx |  7 ++-
 .../src/components/menu/menu-admin-screen.tsx |  8 +--
 .../reports/payment-corrections-tab.tsx       | 11 ++--
 .../src/components/ui/money-input.tsx         | 61 +++++++++++++++++++
 5 files changed, 75 insertions(+), 21 deletions(-)
 create mode 100644 web/dashboard/src/components/ui/money-input.tsx

diff --git a/web/dashboard/src/components/expenses/expenses-screen.tsx b/web/dashboard/src/components/expenses/expenses-screen.tsx
index 8d45e7e..81afb40 100644
--- a/web/dashboard/src/components/expenses/expenses-screen.tsx
+++ b/web/dashboard/src/components/expenses/expenses-screen.tsx
@@ -11,6 +11,7 @@ import { isoTodayTehran } from "@/lib/reports/analytics";
 import { PageHeader } from "@/components/layout/page-header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { MoneyInput } from "@/components/ui/money-input";
 import { JalaliDateField } from "@/components/ui/jalali-date-field";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -291,14 +292,10 @@ export function ExpensesScreen() {
                 </select>
               </LabeledField>
               <LabeledField label={t("amount")} htmlFor="exp-amount">
-                <Input
+                <MoneyInput
                   id="exp-amount"
-                  type="number"
-                  min={1}
-                  dir="ltr"
-                  className="text-end"
                   value={amount}
-                  onChange={(e) => setAmount(e.target.value)}
+                  onValueChange={setAmount}
                 />
               </LabeledField>
               <LabeledField label={t("note")} htmlFor="exp-note">
diff --git a/web/dashboard/src/components/menu/branch-menu-overrides.tsx b/web/dashboard/src/components/menu/branch-menu-overrides.tsx
index 4265320..29d2d8b 100644
--- a/web/dashboard/src/components/menu/branch-menu-overrides.tsx
+++ b/web/dashboard/src/components/menu/branch-menu-overrides.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/lib/api/branch-menu";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { MoneyInput } from "@/components/ui/money-input";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { MenuItemLabels } from "@/components/menu/menu-item-labels";
@@ -164,11 +165,11 @@ export function BranchMenuOverrides({
                 <td className="px-3 py-2">
                   {canOverridePrice ? (
                     <div className="flex items-center gap-1">
-                      <Input
+                      <MoneyInput
                         className="h-8 w-28 text-xs"
                         value={priceDraft[row.id] ?? String(row.effectivePrice)}
-                        onChange={(e) =>
-                          setPriceDraft((d) => ({ ...d, [row.id]: e.target.value }))
+                        onValueChange={(raw) =>
+                          setPriceDraft((d) => ({ ...d, [row.id]: raw }))
                         }
                       />
                       <Button
diff --git a/web/dashboard/src/components/menu/menu-admin-screen.tsx b/web/dashboard/src/components/menu/menu-admin-screen.tsx
index c571c66..f1e2e50 100644
--- a/web/dashboard/src/components/menu/menu-admin-screen.tsx
+++ b/web/dashboard/src/components/menu/menu-admin-screen.tsx
@@ -32,6 +32,7 @@ import { PageHeader } from "@/components/layout/page-header";
 import { MediaPairUpload } from "@/components/media/media-pair-upload";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { MoneyInput } from "@/components/ui/money-input";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
@@ -872,13 +873,10 @@ export function MenuAdminScreen() {
 
           <div className="grid gap-3 sm:grid-cols-2">
             <LabeledField label={t("price")} htmlFor="modal-item-price">
-              <Input
+              <MoneyInput
                 id="modal-item-price"
                 value={itemForm.price}
-                onChange={(e) => setItemForm((f) => ({ ...f, price: e.target.value }))}
-                inputMode="numeric"
-                dir="ltr"
-                className="text-end"
+                onValueChange={(raw) => setItemForm((f) => ({ ...f, price: raw }))}
               />
             </LabeledField>
             <LabeledField label={t("discountPercent")} htmlFor="modal-item-discount">
diff --git a/web/dashboard/src/components/reports/payment-corrections-tab.tsx b/web/dashboard/src/components/reports/payment-corrections-tab.tsx
index 1e1e7be..2bad758 100644
--- a/web/dashboard/src/components/reports/payment-corrections-tab.tsx
+++ b/web/dashboard/src/components/reports/payment-corrections-tab.tsx
@@ -11,7 +11,7 @@ import { formatCurrency, formatNumber } from "@/lib/format";
 import { isoTodayTehran } from "@/lib/reports/analytics";
 import type { Order, PaymentLine } from "@/lib/api/types";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { MoneyInput } from "@/components/ui/money-input";
 import { JalaliDateField } from "@/components/ui/jalali-date-field";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent } from "@/components/ui/card";
@@ -395,14 +395,11 @@ function CorrectionDialog({
                         </option>
                       ))}
                     </select>
-                    <Input
-                      type="number"
-                      inputMode="numeric"
-                      min={0}
+                    <MoneyInput
                       placeholder={t("amount")}
-                      className="h-9 flex-1 tabular-nums"
+                      className="h-9 flex-1"
                       value={r.amount}
-                      onChange={(e) => patchReplacement(i, { amount: e.target.value })}
+                      onValueChange={(raw) => patchReplacement(i, { amount: raw })}
                     />
                     <Button
                       variant="ghost"
diff --git a/web/dashboard/src/components/ui/money-input.tsx b/web/dashboard/src/components/ui/money-input.tsx
new file mode 100644
index 0000000..a183ec8
--- /dev/null
+++ b/web/dashboard/src/components/ui/money-input.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+/**
+ * Money input for Toman amounts: shows grouped thousands separators while the
+ * user types (e.g. 1490000 → 1,490,000) but reports a raw digit string via
+ * onValueChange so callers keep parsing with Number()/parseFloat() unchanged.
+ * Accepts Persian/Arabic digits on input and normalizes them to Latin.
+ */
+export type MoneyInputProps = Omit<
+  React.ComponentProps<typeof Input>,
+  "value" | "onChange" | "inputMode" | "type"
+> & {
+  /** Raw digit string, e.g. "1490000" (no separators). */
+  value: string;
+  /** Called with the normalized raw digit string. */
+  onValueChange: (rawDigits: string) => void;
+};
+
+const PERSIAN_DIGITS = "۰۱۲۳۴۵۶۷۸۹";
+const ARABIC_DIGITS = "٠١٢٣٤٥٦٧٨٩";
+
+function toRawDigits(input: string): string {
+  let out = "";
+  for (const ch of input) {
+    const fa = PERSIAN_DIGITS.indexOf(ch);
+    const ar = ARABIC_DIGITS.indexOf(ch);
+    if (ch >= "0" && ch <= "9") out += ch;
+    else if (fa !== -1) out += String(fa);
+    else if (ar !== -1) out += String(ar);
+    // ignore separators, spaces, and anything else
+  }
+  // strip leading zeros but keep a single "0"
+  out = out.replace(/^0+(?=\d)/, "");
+  return out;
+}
+
+function group(raw: string): string {
+  if (!raw) return "";
+  return Number(raw).toLocaleString("en-US");
+}
+
+export const MoneyInput = React.forwardRef<HTMLInputElement, MoneyInputProps>(
+  ({ value, onValueChange, className, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        value={group(value)}
+        onChange={(e) => onValueChange(toRawDigits(e.target.value))}
+        inputMode="numeric"
+        dir="ltr"
+        className={cn("text-end tabular-nums", className)}
+        {...props}
+      />
+    );
+  }
+);
+MoneyInput.displayName = "MoneyInput";