9637671713
- Updated ProductIndex component to improve category and product filtering with memoization. - Refactored Combobox components for better performance and usability. - Added PurchaseController routes for managing purchases with appropriate permissions. - Created comprehensive tests for purchase management, covering creation, updating, and deletion scenarios. - Ensured proper handling of raw materials and their variants during purchase operations. - Implemented validation for required fields in purchase creation and updates.
438 lines
16 KiB
TypeScript
438 lines
16 KiB
TypeScript
import { Head, router } from '@inertiajs/react';
|
|
import { Filter, Plus, X } from 'lucide-react';
|
|
import { useCallback, useMemo, useState } from 'react';
|
|
import { CardTable } from '@/components/card-table';
|
|
import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
|
|
import { ConfirmDialog } from '@/components/confirm-dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Combobox,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxList,
|
|
} from '@/components/ui/combobox';
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/components/ui/popover';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
destroy,
|
|
create as productCreate,
|
|
index as productIndex,
|
|
edit as productEdit,
|
|
toggleStatus,
|
|
} from '@/routes/admin/master/products';
|
|
import {
|
|
destroy as variantDestroy,
|
|
edit as variantEdit,
|
|
} from '@/routes/admin/master/products/variants';
|
|
import type { Product, ProductVariant } from './columns';
|
|
import { ProductCardRow } from './product-card';
|
|
import { VariantSubRow } from './variant/sub-row';
|
|
|
|
type Props = {
|
|
products: {
|
|
data: Product[];
|
|
current_page: number;
|
|
last_page: number;
|
|
per_page: number;
|
|
total: number;
|
|
};
|
|
categories: {
|
|
id: number;
|
|
name: string;
|
|
}[];
|
|
filters: {
|
|
status?: string;
|
|
name?: string;
|
|
stock?: string;
|
|
category?: string;
|
|
};
|
|
};
|
|
|
|
export default function ProductIndex({ products, categories, filters }: Props) {
|
|
const [deleting, setDeleting] = useState<Product | null>(null);
|
|
const [deletingVariant, setDeletingVariant] = useState<{
|
|
product: Product;
|
|
variant: ProductVariant;
|
|
} | null>(null);
|
|
const [filterOpen, setFilterOpen] = useState(false);
|
|
const [search, setSearch] = useState('');
|
|
const expand = useCardTableExpand(true);
|
|
const hasActiveFilters =
|
|
filters.status || filters.name || filters.stock || filters.category;
|
|
|
|
const pagination = {
|
|
current_page: products.current_page,
|
|
last_page: products.last_page,
|
|
per_page: products.per_page,
|
|
total: products.total,
|
|
};
|
|
|
|
const productNames = useMemo(() => {
|
|
const names = products.data.map((p) => p.name);
|
|
return [...new Set(names)].sort();
|
|
}, [products.data]);
|
|
|
|
const selectedCategory = useMemo(
|
|
() =>
|
|
categories.find((c) => String(c.id) === filters.category) ?? null,
|
|
[categories, filters.category],
|
|
);
|
|
|
|
function applyFilter(key: string, value: string) {
|
|
const newFilters = { ...filters };
|
|
|
|
if (value === '' || value === 'all') {
|
|
delete newFilters[key as keyof typeof newFilters];
|
|
} else {
|
|
newFilters[key as keyof typeof newFilters] = value;
|
|
}
|
|
|
|
router.get(productIndex(), newFilters, {
|
|
preserveState: true,
|
|
replace: true,
|
|
});
|
|
}
|
|
|
|
function clearFilters() {
|
|
router.get(
|
|
productIndex(),
|
|
{},
|
|
{
|
|
preserveState: true,
|
|
replace: true,
|
|
},
|
|
);
|
|
setFilterOpen(false);
|
|
}
|
|
|
|
function handlePageChange(page: number) {
|
|
router.get(
|
|
productIndex.url(),
|
|
{
|
|
page,
|
|
per_page: pagination.per_page,
|
|
search,
|
|
...filters,
|
|
},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
}
|
|
|
|
function handlePerPageChange(perPage: number) {
|
|
router.get(
|
|
productIndex.url(),
|
|
{
|
|
page: 1,
|
|
per_page: perPage,
|
|
search,
|
|
...filters,
|
|
},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
}
|
|
|
|
const handleSearchChange = useCallback(
|
|
(value: string) => {
|
|
setSearch(value);
|
|
router.get(
|
|
productIndex.url(),
|
|
{
|
|
page: 1,
|
|
per_page: pagination.per_page,
|
|
search: value,
|
|
...filters,
|
|
},
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
},
|
|
[pagination.per_page, filters],
|
|
);
|
|
|
|
function handleDelete() {
|
|
if (!deleting) {
|
|
return;
|
|
}
|
|
|
|
router.delete(destroy.url(deleting.id), {
|
|
onSuccess: () => setDeleting(null),
|
|
});
|
|
}
|
|
|
|
function handleDeleteVariant() {
|
|
if (!deletingVariant) {
|
|
return;
|
|
}
|
|
|
|
router.delete(
|
|
variantDestroy.url({
|
|
product: deletingVariant.product.id,
|
|
variant: deletingVariant.variant.id,
|
|
}),
|
|
{
|
|
onSuccess: () => setDeletingVariant(null),
|
|
},
|
|
);
|
|
}
|
|
|
|
const filterToolbar = (
|
|
<Popover open={filterOpen} onOpenChange={setFilterOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" size="sm">
|
|
<Filter className="h-4 w-4" />
|
|
Filter
|
|
{hasActiveFilters && (
|
|
<span className="ml-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
|
|
{Object.values(filters).filter(Boolean).length}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64" align="end">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">Filter</span>
|
|
{hasActiveFilters && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 px-2 text-xs"
|
|
onClick={clearFilters}
|
|
>
|
|
<X className="mr-1 h-3 w-3" />
|
|
Hapus Semua
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs text-muted-foreground">
|
|
Nama Produk
|
|
</label>
|
|
<Combobox
|
|
items={productNames}
|
|
value={filters.name ?? ''}
|
|
onValueChange={(value) =>
|
|
applyFilter('name', (value as string) ?? '')
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder="Pilih produk..."
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>
|
|
Tidak ada produk ditemukan.
|
|
</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(name) => (
|
|
<ComboboxItem value={name}>
|
|
{name}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs text-muted-foreground">
|
|
Status
|
|
</label>
|
|
<Select
|
|
value={filters.status ?? 'all'}
|
|
onValueChange={(value) =>
|
|
applyFilter('status', value)
|
|
}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Semua Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">
|
|
Semua Status
|
|
</SelectItem>
|
|
<SelectItem value="active">Aktif</SelectItem>
|
|
<SelectItem value="inactive">
|
|
Non Aktif
|
|
</SelectItem>
|
|
<SelectItem value="draft">Draft</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs text-muted-foreground">
|
|
Stok
|
|
</label>
|
|
<span className="-mt-1 text-[0.65rem] text-muted-foreground/70">
|
|
Berdasarkan stok bagus
|
|
</span>
|
|
<Select
|
|
value={filters.stock ?? 'all'}
|
|
onValueChange={(value) =>
|
|
applyFilter('stock', value)
|
|
}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Semua Stok" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Semua Stok</SelectItem>
|
|
<SelectItem value="empty">Habis</SelectItem>
|
|
<SelectItem value="low">
|
|
Menipis (di bawah 10)
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs text-muted-foreground">
|
|
Kategori
|
|
</label>
|
|
<Combobox
|
|
items={categories}
|
|
itemToStringLabel={(cat) => cat.name}
|
|
value={selectedCategory}
|
|
onValueChange={(value) =>
|
|
applyFilter(
|
|
'category',
|
|
value ? String(value.id) : '',
|
|
)
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder="Pilih kategori..."
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>
|
|
Tidak ada kategori ditemukan.
|
|
</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(cat) => (
|
|
<ComboboxItem value={cat}>
|
|
{cat.name}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Head title="Produk" />
|
|
|
|
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold tracking-tight">
|
|
Produk
|
|
</h2>
|
|
</div>
|
|
<Button asChild>
|
|
<a href={productCreate.url()}>
|
|
<Plus className="h-4 w-4" />
|
|
Tambah
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
<CardTable
|
|
data={products.data}
|
|
getItemKey={(p) => p.id}
|
|
expandedKeys={expand.expandedKeys}
|
|
onToggleExpand={expand.toggleExpand}
|
|
searchValue={search}
|
|
onSearchChange={handleSearchChange}
|
|
searchPlaceholder="Cari produk..."
|
|
pagination={pagination}
|
|
onPageChange={handlePageChange}
|
|
onPerPageChange={handlePerPageChange}
|
|
toolbar={filterToolbar}
|
|
renderCard={({
|
|
item,
|
|
index,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
}) => (
|
|
<ProductCardRow
|
|
product={item}
|
|
index={
|
|
(pagination.current_page - 1) *
|
|
pagination.per_page +
|
|
index +
|
|
1
|
|
}
|
|
isExpanded={isExpanded}
|
|
onToggleExpand={onToggleExpand}
|
|
onEdit={(p) => {
|
|
window.location.href = productEdit.url(p.id);
|
|
}}
|
|
onDelete={(p) => setDeleting(p)}
|
|
toggleStatusUrl={(id) => toggleStatus.url(id)}
|
|
/>
|
|
)}
|
|
renderSubContent={(product) => (
|
|
<VariantSubRow
|
|
product={product}
|
|
onEditVariant={(p, v) => {
|
|
window.location.href = variantEdit.url({
|
|
product: p.id,
|
|
variant: v.id,
|
|
});
|
|
}}
|
|
onDeleteVariantClick={(p, v) =>
|
|
setDeletingVariant({ product: p, variant: v })
|
|
}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={deleting !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setDeleting(null);
|
|
}
|
|
}}
|
|
title="Hapus Produk"
|
|
description={`Apakah Anda yakin ingin menghapus produk "${deleting?.name}"? Tindakan ini tidak dapat dibatalkan.`}
|
|
confirmLabel="Hapus"
|
|
onConfirm={handleDelete}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={deletingVariant !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setDeletingVariant(null);
|
|
}
|
|
}}
|
|
title="Hapus Varian"
|
|
description={`Apakah Anda yakin ingin menghapus varian "${deletingVariant?.variant.name}" dari produk "${deletingVariant?.product.name}"? Tindakan ini tidak dapat dibatalkan.`}
|
|
confirmLabel="Hapus"
|
|
onConfirm={handleDeleteVariant}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|