diff --git a/resources/js/components/phone-number-input.tsx b/resources/js/components/phone-number-input.tsx
index 9cb3604..bec6f15 100644
--- a/resources/js/components/phone-number-input.tsx
+++ b/resources/js/components/phone-number-input.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useRef, useState } from 'react';
 import { Input } from '@/components/ui/input';
+import { useCallback, useRef, useState } from 'react';
 
 type PhoneNumberInputProps = {
     name?: string;
-    defaultValue?: string;
+    defaultValue?: string | null;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
@@ -20,7 +20,7 @@ function formatPhone(value: string | null | undefined): string {
 
 export function PhoneNumberInput({
     name,
-    defaultValue = '',
+    defaultValue = null,
     placeholder = '0812 3456 7890',
     disabled = false,
     className,
diff --git a/resources/js/pages/admin/master/customer/index.tsx b/resources/js/pages/admin/master/customer/index.tsx
index 9bd5195..245417b 100644
--- a/resources/js/pages/admin/master/customer/index.tsx
+++ b/resources/js/pages/admin/master/customer/index.tsx
@@ -1,9 +1,6 @@
-import { Form, Head, router } from '@inertiajs/react';
-import { Plus } from 'lucide-react';
-import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
-import { DataTable } from '@/components/data-table';
 import type { PaginationState } from '@/components/data-table';
+import { DataTable } from '@/components/data-table';
 import InputError from '@/components/input-error';
 import { PhoneNumberInput } from '@/components/phone-number-input';
 import { Button } from '@/components/ui/button';
@@ -22,6 +19,9 @@ import {
     store,
     update,
 } from '@/routes/admin/master/customers';
+import { Form, Head, router } from '@inertiajs/react';
+import { Plus } from 'lucide-react';
+import { useCallback, useState } from 'react';
 import type { Customer } from './columns';
 import { createCustomerColumns } from './columns';
 
@@ -275,18 +275,7 @@ export default function CustomerIndex({ customers }: Props) {
                                                     <Label htmlFor="edit-phone_number">
                                                         No. Telepon
                                                     </Label>
-                                                    <Input
-                                                        id="edit-phone_number"
-                                                        name="phone_number"
-                                                        type="tel"
-                                                        inputMode="numeric"
-                                                        pattern="[0-9]*"
-                                                        placeholder="Masukkan nomor telepon"
-                                                        defaultValue={
-                                                            editing.phone_number ??
-                                                            ''
-                                                        }
-                                                    />
+                                                    <PhoneNumberInput name="phone_number" defaultValue={editing.phone_number} />
                                                     <InputError
                                                         message={
                                                             errors.phone_number
diff --git a/resources/js/pages/admin/master/supplier/index.tsx b/resources/js/pages/admin/master/supplier/index.tsx
index 42955b0..247e7ba 100644
--- a/resources/js/pages/admin/master/supplier/index.tsx
+++ b/resources/js/pages/admin/master/supplier/index.tsx
@@ -1,9 +1,6 @@
-import { Form, Head, router } from '@inertiajs/react';
-import { Plus } from 'lucide-react';
-import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
-import { DataTable } from '@/components/data-table';
 import type { PaginationState } from '@/components/data-table';
+import { DataTable } from '@/components/data-table';
 import InputError from '@/components/input-error';
 import { PhoneNumberInput } from '@/components/phone-number-input';
 import { Button } from '@/components/ui/button';
@@ -22,6 +19,9 @@ import {
     index as supplierIndex,
     update,
 } from '@/routes/admin/master/suppliers';
+import { Form, Head, router } from '@inertiajs/react';
+import { Plus } from 'lucide-react';
+import { useCallback, useState } from 'react';
 import type { Supplier } from './columns';
 import { createSupplierColumns } from './columns';
 
@@ -275,18 +275,7 @@ export default function SupplierIndex({ suppliers }: Props) {
                                                     <Label htmlFor="edit-phone_number">
                                                         No. Telepon
                                                     </Label>
-                                                    <Input
-                                                        id="edit-phone_number"
-                                                        name="phone_number"
-                                                        type="tel"
-                                                        inputMode="numeric"
-                                                        pattern="[0-9]*"
-                                                        placeholder="Masukkan nomor telepon"
-                                                        defaultValue={
-                                                            editing.phone_number ??
-                                                            ''
-                                                        }
-                                                    />
+                                                    <PhoneNumberInput name="phone_number" defaultValue={editing.phone_number} />
                                                     <InputError
                                                         message={
                                                             errors.phone_number