From 9d0fc6d15ee364e5efde9ba95c43eddba867bf3a Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Fri, 24 Apr 2026 23:57:35 +0700 Subject: [PATCH] refactor: add autoComplete attribute to input fields across order, purchase, and product forms for improved user experience --- .../js/pages/admin/manage/order/create.tsx | 2 +- .../js/pages/admin/manage/order/edit.tsx | 2 +- .../js/pages/admin/manage/purchase/create.tsx | 2 +- .../js/pages/admin/manage/purchase/edit.tsx | 46 ++++++++-------- .../js/pages/admin/master/product/create.tsx | 55 +++++++++---------- .../js/pages/admin/master/product/edit.tsx | 54 +++++++++--------- .../js/pages/admin/master/user/create.tsx | 33 +++++------ resources/js/pages/admin/master/user/edit.tsx | 34 +++++------- resources/js/pages/settings/profile.tsx | 12 ++-- resources/js/pages/settings/security.tsx | 12 ++-- 10 files changed, 117 insertions(+), 135 deletions(-) diff --git a/resources/js/pages/admin/manage/order/create.tsx b/resources/js/pages/admin/manage/order/create.tsx index c6da681..ab2009e 100644 --- a/resources/js/pages/admin/manage/order/create.tsx +++ b/resources/js/pages/admin/manage/order/create.tsx @@ -275,7 +275,7 @@ return;
- setData('customer_name', e.target.value)} placeholder="Nama Pelanggan" /> + setData('customer_name', e.target.value)} autoComplete="off" placeholder="Nama Pelanggan" /> diff --git a/resources/js/pages/admin/manage/order/edit.tsx b/resources/js/pages/admin/manage/order/edit.tsx index 22b8845..2220891 100644 --- a/resources/js/pages/admin/manage/order/edit.tsx +++ b/resources/js/pages/admin/manage/order/edit.tsx @@ -285,7 +285,7 @@ return;
- setData('customer_name', e.target.value)} /> + setData('customer_name', e.target.value)} /> diff --git a/resources/js/pages/admin/manage/purchase/create.tsx b/resources/js/pages/admin/manage/purchase/create.tsx index 772d42d..625eaf3 100644 --- a/resources/js/pages/admin/manage/purchase/create.tsx +++ b/resources/js/pages/admin/manage/purchase/create.tsx @@ -596,7 +596,7 @@ return; - setData('note', e.target.value)} placeholder="...." /> + setData('note', e.target.value)} autoComplete='off' placeholder="...." /> diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx index 4a9a5cd..d89ea3b 100644 --- a/resources/js/pages/admin/manage/purchase/edit.tsx +++ b/resources/js/pages/admin/manage/purchase/edit.tsx @@ -1,8 +1,3 @@ -import { Head, Link, useForm } from '@inertiajs/react'; -import { format } from 'date-fns'; -import { Plus, Trash2, CalendarIcon, Minus, ShoppingCart, Search, ImagePlus, X, Loader, Save, ArrowLeft } from 'lucide-react'; -import React, { useMemo, useState } from 'react'; -import { toast } from 'sonner'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Calendar } from '@/components/ui/calendar'; @@ -10,9 +5,9 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, + DialogFooter, DialogHeader, DialogTitle, - DialogFooter, } from "@/components/ui/dialog"; import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty'; import { Field, FieldError } from "@/components/ui/field"; @@ -29,14 +24,19 @@ import { } from "@/components/ui/select"; import { Sheet, + SheetClose, SheetContent, SheetTrigger, - SheetClose, } from "@/components/ui/sheet"; +import { formatCurrency } from '@/lib/formatters'; import { cn } from '@/lib/utils'; -import { formatCurrency, formatNumber } from '@/lib/formatters'; import purchaseRoutes from '@/routes/purchase'; import type { Product, ProductPrice, Purchase } from '@/types'; +import { Head, Link, useForm } from '@inertiajs/react'; +import { format } from 'date-fns'; +import { ArrowLeft, CalendarIcon, ImagePlus, Loader, Minus, Plus, Save, Search, ShoppingCart, Trash2, X } from 'lucide-react'; +import React, { useMemo, useState } from 'react'; +import { toast } from 'sonner'; type CartItem = { product_id: number; quantity: number; unit_price: number; product: Product }; @@ -104,8 +104,8 @@ export default function PurchaseEdit({ purchase, products }: { purchase: Purchas const existingIndex = data.items.findIndex(i => i.product_id === product.id); if (existingIndex === -1) { -return; -} + return; + } const newItems = [...data.items]; @@ -130,8 +130,8 @@ return; const updateCartQuantity = (productId: number, quantity: number) => { if (quantity < 1) { -return; -} + return; + } const newItems = [...data.items]; const index = newItems.findIndex(i => i.product_id === productId); @@ -296,7 +296,7 @@ return; - setData('note', e.target.value)} placeholder="...." /> + setData('note', e.target.value)} autoComplete='off' placeholder="...." /> @@ -449,8 +449,8 @@ return; )} onClick={(e) => { if (!cartItem) { -return; -} + return; + } openQtyDialog(cartItem, e); }} @@ -810,10 +810,10 @@ return;
{/* Quantity Input Dialog */} { - if (!open) { -setQtyDialogIndex(null); -} -}}> + if (!open) { + setQtyDialogIndex(null); + } + }}> Ubah Jumlah @@ -828,10 +828,10 @@ setQtyDialogIndex(null); value={qtyInputValue} onChange={e => setQtyInputValue(e.target.value)} onKeyDown={e => { - if (e.key === 'Enter') { -confirmQty(); -} -}} + if (e.key === 'Enter') { + confirmQty(); + } + }} className="text-lg font-bold" autoFocus /> diff --git a/resources/js/pages/admin/master/product/create.tsx b/resources/js/pages/admin/master/product/create.tsx index 2753631..a071e6a 100644 --- a/resources/js/pages/admin/master/product/create.tsx +++ b/resources/js/pages/admin/master/product/create.tsx @@ -1,29 +1,28 @@ -import { Head, Link } from '@inertiajs/react'; -import { useForm } from '@inertiajs/react'; -import { ImagePlus, X, Upload, ArrowLeft, Save, Loader } from 'lucide-react'; -import React, { useRef, useState } from 'react'; -import { NumericFormat } from 'react-number-format'; -import { toast } from 'sonner'; -import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor' +import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, - ComboboxChips, - ComboboxChip, - ComboboxChipsInput, ComboboxValue, useComboboxAnchor, -} from "@/components/ui/combobox" -import { Field, FieldError } from "@/components/ui/field" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +} from "@/components/ui/combobox"; +import { Field, FieldError } from "@/components/ui/field"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; import productRoutes from '@/routes/product'; import type { Category } from '@/types/category'; +import { Head, Link, useForm } from '@inertiajs/react'; +import { ArrowLeft, ImagePlus, Loader, Save, Upload, X } from 'lucide-react'; +import React, { useRef, useState } from 'react'; +import { NumericFormat } from 'react-number-format'; +import { toast } from 'sonner'; export default function ProductCreate({ categories }: { categories: Category[] }) { const { data, setData, post, processing, errors } = useForm<{ @@ -65,8 +64,8 @@ export default function ProductCreate({ categories }: { categories: Category[] } const file = e.target.files?.[0]; if (!file) { -return; -} + return; + } setData('thumbnail', file); const reader = new FileReader(); @@ -79,16 +78,16 @@ return; setThumbnailPreview(null); if (thumbnailInputRef.current) { -thumbnailInputRef.current.value = ''; -} + thumbnailInputRef.current.value = ''; + } }; const handleImagesChange = (e: React.ChangeEvent) => { const files = Array.from(e.target.files ?? []); if (!files.length) { -return; -} + return; + } const newPreviews = files.map(file => ({ file, @@ -99,8 +98,8 @@ return; setData('images', [...data.images, ...files]); if (imagesInputRef.current) { -imagesInputRef.current.value = ''; -} + imagesInputRef.current.value = ''; + } }; const removeImage = (index: number) => { @@ -413,15 +412,13 @@ imagesInputRef.current.value = ''; - -
- -
+ + diff --git a/resources/js/pages/admin/master/product/edit.tsx b/resources/js/pages/admin/master/product/edit.tsx index 3bbefe9..e9caff2 100644 --- a/resources/js/pages/admin/master/product/edit.tsx +++ b/resources/js/pages/admin/master/product/edit.tsx @@ -1,29 +1,29 @@ -import { Head, useForm, Link } from '@inertiajs/react'; -import { ImagePlus, X, Upload, ArrowLeft, Save, Loader } from 'lucide-react'; -import React, { useRef, useState } from 'react'; -import { NumericFormat } from 'react-number-format'; -import { toast } from 'sonner'; import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, - ComboboxChips, - ComboboxChip, - ComboboxChipsInput, ComboboxValue, useComboboxAnchor, -} from "@/components/ui/combobox" -import { Field, FieldError } from "@/components/ui/field" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +} from "@/components/ui/combobox"; +import { Field, FieldError } from "@/components/ui/field"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; import productRoutes from '@/routes/product'; import type { Product, ProductPrice } from '@/types'; import type { Category } from '@/types/category'; +import { Head, Link, useForm } from '@inertiajs/react'; +import { ArrowLeft, ImagePlus, Loader, Save, Upload, X } from 'lucide-react'; +import React, { useRef, useState } from 'react'; +import { NumericFormat } from 'react-number-format'; +import { toast } from 'sonner'; interface ExistingImage { kind: 'existing'; @@ -101,8 +101,8 @@ export default function ProductEdit({ product, categories }: { product: Product, const file = e.target.files?.[0]; if (!file) { -return; -} + return; + } setData('thumbnail', file); setThumbnailCleared(false); @@ -117,16 +117,16 @@ return; setThumbnailCleared(true); if (thumbnailInputRef.current) { -thumbnailInputRef.current.value = ''; -} + thumbnailInputRef.current.value = ''; + } }; const handleImagesChange = (e: React.ChangeEvent) => { const files = Array.from(e.target.files ?? []); if (!files.length) { -return; -} + return; + } const newItems: NewImage[] = files.map(file => ({ kind: 'new', @@ -138,8 +138,8 @@ return; setData('images', [...data.images, ...files]); if (imagesInputRef.current) { -imagesInputRef.current.value = ''; -} + imagesInputRef.current.value = ''; + } }; const removeGalleryItem = (index: number) => { @@ -481,17 +481,13 @@ imagesInputRef.current.value = ''; - -
-
- -
-
+ + diff --git a/resources/js/pages/admin/master/user/create.tsx b/resources/js/pages/admin/master/user/create.tsx index 05b925e..1c73afb 100644 --- a/resources/js/pages/admin/master/user/create.tsx +++ b/resources/js/pages/admin/master/user/create.tsx @@ -1,22 +1,21 @@ -import { Head, Link } from '@inertiajs/react'; -import { useForm } from '@inertiajs/react'; -import { ArrowLeft, Loader, Save } from 'lucide-react'; -import React from 'react'; -import { NumericFormat } from 'react-number-format'; -import { toast } from 'sonner'; import { Button } from '@/components/ui/button'; -import { Calendar } from "@/components/ui/calendar" +import { Calendar } from "@/components/ui/calendar"; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; -import { Field, FieldError } from "@/components/ui/field" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +import { Field, FieldError } from "@/components/ui/field"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger, -} from "@/components/ui/popover" +} from "@/components/ui/popover"; import { Textarea } from '@/components/ui/textarea'; import userRoutes from '@/routes/user'; +import { Head, Link, useForm } from '@inertiajs/react'; +import { ArrowLeft, Loader, Save } from 'lucide-react'; +import React from 'react'; +import { NumericFormat } from 'react-number-format'; +import { toast } from 'sonner'; export default function UserCreate() { const [isCalendarOpen, setIsCalendarOpen] = React.useState(false); @@ -223,15 +222,13 @@ export default function UserCreate() { - -
- -
+ + diff --git a/resources/js/pages/admin/master/user/edit.tsx b/resources/js/pages/admin/master/user/edit.tsx index e6a0ab5..72ced34 100644 --- a/resources/js/pages/admin/master/user/edit.tsx +++ b/resources/js/pages/admin/master/user/edit.tsx @@ -1,22 +1,21 @@ -import { Head, Link } from '@inertiajs/react'; -import { useForm } from '@inertiajs/react'; -import { ArrowLeft, Loader, Save } from 'lucide-react'; -import React from 'react'; -import { NumericFormat } from 'react-number-format'; -import { toast } from 'sonner'; import { Button } from '@/components/ui/button'; -import { Calendar } from "@/components/ui/calendar" +import { Calendar } from "@/components/ui/calendar"; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; -import { Field, FieldError } from "@/components/ui/field" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +import { Field, FieldError } from "@/components/ui/field"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger, -} from "@/components/ui/popover" +} from "@/components/ui/popover"; import { Textarea } from '@/components/ui/textarea'; import userRoutes from '@/routes/user'; +import { Head, Link, useForm } from '@inertiajs/react'; +import { ArrowLeft, Loader, Save } from 'lucide-react'; +import React from 'react'; +import { NumericFormat } from 'react-number-format'; +import { toast } from 'sonner'; export default function UserEdit({ user }: { user: any }) { const [isCalendarOpen, setIsCalendarOpen] = React.useState(false); @@ -224,17 +223,14 @@ export default function UserEdit({ user }: { user: any }) { - -
- -
- + + ); } diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx index 879a8e9..dde3bc3 100644 --- a/resources/js/pages/settings/profile.tsx +++ b/resources/js/pages/settings/profile.tsx @@ -199,15 +199,13 @@ export default function Profile({ - -
- -
+ + ); diff --git a/resources/js/pages/settings/security.tsx b/resources/js/pages/settings/security.tsx index 45a6d0f..6bcf001 100644 --- a/resources/js/pages/settings/security.tsx +++ b/resources/js/pages/settings/security.tsx @@ -144,16 +144,14 @@ export default function Security({ - -
- -
+ + {canManageTwoFactor && (