4ac83c8e78
- Integrated permission checks using `can` function in payroll period management to control visibility of adjustment, pay, and cancel actions. - Updated employee management to conditionally render edit, reset password, and delete actions based on permissions. - Enhanced leave request management with permission checks for approve, reject, edit, and delete actions. - Implemented permission checks in cutting management for edit and delete actions. - Added permission checks for purchase management actions including create, edit, and delete. - Integrated permission checks in restock management for create, edit, and delete actions. - Updated transaction management to conditionally render create, edit, and delete actions based on permissions. - Enhanced category management with permission checks for edit and delete actions. - Integrated permission checks in customer management for edit and delete actions. - Updated product management to conditionally render create, edit, and delete actions based on permissions. - Enhanced raw material management with permission checks for edit and delete actions. - Integrated permission checks in supplier management for edit and delete actions. - Updated role management to conditionally render edit and delete actions based on permissions.
375 lines
12 KiB
TypeScript
375 lines
12 KiB
TypeScript
import { router } from '@inertiajs/react';
|
|
import type { ColumnDef } from '@tanstack/react-table';
|
|
import { ChevronRight, Pencil, Trash2 } from 'lucide-react';
|
|
import { RowActions } from '@/components/row-actions';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { formatNumber } from '@/lib/format';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
|
|
export type ProductVariant = {
|
|
id: number;
|
|
name: string;
|
|
stock: number;
|
|
reject_stock: number;
|
|
retail_stock: number;
|
|
photo_urls: string[];
|
|
product_prices: {
|
|
id: number;
|
|
type: string;
|
|
type_label: string;
|
|
price: number;
|
|
}[];
|
|
};
|
|
|
|
export type Product = {
|
|
id: number;
|
|
name: string;
|
|
slug: string;
|
|
description: string | null;
|
|
status: string;
|
|
categories: {
|
|
id: number;
|
|
name: string;
|
|
}[];
|
|
product_variants: ProductVariant[];
|
|
};
|
|
|
|
function getStatusLabel(status: string): string {
|
|
const labels: Record<string, string> = {
|
|
active: 'Aktif',
|
|
inactive: 'Non Aktif',
|
|
draft: 'Draft',
|
|
};
|
|
|
|
return labels[status] ?? status;
|
|
}
|
|
|
|
function getStatusVariant(status: string): string {
|
|
const variants: Record<string, string> = {
|
|
active: 'bg-green-100 text-green-800',
|
|
inactive: 'bg-red-100 text-red-800',
|
|
draft: 'bg-yellow-100 text-yellow-800',
|
|
};
|
|
|
|
return variants[status] ?? 'bg-gray-100 text-gray-800';
|
|
}
|
|
|
|
function getFilteredVariants(
|
|
allVariants: ProductVariant[],
|
|
searchValue: string,
|
|
): ProductVariant[] {
|
|
const query = searchValue.toLowerCase().trim();
|
|
|
|
return query
|
|
? allVariants.filter((v) => v.name.toLowerCase().includes(query))
|
|
: allVariants;
|
|
}
|
|
|
|
type CreateColumnsParams = {
|
|
handleEdit: (product: Product) => void;
|
|
handleDeleteClick: (product: Product) => void;
|
|
handleVariantEdit: (product: Product) => void;
|
|
handleVariantDeleteClick: (
|
|
product: Product,
|
|
variant: ProductVariant,
|
|
) => void;
|
|
toggleStatusUrl: (id: number) => string;
|
|
can: (permission: string) => boolean;
|
|
};
|
|
|
|
export function createProductColumns(
|
|
params: CreateColumnsParams,
|
|
): ColumnDef<Product>[] {
|
|
const {
|
|
handleEdit,
|
|
handleDeleteClick,
|
|
handleVariantEdit,
|
|
handleVariantDeleteClick,
|
|
toggleStatusUrl,
|
|
can,
|
|
} = params;
|
|
|
|
return [
|
|
{
|
|
id: 'expand',
|
|
header: '',
|
|
cell: ({ row }) => {
|
|
const hasVariants =
|
|
(row.original.product_variants?.length ?? 0) > 0;
|
|
|
|
if (!hasVariants) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={() => row.toggleExpanded()}
|
|
>
|
|
<ChevronRight
|
|
className={`h-4 w-4 transition-transform ${row.getIsExpanded() ? 'rotate-90' : ''}`}
|
|
/>
|
|
</Button>
|
|
);
|
|
},
|
|
meta: {
|
|
className: 'w-[40px]',
|
|
headerClassName: 'w-[40px]',
|
|
},
|
|
},
|
|
{
|
|
id: 'variant_names',
|
|
accessorFn: (row) =>
|
|
row.product_variants?.map((v) => v.name).join(' ') ?? '',
|
|
header: () => null,
|
|
cell: () => null,
|
|
meta: {
|
|
className: 'hidden',
|
|
headerClassName: 'hidden',
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'name',
|
|
header: () => <span>Nama Produk</span>,
|
|
cell: ({ row }) => {
|
|
const product = row.original;
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{product.name}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{product.categories
|
|
?.map((c) => c.name)
|
|
.join(', ') || '-'}
|
|
</span>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'variants',
|
|
header: () => <span>Varian</span>,
|
|
cell: ({ row, table }) => {
|
|
const searchValue =
|
|
(table
|
|
.getColumn('variant_names')
|
|
?.getFilterValue() as string) ?? '';
|
|
const variants = getFilteredVariants(
|
|
row.original.product_variants ?? [],
|
|
searchValue,
|
|
);
|
|
|
|
return (
|
|
<span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium">
|
|
{variants.length} varian
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'stock',
|
|
header: () => <span className="block text-center">Stok Bagus</span>,
|
|
meta: {
|
|
className: 'w-[80px] text-center',
|
|
headerClassName: 'w-[80px] text-center',
|
|
},
|
|
cell: ({ row, table }) => {
|
|
const searchValue =
|
|
(table
|
|
.getColumn('variant_names')
|
|
?.getFilterValue() as string) ?? '';
|
|
const variants = getFilteredVariants(
|
|
row.original.product_variants ?? [],
|
|
searchValue,
|
|
);
|
|
const totalStock = variants.reduce(
|
|
(sum, v) => sum + (v.stock ?? 0),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<span className="block text-center font-medium">
|
|
{formatNumber(totalStock)}
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'reject_stock',
|
|
header: () => (
|
|
<span className="block text-center">Stok Reject</span>
|
|
),
|
|
meta: {
|
|
className: 'w-[80px] text-center',
|
|
headerClassName: 'w-[80px] text-center',
|
|
},
|
|
cell: ({ row, table }) => {
|
|
const searchValue =
|
|
(table
|
|
.getColumn('variant_names')
|
|
?.getFilterValue() as string) ?? '';
|
|
const variants = getFilteredVariants(
|
|
row.original.product_variants ?? [],
|
|
searchValue,
|
|
);
|
|
const totalReject = variants.reduce(
|
|
(sum, v) => sum + (v.reject_stock ?? 0),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<span className="block text-center font-medium">
|
|
{formatNumber(totalReject)}
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'retail_stock',
|
|
header: () => <span className="block text-center">Stok Ecer</span>,
|
|
meta: {
|
|
className: 'w-[80px] text-center',
|
|
headerClassName: 'w-[80px] text-center',
|
|
},
|
|
cell: ({ row, table }) => {
|
|
const searchValue =
|
|
(table
|
|
.getColumn('variant_names')
|
|
?.getFilterValue() as string) ?? '';
|
|
const variants = getFilteredVariants(
|
|
row.original.product_variants ?? [],
|
|
searchValue,
|
|
);
|
|
const totalRetail = variants.reduce(
|
|
(sum, v) => sum + (v.retail_stock ?? 0),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<span className="block text-center font-medium">
|
|
{formatNumber(totalRetail)}
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'total_stock',
|
|
header: () => <span className="block text-center">Total Stok</span>,
|
|
meta: {
|
|
className: 'w-[80px] text-center',
|
|
headerClassName: 'w-[80px] text-center',
|
|
},
|
|
cell: ({ row, table }) => {
|
|
const searchValue =
|
|
(table
|
|
.getColumn('variant_names')
|
|
?.getFilterValue() as string) ?? '';
|
|
const variants = getFilteredVariants(
|
|
row.original.product_variants ?? [],
|
|
searchValue,
|
|
);
|
|
const totalStock = variants.reduce(
|
|
(sum, v) => sum + (v.stock ?? 0),
|
|
0,
|
|
);
|
|
const totalReject = variants.reduce(
|
|
(sum, v) => sum + (v.reject_stock ?? 0),
|
|
0,
|
|
);
|
|
const totalRetail = variants.reduce(
|
|
(sum, v) => sum + (v.retail_stock ?? 0),
|
|
0,
|
|
);
|
|
const total = totalStock + totalReject + totalRetail;
|
|
|
|
return (
|
|
<span className="block text-center font-medium">
|
|
{formatNumber(total)}
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: () => <span>Status</span>,
|
|
cell: ({ row }) => {
|
|
const product = row.original;
|
|
const isToggleable =
|
|
product.status === 'active' ||
|
|
product.status === 'inactive';
|
|
const isChecked = product.status === 'active';
|
|
|
|
function handleToggle(checked: boolean) {
|
|
router.post(
|
|
toggleStatusUrl(product.id),
|
|
{},
|
|
{
|
|
preserveScroll: true,
|
|
},
|
|
);
|
|
}
|
|
|
|
if (!isToggleable) {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${getStatusVariant(product.status)}`}
|
|
>
|
|
{getStatusLabel(product.status)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
size="sm"
|
|
checked={isChecked}
|
|
onCheckedChange={handleToggle}
|
|
/>
|
|
<span
|
|
className={`text-xs font-medium ${isChecked ? 'text-green-700' : 'text-red-700'}`}
|
|
>
|
|
{getStatusLabel(product.status)}
|
|
</span>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <span className="block text-center">Aksi</span>,
|
|
meta: {
|
|
className: 'w-[100px] text-center',
|
|
headerClassName: 'w-[100px] text-center',
|
|
},
|
|
cell: ({ row }) => {
|
|
const product = row.original;
|
|
|
|
return (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
show: can('products.update'),
|
|
onClick: () => handleEdit(product),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
show: can('products.delete'),
|
|
onClick: () => handleDeleteClick(product),
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
}
|