feat: enhance phone number input handling in Customer and Supplier components

This commit is contained in:
Yoga Pangestu 2026-07-30 13:40:58 +07:00
parent f93bd17b2d
commit c43713c41c
3 changed files with 19 additions and 31 deletions

View File

@ -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'],

View File

@ -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">

View File

@ -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">