refactor: add autoComplete attribute to input fields across order, purchase, and product forms for improved user experience

2026-04-24 23:57:35 +07:00 · 2026-04-24 23:57:35 +07:00 · 9d0fc6d15e
commit 9d0fc6d15e
parent f383f3bd00
10 changed files with 117 additions and 135 deletions
--- a/resources/js/pages/admin/manage/order/create.tsx
+++ b/resources/js/pages/admin/manage/order/create.tsx
@ -275,7 +275,7 @@ return;
                <div className="grid grid-cols-2 gap-3">
                    <Field>
                        <Label htmlFor='customer_name' className="text-xs text-muted-foreground" required>Pelanggan</Label>
-                        <Input id="customer_name" className="h-8 text-xs" value={data.customer_name} onChange={e => setData('customer_name', e.target.value)} placeholder="Nama Pelanggan" />
+                        <Input id="customer_name" className="h-8 text-xs" value={data.customer_name} onChange={e => setData('customer_name', e.target.value)} autoComplete="off" placeholder="Nama Pelanggan" />
                        <FieldError error={errors.customer_name} label="Pelanggan" className="text-xs" />
                    </Field>
                    <Field>
--- a/resources/js/pages/admin/manage/order/edit.tsx
+++ b/resources/js/pages/admin/manage/order/edit.tsx
@ -285,7 +285,7 @@ return;
                <div className="grid grid-cols-2 gap-3">
                    <Field>
                        <Label htmlFor='customer_name' className="text-xs text-muted-foreground" required>Pelanggan</Label>
-                        <Input id='customer_name' className="h-8 text-xs" value={data.customer_name} onChange={e => setData('customer_name', e.target.value)} />
+                        <Input id='customer_name' className="h-8 text-xs" value={data.customer_name} autoComplete="off" onChange={e => setData('customer_name', e.target.value)} />
                        <FieldError error={errors.customer_name} label="Pelanggan" className="text-xs" />
                    </Field>
                    <Field>
--- a/resources/js/pages/admin/manage/purchase/create.tsx
+++ b/resources/js/pages/admin/manage/purchase/create.tsx
@ -596,7 +596,7 @@ return;

                                    <Field>
                                        <Label htmlFor="note" className="text-xs text-muted-foreground">Catatan</Label>
-                                        <Input id="note" className="h-8 text-xs" value={data.note} onChange={e => setData('note', e.target.value)} placeholder="...." />
+                                        <Input id="note" className="h-8 text-xs" value={data.note} onChange={e => setData('note', e.target.value)} autoComplete='off' placeholder="...." />
                                        <FieldError error={errors.note} label="Catatan" className="text-xs" />
                                    </Field>

--- 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;

                <Field>
                    <Label htmlFor='note' className="text-xs text-muted-foreground">Catatan</Label>
-                    <Input id='note' className="h-8 text-xs" value={data.note} onChange={e => setData('note', e.target.value)} placeholder="...." />
+                    <Input id='note' className="h-8 text-xs" value={data.note} onChange={e => setData('note', e.target.value)} autoComplete='off' placeholder="...." />
                    <FieldError error={errors.note} label="Catatan" className="text-xs" />
                </Field>

@ -449,8 +449,8 @@ return;
                                                        )}
                                                        onClick={(e) => {
                                                            if (!cartItem) {
-return;
-}
+                                                                return;
+                                                            }

                                                            openQtyDialog(cartItem, e);
                                                        }}
@ -810,10 +810,10 @@ return;
            </div>
            {/* Quantity Input Dialog */}
            <Dialog open={qtyDialogIndex !== null} onOpenChange={(open) => {
- if (!open) {
-setQtyDialogIndex(null);
-} 
-}}>
+                if (!open) {
+                    setQtyDialogIndex(null);
+                }
+            }}>
                <DialogContent className="max-w-xs">
                    <DialogHeader>
                        <DialogTitle>Ubah Jumlah</DialogTitle>
@ -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
                        />
--- 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<HTMLInputElement>) => {
        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 = '';
                                <FieldError error={errors['images']} label="Galeri Gambar" className="text-xs" />
                            </CardContent>
                        </Card>
-
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
-                            <Button type="submit" className="w-full gap-2" disabled={processing}>
-                                {processing ? <Loader className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-                                {processing ? 'Menyimpan...' : 'Simpan'}
-                            </Button>
-                        </div>
                    </div>
                </div>
+
+                <Button type="submit" disabled={processing}>
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    {processing ? 'Menyimpan...' : 'Simpan'}
+                </Button>
            </form>

        </div>
--- 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<HTMLInputElement>) => {
        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 = '';
                                <FieldError error={errors['images']} label="Galeri Gambar" className="text-xs" />
                            </CardContent>
                        </Card>
-
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
-                            <div className="flex flex-col gap-2">
-                                <Button type="submit" className="w-full gap-2" disabled={processing}>
-                                    {processing ? <Loader className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-                                    {processing ? 'Menyimpan...' : 'Simpan'}
-                                </Button>
-                            </div>
-                        </div>
                    </div>
                </div>
+
+                <Button type="submit" disabled={processing}>
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    {processing ? 'Menyimpan...' : 'Simpan'}
+                </Button>
            </form>

        </div>
--- 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() {
                                </Field>
                            </CardContent>
                        </Card>
-
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
-                            <Button type="submit" className="w-full" disabled={processing}>
-                                {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
-                                {processing ? 'Menyimpan...' : 'Simpan'}
-                            </Button>
-                        </div>
                    </div>
                </div>
+
+                <Button type="submit" disabled={processing}>
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    {processing ? 'Menyimpan...' : 'Simpan'}
+                </Button>
            </form>

        </div>
--- 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 }) {
                                </Field>
                            </CardContent>
                        </Card>
-
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
-                            <Button type="submit" className="w-full" disabled={processing}>
-                                {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
-                                {processing ? 'Menyimpan...' : 'Simpan'}
-                            </Button>
-                        </div>
                    </div>
                </div>
-            </form>

+                <Button type="submit" disabled={processing}>
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    {processing ? 'Menyimpan...' : 'Simpan'}
+                </Button>
+            </form>
        </div>
    );
 }
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@ -199,15 +199,13 @@ export default function Profile({
                                </Field>
                            </CardContent>
                        </Card>
-
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
-                            <Button type="submit" className="w-full" disabled={processing}>
-                                {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
-                                {processing ? 'Menyimpan...' : 'Simpan'}
-                            </Button>
-                        </div>
                    </div>
                </div>
+
+                <Button type="submit" disabled={processing}>
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                    {processing ? 'Menyimpan...' : 'Simpan'}
+                </Button>
            </form>
        </div>
    );
--- a/resources/js/pages/settings/security.tsx
+++ b/resources/js/pages/settings/security.tsx
@ -144,16 +144,14 @@ export default function Security({
                                        <FieldError error={errors.password_confirmation} label="Konfirmasi kata sandi baru" className="text-xs" />
                                    </Field>
                                </div>
-
-                                <div className="flex justify-end">
-                                    <Button type="submit" disabled={processing}>
-                                        {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
-                                        {processing ? 'Menyimpan...' : 'Simpan'}
-                                    </Button>
-                                </div>
                            </CardContent>
                        </Card>

+                        <Button type="submit" disabled={processing}>
+                            {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
+                            {processing ? 'Menyimpan...' : 'Simpan'}
+                        </Button>
+
                        {canManageTwoFactor && (
                            <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
                                <CardHeader className="border-b">