feat: update product create and edit forms to include detailed pricing fields and improved layout structure
This commit is contained in:
Yoga Pangestu
parent
2e1aebae97
commit
e8ae633509
@ -1,5 +1,5 @@
|
||||
import { Head, useForm, Link } from '@inertiajs/react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Field, FieldGroup } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
@ -58,12 +58,21 @@ export default function ProductCreate({ categories }: { categories: Category[] }
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Tambah Produk</h1>
|
||||
</div>
|
||||
<Link href={productRoutes.index().url}>
|
||||
<Button variant='outline'>
|
||||
Kembali
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
|
||||
<CardContent className="p-0">
|
||||
<form onSubmit={onSubmit} className="space-y-6 mt-4">
|
||||
<FieldGroup>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Informasi Produk</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<Field>
|
||||
<Label htmlFor="name">Nama</Label>
|
||||
<Input
|
||||
@ -77,50 +86,15 @@ export default function ProductCreate({ categories }: { categories: Category[] }
|
||||
/>
|
||||
{errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
|
||||
</Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Field>
|
||||
<Label>Kategori</Label>
|
||||
<Combobox
|
||||
multiple
|
||||
autoHighlight
|
||||
items={filteredCategories}
|
||||
value={categories.filter(c => data.category_ids.includes(c.id))}
|
||||
onValueChange={(selected) => {
|
||||
setData(
|
||||
"category_ids",
|
||||
selected.map((item: Category) => item.id)
|
||||
)
|
||||
}}
|
||||
>
|
||||
<ComboboxChips ref={anchor} className="w-full">
|
||||
<ComboboxValue>
|
||||
{(values: Category[]) => (
|
||||
<>
|
||||
{values.map((value) => (
|
||||
<ComboboxChip key={value.id}>
|
||||
{value.name}
|
||||
</ComboboxChip>
|
||||
))}
|
||||
<ComboboxChipsInput placeholder='Pilih Kategori' />
|
||||
</>
|
||||
)}
|
||||
</ComboboxValue>
|
||||
</ComboboxChips>
|
||||
<ComboboxContent anchor={anchor}>
|
||||
<ComboboxEmpty>Data tidak ditemukan.</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{(item: Category) => (
|
||||
<ComboboxItem key={item.id} value={item}>
|
||||
{item.name}
|
||||
</ComboboxItem>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
{errors.category_ids && <p className="text-xs text-red-500">{errors.category_ids}</p>}
|
||||
</Field>
|
||||
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Harga Produk</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Field>
|
||||
<Label htmlFor="price_purchase">Harga Beli</Label>
|
||||
<NumericFormat
|
||||
@ -201,7 +175,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
|
||||
{errors['prices.reseller'] && <p className="text-xs text-red-500">{errors['prices.reseller']}</p>}
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<Field className="md:col-span-2">
|
||||
<Label htmlFor="price_retail">Harga Retail</Label>
|
||||
<NumericFormat
|
||||
id="price_retail"
|
||||
@ -221,28 +195,82 @@ export default function ProductCreate({ categories }: { categories: Category[] }
|
||||
{errors['prices.retail'] && <p className="text-xs text-red-500">{errors['prices.retail']}</p>}
|
||||
</Field>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Kategori</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Field>
|
||||
<Combobox
|
||||
multiple
|
||||
autoHighlight
|
||||
items={filteredCategories}
|
||||
value={categories.filter(c => data.category_ids.includes(c.id))}
|
||||
onValueChange={(selected) => {
|
||||
setData(
|
||||
"category_ids",
|
||||
selected.map((item: Category) => item.id)
|
||||
)
|
||||
}}
|
||||
>
|
||||
<ComboboxChips ref={anchor} className="w-full">
|
||||
<ComboboxValue>
|
||||
{(values: Category[]) => (
|
||||
<>
|
||||
{values.map((value) => (
|
||||
<ComboboxChip key={value.id}>
|
||||
{value.name}
|
||||
</ComboboxChip>
|
||||
))}
|
||||
<ComboboxChipsInput placeholder='Pilih Kategori' />
|
||||
</>
|
||||
)}
|
||||
</ComboboxValue>
|
||||
</ComboboxChips>
|
||||
<ComboboxContent anchor={anchor}>
|
||||
<ComboboxEmpty>Data tidak ditemukan.</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{(item: Category) => (
|
||||
<ComboboxItem key={item.id} value={item}>
|
||||
{item.name}
|
||||
</ComboboxItem>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
{errors.category_ids && <p className="text-xs text-red-500 mt-1">{errors.category_ids}</p>}
|
||||
</Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Deskripsi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Field>
|
||||
<Label htmlFor="description">Deskripsi</Label>
|
||||
<SimpleEditor
|
||||
value={data.description}
|
||||
onChange={(val) => setData('description', val)}
|
||||
/>
|
||||
{errors.description && <p className="text-xs text-red-500">{errors.description}</p>}
|
||||
{errors.description && <p className="text-xs text-red-500 mt-1">{errors.description}</p>}
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-4 p-4 mt-6 rounded-lg justify-end">
|
||||
<Link href={productRoutes.index().url}>
|
||||
<Button type="button" variant="outline">Kembali</Button>
|
||||
</Link>
|
||||
<Button type="submit" disabled={processing}>
|
||||
<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 ? 'Menyimpan...' : 'Simpan'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Head, useForm, Link } from '@inertiajs/react';
|
||||
import type { Product, ProductPrice } from '@/types';
|
||||
import { Category } from '@/types/category';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Field, FieldGroup } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
@ -66,12 +66,21 @@ export default function ProductEdit({ product, categories }: { product: Product,
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Ubah Produk</h1>
|
||||
</div>
|
||||
<Link href={productRoutes.index().url}>
|
||||
<Button variant='outline'>
|
||||
Kembali
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
|
||||
<CardContent className="p-0">
|
||||
<form onSubmit={onSubmit} className="space-y-6 mt-4">
|
||||
<FieldGroup>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Informasi Produk</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<Field>
|
||||
<Label htmlFor="name">Nama</Label>
|
||||
<Input
|
||||
@ -85,50 +94,15 @@ export default function ProductEdit({ product, categories }: { product: Product,
|
||||
/>
|
||||
{errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
|
||||
</Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Field>
|
||||
<Label>Kategori</Label>
|
||||
<Combobox
|
||||
multiple
|
||||
autoHighlight
|
||||
items={filteredCategories}
|
||||
value={categories.filter(c => data.category_ids.includes(c.id))}
|
||||
onValueChange={(selected) => {
|
||||
setData(
|
||||
"category_ids",
|
||||
selected.map((item: Category) => item.id)
|
||||
)
|
||||
}}
|
||||
>
|
||||
<ComboboxChips ref={anchor} className="w-full">
|
||||
<ComboboxValue>
|
||||
{(values: Category[]) => (
|
||||
<>
|
||||
{values.map((value) => (
|
||||
<ComboboxChip key={value.id}>
|
||||
{value.name}
|
||||
</ComboboxChip>
|
||||
))}
|
||||
<ComboboxChipsInput placeholder='Pilih Kategori' />
|
||||
</>
|
||||
)}
|
||||
</ComboboxValue>
|
||||
</ComboboxChips>
|
||||
<ComboboxContent anchor={anchor}>
|
||||
<ComboboxEmpty>Data tidak ditemukan.</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{(item: Category) => (
|
||||
<ComboboxItem key={item.id} value={item}>
|
||||
{item.name}
|
||||
</ComboboxItem>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
{errors.category_ids && <p className="text-xs text-red-500">{errors.category_ids}</p>}
|
||||
</Field>
|
||||
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Harga Produk</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Field>
|
||||
<Label htmlFor="price_purchase">Harga Beli</Label>
|
||||
<NumericFormat
|
||||
@ -209,7 +183,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
|
||||
{errors['prices.reseller'] && <p className="text-xs text-red-500">{errors['prices.reseller']}</p>}
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<Field className="md:col-span-2">
|
||||
<Label htmlFor="price_retail">Harga Retail</Label>
|
||||
<NumericFormat
|
||||
id="price_retail"
|
||||
@ -229,28 +203,85 @@ export default function ProductEdit({ product, categories }: { product: Product,
|
||||
{errors['prices.retail'] && <p className="text-xs text-red-500">{errors['prices.retail']}</p>}
|
||||
</Field>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column - 1/3 width */}
|
||||
<div className="space-y-6">
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Kategori</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Field>
|
||||
<Combobox
|
||||
multiple
|
||||
autoHighlight
|
||||
items={filteredCategories}
|
||||
value={categories.filter(c => data.category_ids.includes(c.id))}
|
||||
onValueChange={(selected) => {
|
||||
setData(
|
||||
"category_ids",
|
||||
selected.map((item: Category) => item.id)
|
||||
)
|
||||
}}
|
||||
>
|
||||
<ComboboxChips ref={anchor} className="w-full">
|
||||
<ComboboxValue>
|
||||
{(values: Category[]) => (
|
||||
<>
|
||||
{values.map((value) => (
|
||||
<ComboboxChip key={value.id}>
|
||||
{value.name}
|
||||
</ComboboxChip>
|
||||
))}
|
||||
<ComboboxChipsInput placeholder='Pilih Kategori' />
|
||||
</>
|
||||
)}
|
||||
</ComboboxValue>
|
||||
</ComboboxChips>
|
||||
<ComboboxContent anchor={anchor}>
|
||||
<ComboboxEmpty>Data tidak ditemukan.</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{(item: Category) => (
|
||||
<ComboboxItem key={item.id} value={item}>
|
||||
{item.name}
|
||||
</ComboboxItem>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
{errors.category_ids && <p className="text-xs text-red-500 mt-1">{errors.category_ids}</p>}
|
||||
</Field>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
||||
<CardHeader className="border-b">
|
||||
<CardTitle>Deskripsi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Field>
|
||||
<Label htmlFor="description">Deskripsi</Label>
|
||||
<SimpleEditor
|
||||
value={data.description}
|
||||
onChange={(val) => setData('description', val)}
|
||||
/>
|
||||
{errors.description && <p className="text-xs text-red-500">{errors.description}</p>}
|
||||
{errors.description && <p className="text-xs text-red-500 mt-1">{errors.description}</p>}
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-4 p-4 mt-6 rounded-lg justify-end">
|
||||
<Link href={productRoutes.index().url}>
|
||||
<Button type="button" variant="outline">Kembali</Button>
|
||||
</Link>
|
||||
<Button type="submit" disabled={processing}>
|
||||
<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" disabled={processing}>
|
||||
{processing ? 'Menyimpan...' : 'Simpan'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user