dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update PhoneNumberInput usage in Customer and Supplier components for improved code clarity

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-02 12:04:56 +07:00
parent 6e165d95c4
commit 3039396192
3 changed files with 13 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/phone-number-input.tsx
View File

@ -1,9 +1,9 @@
import { useCallback, useRef, useState } from 'react';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { useCallback, useRef, useState } from 'react';
type PhoneNumberInputProps = { type PhoneNumberInputProps = {
name?: string; name?: string;
defaultValue?: string; defaultValue?: string | null;
placeholder?: string; placeholder?: string;
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
@ -20,7 +20,7 @@ function formatPhone(value: string | null | undefined): string {
export function PhoneNumberInput({ export function PhoneNumberInput({
name, name,
defaultValue = '', defaultValue = null,
placeholder = '0812 3456 7890', placeholder = '0812 3456 7890',
disabled = false, disabled = false,
className, className,

21
resources/js/pages/admin/master/customer/index.tsx
View File

@ -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 { ConfirmDialog } from '@/components/confirm-dialog';
import { DataTable } from '@/components/data-table';
import type { PaginationState } from '@/components/data-table'; import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import InputError from '@/components/input-error'; import InputError from '@/components/input-error';
import { PhoneNumberInput } from '@/components/phone-number-input'; import { PhoneNumberInput } from '@/components/phone-number-input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -22,6 +19,9 @@ import {
store, store,
update, update,
} from '@/routes/admin/master/customers'; } 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 type { Customer } from './columns';
import { createCustomerColumns } from './columns'; import { createCustomerColumns } from './columns';
@ -275,18 +275,7 @@ export default function CustomerIndex({ customers }: Props) {
<Label htmlFor="edit-phone_number"> <Label htmlFor="edit-phone_number">
No. Telepon No. Telepon
</Label> </Label>
<Input <PhoneNumberInput name="phone_number" defaultValue={editing.phone_number} />
id="edit-phone_number"
name="phone_number"
type="tel"
inputMode="numeric"
pattern="[0-9]*"
placeholder="Masukkan nomor telepon"
defaultValue={
editing.phone_number ??
''
}
/>
<InputError <InputError
message={ message={
errors.phone_number errors.phone_number

21
resources/js/pages/admin/master/supplier/index.tsx
View File

@ -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 { ConfirmDialog } from '@/components/confirm-dialog';
import { DataTable } from '@/components/data-table';
import type { PaginationState } from '@/components/data-table'; import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import InputError from '@/components/input-error'; import InputError from '@/components/input-error';
import { PhoneNumberInput } from '@/components/phone-number-input'; import { PhoneNumberInput } from '@/components/phone-number-input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -22,6 +19,9 @@ import {
index as supplierIndex, index as supplierIndex,
update, update,
} from '@/routes/admin/master/suppliers'; } 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 type { Supplier } from './columns';
import { createSupplierColumns } from './columns'; import { createSupplierColumns } from './columns';
@ -275,18 +275,7 @@ export default function SupplierIndex({ suppliers }: Props) {
<Label htmlFor="edit-phone_number"> <Label htmlFor="edit-phone_number">
No. Telepon No. Telepon
</Label> </Label>
<Input <PhoneNumberInput name="phone_number" defaultValue={editing.phone_number} />
id="edit-phone_number"
name="phone_number"
type="tel"
inputMode="numeric"
pattern="[0-9]*"
placeholder="Masukkan nomor telepon"
defaultValue={
editing.phone_number ??
''
}
/>
<InputError <InputError
message={ message={
errors.phone_number errors.phone_number