diff --git a/app/Http/Requests/Admin/HR/EmployeeRequest.php b/app/Http/Requests/Admin/HR/EmployeeRequest.php
index 31c0d72..cbaae92 100644
--- a/app/Http/Requests/Admin/HR/EmployeeRequest.php
+++ b/app/Http/Requests/Admin/HR/EmployeeRequest.php
@@ -31,7 +31,7 @@ public function rules(): array
                 Rule::unique('users', 'username')->ignore($userId, 'id'),
             ],
             'full_name' => ['required', 'string', 'max:200'],
-            'phone_number' => ['nullable', 'string', 'max:20'],
+            'phone_number' => ['nullable', 'string', 'max:20', 'digits_between:1,20'],
             'gender' => ['nullable', 'in:male,female'],
             'birth_date' => ['nullable', 'date'],
             'address' => ['nullable', 'string'],
diff --git a/resources/js/pages/admin/master/customer/index.tsx b/resources/js/pages/admin/master/customer/index.tsx
index dd48e20..d002aa3 100644
--- a/resources/js/pages/admin/master/customer/index.tsx
+++ b/resources/js/pages/admin/master/customer/index.tsx
@@ -1,7 +1,7 @@
-import { Form, Head, router } from '@inertiajs/react';
-import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { ConfirmDialog } from '@/components/confirm-dialog';
+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';
 import {
     Dialog,
@@ -12,11 +12,12 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { destroy, index as customerIndex, store, update } from '@/routes/admin/master/customers';
-import { createCustomerColumns } from './columns';
+import { index as customerIndex, destroy, store, update } from '@/routes/admin/master/customers';
+import { Form, Head, router } from '@inertiajs/react';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
 import type { Customer } from './columns';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { DataTable } from '@/components/data-table';
+import { createCustomerColumns } from './columns';
 
 type Props = {
     customers: Customer[];
@@ -88,14 +89,7 @@ export default function CustomerIndex({ customers }: Props) {
                                                     <Label htmlFor="phone_number">
                                                         No. Telepon
                                                     </Label>
-                                                    <Input
-                                                        id="phone_number"
-                                                        name="phone_number"
-                                                        type="tel"
-                                                        inputMode="numeric"
-                                                        pattern="[0-9]*"
-                                                        placeholder="Masukkan nomor telepon"
-                                                    />
+                                                    <PhoneNumberInput name="phone_number"/>
                                                     <InputError message={errors.phone_number} />
                                                 </div>
                                                 <div className="grid gap-2">
diff --git a/resources/js/pages/admin/master/supplier/index.tsx b/resources/js/pages/admin/master/supplier/index.tsx
index 5dd6232..ab25dd9 100644
--- a/resources/js/pages/admin/master/supplier/index.tsx
+++ b/resources/js/pages/admin/master/supplier/index.tsx
@@ -1,7 +1,7 @@
-import { Form, Head, router } from '@inertiajs/react';
-import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { ConfirmDialog } from '@/components/confirm-dialog';
+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';
 import {
     Dialog,
@@ -12,11 +12,12 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { destroy, index as supplierIndex, store, update } from '@/routes/admin/master/suppliers';
-import { createSupplierColumns } from './columns';
+import { destroy, store, index as supplierIndex, update } from '@/routes/admin/master/suppliers';
+import { Form, Head, router } from '@inertiajs/react';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
 import type { Supplier } from './columns';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { DataTable } from '@/components/data-table';
+import { createSupplierColumns } from './columns';
 
 type Props = {
     suppliers: Supplier[];
@@ -88,14 +89,7 @@ export default function SupplierIndex({ suppliers }: Props) {
                                                     <Label htmlFor="phone_number">
                                                         No. Telepon
                                                     </Label>
-                                                    <Input
-                                                        id="phone_number"
-                                                        name="phone_number"
-                                                        type="tel"
-                                                        inputMode="numeric"
-                                                        pattern="[0-9]*"
-                                                        placeholder="Masukkan nomor telepon"
-                                                    />
+                                                    <PhoneNumberInput name="phone_number"/>
                                                     <InputError message={errors.phone_number} />
                                                 </div>
                                                 <div className="grid gap-2">