mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
fix: update table columns
This commit is contained in:
@@ -28,7 +28,7 @@ import PurchaseFilterModal from '@/components/pages/purchase/PurchaseFilterModal
|
|||||||
import Dropdown from '@/components/dropdown/Dropdown';
|
import Dropdown from '@/components/dropdown/Dropdown';
|
||||||
import { OptionType } from '@/components/input/SelectInput';
|
import { OptionType } from '@/components/input/SelectInput';
|
||||||
|
|
||||||
import { cn, formatDate } from '@/lib/helper';
|
import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
|
||||||
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
|
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
|
||||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||||
@@ -41,6 +41,9 @@ type PurchaseTableFilters = {
|
|||||||
search: string;
|
search: string;
|
||||||
sort_by: string;
|
sort_by: string;
|
||||||
order_by: string;
|
order_by: string;
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
filter_by: string;
|
||||||
po_date: string;
|
po_date: string;
|
||||||
approval_status: string;
|
approval_status: string;
|
||||||
product_category_id: string;
|
product_category_id: string;
|
||||||
@@ -177,6 +180,9 @@ const PurchaseTable = () => {
|
|||||||
search: '',
|
search: '',
|
||||||
sort_by: '',
|
sort_by: '',
|
||||||
order_by: '',
|
order_by: '',
|
||||||
|
start_date: '',
|
||||||
|
end_date: '',
|
||||||
|
filter_by: '',
|
||||||
po_date: '',
|
po_date: '',
|
||||||
approval_status: '',
|
approval_status: '',
|
||||||
product_category_id: '',
|
product_category_id: '',
|
||||||
@@ -197,6 +203,9 @@ const PurchaseTable = () => {
|
|||||||
pageSize: 'limit',
|
pageSize: 'limit',
|
||||||
sort_by: 'sort_by',
|
sort_by: 'sort_by',
|
||||||
order_by: 'sort_order',
|
order_by: 'sort_order',
|
||||||
|
start_date: 'start_date',
|
||||||
|
end_date: 'end_date',
|
||||||
|
filter_by: 'filter_by',
|
||||||
po_date: 'po_date',
|
po_date: 'po_date',
|
||||||
approval_status: 'approval_status',
|
approval_status: 'approval_status',
|
||||||
product_category_id: 'product_category_id',
|
product_category_id: 'product_category_id',
|
||||||
@@ -297,36 +306,11 @@ const PurchaseTable = () => {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
accessorKey: 'supplier',
|
|
||||||
header: 'Vendor',
|
|
||||||
cell: (props) => props.row.original.supplier.name,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
accessorKey: 'requester_name',
|
accessorKey: 'requester_name',
|
||||||
header: 'Nama Pengaju',
|
header: 'Nama Pengaju',
|
||||||
cell: (props) => props.row.original.requester_name || '-',
|
cell: (props) => props.row.original.requester_name || '-',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
accessorKey: 'products',
|
|
||||||
header: 'Produk',
|
|
||||||
cell: (props) => {
|
|
||||||
const products = props.row.original.products;
|
|
||||||
if (!products || products.length === 0) return '-';
|
|
||||||
return (
|
|
||||||
<ul className='list-disc pl-4'>
|
|
||||||
{products.map((product, index) => (
|
|
||||||
<li key={index}>{product.name}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'location',
|
|
||||||
header: 'Lokasi',
|
|
||||||
cell: (props) => props.row.original.location?.name || '-',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
accessorKey: 'po_date',
|
accessorKey: 'po_date',
|
||||||
header: 'Tgl. PO',
|
header: 'Tgl. PO',
|
||||||
@@ -364,6 +348,202 @@ const PurchaseTable = () => {
|
|||||||
return `${diffDays} hari`;
|
return `${diffDays} hari`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'supplier',
|
||||||
|
header: 'Vendor',
|
||||||
|
cell: (props) => props.row.original.supplier.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'location',
|
||||||
|
header: 'Lokasi',
|
||||||
|
cell: (props) => props.row.original.location?.name || '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'warehouse',
|
||||||
|
header: 'Gudang',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>{item.warehouse?.name ?? '-'}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'products',
|
||||||
|
header: 'Produk',
|
||||||
|
cell: (props) => {
|
||||||
|
const products = props.row.original.products;
|
||||||
|
if (!products || products.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{products.map((product, index) => (
|
||||||
|
<li key={index}>{product.name}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'total_qty',
|
||||||
|
header: 'Kuantitas',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>{formatNumber(item.total_qty ?? 0)}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'uom',
|
||||||
|
header: 'Satuan',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>{item.product?.uom?.name ?? '-'}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'price',
|
||||||
|
header: 'Harga',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>{formatCurrency(item.price ?? 0)}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'total_price',
|
||||||
|
header: 'Total Harga',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>{formatCurrency(item.total_price ?? 0)}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'products_total',
|
||||||
|
header: 'Total Harga Produk',
|
||||||
|
cell: (props) => formatCurrency(props.row.original.products_total ?? 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'expedition_vendor',
|
||||||
|
header: 'Vendor Ekspedisi',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>{item.expedition_vendor?.name ?? '-'}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'expedition_qty',
|
||||||
|
header: 'Qty Ekspedisi',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
{item.expedition_qty != null
|
||||||
|
? formatNumber(item.expedition_qty)
|
||||||
|
: '-'}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'transport_per_item',
|
||||||
|
header: 'Harga Ekspedisi',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
{item.transport_per_item != null
|
||||||
|
? formatCurrency(item.transport_per_item)
|
||||||
|
: '-'}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'item_expedition_total',
|
||||||
|
header: 'Total Ekspedisi',
|
||||||
|
enableSorting: false,
|
||||||
|
cell: (props) => {
|
||||||
|
const items = props.row.original.items;
|
||||||
|
if (!items || items.length === 0) return '-';
|
||||||
|
return (
|
||||||
|
<ul className='list-disc pl-4'>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
{item.expedition_total != null
|
||||||
|
? formatCurrency(item.expedition_total)
|
||||||
|
: '-'}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'expedition_total',
|
||||||
|
header: 'Total Ekspedisi Semua Produk',
|
||||||
|
cell: (props) => formatCurrency(props.row.original.expedition_total ?? 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'grand_total_all',
|
||||||
|
header: 'Grand Total All',
|
||||||
|
cell: (props) => formatCurrency(props.row.original.grand_total_all ?? 0),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'status',
|
accessorKey: 'status',
|
||||||
header: 'Status Approval',
|
header: 'Status Approval',
|
||||||
@@ -410,6 +590,11 @@ const PurchaseTable = () => {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'notes',
|
||||||
|
header: 'Notes',
|
||||||
|
cell: (props) => props.row.original.notes || '-',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'created_at',
|
accessorKey: 'created_at',
|
||||||
header: 'Tanggal Dibuat',
|
header: 'Tanggal Dibuat',
|
||||||
@@ -476,6 +661,9 @@ const PurchaseTable = () => {
|
|||||||
|
|
||||||
const filterSubmitHandler = (values: PurchaseFilter) => {
|
const filterSubmitHandler = (values: PurchaseFilter) => {
|
||||||
setFilters({
|
setFilters({
|
||||||
|
start_date: values.start_date || '',
|
||||||
|
end_date: values.end_date || '',
|
||||||
|
filter_by: values.filterBy?.value || '',
|
||||||
po_date: values.poDate,
|
po_date: values.poDate,
|
||||||
product_category_id: values.category.join(','),
|
product_category_id: values.category.join(','),
|
||||||
product_category_name:
|
product_category_name:
|
||||||
@@ -500,6 +688,9 @@ const PurchaseTable = () => {
|
|||||||
|
|
||||||
const filterResetHandler = () => {
|
const filterResetHandler = () => {
|
||||||
setFilters({
|
setFilters({
|
||||||
|
start_date: '',
|
||||||
|
end_date: '',
|
||||||
|
filter_by: '',
|
||||||
po_date: '',
|
po_date: '',
|
||||||
product_category_id: '',
|
product_category_id: '',
|
||||||
product_category_name: '',
|
product_category_name: '',
|
||||||
@@ -518,6 +709,13 @@ const PurchaseTable = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const purchaseFilterInitialValues = useMemo(() => {
|
const purchaseFilterInitialValues = useMemo(() => {
|
||||||
|
const filterByLabelMap: Record<string, string> = {
|
||||||
|
po_date: 'Tanggal PO',
|
||||||
|
received_date: 'Tanggal Terima',
|
||||||
|
due_date: 'Tanggal Jatuh Tempo',
|
||||||
|
created_at: 'Tanggal Dibuat',
|
||||||
|
};
|
||||||
|
|
||||||
const categoryIds = tableFilterState.product_category_id
|
const categoryIds = tableFilterState.product_category_id
|
||||||
? tableFilterState.product_category_id
|
? tableFilterState.product_category_id
|
||||||
.split(',')
|
.split(',')
|
||||||
@@ -539,6 +737,16 @@ const PurchaseTable = () => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
poDate: tableFilterState.po_date,
|
poDate: tableFilterState.po_date,
|
||||||
|
start_date: tableFilterState.start_date,
|
||||||
|
end_date: tableFilterState.end_date,
|
||||||
|
filterBy: tableFilterState.filter_by
|
||||||
|
? {
|
||||||
|
value: tableFilterState.filter_by,
|
||||||
|
label:
|
||||||
|
filterByLabelMap[tableFilterState.filter_by] ||
|
||||||
|
tableFilterState.filter_by,
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
category: categoryIds.map((value, index) => ({
|
category: categoryIds.map((value, index) => ({
|
||||||
value: Number(value),
|
value: Number(value),
|
||||||
label: categoryLabels[index] || value,
|
label: categoryLabels[index] || value,
|
||||||
@@ -706,7 +914,7 @@ const PurchaseTable = () => {
|
|||||||
'project_flock_name',
|
'project_flock_name',
|
||||||
'project_flock_kandang_name',
|
'project_flock_kandang_name',
|
||||||
]}
|
]}
|
||||||
fieldGroups={[['startDate', 'endDate']]}
|
fieldGroups={[['start_date', 'end_date']]}
|
||||||
onClick={filterModal.openModal}
|
onClick={filterModal.openModal}
|
||||||
className='px-3 py-2.5'
|
className='px-3 py-2.5'
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user