mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
rstubryan
486 lines
16 KiB
TypeScript
486 lines
16 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import Card from '@/components/Card';
|
|
import SelectInput, { useSelect } from '@/components/input/SelectInput';
|
|
import DateInput from '@/components/input/DateInput';
|
|
import { AreaApi } from '@/services/api/master-data';
|
|
import { SupplierApi } from '@/services/api/master-data';
|
|
import { ProductApi } from '@/services/api/master-data';
|
|
import Table from '@/components/Table';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { formatCurrency, formatDate } from '@/lib/helper';
|
|
|
|
const PurchasesPerSupplierTab = () => {
|
|
const [selectedArea, setSelectedArea] = useState<number | null>(null);
|
|
const [selectedSupplier, setSelectedSupplier] = useState<number | null>(null);
|
|
const [selectedProduct, setSelectedProduct] = useState<number | null>(null);
|
|
const [dataType, setDataType] = useState<'received_date' | 'po_date'>(
|
|
'received_date'
|
|
);
|
|
const [startDate, setStartDate] = useState<string | null>(null);
|
|
const [endDate, setEndDate] = useState<string | null>(null);
|
|
|
|
const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
|
|
AreaApi.basePath,
|
|
'id',
|
|
'name',
|
|
'search'
|
|
);
|
|
|
|
const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
|
|
useSelect(SupplierApi.basePath, 'id', 'name', 'search');
|
|
|
|
const { options: productOptions, isLoadingOptions: isLoadingProducts } =
|
|
useSelect(ProductApi.basePath, 'id', 'name', 'search');
|
|
|
|
const dataTypeOptions = useMemo(
|
|
() => [
|
|
{ value: 'received_date', label: 'Tanggal Terima' },
|
|
{ value: 'po_date', label: 'Tanggal PO' },
|
|
],
|
|
[]
|
|
);
|
|
|
|
const data = useMemo(
|
|
() => [
|
|
{
|
|
id: 1,
|
|
supplier: 'PT. RAJAWALI MITRA PAKANINDO',
|
|
items: [
|
|
{
|
|
id: 1,
|
|
received_date: '2025-09-26',
|
|
po_date: '2025-09-30',
|
|
po_number: 'PO-MBU-00670',
|
|
product_name: 'KAPORIT BESAR (TCCA) 200 GR @1 KG',
|
|
destination_warehouse: 'GUDANG CIMARAGAS 1',
|
|
qty: 5,
|
|
price: 45000,
|
|
purchase_amount: 225000,
|
|
transport: 0,
|
|
value_transport: 0,
|
|
total: 225000,
|
|
expedition_vendor_name: 'PT. RAJAWALI MITRA PAKANINDO',
|
|
travel_number: '-',
|
|
},
|
|
{
|
|
id: 2,
|
|
received_date: '2025-09-30',
|
|
po_date: '2025-09-30',
|
|
po_number: 'PO-MBU-00670',
|
|
product_name: 'KAPORIT BESAR (TCCA) 200 GR @1 KG',
|
|
destination_warehouse: 'GUDANG CIMARAGAS 2',
|
|
qty: 5,
|
|
price: 45000,
|
|
purchase_amount: 225000,
|
|
transport: 0,
|
|
value_transport: 0,
|
|
total: 225000,
|
|
expedition_vendor_name: 'PT. RAJAWALI MITRA PAKANINDO',
|
|
travel_number: '-',
|
|
},
|
|
{
|
|
id: 3,
|
|
received_date: '2025-09-30',
|
|
po_date: '2025-09-30',
|
|
po_number: 'PO-MBU-00670',
|
|
product_name: 'KAPORIT BESAR (TCCA) 200 GR @1 KG',
|
|
destination_warehouse: 'GUDANG CIMARAGAS 3',
|
|
qty: 5,
|
|
price: 45000,
|
|
purchase_amount: 225000,
|
|
transport: 0,
|
|
value_transport: 0,
|
|
total: 225000,
|
|
expedition_vendor_name: 'PT. RAJAWALI MITRA PAKANINDO',
|
|
travel_number: '-',
|
|
},
|
|
{
|
|
id: 4,
|
|
received_date: '2025-09-30',
|
|
po_date: '2025-09-30',
|
|
po_number: 'PO-MBU-00670',
|
|
product_name: 'KAPORIT BESAR (TCCA) 200 GR @1 KG',
|
|
destination_warehouse: 'GUDANG CIMARAGAS 4',
|
|
qty: 5,
|
|
price: 45000,
|
|
purchase_amount: 225000,
|
|
transport: 0,
|
|
value_transport: 0,
|
|
total: 225000,
|
|
expedition_vendor_name: 'PT. RAJAWALI MITRA PAKANINDO',
|
|
travel_number: '-',
|
|
},
|
|
{
|
|
id: 5,
|
|
received_date: '2025-09-04',
|
|
po_date: '2025-09-30',
|
|
po_number: 'PO-MBU-00606',
|
|
product_name: 'DESINFEKTAN C 100 @20L',
|
|
destination_warehouse: 'GUDANG MANDALAWANGI 1',
|
|
qty: 1,
|
|
price: 800000,
|
|
purchase_amount: 800000,
|
|
transport: 0,
|
|
value_transport: 0,
|
|
total: 800000,
|
|
expedition_vendor_name: 'PT. RAJAWALI MITRA PAKANINDO',
|
|
travel_number: '-',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
supplier: 'Supplier B',
|
|
items: [
|
|
{
|
|
id: 6,
|
|
received_date: '2024-01-18',
|
|
po_date: '2024-01-13',
|
|
po_number: 'PO-2024-004',
|
|
product_name: 'Produk D',
|
|
destination_warehouse: 'Gudang Pusat',
|
|
qty: 200,
|
|
price: 25000,
|
|
purchase_amount: 5000000,
|
|
transport: 200000,
|
|
value_transport: 200000,
|
|
total: 5200000,
|
|
expedition_vendor_name: 'Ekspedisi GHI',
|
|
travel_number: 'SJ-004',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 3,
|
|
supplier: 'Supplier C',
|
|
items: [
|
|
{
|
|
id: 7,
|
|
received_date: '2024-01-20',
|
|
po_date: '2024-01-15',
|
|
po_number: 'PO-2024-006',
|
|
product_name: 'Produk F',
|
|
destination_warehouse: 'Gudang Cabang',
|
|
qty: 80,
|
|
price: 55000,
|
|
purchase_amount: 4400000,
|
|
transport: 80000,
|
|
value_transport: 80000,
|
|
total: 4480000,
|
|
expedition_vendor_name: 'Ekspedisi MNO',
|
|
travel_number: 'SJ-006',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
// TODO START
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const getTableColumns = (totals: any) => {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const tableColumns: ColumnDef<any>[] = [
|
|
{
|
|
id: 'no',
|
|
header: 'No',
|
|
cell: (props) => props.row.index + 1,
|
|
footer: () => <div className='font-semibold text-gray-900'>Total</div>,
|
|
},
|
|
{
|
|
id: 'received_date',
|
|
header: 'Tanggal Terima',
|
|
accessorKey: 'received_date',
|
|
cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
|
|
},
|
|
{
|
|
id: 'po_date',
|
|
header: 'Tanggal PO',
|
|
accessorKey: 'po_date',
|
|
cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
|
|
},
|
|
{
|
|
id: 'po_number',
|
|
header: 'No. Referensi',
|
|
accessorKey: 'po_number',
|
|
cell: (props) => props.getValue() || '-',
|
|
},
|
|
{
|
|
id: 'product_name',
|
|
header: 'Nama Produk',
|
|
accessorKey: 'product_name',
|
|
cell: (props) => props.getValue() || '-',
|
|
},
|
|
{
|
|
id: 'destination_warehouse',
|
|
header: 'Tujuan',
|
|
accessorKey: 'destination_warehouse',
|
|
cell: (props) => props.getValue() || '-',
|
|
},
|
|
{
|
|
id: 'qty',
|
|
header: 'QTY',
|
|
accessorKey: 'qty',
|
|
cell: (props) => {
|
|
const value = props.getValue() as number;
|
|
return <div className='text-right'>{value.toLocaleString()}</div>;
|
|
},
|
|
footer: () => (
|
|
<div className='text-right font-semibold text-gray-900'>
|
|
{totals.totalQty.toLocaleString()}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'price',
|
|
header: 'Harga Beli (Rp)',
|
|
accessorKey: 'price',
|
|
cell: (props) => {
|
|
const value = props.getValue() as number;
|
|
return <div className='text-right'>{formatCurrency(value)}</div>;
|
|
},
|
|
footer: () => (
|
|
<div className='text-right font-semibold text-gray-900'>
|
|
{formatCurrency(totals.totalPrice)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'purchase_amount',
|
|
header: 'Value Harga Beli (Rp)',
|
|
accessorKey: 'purchase_amount',
|
|
cell: (props) => {
|
|
const value = props.getValue() as number;
|
|
return <div className='text-right'>{formatCurrency(value)}</div>;
|
|
},
|
|
footer: () => (
|
|
<div className='text-right font-semibold text-gray-900'>
|
|
{formatCurrency(totals.totalPurchaseAmount)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'transport',
|
|
header: 'Transport (Rp)',
|
|
accessorKey: 'transport',
|
|
cell: (props) => {
|
|
const value = props.getValue() as number;
|
|
return <div className='text-right'>{formatCurrency(value)}</div>;
|
|
},
|
|
footer: () => (
|
|
<div className='text-right font-semibold text-gray-900'>
|
|
{formatCurrency(totals.totalTransport)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'value_transport',
|
|
header: 'Value Transport (Rp)',
|
|
accessorKey: 'value_transport',
|
|
cell: (props) => {
|
|
const value = props.getValue() as number;
|
|
return <div className='text-right'>{formatCurrency(value)}</div>;
|
|
},
|
|
footer: () => (
|
|
<div className='text-right font-semibold text-gray-900'>
|
|
{formatCurrency(totals.totalValueTransport)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'total',
|
|
header: 'Jumlah (Rp)',
|
|
accessorKey: 'total',
|
|
cell: (props) => {
|
|
const value = props.getValue() as number;
|
|
return <div className='text-right'>{formatCurrency(value)}</div>;
|
|
},
|
|
footer: () => (
|
|
<div className='text-right font-semibold text-gray-900'>
|
|
{formatCurrency(totals.totalJumlah)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'expedition_vendor_name',
|
|
header: 'Ekspedisi',
|
|
accessorKey: 'expedition_vendor_name',
|
|
cell: (props) => props.getValue() || '-',
|
|
},
|
|
{
|
|
id: 'travel_number',
|
|
header: 'Surat Jalan',
|
|
accessorKey: 'travel_number',
|
|
cell: (props) => props.getValue() || '-',
|
|
},
|
|
];
|
|
return tableColumns;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card
|
|
subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
|
|
className={{ wrapper: 'w-full', body: 'p-1!' }}
|
|
>
|
|
<div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
|
|
{/* TODO START */}
|
|
<SelectInput
|
|
label='Area'
|
|
placeholder='Pilih Area'
|
|
options={areaOptions}
|
|
value={
|
|
areaOptions.find((option) => option.value === selectedArea) ||
|
|
null
|
|
}
|
|
// @ts-expect-error TS2345
|
|
onChange={(val) => setSelectedArea(val?.value || null)}
|
|
isLoading={isLoadingAreas}
|
|
isClearable
|
|
/>
|
|
<SelectInput
|
|
label='Supplier'
|
|
placeholder='Pilih Supplier'
|
|
options={supplierOptions}
|
|
value={
|
|
supplierOptions.find(
|
|
(option) => option.value === selectedSupplier
|
|
) || null
|
|
}
|
|
// @ts-expect-error TS2345
|
|
onChange={(val) => setSelectedSupplier(val?.value || null)}
|
|
isLoading={isLoadingSuppliers}
|
|
isClearable
|
|
/>
|
|
<SelectInput
|
|
label='Produk'
|
|
placeholder='Pilih Produk'
|
|
options={productOptions}
|
|
value={
|
|
productOptions.find(
|
|
(option) => option.value === selectedProduct
|
|
) || null
|
|
}
|
|
// @ts-expect-error TS2345
|
|
onChange={(val) => setSelectedProduct(val?.value || null)}
|
|
isLoading={isLoadingProducts}
|
|
isClearable
|
|
/>
|
|
<SelectInput
|
|
label='Tipe Data'
|
|
placeholder='Pilih Tipe Data'
|
|
options={dataTypeOptions}
|
|
value={
|
|
dataTypeOptions?.find((option) => option.value === dataType) ||
|
|
null
|
|
}
|
|
// @ts-expect-error TS2345
|
|
onChange={(val) => setDataType(val?.value || 'received_date')}
|
|
isLoading={false}
|
|
isClearable={false}
|
|
/>
|
|
<DateInput
|
|
label='Tanggal Awal'
|
|
placeholder='Pilih Tanggal Awal'
|
|
// @ts-expect-error TS2345
|
|
value={startDate}
|
|
// @ts-expect-error TS2345
|
|
onChange={setStartDate}
|
|
/>
|
|
<DateInput
|
|
label='Tanggal Akhir'
|
|
placeholder='Pilih Tanggal Akhir'
|
|
// @ts-expect-error TS2345
|
|
value={endDate}
|
|
// @ts-expect-error TS2345
|
|
onChange={setEndDate}
|
|
/>
|
|
{/* TODO END */}
|
|
</div>
|
|
|
|
{data.length === 0 ? (
|
|
<div className='mt-6 text-center text-gray-500'>
|
|
Tidak ada data untuk ditampilkan.
|
|
</div>
|
|
) : (
|
|
data.map((supplier) => {
|
|
const totalQty = supplier.items.reduce(
|
|
(sum, item) => sum + (item.qty || 0),
|
|
0
|
|
);
|
|
const totalPrice = supplier.items.reduce(
|
|
(sum, item) => sum + (item.price || 0),
|
|
0
|
|
);
|
|
const totalPurchaseAmount = supplier.items.reduce(
|
|
(sum, item) => sum + (item.purchase_amount || 0),
|
|
0
|
|
);
|
|
const totalTransport = supplier.items.reduce(
|
|
(sum, item) => sum + (item.transport || 0),
|
|
0
|
|
);
|
|
const totalValueTransport = supplier.items.reduce(
|
|
(sum, item) => sum + (item.value_transport || 0),
|
|
0
|
|
);
|
|
const totalJumlah = supplier.items.reduce(
|
|
(sum, item) => sum + (item.total || 0),
|
|
0
|
|
);
|
|
|
|
const totals = {
|
|
totalQty,
|
|
totalPrice,
|
|
totalPurchaseAmount,
|
|
totalTransport,
|
|
totalValueTransport,
|
|
totalJumlah,
|
|
};
|
|
|
|
const totalPurchase = totals.totalJumlah;
|
|
const tableColumns = getTableColumns(totals);
|
|
|
|
return (
|
|
<Card
|
|
key={supplier.id}
|
|
title={supplier.supplier}
|
|
subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
|
|
className={{ wrapper: 'w-full' }}
|
|
collapsible={true}
|
|
>
|
|
<Table
|
|
data={supplier.items}
|
|
columns={tableColumns}
|
|
pageSize={10}
|
|
renderFooter={supplier.items.length > 0}
|
|
className={{
|
|
containerClassName: 'mb-0!',
|
|
tableWrapperClassName: 'overflow-x-auto mt-4',
|
|
tableClassName: 'w-full table-auto text-sm',
|
|
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
|
|
headerColumnClassName:
|
|
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
|
|
bodyRowClassName:
|
|
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
|
|
bodyColumnClassName:
|
|
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
|
tableFooterClassName:
|
|
'bg-gray-100 font-semibold border border-gray-200',
|
|
footerRowClassName: 'border-t-2 border-gray-300',
|
|
footerColumnClassName:
|
|
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
|
paginationClassName: 'hidden',
|
|
}}
|
|
/>
|
|
</Card>
|
|
);
|
|
})
|
|
)}
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PurchasesPerSupplierTab;
|