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

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>

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>

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>
 

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

resources/js/pages/admin/master/product/create.tsx

@@ -1,29 +1,28 @@
-import { Head, Link } from '@inertiajs/react';
+import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor';
-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 { 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"
+} from "@/components/ui/combobox";
-import { Field, FieldError } from "@/components/ui/field"
+import { Field, FieldError } from "@/components/ui/field";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label"
+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<{
@@ -413,15 +412,13 @@ imagesInputRef.current.value = '';
                                 <FieldError error={errors['images']} label="Galeri Gambar" className="text-xs" />
                             </CardContent>
                         </Card>
+                    </div>
+                </div>
 
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
+                <Button type="submit" disabled={processing}>
-                            <Button type="submit" className="w-full gap-2" disabled={processing}>
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
-                                {processing ? <Loader className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                     {processing ? 'Menyimpan...' : 'Simpan'}
                 </Button>
-                        </div>
-                    </div>
-                </div>
             </form>
 
         </div>

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"
+} from "@/components/ui/combobox";
-import { Field, FieldError } from "@/components/ui/field"
+import { Field, FieldError } from "@/components/ui/field";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label"
+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';
@@ -481,17 +481,13 @@ imagesInputRef.current.value = '';
                                 <FieldError error={errors['images']} label="Galeri Gambar" className="text-xs" />
                             </CardContent>
                         </Card>
+                    </div>
+                </div>
 
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
+                <Button type="submit" disabled={processing}>
-                            <div className="flex flex-col gap-2">
+                    {processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
-                                <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>
             </form>
 
         </div>

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 { Field, FieldError } from "@/components/ui/field";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label"
+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>
+                </div>
 
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
+                <Button type="submit" disabled={processing}>
-                            <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>
 
         </div>

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 { Field, FieldError } from "@/components/ui/field";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label"
+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>
+                </div>
 
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
+                <Button type="submit" disabled={processing}>
-                            <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>
-
         </div>
     );
 }

resources/js/pages/settings/profile.tsx

@@ -199,15 +199,13 @@ export default function Profile({
                                 </Field>
                             </CardContent>
                         </Card>
+                    </div>
+                </div>
 
-                        <div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
+                <Button type="submit" disabled={processing}>
-                            <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>
         </div>
     );

resources/js/pages/settings/security.tsx

@@ -144,15 +144,13 @@ export default function Security({
                                         <FieldError error={errors.password_confirmation} label="Konfirmasi kata sandi baru" className="text-xs" />
                                     </Field>
                                 </div>
+                            </CardContent>
+                        </Card>
 
-                                <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>
 
                         {canManageTwoFactor && (
                             <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">