mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-22 22:35:45 +00:00
fix(FE) resolve merge conflict
This commit is contained in:
randy-ar
@@ -0,0 +1,64 @@
|
||||
import { Icon } from '@iconify/react';
|
||||
import Steps from '@/components/steps/Steps';
|
||||
import StepItem from '@/components/steps/StepItem';
|
||||
import Tooltip from '@/components/Tooltip';
|
||||
|
||||
import { formatDate } from '@/lib/helper';
|
||||
import { ApprovalsLine } from '@/types/api/api-general';
|
||||
|
||||
interface ApprovalStepsProps {
|
||||
approvals: ApprovalsLine;
|
||||
}
|
||||
|
||||
const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
|
||||
return (
|
||||
<Steps direction='vertical' className='w-full md:steps-horizontal'>
|
||||
{approvals.map((approval, idx) => {
|
||||
const stepItemColor =
|
||||
approval.status === 'approved'
|
||||
? 'success'
|
||||
: approval.status === 'rejected'
|
||||
? 'error'
|
||||
: undefined;
|
||||
|
||||
const stepItemIcon =
|
||||
approval.status === 'approved'
|
||||
? 'material-symbols:check-rounded'
|
||||
: approval.status === 'rejected'
|
||||
? 'material-symbols:close-rounded'
|
||||
: 'bxs:hourglass';
|
||||
|
||||
return (
|
||||
<StepItem
|
||||
key={idx}
|
||||
color={stepItemColor}
|
||||
icon={
|
||||
approval.status !== 'waiting' && (
|
||||
<Tooltip
|
||||
color={stepItemColor}
|
||||
position='right'
|
||||
className={{
|
||||
wrapper: 'md:tooltip-bottom',
|
||||
}}
|
||||
content={
|
||||
<div className='flex flex-col text-base'>
|
||||
<span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
|
||||
<span>Oleh: {approval.action_by}</span>
|
||||
<span>Catatan: {approval.notes}</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon icon={stepItemIcon} width={24} height={24} />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
>
|
||||
{approval.role}
|
||||
</StepItem>
|
||||
);
|
||||
})}
|
||||
</Steps>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApprovalSteps;
|
||||
@@ -0,0 +1,227 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { SortingState } from '@tanstack/react-table';
|
||||
|
||||
import Table from '@/components/Table';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import { Movement } from '@/types/api/inventory/movement';
|
||||
import { MovementApi } from '@/services/api/inventory';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { TableToolbar } from '@/components/table/TableToolbar';
|
||||
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
|
||||
import { OptionType } from '@/components/input/SelectInput';
|
||||
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
|
||||
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
|
||||
import { TableRowOptions } from '@/components/table/TableRowOptions';
|
||||
|
||||
const MovementTable = () => {
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
} = useTableFilter({
|
||||
initial: { search: '' },
|
||||
paramMap: { page: 'page', pageSize: 'limit' },
|
||||
});
|
||||
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [selectedMovement, setSelectedMovement] = useState<
|
||||
Movement | undefined
|
||||
>(undefined);
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const deleteModal = useModal();
|
||||
|
||||
const {
|
||||
data: movements,
|
||||
isLoading,
|
||||
mutate: refreshMovements,
|
||||
} = useSWR(
|
||||
`${MovementApi.basePath}${getTableFilterQueryString()}`,
|
||||
MovementApi.getAllFetcher
|
||||
);
|
||||
|
||||
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
updateFilter('search', e.target.value);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const newVal = val as OptionType;
|
||||
setPageSize(newVal.value as number);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsDeleteLoading(true);
|
||||
try {
|
||||
await MovementApi.delete(selectedMovement?.id as number);
|
||||
refreshMovements();
|
||||
deleteModal.closeModal();
|
||||
} finally {
|
||||
setIsDeleteLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<TableToolbar
|
||||
addButton={{
|
||||
href: '/inventory/movement/add',
|
||||
label: 'Tambah Movement',
|
||||
}}
|
||||
search={{
|
||||
value: tableFilterState.search,
|
||||
onChange: searchChangeHandler,
|
||||
placeholder: 'Cari Movement',
|
||||
}}
|
||||
/>
|
||||
<TableRowSizeSelector
|
||||
value={tableFilterState.pageSize}
|
||||
onChange={pageSizeChangeHandler}
|
||||
options={ROWS_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table<Movement>
|
||||
data={isResponseSuccess(movements) ? movements?.data : []}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.source_warehouse?.name,
|
||||
header: 'Gudang Asal',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.destination_warehouse?.name,
|
||||
header: 'Gudang Tujuan',
|
||||
},
|
||||
{
|
||||
accessorKey: 'transfer_reason',
|
||||
header: 'Catatan',
|
||||
},
|
||||
{
|
||||
accessorKey: 'transfer_date',
|
||||
header: 'Tanggal',
|
||||
cell: (props) =>
|
||||
new Date(props.row.original.transfer_date).toLocaleDateString(
|
||||
'id-ID'
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => {
|
||||
const totalCost = row.deliveries?.reduce(
|
||||
(sum, d) => sum + (d.shipping_cost_total || 0),
|
||||
0
|
||||
);
|
||||
return totalCost?.toLocaleString('id-ID');
|
||||
},
|
||||
header: 'Biaya Pengiriman',
|
||||
},
|
||||
{
|
||||
header: 'Aksi',
|
||||
cell: (props) => {
|
||||
const currentPageSize =
|
||||
props.table.getPaginationRowModel().rows.length;
|
||||
const currentPageRows =
|
||||
props.table.getPaginationRowModel().flatRows;
|
||||
const currentRowRelativeIndex =
|
||||
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
|
||||
|
||||
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
|
||||
|
||||
const deleteClickHandler = () => {
|
||||
setSelectedMovement(props.row.original);
|
||||
deleteModal.openModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{currentPageSize > 2 && (
|
||||
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
||||
<TableRowOptions
|
||||
type='dropdown'
|
||||
recordId={props.row.original.id}
|
||||
basePath='/inventory/movement'
|
||||
queryParam='movementId'
|
||||
showEdit={false}
|
||||
showDelete={false}
|
||||
/>
|
||||
</RowDropdownOptions>
|
||||
)}
|
||||
|
||||
{currentPageSize <= 2 && (
|
||||
<RowCollapseOptions>
|
||||
<TableRowOptions
|
||||
type='collapse'
|
||||
recordId={props.row.original.id}
|
||||
basePath='/inventory/movement'
|
||||
queryParam='movementId'
|
||||
showEdit={false}
|
||||
showDelete={false}
|
||||
/>
|
||||
</RowCollapseOptions>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
|
||||
totalItems={
|
||||
isResponseSuccess(movements) ? movements?.meta?.total_results : 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoading}
|
||||
sorting={sorting}
|
||||
setSorting={setSorting}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(movements) && movements?.data?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data Movement ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MovementTable;
|
||||
@@ -0,0 +1,218 @@
|
||||
import * as Yup from 'yup';
|
||||
import { Movement } from '@/types/api/inventory/movement';
|
||||
|
||||
export type ProductSchema = {
|
||||
product: {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
product_id: number;
|
||||
product_qty: number;
|
||||
};
|
||||
|
||||
export type DeliverySchema = {
|
||||
delivery_cost?: number | undefined;
|
||||
delivery_cost_per_item?: number | undefined;
|
||||
document?: File | string | null;
|
||||
document_path?: string | null;
|
||||
driver_name: string;
|
||||
vehicle_plate: string;
|
||||
supplier: {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
supplier_id: number;
|
||||
products: {
|
||||
product: {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
product_id: number;
|
||||
product_qty: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
|
||||
product: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
}).nullable(),
|
||||
product_id: Yup.number().required('Produk wajib diisi!'),
|
||||
product_qty: Yup.number()
|
||||
.required('Qty wajib diisi!')
|
||||
.min(1, 'Qty minimal 1!')
|
||||
.typeError('Qty harus berupa angka!'),
|
||||
});
|
||||
|
||||
const DeliveryProductObjectSchema = Yup.object({
|
||||
product: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
}).nullable(),
|
||||
product_id: Yup.number().required('Produk wajib diisi!'),
|
||||
product_qty: Yup.number()
|
||||
.required('Qty wajib diisi!')
|
||||
.min(1, 'Qty minimal 1!')
|
||||
.typeError('Qty harus berupa angka!'),
|
||||
});
|
||||
|
||||
const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
|
||||
delivery_cost: Yup.number()
|
||||
.transform((value) => (isNaN(value) || value === 0 ? undefined : value))
|
||||
.min(1, 'Biaya minimal 1!')
|
||||
.typeError('Biaya harus berupa angka!')
|
||||
.test(
|
||||
'one-of-cost-fields',
|
||||
'Biaya pengiriman atau biaya per item wajib diisi!',
|
||||
function (value) {
|
||||
const { delivery_cost_per_item } = this.parent;
|
||||
return (
|
||||
(value !== undefined && value > 0) ||
|
||||
(delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
|
||||
);
|
||||
}
|
||||
),
|
||||
delivery_cost_per_item: Yup.number()
|
||||
.transform((value) => (isNaN(value) || value === 0 ? undefined : value))
|
||||
.min(1, 'Biaya per item minimal 1!')
|
||||
.typeError('Biaya per item harus berupa angka!')
|
||||
.test(
|
||||
'one-of-cost-fields',
|
||||
'Biaya pengiriman atau biaya per item wajib diisi!',
|
||||
function (value) {
|
||||
const { delivery_cost } = this.parent;
|
||||
return (
|
||||
(value !== undefined && value > 0) ||
|
||||
(delivery_cost !== undefined && delivery_cost > 0)
|
||||
);
|
||||
}
|
||||
),
|
||||
document_path: Yup.string().optional(),
|
||||
document_index: Yup.number().optional(),
|
||||
document: Yup.mixed<File | string>()
|
||||
.nullable()
|
||||
.test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
|
||||
if (!value) return true;
|
||||
if (typeof value === 'string') return true;
|
||||
if (value instanceof File) return value.size <= 2 * 1024 * 1024;
|
||||
return false;
|
||||
}),
|
||||
driver_name: Yup.string().required('Nama sopir wajib diisi!'),
|
||||
vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
|
||||
supplier: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
}).nullable(),
|
||||
supplier_id: Yup.number().required('Supplier wajib diisi!'),
|
||||
products: Yup.array()
|
||||
.of(DeliveryProductObjectSchema)
|
||||
.min(1, 'Minimal harus ada 1 produk!')
|
||||
.required('Produk wajib diisi!'),
|
||||
});
|
||||
|
||||
export const MovementFormSchema = Yup.object({
|
||||
transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
|
||||
transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
|
||||
source_warehouse: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
area: Yup.string().optional(),
|
||||
location: Yup.string().optional(),
|
||||
}).nullable(),
|
||||
source_warehouse_id: Yup.number()
|
||||
.required('Gudang asal wajib diisi!')
|
||||
.typeError('Gudang asal wajib diisi!'),
|
||||
destination_warehouse: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
area: Yup.string().optional(),
|
||||
location: Yup.string().optional(),
|
||||
}).nullable(),
|
||||
destination_warehouse_id: Yup.number()
|
||||
.required('Gudang tujuan wajib diisi!')
|
||||
.typeError('Gudang tujuan wajib diisi!'),
|
||||
products: Yup.array()
|
||||
.of(ProductObjectSchema)
|
||||
.min(1, 'Minimal harus ada 1 produk!')
|
||||
.required('Produk wajib diisi!'),
|
||||
deliveries: Yup.array()
|
||||
.of(DeliveryObjectSchema)
|
||||
.min(1, 'Minimal harus ada 1 pengiriman!')
|
||||
.required('Pengiriman wajib diisi!'),
|
||||
});
|
||||
|
||||
export const UpdateMovementFormSchema = MovementFormSchema;
|
||||
|
||||
export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
|
||||
|
||||
export const getMovementFormInitialValues = (
|
||||
initialValues?: Movement
|
||||
): MovementFormValues => {
|
||||
const detailIdToProductId = new Map<number, { id: number; name: string }>();
|
||||
initialValues?.details?.forEach((detail) => {
|
||||
detailIdToProductId.set(detail.id, {
|
||||
id: detail.product.id,
|
||||
name: detail.product.name,
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
transfer_reason: initialValues?.transfer_reason ?? '',
|
||||
transfer_date: initialValues?.transfer_date ?? '',
|
||||
source_warehouse: initialValues?.source_warehouse
|
||||
? {
|
||||
value: initialValues.source_warehouse.id,
|
||||
label: initialValues.source_warehouse.name,
|
||||
area: initialValues.source_warehouse.area?.name ?? undefined,
|
||||
location: initialValues.source_warehouse.location?.name ?? undefined,
|
||||
}
|
||||
: null,
|
||||
source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
|
||||
destination_warehouse: initialValues?.destination_warehouse
|
||||
? {
|
||||
value: initialValues.destination_warehouse.id,
|
||||
label: initialValues.destination_warehouse.name,
|
||||
area: initialValues.destination_warehouse.area?.name ?? undefined,
|
||||
location:
|
||||
initialValues.destination_warehouse.location?.name ?? undefined,
|
||||
}
|
||||
: null,
|
||||
destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
|
||||
products:
|
||||
initialValues?.details?.map((detail) => ({
|
||||
product: {
|
||||
value: detail.product.id,
|
||||
label: detail.product.name,
|
||||
},
|
||||
product_id: detail.product.id,
|
||||
product_qty: detail.quantity,
|
||||
})) ?? [],
|
||||
deliveries:
|
||||
initialValues?.deliveries?.map((d) => ({
|
||||
delivery_cost: d.shipping_cost_total ?? undefined,
|
||||
delivery_cost_per_item: d.shipping_cost_item ?? undefined,
|
||||
document_number: d.document_number ?? '',
|
||||
document: d.document_path ?? null,
|
||||
document_path: d.document_path ?? null,
|
||||
driver_name: d.driver_name ?? '',
|
||||
vehicle_plate: d.vehicle_plate ?? '',
|
||||
supplier: d.supplier
|
||||
? { value: d.supplier.id, label: d.supplier.name }
|
||||
: null,
|
||||
supplier_id: d.supplier?.id ?? 0,
|
||||
products:
|
||||
d.items?.map((item) => {
|
||||
const productData = detailIdToProductId.get(
|
||||
item.stock_transfer_detail_id
|
||||
);
|
||||
return {
|
||||
product: productData
|
||||
? { value: productData.id, label: productData.name }
|
||||
: null,
|
||||
product_id: productData?.id ?? 0,
|
||||
product_qty: item.quantity,
|
||||
};
|
||||
}) ?? [],
|
||||
})) ?? [],
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,95 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { MovementApi } from '@/services/api/inventory';
|
||||
import {
|
||||
CreateMovementPayload,
|
||||
UpdateMovementPayload,
|
||||
} from '@/types/api/inventory/movement';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
|
||||
export const useMovementFormHandlers = (initialValuesId?: number) => {
|
||||
const router = useRouter();
|
||||
const deleteModal = useModal();
|
||||
const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const createMovementHandler = useCallback(
|
||||
async (payload: CreateMovementPayload, documents: File[] = []) => {
|
||||
const formData = new FormData();
|
||||
formData.append('data', JSON.stringify(payload));
|
||||
documents.forEach((file, index) => {
|
||||
formData.append(`documents[${index}]`, file);
|
||||
});
|
||||
|
||||
const res = await MovementApi.create(
|
||||
formData as unknown as CreateMovementPayload
|
||||
);
|
||||
if (isResponseError(res)) {
|
||||
setMovementFormErrorMessage(res.message);
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
router.push('/inventory/movement');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const updateMovementHandler = useCallback(
|
||||
async (
|
||||
movementId: number,
|
||||
payload: UpdateMovementPayload,
|
||||
documents: File[] = []
|
||||
) => {
|
||||
let finalPayload: UpdateMovementPayload | FormData;
|
||||
|
||||
if (documents.length > 0) {
|
||||
const formData = new FormData();
|
||||
formData.append('data', JSON.stringify(payload));
|
||||
documents.forEach((file, index) => {
|
||||
formData.append(`documents[${index}]`, file);
|
||||
});
|
||||
|
||||
finalPayload = formData as unknown as UpdateMovementPayload;
|
||||
} else {
|
||||
finalPayload = payload;
|
||||
}
|
||||
|
||||
const res = await MovementApi.update(movementId, finalPayload);
|
||||
if (res?.status === 'error') {
|
||||
setMovementFormErrorMessage(res.message);
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
router.refresh();
|
||||
router.push('/inventory/movement');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const deleteMovementClickHandler = useCallback(() => {
|
||||
deleteModal.openModal();
|
||||
}, [deleteModal]);
|
||||
|
||||
const confirmationModalDeleteClickHandler = useCallback(async () => {
|
||||
if (!initialValuesId) return;
|
||||
|
||||
setIsDeleteLoading(true);
|
||||
await MovementApi.delete(initialValuesId);
|
||||
deleteModal.closeModal();
|
||||
toast.success('Successfully delete Movement!');
|
||||
setIsDeleteLoading(false);
|
||||
router.push('/inventory/movement');
|
||||
}, [deleteModal, initialValuesId, router]);
|
||||
|
||||
return {
|
||||
deleteModal,
|
||||
movementFormErrorMessage,
|
||||
isDeleteLoading,
|
||||
createMovementHandler,
|
||||
updateMovementHandler,
|
||||
deleteMovementClickHandler,
|
||||
confirmationModalDeleteClickHandler,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user