vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-24 23:57:35 +07:00
parent f383f3bd00
commit 9d0fc6d15e
10 changed files with 117 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/pages/admin/manage/order/create.tsx
View File

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

2
resources/js/pages/admin/manage/order/edit.tsx
View File

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

2
resources/js/pages/admin/manage/purchase/create.tsx
View File

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

18
resources/js/pages/admin/manage/purchase/edit.tsx
View File

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

37
resources/js/pages/admin/master/product/create.tsx
View File

@ -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<{
@ -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" className="w-full gap-2" disabled={processing}>
{processing ? <Loader className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
<Button type="submit" disabled={processing}>
{processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
{processing ? 'Menyimpan...' : 'Simpan'}
</Button>
</div>
</div>
</div>
</form>
</div>

36
resources/js/pages/admin/master/product/edit.tsx
View File

@ -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';
@ -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">
<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" />}
<Button type="submit" disabled={processing}>
{processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
{processing ? 'Menyimpan...' : 'Simpan'}
</Button>
</div>
</div>
</div>
</div>
</form>
</div>

29
resources/js/pages/admin/master/user/create.tsx
View File

@ -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>
</div>
<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}>
<Button type="submit" disabled={processing}>
{processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
{processing ? 'Menyimpan...' : 'Simpan'}
</Button>
</div>
</div>
</div>
</form>
</div>

30
resources/js/pages/admin/master/user/edit.tsx
View File

@ -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>
</div>
<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}>
<Button type="submit" disabled={processing}>
{processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
{processing ? 'Menyimpan...' : 'Simpan'}
</Button>
</div>
</div>
</div>
</form>
</div>
);
}

8
resources/js/pages/settings/profile.tsx
View File

@ -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" className="w-full" disabled={processing}>
<Button type="submit" disabled={processing}>
{processing ? <Loader className="size-4 animate-spin" /> : <Save className="size-4" />}
{processing ? 'Menyimpan...' : 'Simpan'}
</Button>
</div>
</div>
</div>
</form>
</div>
);

6
resources/js/pages/settings/security.tsx
View File

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