feat: add DigitInput component; force English digits for phone & national code

New reusable DigitInput normalizes Persian/Arabic digits to English on
input, strips non-digits, enforces maxDigits, and is always LTR + numeric
keyboard. Use it for the phone and national-code fields on the appointment
create page (phone previously kept raw Persian digits; national code lost
Persian digits to the \D strip).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

assets/admin/pages/AppointmentCreatePage.tsx

@@ -8,6 +8,7 @@ import type { ApiResponse } from '../lib/api';
 import { useAuthStore } from '../stores/authStore';
 import PersianDateInput from '../components/ui/PersianDateInput';
 import PriceInput from '../components/ui/PriceInput';
+import DigitInput from '../components/ui/DigitInput';
 import SearchableSelect from '../components/ui/SearchableSelect';
 import { WalletChargeLink } from '../components/AppointmentActions';
 import { useDoctorBookingServices } from '../hooks/useDoctorBookingServices';
@@ -218,8 +219,8 @@ export default function AppointmentCreatePage() {
                 </div>
                 <label style={label}>کد ملی</label>
                 <div className="field" style={{ marginTop: 6, height: 44 }}>
-                  <input value={nationalCode} onChange={e => setNationalCode(e.target.value.replace(/\D/g, '').slice(0, 10))}
-                    placeholder="کد ملی مراجعه کننده" dir="ltr" inputMode="numeric" maxLength={10} />
+                  <DigitInput value={nationalCode} onChange={setNationalCode} maxDigits={10}
+                    placeholder="کد ملی مراجعه کننده" />
                 </div>
               </div>
             )}
@@ -246,14 +247,14 @@ export default function AppointmentCreatePage() {
               <div>
                 <label style={label}>شماره تماس</label>
                 <div className="field" style={{ marginTop: 6, height: 44 }}>
-                  <input value={mobile} onChange={e => setMobile(e.target.value)} placeholder="شماره تماس مراجعه کننده" dir="ltr" />
+                  <DigitInput value={mobile} onChange={setMobile} maxDigits={11} placeholder="شماره تماس مراجعه کننده" />
                 </div>
               </div>
               <div>
                 <label style={label}>کد ملی</label>
                 <div className="field" style={{ marginTop: 6, height: 44 }}>
-                  <input value={nationalCode} onChange={e => setNationalCode(e.target.value.replace(/\D/g, '').slice(0, 10))}
-                    placeholder="کد ملی مراجعه کننده" dir="ltr" inputMode="numeric" maxLength={10} />
+                  <DigitInput value={nationalCode} onChange={setNationalCode} maxDigits={10}
+                    placeholder="کد ملی مراجعه کننده" />
                 </div>
               </div>
             </div>