gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-21 13:55:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(resolve): resolve merge issue

Browse Source
This commit is contained in:
rstubryan
2025-10-29 15:56:57 +07:00
parent eda3f0f1be d0d201bf3a
commit c832c4adeb
41 changed files with 5161 additions and 1734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Card.tsx
+1 -1
View File
@@ -148,4 +148,4 @@ const Card = ({
);
};
export default Card;
export default Card;
src/components/MainDrawer.tsx
+23 -1
View File
@@ -10,6 +10,7 @@ import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem';
import Navbar from '@/components/Navbar';
import Collapse from '@/components/Collapse';
import Button from '@/components/Button';
import { useUiStore } from '@/stores/ui/ui.store';
import { MAIN_DRAWER_LINKS } from '@/config/constant';
@@ -155,9 +156,15 @@ const MainDrawerMenu = () => {
};
const MainDrawerContent = () => {
const { setMainDrawerOpen } = useUiStore();
const closeMainDrawerHandler = () => {
setMainDrawerOpen(false);
};
return (
<div className='w-full p-4 flex flex-col gap-4'>
<div className='flex items-center gap-4'>
<div className='flex flex-row items-center gap-4'>
<Image
src='/assets/img/lti-logo.png'
alt='MBU Logo'
@@ -167,6 +174,21 @@ const MainDrawerContent = () => {
/>
<h1 className='text-xl font-bold'>LTI ERP</h1>
<div className='grow flex flex-row justify-end sm:hidden'>
<Button
variant='soft'
color='error'
onClick={closeMainDrawerHandler}
className='rounded-full'
>
<Icon
icon='material-symbols:close-rounded'
width={24}
height={24}
/>
</Button>
</div>
</div>
<MainDrawerMenu />
src/components/PillBadge.tsx
+31
View File
@@ -0,0 +1,31 @@
import { ReactNode } from 'react';
import { cn } from '@/lib/helper';
interface PillBadgeProps {
content: ReactNode;
color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
className?: string;
}
const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
return (
<div
className={cn(
'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
{
'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
'border-green-200 bg-green-50 text-green-500': color === 'green',
'border-red-200 bg-red-50 text-red-500': color === 'red',
'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
},
className
)}
>
{content}
</div>
);
};
export default PillBadge;
src/components/Table.tsx
+88 -88
View File
@@ -63,34 +63,34 @@ const emptyContentDefaultValue = (
);
const Table = <TData extends object>({
data = [],
columns = [],
pageSize = 10,
totalItems,
page,
onPageChange,
isLoading = false,
fuzzySearchValue,
onFuzzySearchValueChange,
className = {
containerClassName: '',
tableWrapperClassName: '',
tableClassName: '',
tableHeaderClassName: '',
headerRowClassName: '',
headerColumnClassName: '',
tableBodyClassName: '',
bodyRowClassName: '',
bodyColumnClassName: '',
paginationClassName: '',
},
emptyContent = emptyContentDefaultValue,
sorting,
setSorting,
manualSorting = false,
rowSelection,
setRowSelection,
}: TableProps<TData>) => {
data = [],
columns = [],
pageSize = 10,
totalItems,
page,
onPageChange,
isLoading = false,
fuzzySearchValue,
onFuzzySearchValueChange,
className = {
containerClassName: '',
tableWrapperClassName: '',
tableClassName: '',
tableHeaderClassName: '',
headerRowClassName: '',
headerColumnClassName: '',
tableBodyClassName: '',
bodyRowClassName: '',
bodyColumnClassName: '',
paginationClassName: '',
},
emptyContent = emptyContentDefaultValue,
sorting,
setSorting,
manualSorting = false,
rowSelection,
setRowSelection,
}: TableProps<TData>) => {
const isServerSideTable =
totalItems !== undefined &&
page !== undefined &&
@@ -188,72 +188,72 @@ const Table = <TData extends object>({
<div className={className.tableWrapperClassName}>
<table className={className.tableClassName}>
<thead className={className.tableHeaderClassName}>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className={className.headerRowClassName}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
onClick={header.column.getToggleSortingHandler()}
className={cn(
header.column.getCanSort()
? 'cursor-pointer select-none'
: '',
className.headerColumnClassName
)}
>
<div className='flex items-center gap-1'>
{flexRender(
header.column.columnDef.header,
header.getContext()
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className={className.headerRowClassName}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
onClick={header.column.getToggleSortingHandler()}
className={cn(
header.column.getCanSort()
? 'cursor-pointer select-none'
: '',
className.headerColumnClassName
)}
>
<div className='flex items-center gap-1'>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{header.column.getCanSort() && (
<div className='flex items-center'>
<Icon
icon='lucide:arrow-up'
width={12}
height={12}
className={cn(
'transition-all ease-in-out duration-200',
header.column.getIsSorted() === 'asc'
? 'text-black'
: 'text-black/30'
)}
/>
<Icon
icon='lucide:arrow-down'
width={12}
height={12}
className={cn(
'transition-all ease-in-out duration-200',
header.column.getIsSorted() === 'desc'
? 'text-black'
: 'text-black/30'
)}
/>
</div>
)}
</div>
</th>
))}
</tr>
))}
{header.column.getCanSort() && (
<div className='flex items-center'>
<Icon
icon='lucide:arrow-up'
width={12}
height={12}
className={cn(
'transition-all ease-in-out duration-200',
header.column.getIsSorted() === 'asc'
? 'text-black'
: 'text-black/30'
)}
/>
<Icon
icon='lucide:arrow-down'
width={12}
height={12}
className={cn(
'transition-all ease-in-out duration-200',
header.column.getIsSorted() === 'desc'
? 'text-black'
: 'text-black/30'
)}
/>
</div>
)}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody className={className.tableBodyClassName}>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className={className.bodyRowClassName}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className={className.bodyColumnClassName}>
{!isLoading &&
flexRender(cell.column.columnDef.cell, cell.getContext())}
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className={className.bodyRowClassName}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className={className.bodyColumnClassName}>
{!isLoading &&
flexRender(cell.column.columnDef.cell, cell.getContext())}
{isLoading && <div className='skeleton w-full h-4' />}
</td>
))}
</tr>
))}
{isLoading && <div className='skeleton w-full h-4' />}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
src/components/helper/RequireAuth.tsx
+2 -2
View File
@@ -158,7 +158,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
const { data: userResponse, isLoading: isLoadingUserResponse } =
useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
'/auth/get-me',
'/auth/sso/userinfo',
httpClientFetcher,
{
shouldRetryOnError: false,
@@ -194,4 +194,4 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
return <>{children}</>;
};
export default RequireAuth;
export default RequireAuth;
src/components/input/DateInput.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ const DateInput = ({
<div
className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center',
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
{
'border-error': isError,
'border-success!': isValid,
src/components/input/FileInput.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const FileInput = ({
onBlur={onBlur}
disabled={disabled}
className={cn(
'grow file-input w-full h-12 rounded-lg!',
'grow file-input w-full h-12 rounded',
className?.input
)}
readOnly={readOnly}
src/components/input/NumberInput.tsx
+9 -9
View File
@@ -17,15 +17,15 @@ interface NumberInputProps extends Omit<TextInputProps, 'type'> {
}
const NumberInput = ({
thousandSeparator = ',',
decimalSeparator = '.',
decimalScale = 5,
allowNegative = true,
onChange,
inputPrefix,
inputSuffix,
...restProps
}: NumberInputProps) => {
thousandSeparator = ',',
decimalSeparator = '.',
decimalScale = 5,
allowNegative = true,
onChange,
inputPrefix,
inputSuffix,
...restProps
}: NumberInputProps) => {
const valueChangeHandler: OnValueChange = (
numberFormatValues,
sourceInfo
src/components/input/SelectInput.tsx
+52 -6
View File
@@ -1,6 +1,8 @@
'use client';
import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
import useSWR from 'swr';
import Select, {
OptionProps,
GroupBase,
@@ -11,7 +13,10 @@ import Select, {
import CreatableSelect from 'react-select/creatable';
import makeAnimated from 'react-select/animated';
import { useDebounce } from 'use-debounce';
import { cn } from '@/lib/helper';
import { cn, getByPath } from '@/lib/helper';
import { httpClientFetcher } from '@/services/http/client';
import { isResponseSuccess } from '@/lib/api-helper';
import { BaseApiResponse } from '@/types/api/api-general';
export interface OptionType {
value: string | number;
@@ -162,7 +167,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
classNames={{
control: ({ isFocused, isDisabled }) =>
cn(
'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
{
'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -178,16 +183,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
input: () => cn('text-gray-900'),
indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
dropdownIndicator: ({ isFocused }) =>
cn('p-1 rounded-md hover:bg-gray-100', {
cn('p-1 rounded hover:bg-gray-100', {
'text-gray-900': isFocused,
'text-gray-500': !isFocused,
'text-error!': isError,
}),
menu: () =>
cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
menuList: () => cn('p-2! max-h-60 overflow-auto'),
option: ({ isFocused, isSelected }) =>
cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
'bg-indigo-600 text-white': isFocused,
'bg-blue-500!': isSelected,
'text-gray-700': !isFocused && !isSelected,
@@ -195,7 +200,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
multiValue: ({ getValue, index }) => {
const selectedValues = getValue() as T[];
return cn(
'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
selectedValues[index]?.className
);
},
@@ -246,4 +251,45 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
);
};
const useSelect = <T,>(
basePath: string,
valueKey: keyof T,
labelKey: keyof T,
searchKey: string = 'search',
params?: { [key: string]: string }
) => {
const [inputValue, setInputValue] = useState('');
const optionsUrlParams = useMemo(() => {
return new URLSearchParams({
[searchKey]: inputValue ?? '',
...params,
}).toString();
}, [inputValue, searchKey]);
const optionsUrl = `${basePath}?${optionsUrlParams}`;
const { data, isLoading } = useSWR(optionsUrl, async (url) => {
return await httpClientFetcher<BaseApiResponse<T[]>>(url);
});
const options = isResponseSuccess(data)
? data.data.map((item) => {
return {
value: getByPath<T, number>(item, valueKey as string),
label: getByPath<T, string>(item, labelKey as string),
};
})
: [];
return {
inputValue,
setInputValue,
options,
isLoadingOptions: isLoading,
rawData: data,
};
};
export { useSelect };
export default SelectInput;
src/components/input/TextArea.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ const TextArea = ({
<textarea
className={cn(
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
{
'border-error': isError,
'border-success!': isValid,
src/components/input/TextInput.tsx
+8 -4
View File
@@ -131,10 +131,14 @@ const TextInput = ({
onChange={onChange}
onBlur={onBlur}
disabled={disabled}
className={cn('grow bg-transparent outline-none', {
'cursor-not-allowed': disabled,
'text-gray-500': disabled,
}, className?.input)}
className={cn(
'grow bg-transparent outline-none',
{
'cursor-not-allowed': disabled,
'text-gray-500': disabled,
},
className?.input
)}
readOnly={readOnly}
/>
src/components/pages/inventory/movement/form/MovementForm.tsx
+88 -80
View File
@@ -40,10 +40,14 @@ interface MovementFormProps {
const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
// ===== STATE MANAGEMENT =====
const [, setMovementFormErrorMessage] = useState('');
const [productWarehouseSelectInputValue, setProductWarehouseSelectInputValue] = useState('');
const [
productWarehouseSelectInputValue,
setProductWarehouseSelectInputValue,
] = useState('');
const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
const [warehouseSelectInputValue, setWarehouseSelectInputValue] = useState('');
const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
useState('');
const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
// ===== FORM HANDLERS =====
@@ -112,9 +116,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const warehouseOptions = isResponseSuccess(warehouses)
? warehouses?.data.map((w) => {
warehouseStockMap.get(w.id);
return {
value: w.id,
warehouseStockMap.get(w.id);
return {
value: w.id,
label: w.name,
area: w.area?.name,
location:
@@ -400,10 +404,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const handleDeliveryCostPerItemChange = useCallback(
(idx: number, value: number) => {
formik.setFieldValue(
`deliveries.${idx}.delivery_cost_per_item`,
value
);
formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
const delivery = formik.values.deliveries?.[idx];
if (delivery) {
@@ -520,9 +521,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
if (!stockInfo) {
return (
<Badge
variant="ghost"
color="neutral"
size="sm"
variant='ghost'
color='neutral'
size='sm'
className={{ badge: 'whitespace-nowrap font-semibold' }}
>
Kosong
@@ -537,9 +538,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
return (
<Badge
variant="soft"
variant='soft'
color={color}
size="sm"
size='sm'
className={{ badge: 'whitespace-nowrap font-semibold' }}
>
Tersedia {productCount} produk
@@ -806,7 +807,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
isClearable
startAdornment={
formik.values.source_warehouse_id
? getWarehouseStockAdornment(formik.values.source_warehouse_id)
? getWarehouseStockAdornment(
formik.values.source_warehouse_id
)
: undefined
}
/>
@@ -873,7 +876,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
isClearable
startAdornment={
formik.values.destination_warehouse_id
? getWarehouseStockAdornment(formik.values.destination_warehouse_id)
? getWarehouseStockAdornment(
formik.values.destination_warehouse_id
)
: undefined
}
/>
@@ -925,31 +930,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<CheckboxInput
name='select-all-products'
checked={
formik.values.products?.length ===
selectedProducts.length &&
formik.values.products?.length > 0
<CheckboxInput
name='select-all-products'
checked={
formik.values.products?.length ===
selectedProducts.length &&
formik.values.products?.length > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedProducts(
formik.values.products?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedProducts([]);
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedProducts(
formik.values.products?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedProducts([]);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</th>
)}
<th>
@@ -977,12 +982,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{formik.values.products?.map((product, idx) => (
<tr key={`product-row-${idx}-${product.product_id}`}>
{type !== 'detail' && (
<td className="!align-middle">
<td className='!align-middle'>
<CheckboxInput
name={`product-${idx}`}
checked={selectedProducts.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>,
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedProducts([
@@ -991,7 +996,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
]);
} else {
setSelectedProducts(
selectedProducts.filter((i) => i !== idx),
selectedProducts.filter((i) => i !== idx)
);
}
}}
@@ -1057,8 +1062,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=","
decimalSeparator="."
thousandSeparator=','
decimalSeparator='.'
bottomLabel={getProductQtyBottomLabel(idx)}
isError={
isRepeaterInputError(
@@ -1146,31 +1151,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<CheckboxInput
name='select-all-deliveries'
checked={
formik.values.deliveries?.length ===
selectedDeliveries.length &&
formik.values.deliveries?.length > 0
<CheckboxInput
name='select-all-deliveries'
checked={
formik.values.deliveries?.length ===
selectedDeliveries.length &&
formik.values.deliveries?.length > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDeliveries(
formik.values.deliveries?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedDeliveries([]);
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDeliveries(
formik.values.deliveries?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedDeliveries([]);
}
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</th>
)}
<th>
@@ -1244,12 +1249,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{formik.values.deliveries?.map((delivery, idx) => (
<tr key={`delivery-row-${idx}`}>
{type !== 'detail' && (
<td className="!align-middle">
<td className='!align-middle'>
<CheckboxInput
name={`delivery-${idx}`}
checked={selectedDeliveries.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>,
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDeliveries([
@@ -1258,9 +1263,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
]);
} else {
setSelectedDeliveries(
selectedDeliveries.filter(
(i) => i !== idx,
),
selectedDeliveries.filter((i) => i !== idx)
);
}
}}
@@ -1319,8 +1322,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=","
decimalSeparator="."
thousandSeparator=','
decimalSeparator='.'
isError={
isDeliveryProductInputError(idx, 0, 'product_qty')
.isError || Boolean(getDeliveryQtyError(idx, 0))
@@ -1331,7 +1334,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
getDeliveryQtyError(idx, 0) ||
undefined
}
bottomLabel={getDeliveryProductQtyBottomLabel(idx, 0)}
bottomLabel={getDeliveryProductQtyBottomLabel(
idx,
0
)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-48',
@@ -1464,7 +1470,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
inputPrefix="Rp"
inputPrefix='Rp'
{...isRepeaterInputError(
'deliveries',
'delivery_cost',
@@ -1482,13 +1488,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
required
name={`deliveries.${idx}.delivery_cost_per_item`}
value={delivery.delivery_cost_per_item || ''}
onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
onChange={handleDeliveryCostPerItemChangeWrapper(
idx
)}
onBlur={formik.handleBlur}
decimalScale={0}
allowNegative={false}
thousandSeparator=','
decimalSeparator='.'
inputPrefix="Rp"
inputPrefix='Rp'
{...isRepeaterInputError(
'deliveries',
'delivery_cost_per_item',
src/components/pages/production/chickin/ChickinTable.tsx
+11 -11
View File
@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
import { ROWS_OPTIONS } from '@/config/constant';
import { isResponseSuccess } from '@/lib/api-helper';
import { cn } from '@/lib/helper';
import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
import { cn, formatNumber } from '@/lib/helper';
import { ChickinApi } from '@/services/api/production';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { Chickin } from '@/types/api/production/chickin';
import { Icon } from '@iconify/react';
@@ -57,13 +57,6 @@ const ChickinTable = () => {
`${ChickinApi.basePath}${getTableFilterQueryString()}`,
ChickinApi.getAllFetcher
);
const {
data: projectFlocks,
isLoading: isLoadingProjectFlocks,
} = useSWR(
`${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
ProjectFlockApi.getAllFetcher
);
const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
updateFilter('search', event.target.value);
@@ -131,6 +124,13 @@ const ChickinTable = () => {
{
accessorFn: (row) => row.quantity,
header: 'Jumlah Chickin',
cell: (props) => {
if (props.row.original.quantity) {
return formatNumber(props.row.original.quantity);
} else {
return '-';
}
}
},
{
accessorFn: (row) => row.chick_in_date,
@@ -166,7 +166,7 @@ const ChickinTable = () => {
deleteModal.openModal();
};
const editClickHandler = () => {
const editClickHandler = () => {
setSelectedChickin(props.row.original);
chickinModal.openModal();
};
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
)}
>
<Button
href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
variant='ghost'
color='primary'
className='justify-start text-sm'
src/components/pages/production/chickin/form/ChickinForm.tsx
+29 -15
View File
@@ -11,7 +11,7 @@ import {
ChickinFormValues,
UpdateChickinFormSchema,
} from '@/components/pages/production/chickin/form/ChickinForm.schema';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { useFormik } from 'formik';
import { ChickinApi } from '@/services/api/production';
import DateInput from '@/components/input/DateInput';
@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
import { Icon } from '@iconify/react';
import TextArea from '@/components/input/TextArea';
import TextInput from '@/components/input/TextInput';
import NumberInput from '@/components/input/NumberInput';
interface ChickinFormProps {
formType?: 'add' | 'detail' | 'edit';
@@ -45,8 +46,11 @@ const ChickinForm = ({
const formikInitialValue = useMemo<ChickinFormValues>(() => {
return {
chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
quantity: initialValues?.quantity ?? 1,
note: initialValues?.note ?? '',
quantity:
initialValues?.quantity ??
initialValues?.project_flock_kandang?.available_quantity ??
0,
};
}, [initialValues]);
@@ -71,10 +75,7 @@ const ChickinForm = ({
payload: UpdateChickinPayload,
afterSubmit: (() => void) | undefined
) => {
const res = await ChickinApi.update(
payload.project_flock_kandang_id as number,
payload
);
const res = await ChickinApi.update(payload.id, payload);
if (isResponseError(res)) {
setChickinFormErrorMessage(res.message);
return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
// reset error message
setChickinFormErrorMessage('');
if (initialValues?.project_flock_kandang?.id == undefined) {
if (
initialValues?.project_flock_kandang?.id == undefined ||
(formType == 'edit' && initialValues?.id == undefined)
) {
return;
}
@@ -103,9 +107,13 @@ const ChickinForm = ({
const payload = {
chick_in_date: values.chick_in_date,
project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
note: values.note,
quantity: values.quantity,
id: initialValues.id ?? 0,
};
// cek type form yang disubmit
console.log(formType);
switch (formType) {
case 'add':
handleCreate(payload, afterSubmit);
@@ -144,28 +152,34 @@ const ChickinForm = ({
}
errorMessage={formik.errors.chick_in_date}
/>
<TextInput
<NumberInput
value={formik.values.quantity}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
name='quantity'
label='Jumlah Chickin'
label='Jumlah (Ekor)'
required
isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
errorMessage={formik.errors.quantity}
type='number'
disabled
isError={
(formik.touched.quantity && Boolean(formik.errors.quantity)) ||
formik.values.quantity == 0
}
errorMessage={
formik.values.quantity == 0
? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
: formik.errors.quantity
}
readOnly
/>
<TextArea
required
label='Catatan'
name='note'
placeholder='Masukan catatan chickin'
value={formik.values.note}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={formik.touched.note && Boolean(formik.errors.note)}
errorMessage={formik.errors.note}
/>
{initialValues?.project_flock_kandang?.id == undefined && (
<p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
src/components/pages/production/project-flock/ProjectFlockTable.tsx
+233 -220
View File
@@ -1,6 +1,7 @@
'use client';
import Button from '@/components/Button';
import CheckboxInput from '@/components/input/CheckboxInput';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
@@ -16,13 +17,12 @@ import { ProjectFlockApi } from '@/services/api/production';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { BaseApiResponse } from '@/types/api/api-general';
import { Kandang } from '@/types/api/master-data/kandang';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { Icon } from '@iconify/react';
import {
CellContext,
ColumnDef,
SortingState,
} from '@tanstack/react-table';
ProjectFlockApprovalPayload,
ProjectFlock,
} from '@/types/api/production/project-flock';
import { Icon } from '@iconify/react';
import { CellContext, SortingState } from '@tanstack/react-table';
import { ChangeEventHandler, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
@@ -56,24 +56,28 @@ const RowOptionsMenu = ({
<Icon icon='mdi:eye-outline' width={16} height={16} />
Detail
</Button>
<Button
href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='success'
className='justify-start text-sm'
>
<Icon icon='mdi:home-import-outline' width={16} height={16} />
Chickin
</Button>
{/* <Button
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
>
<Icon icon='mdi:pencil-outline' width={16} height={16} />
Edit
</Button> */}
{props.row.original.approval.step_name === 'Aktif' && (
<Button
href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='success'
className='justify-start text-sm'
>
<Icon icon='mdi:home-import-outline' width={16} height={16} />
Chickin
</Button>
)}
{props.row.original.approval.step_name === 'Pengajuan' && (
<Button
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
>
<Icon icon='mdi:pencil-outline' width={16} height={16} />
Edit
</Button>
)}
<Button
onClick={deleteClickHandler}
variant='ghost'
@@ -117,10 +121,15 @@ const ProjectFlockTable = () => {
periodFilter: 'period',
},
});
// State
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const selectedRowIds = Object.keys(rowSelection)
.filter((id) => rowSelection[id])
.map((id) => parseInt(id));
const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
null
@@ -129,6 +138,13 @@ const ProjectFlockTable = () => {
null
);
const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<ProjectFlock>();
const deleteModal = useModal();
const confirmModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
// Fetch Data
const {
@@ -144,20 +160,20 @@ const ProjectFlockTable = () => {
search: areaSelectInputValue,
limit: '100',
}).toString()}`;
const {
data: areas,
isLoading: isLoadingAreas,
} = useSWR(areaUrl, AreaApi.getAllFetcher);
const { data: areas, isLoading: isLoadingAreas } = useSWR(
areaUrl,
AreaApi.getAllFetcher
);
const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
search: locationSelectInputValue,
area_id: selectedArea != null ? selectedArea.value.toString() : '',
limit: '100',
}).toString()}`;
const {
data: locations,
isLoading: isLoadingLocations,
} = useSWR(locationUrl, LocationApi.getAllFetcher);
const { data: locations, isLoading: isLoadingLocations } = useSWR(
locationUrl,
LocationApi.getAllFetcher
);
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
search: kandangSelectInputValue,
@@ -165,10 +181,10 @@ const ProjectFlockTable = () => {
selectedLocation != null ? selectedLocation.value.toString() : '',
limit: '100',
}).toString()}`;
const {
data: kandangs,
isLoading: isLoadingKandang,
} = useSWR(kandangUrl, KandangApi.getAllFetcher);
const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
kandangUrl,
KandangApi.getAllFetcher
);
// Data to Options Mapping
const optionsArea = isResponseSuccess(areas)
@@ -190,139 +206,6 @@ const ProjectFlockTable = () => {
}))
: [];
// State
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<ProjectFlock>();
const deleteModal = useModal();
const confirmModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
const [isApproveLoading, setIsApproveLoading] = useState(false);
// Columns
const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
{
id: 'select',
header: () => {
const allSelected =
isResponseSuccess(projectFlocks) &&
projectFlocks.data.length > 0 &&
selectedIds.length === projectFlocks.data.length;
return (
<input
type='checkbox'
className='checkbox checkbox-sm'
checked={allSelected}
onChange={(e) => handleSelectAll(e.target.checked)}
/>
);
},
cell: (props) => {
const id = props.row.original.id;
const isChecked = selectedIds.includes(id);
return (
<input
type='checkbox'
className='checkbox checkbox-sm'
checked={isChecked}
onChange={(e) => handleSelectRow(id, e.target.checked)}
/>
);
},
},
{
accessorKey: 'flock.name',
header: 'Flock',
},
{
accessorKey: 'area.name',
header: 'Area',
},
{
accessorKey: 'location.name',
header: 'Lokasi',
},
{
accessorKey: 'fcr.name',
header: 'FCR',
},
{
accessorKey: 'category',
header: 'Kategori',
},
{
header: 'Kandang',
cell: (props) => {
const kandang = props.row.original.kandangs;
if (kandang) {
const kandangNames = kandang.map((k: Kandang) => k.name);
return (
<div>
{kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
</div>
);
} else {
return '-';
}
},
},
{
accessorKey: 'period',
header: 'Periode',
},
{
accessorKey: 'created_at',
header: 'Dibuat pada',
cell: (props) =>
new Date(props.row.original.created_at).toLocaleDateString(),
},
{
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 = () => {
setSelectedProjectFlock(props.row.original);
deleteModal.openModal();
};
return (
<>
{currentPageSize > 2 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
];
// Handler
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
@@ -341,45 +224,17 @@ const ProjectFlockTable = () => {
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
updateFilter('search', e.target.value);
};
const handleSelectAll = (checked: boolean) => {
if (checked && isResponseSuccess(projectFlocks)) {
const allIds = projectFlocks.data.map((item) => item.id);
setSelectedIds(allIds);
setSelectedFlocks(projectFlocks.data);
} else {
setSelectedIds([]);
setSelectedFlocks([]);
}
};
const handleSelectRow = (id: number, checked: boolean) => {
if (!isResponseSuccess(projectFlocks)) return;
const targetFlock = projectFlocks.data.find((item) => item.id === id);
if (!targetFlock) return;
if (checked) {
setSelectedIds((prev) => [...prev, id]);
setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
} else {
setSelectedIds((prev) => prev.filter((val) => val !== id));
setSelectedFlocks((prev) =>
(prev || []).filter((flock) => flock.id !== id)
);
}
};
const confirmationModalApproveClickHandler = async () => {
setIsApproveLoading(true);
const approveProjectFlockRes = await ProjectFlockApi.customRequest<
BaseApiResponse<ProjectFlock>,
'POST'
>(`/approve`, {
ProjectFlockApprovalPayload
>(`/approvals`, {
method: 'POST',
payload: 'POST',
params: {
ids: selectedFlocks.map((flock) => flock.id).join(','),
payload: {
action: 'APPROVED',
approvable_ids: selectedRowIds.map((id) => id),
},
});
@@ -391,6 +246,8 @@ const ProjectFlockTable = () => {
toast.error(approveProjectFlockRes?.message as string);
confirmModal.closeModal();
}
setRowSelection({});
refreshProjectFlocks();
setIsApproveLoading(false);
};
@@ -412,11 +269,9 @@ const ProjectFlockTable = () => {
variant='outline'
color='success'
onClick={() => {
if (selectedIds.length > 0) {
confirmModal.openModal();
}
confirmModal.openModal();
}}
disabled={!(selectedIds.length > 0)}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
@@ -508,7 +363,162 @@ const ProjectFlockTable = () => {
<Table<ProjectFlock>
data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
columns={projectFlocksColumns}
columns={[
{
id: 'select',
header: ({ table }) => {
const allRows = table.getRowModel().rows;
const selectableRows = allRows.filter(
(row) => row.original?.approval?.step_number == 1
);
const allSelected = selectableRows.every((row) =>
row.getIsSelected()
) && selectableRows.length != 0;
const someSelected =
selectableRows.some((row) => row.getIsSelected()) &&
!allSelected;
const toggleSelectableRows = () => {
const shouldSelect = !allSelected;
selectableRows.forEach((row) =>
row.toggleSelected(shouldSelect)
);
};
return (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={allSelected}
indeterminate={someSelected}
onChange={toggleSelectableRows}
disabled={
isResponseSuccess(projectFlocks) &&
projectFlocks?.data?.filter(
(flock) => flock.approval.step_number == 1
).length == 0
}
/>
</div>
);
},
cell: ({ row }) => {
return (
<CheckboxInput
name='row'
checked={
row.getIsSelected() &&
row.original.approval.step_number == 1
}
disabled={
!row.getCanSelect() ||
row.original.approval.step_number != 1
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
},
},
{
accessorKey: 'flock.name',
header: 'Flock',
},
{
accessorKey: 'area.name',
header: 'Area',
},
{
accessorKey: 'location.name',
header: 'Lokasi',
},
{
accessorKey: 'fcr.name',
header: 'FCR',
},
{
accessorKey: 'category',
header: 'Kategori',
},
{
accessorKey: 'approval.step_name',
header: 'Status',
},
{
header: 'Kandang',
cell: (props) => {
const kandang = props.row.original.kandangs;
if (kandang) {
const kandangNames = kandang.map((k: Kandang) => k.name);
return (
<div>
{kandangNames.length > 0
? kandangNames.join(', ')
: 'Tidak ada'}
</div>
);
} else {
return '-';
}
},
},
{
accessorKey: 'period',
header: 'Periode',
},
{
accessorKey: 'created_at',
header: 'Dibuat pada',
cell: (props) =>
new Date(props.row.original.created_at).toLocaleDateString(),
},
{
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 = () => {
setSelectedProjectFlock(props.row.original);
deleteModal.openModal();
};
return (
<>
{currentPageSize > 2 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
]}
pageSize={tableFilterState.pageSize}
page={
isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
@@ -522,6 +532,8 @@ const ProjectFlockTable = () => {
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
className={{
containerClassName: cn({
'mb-20':
@@ -559,18 +571,19 @@ const ProjectFlockTable = () => {
<ConfirmationModal
ref={confirmModal.ref}
type='success'
text={
selectedFlocks.length > 0
? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
.map(
(flock) =>
`${flock.flock?.name ?? '(Tanpa nama)'} - ${
flock.area?.name ?? '-'
}`
)
.join(', ')})`
: 'Tidak ada Project Flock yang dipilih.'
}
text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
// text={
// selectedFlocks.length > 0
// ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
// .map(
// (flock) =>
// `${flock.flock?.name ?? '(Tanpa nama)'} - ${
// flock.area?.name ?? '-'
// }`
// )
// .join(', ')})`
// : 'Tidak ada Project Flock yang dipilih.'
// }
secondaryButton={{
text: 'Tidak',
}}
src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+127 -147
View File
@@ -14,13 +14,14 @@ import { Icon } from '@iconify/react';
import { useFormik } from 'formik';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import useSWR from 'swr';
import useSWR, { KeyedMutator } from 'swr';
import {
ProjectFlockFormSchema,
ProjectFlockFormValues,
UpdateProjectFlockFormSchema,
} from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
import {
ProjectFlockApprovalPayload,
CreateProjectFlockPayload,
PeriodFlock,
ProjectFlock,
@@ -34,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ProjectFlockKandangTable from './ProjectFlockKandangTable';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
initialValues?: ProjectFlock;
refreshProjectFlocks?: KeyedMutator<
BaseApiResponse<ProjectFlock> | undefined
>;
}
const ProjectFlockForm = ({
formType = 'add',
initialValues,
refreshProjectFlocks,
}: ProjectFlockFormProps) => {
// State
const router = useRouter();
@@ -70,6 +76,34 @@ const ProjectFlockForm = ({
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
initialValues?.approval.step_name == 'Pengajuan' ? false : true
);
const [isRejectedDisabled, setIsRejectedDisabled] = useState(
!isApprovedDisabled
);
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
!isApprovedDisabled ? 'APPROVED' : 'REJECTED'
);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
() =>
Object.fromEntries(
(initialValues?.kandangs ?? []).map((k: Kandang) => [
k.id.toString(),
true,
])
)
);
useEffect(() => {
if (initialValues?.approval?.step_name) {
const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
setIsApprovedDisabled(approvedDisabled);
setIsRejectedDisabled(!approvedDisabled);
setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
}
}, [initialValues]);
// Fetch Data
const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -109,7 +143,7 @@ const ProjectFlockForm = ({
search: '',
location_id: selectedLocation == '' ? '0' : selectedLocation,
}).toString()}`;
const { data: kandang, isLoading: isLoadingKandang } = useSWR(
const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
kandangUrl,
KandangApi.getAllFetcher
);
@@ -167,6 +201,20 @@ const ProjectFlockForm = ({
}
}
}, [kandang]);
useEffect(() => {
if (initialValues?.kandangs) {
refreshKandang();
setOpenSelectKandangs(true);
const newRowSelection = Object.fromEntries(
initialValues.kandangs.map((k: Kandang) => [
k.id.toString(),
true,
])
);
setRowSelection(newRowSelection);
}
}, [initialValues, refreshKandang]);
// Options Handler
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -211,38 +259,6 @@ const ProjectFlockForm = ({
formik.setFieldTouched('category', true);
};
const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value, checked } = event.target;
if (checked) {
formik.setFieldValue(
'kandang_ids',
formik.values.kandang_ids.concat(parseInt(value))
);
} else {
formik.setFieldValue(
'kandang_ids',
formik.values.kandang_ids.filter((id) => id !== parseInt(value))
);
}
};
const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
const { checked } = event.target;
if (checked) {
formik.setFieldValue(
'kandang_ids',
optionsKandang
.filter(
(kandang) =>
kandang.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(kandang.id)
)
.map((kandang) => kandang.id)
);
} else {
formik.setFieldValue('kandang_ids', []);
}
};
// Submit Handler
const createProjectFlockHandler = async (
payload: CreateProjectFlockPayload
@@ -375,7 +391,7 @@ const ProjectFlockForm = ({
formik.setFieldValue('period', initialValues?.period);
}
}, [initialValues, setSelectedArea, formType]);
useEffect(() => {
formikSetValues(formikInitialValues);
}, [formikSetValues, formikInitialValues]);
@@ -400,11 +416,21 @@ const ProjectFlockForm = ({
}, [formik.values]);
useEffect(() => {
if(isResponseSuccess(periodFlocks)){
if (isResponseSuccess(periodFlocks)) {
formik.setFieldValue('period', periodFlocks.data.next_period);
}
}, [periodFlocks]);
useEffect(() => {
const selectedRowIds = Object.keys(rowSelection)
.filter((id) => rowSelection[id])
.map((id) => parseInt(id));
formikSetValues({
...formik.values,
kandang_ids: selectedRowIds,
});
}, [rowSelection, formikSetValues]);
// Actions handler
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -422,23 +448,42 @@ const ProjectFlockForm = ({
setIsDeleteLoading(false);
};
const confirmationModalApproveClickHandler = async () => {
const confirmationModalClickHandler = async ({
action = 'APPROVED',
}: {
action: 'APPROVED' | 'REJECTED';
}) => {
if (initialValues?.id === undefined) return;
setIsApproveLoading(true);
const approveProjectFlockRes = await ProjectFlockApi.customRequest<
BaseApiResponse<ProjectFlock>,
'POST'
>(`/${initialValues?.id}/approve`, {
ProjectFlockApprovalPayload
>(`/approvals`, {
method: 'POST',
payload: {
action: action,
approvable_ids: [initialValues.id],
},
});
if (isResponseSuccess(approveProjectFlockRes)) {
toast.success('Project Flock berhasil di-approve!');
confirmModal.closeModal();
if (refreshProjectFlocks) {
await refreshProjectFlocks();
}
// if (action == 'APPROVED') {
// setIsApprovedDisabled(true);
// setIsRejectedDisabled(false);
// }
// if (action == 'REJECTED') {
// setIsRejectedDisabled(true);
// setIsApprovedDisabled(false);
// }
toast.success(approveProjectFlockRes.message as string);
}
if (isResponseError(approveProjectFlockRes)) {
toast.error(approveProjectFlockRes?.message as string);
confirmModal.closeModal();
}
confirmModal.closeModal();
setIsApproveLoading(false);
};
@@ -481,21 +526,37 @@ const ProjectFlockForm = ({
</div>
)}
{formType == 'detail' && (
<div className='w-full py-4'>
<div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
<Button
variant='outline'
color='success'
onClick={() => {
if (initialValues?.id) {
setApprovalAction('APPROVED');
confirmModal.openModal();
}
}}
disabled={!initialValues?.id}
disabled={!initialValues?.id || isApprovedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
<Button
variant='outline'
color='error'
onClick={() => {
if (initialValues?.id) {
setApprovalAction('REJECTED');
confirmModal.openModal();
}
}}
disabled={!initialValues?.id || isRejectedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='mdi:times' width={24} height={24} />
Reject
</Button>
</div>
)}
<form
@@ -505,9 +566,7 @@ const ProjectFlockForm = ({
>
<div className='card bg-base-100 shadow w-full mb-6'>
<div className='card-body'>
<div className='card-title mb-4'>
Informasi Umum
</div>
<div className='card-title mb-4'>Informasi Umum</div>
<div className='grid sm:grid-cols-2 gap-4'>
<SelectInput
@@ -614,7 +673,7 @@ const ProjectFlockForm = ({
variant='link'
className={`text-primary rotate-${
openSelectKandangs ? '180' : '0'
} transition-transform hover:text-inherit`}
} transition-transform hover:text-inherit me-3`}
>
<Icon
icon='material-symbols:keyboard-arrow-down'
@@ -631,102 +690,15 @@ const ProjectFlockForm = ({
>
<div className='overflow-x-auto'>
{isLoadingKandang && (
<span className="loading loading-dots loading-xl"></span>
<span className='loading loading-dots loading-xl'></span>
)}
<table className='table'>
{/* head */}
<thead>
<tr>
<th>
<label>
<input
type='checkbox'
checked={
optionsKandang
.filter(
(k) =>
k.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(k.id)
)
.every((k) =>
formik.values.kandang_ids.includes(k.id)
) &&
optionsKandang.filter(
(k) =>
k.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(k.id)
).length > 0
}
className='checkbox transition-none'
disabled={
formType === 'detail' ||
optionsKandang.filter(
(k) => k.status === 'NON_ACTIVE'
).length == 0
}
onChange={
formType === 'detail'
? () => {}
: kandangCheckAll
}
/>
</label>
</th>
<th>Kandang</th>
<th>Status</th>
<th>Penanggung Jawab</th>
</tr>
</thead>
<tbody>
{/* rows */}
{selectedLocation != '' &&
optionsKandang.map((kandang) => (
<tr key={kandang.id}>
<th>
<label>
<input
value={kandang.id}
type='checkbox'
className='checkbox transition-none'
checked={formik.values.kandang_ids.includes(
kandang.id
)}
onChange={
formType === 'detail'
? () => {}
: kandangChangeHandler
}
disabled={
formType === 'detail' ||
kandang.status != 'NON_ACTIVE'
}
/>
</label>
</th>
<td>{kandang.name}</td>
<td>{kandang.status}</td>
<td>{kandang.pic?.name}</td>
</tr>
))}
{selectedLocation == '' && (
<tr>
<td colSpan={3} className='text-center text-muted'>
Data tidak tersedia
</td>
</tr>
)}
</tbody>
{/* foot */}
{selectedLocation != '' && (
<tfoot>
<tr>
<th></th>
<th>Kandang</th>
<th>Penanggung Jawab</th>
</tr>
</tfoot>
)}
</table>
<ProjectFlockKandangTable
listKandang={optionsKandang}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
selectedIds={formik.values.kandang_ids}
formType={formType}
/>
</div>
</Collapse>
</div>
@@ -795,16 +767,24 @@ const ProjectFlockForm = ({
<ConfirmationModal
ref={confirmModal.ref}
type='success'
text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
type={approvalAction == 'APPROVED' ? 'success' : 'error'}
text={`Apakah anda yakin ingin ${
approvalAction == 'APPROVED' ? 'approve' : 'reject'
} Project Flock berikut? (${initialValues?.flock?.name} - ${
initialValues?.area?.name
})?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
color: approvalAction == 'APPROVED' ? 'success' : 'error',
isLoading: isApproveLoading,
onClick: confirmationModalApproveClickHandler,
onClick: () => {
confirmationModalClickHandler({
action: approvalAction,
});
},
}}
/>
</>
src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+146
View File
@@ -0,0 +1,146 @@
'use client';
import CheckboxInput from '@/components/input/CheckboxInput';
import PillBadge from '@/components/PillBadge';
import Table from '@/components/Table';
import { cn } from '@/lib/helper';
import { Kandang } from '@/types/api/master-data/kandang';
import { OnChangeFn } from '@tanstack/react-table';
const ProjectFlockKandangTable = ({
listKandang,
rowSelection,
setRowSelection,
selectedIds,
formType = 'add',
}: {
listKandang: Kandang[];
rowSelection: Record<string, boolean>;
setRowSelection: OnChangeFn<Record<string, boolean>>;
selectedIds: (number | undefined)[];
formType: 'add' | 'edit' | 'detail';
}) => {
console.log('selectedIds');
console.log(selectedIds);
return (
<Table<Kandang>
data={listKandang}
columns={[
{
id: 'select',
header: ({ table }) => {
const allRows = table.getRowModel().rows;
const selectableRows = allRows.filter(
(row) =>
row.original.status == 'NON_ACTIVE' ||
row.original.status == 'PENGAJUAN'
);
const allSelected =
selectableRows.every((row) => row.getIsSelected()) &&
selectableRows.length != 0 && formType != 'detail';
const someSelected =
selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
const toggleSelectableRows = () => {
const shouldSelect = !allSelected;
selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
};
return (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={allSelected}
indeterminate={someSelected}
onChange={toggleSelectableRows}
disabled={
listKandang.filter(
(kandang) =>
kandang.status == 'NON_ACTIVE' ||
kandang.status == 'PENGAJUAN'
).length == 0 || formType == 'detail'
}
/>
</div>
);
},
cell: ({ row }) => {
return (
<CheckboxInput
name='row'
checked={
(row.getIsSelected() &&
(row.original.status == 'NON_ACTIVE' ||
row.original.status == 'PENGAJUAN')) ||
selectedIds.includes(row.original.id)
}
disabled={
!row.getCanSelect() ||
(row.original.status != 'NON_ACTIVE' &&
row.original.status != 'PENGAJUAN') ||
formType == 'detail'
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
},
},
{
accessorFn: (row) => row.name,
header: 'Kandang',
},
{
accessorFn: (row) => row.status,
header: 'Status',
cell: (props) => {
return (
<PillBadge
color={(() => {
switch (props.row.original.status) {
case 'ACTIVE':
return 'red';
case 'PENGAJUAN':
return 'green';
case 'NON_ACTIVE':
return 'blue';
default:
return 'gray';
}
})()}
content={props.row.original.status
.toLowerCase()
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase())}
/>
);
},
},
{
accessorFn: (row) => row.pic?.name,
header: 'Penanggung Jawab',
},
]}
className={{
containerClassName: cn({
'mb-20': listKandang?.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',
paginationClassName: 'hidden',
}}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
/>
);
};
export default ProjectFlockKandangTable;
src/components/pages/production/recording/form/RecordingForm.tsx
+656 -524
View File
File diff suppressed because it is too large Load Diff
src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+633
View File
@@ -0,0 +1,633 @@
'use client';
import { ChangeEventHandler, useState } from 'react';
import useSWR from 'swr';
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
import toast from 'react-hot-toast';
import { Icon } from '@iconify/react';
import Table from '@/components/Table';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import Button from '@/components/Button';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import TextInput from '@/components/input/TextInput';
import CheckboxInput from '@/components/input/CheckboxInput';
import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
import { cn, formatDate } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { ROWS_OPTIONS } from '@/config/constant';
import { Flock } from '@/types/api/master-data/flock';
import { FlockApi } from '@/services/api/master-data';
const RowOptionsMenu = ({
type = 'dropdown',
props,
approveClickHandler,
rejectClickHandler,
deleteClickHandler,
}: {
type: 'dropdown' | 'collapse';
props: CellContext<TransferToLaying, unknown>;
approveClickHandler: () => void;
rejectClickHandler: () => void;
deleteClickHandler: () => void;
}) => {
return (
<div
tabIndex={type === 'dropdown' ? 0 : undefined}
className={cn(
{
'dropdown-content': type === 'dropdown',
'mt-2': type === 'collapse',
},
'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
)}
>
<Button
href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
variant='ghost'
color='primary'
className='justify-start text-sm'
>
<Icon icon='mdi:eye-outline' width={16} height={16} />
Detail
</Button>
<Button
href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
>
<Icon icon='material-symbols:edit-outline' width={16} height={16} />
Edit
</Button>
<Button
variant='ghost'
color='success'
onClick={approveClickHandler}
className='justify-start text-sm'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
<Button
variant='ghost'
color='error'
onClick={rejectClickHandler}
className='justify-start text-sm'
>
<Icon icon='material-symbols:close' width={24} height={24} />
Reject
</Button>
<Button
onClick={deleteClickHandler}
variant='ghost'
color='error'
className='text-error hover:text-inherit'
>
<Icon
icon='material-symbols:delete-outline-rounded'
width={16}
height={16}
className='justify-start text-sm'
/>
Delete
</Button>
</div>
);
};
const TransferToLayingsTable = () => {
const {
state: tableFilterState,
updateFilter,
setPage,
setPageSize,
toQueryString: getTableFilterQueryString,
} = useTableFilter({
initial: {
search: '',
transferDate: '',
flockSource: '',
flockDestination: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
transferDate: 'transfer_date',
flockSource: 'flock_source',
flockDestination: 'flock_destination',
},
});
const {
data: transferToLayings,
isLoading,
mutate: refreshTransferToLayings,
} = useSWR(
`${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
TransferToLayingApi.getAllFetcher
);
// Modal hooks
const deleteModal = useModal();
const approveModal = useModal();
const rejectModal = useModal();
// Flocks data
const {
setInputValue: setFlockSourceInputValue,
options: flockSourceOptions,
isLoadingOptions: isLoadingFlockSourceOptions,
} = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
const {
setInputValue: setFlockDestinationInputValue,
options: flockDestinationOptions,
isLoadingOptions: isLoadingFlockDestinationOptions,
} = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
// Flocks value
const [selectedFlockSource, setSelectedFlockSource] =
useState<OptionType | null>(null);
const [selectedFlockDestination, setSelectedFlockDestination] =
useState<OptionType | null>(null);
const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
TransferToLaying | undefined
>(undefined);
// Modal loading state
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isRejectLoading, setIsRejectLoading] = useState(false);
const [sorting, setSorting] = useState<SortingState>([]);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const selectedRowIds = Object.keys(rowSelection).map((item) =>
parseInt(item)
);
const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
{
id: 'select',
header: ({ table }) => (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
),
cell: ({ row }) => (
<div>
<CheckboxInput
name='row'
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
</div>
),
},
{
header: '#',
cell: (props) =>
tableFilterState.pageSize * (tableFilterState.page - 1) +
props.row.index +
1,
},
{
accessorKey: 'transfer_date',
header: 'Tanggal Transfer',
cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
},
{
accessorKey: 'flock_source',
header: 'Flock Asal',
cell: (props) => props.row.original.flock_source.name,
},
{
accessorKey: 'flock_destination',
header: 'Flock Tujuan',
cell: (props) => props.row.original.flock_destination.name,
},
{
accessorKey: 'quantity',
header: 'Kuantitas',
},
{
accessorKey: 'reason',
header: 'Alasan Transfer',
},
{
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 approveClickHandler = () => {
setSelectedTransferToLaying(props.row.original);
// Set row selection
setRowSelection({
[String(props.row.original.id)]: true,
});
approveModal.openModal();
};
const rejectClickHandler = () => {
setSelectedTransferToLaying(props.row.original);
// Set row selection
setRowSelection({
[String(props.row.original.id)]: true,
});
rejectModal.openModal();
};
const deleteClickHandler = () => {
setSelectedTransferToLaying(props.row.original);
deleteModal.openModal();
};
return (
<>
{currentPageSize > 2 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowOptionsMenu
type='dropdown'
props={props}
approveClickHandler={approveClickHandler}
rejectClickHandler={rejectClickHandler}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu
type='dropdown'
props={props}
approveClickHandler={approveClickHandler}
rejectClickHandler={rejectClickHandler}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
];
const bulkApproveClickHandler = () => {
approveModal.openModal();
};
const bulkRejectClickHandler = () => {
rejectModal.openModal();
};
// Modal confirm click handler
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
refreshTransferToLayings();
deleteModal.closeModal();
toast.success('Berhasil menghapus data transfer ke laying!');
setIsDeleteLoading(false);
};
const confirmationModalApproveClickHandler = async () => {
setIsApproveLoading(true);
const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
selectedRowIds
);
if (isResponseSuccess(bulkApproveResponse)) {
refreshTransferToLayings();
approveModal.closeModal();
// TODO: remove console.log
console.log('Approved data:', selectedRowIds);
toast.success(
`Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
);
setRowSelection({});
} else {
approveModal.closeModal();
toast.error(
`Gagal approve ${selectedRowIds.length} data transfer ke laying!`
);
}
setIsApproveLoading(false);
};
const confirmationModalRejectClickHandler = async () => {
setIsRejectLoading(true);
const bulkRejectResponse = await TransferToLayingApi.bulkReject(
selectedRowIds
);
if (isResponseSuccess(bulkRejectResponse)) {
refreshTransferToLayings();
rejectModal.closeModal();
// TODO: remove console.log
console.log('Rejected data:', selectedRowIds);
toast.success(
`Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
);
setRowSelection({});
} else {
rejectModal.closeModal();
toast.error(
`Gagal reject ${selectedRowIds.length} data transfer ke laying!`
);
}
setIsRejectLoading(false);
};
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
updateFilter('search', e.target.value);
};
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
setPageSize(newVal.value as number);
};
const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
e
) => {
updateFilter('transferDate', e.target.value);
};
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedFlockSource(val as OptionType);
updateFilter(
'flockSource',
val ? ((val as OptionType).value as string) : ''
);
};
const flockDestinationChangeHandler = (
val: OptionType | OptionType[] | null
) => {
setSelectedFlockDestination(val as OptionType);
updateFilter(
'flockDestination',
val ? ((val as OptionType).value as string) : ''
);
};
// track sorting
// useEffect(() => {
// const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
// if (!isNameSorted) {
// updateFilter('nameSort', '');
// } else {
// updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
// }
// }, [sorting, updateFilter]);
return (
<>
<div className='w-full p-0 sm:p-4'>
<div className='flex flex-col gap-2 mb-4'>
<div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
<div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
<Button
href='/production/transfer-to-laying/add'
color='primary'
className='w-full sm:w-fit'
>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah Transfer ke Laying
</Button>
{selectedRowIds.length > 0 && (
<>
<Button
variant='outline'
color='success'
onClick={bulkApproveClickHandler}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:check'
width={24}
height={24}
/>
Approve
</Button>
<Button
variant='outline'
color='error'
onClick={bulkRejectClickHandler}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:close'
width={24}
height={24}
/>
Reject
</Button>
</>
)}
</div>
<DebouncedTextInput
name='search'
placeholder='Cari TransferToLaying'
value={tableFilterState.search}
onChange={searchChangeHandler}
className={{ wrapper: 'sm:max-w-3xs' }}
/>
</div>
<div className='grid grid-cols-12 justify-end gap-4'>
<TextInput
required
type='date'
label='Tanggal Transfer'
name='transfer_date'
placeholder='Masukkan tanggal transfer'
value={tableFilterState.transferDate}
onChange={transferDateChangeHandler}
className={{ wrapper: 'col-span-12 sm:col-span-3' }}
/>
<SelectInput
label='Flock Asal'
options={flockSourceOptions}
isLoading={isLoadingFlockSourceOptions}
value={selectedFlockSource}
onChange={flockSourceChangeHandler}
onInputChange={setFlockSourceInputValue}
isClearable
className={{
wrapper: 'col-span-12 sm:col-span-3',
}}
/>
<SelectInput
label='Flock Tujuan'
options={flockDestinationOptions}
isLoading={isLoadingFlockDestinationOptions}
value={selectedFlockDestination}
onChange={flockDestinationChangeHandler}
onInputChange={setFlockDestinationInputValue}
isClearable
className={{
wrapper: 'col-span-12 sm:col-span-3',
}}
/>
<SelectInput
label='Baris'
options={ROWS_OPTIONS}
value={{
label: String(tableFilterState.pageSize),
value: tableFilterState.pageSize,
}}
onChange={pageSizeChangeHandler}
className={{
wrapper:
'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
}}
/>
</div>
</div>
<Table<TransferToLaying>
data={
isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
}
columns={transferToLayingsColumns}
pageSize={tableFilterState.pageSize}
page={
isResponseSuccess(transferToLayings)
? transferToLayings?.meta?.page
: 0
}
totalItems={
isResponseSuccess(transferToLayings)
? transferToLayings?.meta?.total_results
: 0
}
onPageChange={setPage}
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
className={{
containerClassName: cn({
'mb-20':
isResponseSuccess(transferToLayings) &&
transferToLayings?.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',
}}
/>
</div>
<ConfirmationModal
ref={deleteModal.ref}
type='error'
text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler,
}}
/>
<ConfirmationModal
ref={approveModal.ref}
type='success'
text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
isLoading: isApproveLoading,
onClick: confirmationModalApproveClickHandler,
}}
/>
<ConfirmationModal
ref={rejectModal.ref}
type='error'
text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isRejectLoading,
onClick: confirmationModalRejectClickHandler,
}}
/>
</>
);
};
export default TransferToLayingsTable;
src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
+83
View File
@@ -0,0 +1,83 @@
import * as Yup from 'yup';
type TransferToLayingFormSchemaType = {
transfer_date?: string;
flockSource?: {
value: number;
label: string;
};
flockDestination?: {
value: number;
label: string;
};
totalQuantity?: number;
maxTotalQuantity?: number; // original cap (hidden), helper
kandangs: {
kandang: {
value: number;
label: string;
};
quantity: number | string; // editable
maxQuantity?: number; // original cap (hidden), helper
}[];
reason?: string;
};
export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSchemaType> =
Yup.object({
transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
flockSource: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).required('Flock asal wajib diisi!'),
flockDestination: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).required('Flock tujuan wajib diisi!'),
totalQuantity: Yup.number()
.min(1, 'Jumlah transfer minimal 1')
.max(
Yup.ref('maxTotalQuantity'),
({ max }) => `Kuantitas maksimal ${max}!`
)
.required('Jumlah transfer wajib diisi!'),
maxTotalQuantity: Yup.number()
.min(1, 'Jumlah transfer minimal 1')
.required('Jumlah transfer wajib diisi!'),
kandangs: Yup.array()
.of(
Yup.object({
kandang: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).required('Kandang wajib diisi!'),
quantity: Yup.number()
.min(0, 'Kuantitas minimal 0!')
.max(
Yup.ref('maxQuantity'),
({ max }) => `Kuantitas maksimal ${max}!`
)
.required('Kuantitas wajib diisi!'),
maxQuantity: Yup.number().min(1).required(), // internal helper field
})
)
.min(1, 'Minimal 1 kandang terisi!')
.required('Kandang wajib diisi!'),
reason: Yup.string().required('Alasan transfer wajib diisi!'),
});
export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
export type TransferToLayingFormValues = Yup.InferType<
typeof TransferToLayingFormSchema
>;
src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+688
View File
@@ -0,0 +1,688 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useFormik } from 'formik';
import { toast } from 'react-hot-toast';
import useSWR from 'swr';
import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import TextInput from '@/components/input/TextInput';
import SelectInput, {
OptionType,
// useSelect,
} from '@/components/input/SelectInput';
import TextArea from '@/components/input/TextArea';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import {
TransferToLayingFormSchema,
TransferToLayingFormValues,
UpdateTransferToLayingFormSchema,
} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import {
TransferToLaying,
CreateTransferToLayingPayload,
UpdateTransferToLayingPayload,
} from '@/types/api/production/transfer-to-laying';
import { cn } from '@/lib/helper';
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
interface TransferToLayingFormProps {
type?: 'add' | 'edit' | 'detail';
initialValues?: TransferToLaying;
}
const TransferToLayingForm = ({
type = 'add',
initialValues,
}: TransferToLayingFormProps) => {
const router = useRouter();
// Modal hooks
const deleteModal = useModal();
const approveModal = useModal();
const rejectModal = useModal();
const [formErrorMessage, setFormErrorMessage] = useState('');
// Modal loading state
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isRejectLoading, setIsRejectLoading] = useState(false);
const createTransferToLayingHandler = useCallback(
async (payload: CreateTransferToLayingPayload) => {
console.log('Create transfer to laying:', { payload });
toast.success('Berhasil menambahkan data transfer ke laying!');
},
[router]
);
const updateTransferToLayingHandler = useCallback(
async (
transferToLayingId: number,
payload: UpdateTransferToLayingPayload
) => {
console.log(
`Update transfer to laying with ID of ${transferToLayingId}:`,
{ payload }
);
toast.success('Berhasil mengubah data transfer ke laying!');
},
[router]
);
const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
return {
transfer_date: initialValues?.transfer_date ?? '',
flockSource: initialValues?.flock_source
? {
value: initialValues?.flock_source.id,
label: initialValues?.flock_source.name,
}
: undefined,
flockDestination: initialValues?.flock_destination
? {
value: initialValues?.flock_destination.id,
label: initialValues?.flock_destination.name,
}
: undefined,
totalQuantity: initialValues?.quantity ?? undefined,
kandangs: initialValues?.kandangs
? initialValues.kandangs.map((kandang) => ({
kandang: {
value: kandang.kandang.id,
label: kandang.kandang.name,
},
quantity: kandang.quantity,
}))
: [],
reason: initialValues?.reason ?? undefined,
};
}, [initialValues]);
const formik = useFormik<TransferToLayingFormValues>({
initialValues: formikInitialValues,
validationSchema:
type === 'edit'
? UpdateTransferToLayingFormSchema
: TransferToLayingFormSchema,
onSubmit: async (values) => {
console.log({ values });
setFormErrorMessage('');
const transferToLayingPayload: CreateTransferToLayingPayload = {
transfer_date: values.transfer_date as string,
flock_source_id: values.flockSource?.value as number,
flock_destination_id: values.flockDestination?.value as number,
totalQuantity: values.totalQuantity as number,
kandangs: values.kandangs?.map((kandang) => ({
kandang_id: kandang.kandang.value,
quantity: kandang.quantity,
})) as {
kandang_id: number;
quantity: number;
}[],
reason: values.reason as string,
};
switch (type) {
case 'add':
await createTransferToLayingHandler(transferToLayingPayload);
break;
case 'edit':
await updateTransferToLayingHandler(
initialValues?.id as number,
transferToLayingPayload
);
break;
}
},
});
const { setValues: formikSetValues, values: formikValues } = formik;
const { kandangs: kandangsValue } = formikValues;
const deleteTransferToLayingClickHandler = () => {
deleteModal.openModal();
};
const approveClickHandler = () => {
approveModal.openModal();
};
const rejectClickHandler = () => {
rejectModal.openModal();
};
// Modal confirm click handler
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
// TODO: delete data and integrate to real API
deleteModal.closeModal();
toast.success('Berhasil menghapus data transfer ke laying!');
setIsDeleteLoading(false);
};
const confirmationModalApproveClickHandler = async () => {
setIsApproveLoading(true);
const approveResponse = await TransferToLayingApi.approve(
initialValues?.id as number
);
if (isResponseSuccess(approveResponse)) {
approveModal.closeModal();
toast.success('Berhasil approve data transfer ke laying!');
} else {
approveModal.closeModal();
toast.error('Gagal approve data transfer ke laying!');
}
setIsApproveLoading(false);
};
const confirmationModalRejectClickHandler = async () => {
setIsRejectLoading(true);
const rejectResponse = await TransferToLayingApi.reject(
initialValues?.id as number
);
if (isResponseSuccess(rejectResponse)) {
rejectModal.closeModal();
toast.success('Berhasil reject data transfer ke laying!');
} else {
rejectModal.closeModal();
toast.error('Gagal reject data transfer ke laying!');
}
setIsRejectLoading(false);
};
const isRepeaterInputError = (
column: keyof TransferToLayingFormValues['kandangs'][0],
idx: number
) => {
return (
formik.touched.kandangs?.[idx]?.[column] &&
Boolean(
formik.errors.kandangs?.[idx] instanceof Object &&
formik.errors.kandangs?.[idx]?.[column]
)
);
};
const repeaterInputErrorMessage = (
column: keyof TransferToLayingFormValues['kandangs'][0],
idx: number
) => {
return (formik.errors.kandangs?.[idx] as Record<string, string>)?.[column];
};
// TODO: remove dummy data and use real data
// Flock Source
// const {
// inputValue: flockSourceInputValue,
// setInputValue: setFlockSourceInputValue,
// options: flockSourceOptions,
// isLoadingOptions: isLoadingFlockSourceOptions,
// } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-source', 'id', 'name');
// TODO: remove this dummy data
const { data: flockSources, isLoading: isLoadingFlockSourceOptions } = useSWR(
'test',
() => TransferToLayingApi.getFlockSource()
);
const flockSourceOptions = isResponseSuccess(flockSources)
? flockSources?.data.map((flockSource) => ({
value: flockSource.id,
label: flockSource.name,
}))
: [];
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
// Get flock source data for total quantity and kandang
const flockSource =
isResponseSuccess(flockSources) && val !== null
? flockSources.data.find(
(item) => item.id === (val as OptionType).value
)
: undefined;
// Set total quantity and kandangs
if (flockSource) {
const formattedKandangs = flockSource.kandangs.map((item) => ({
kandang: {
value: item.kandang.id,
label: item.kandang.name,
},
quantity: '',
maxQuantity: item.quantity,
}));
formik.setFieldValue('totalQuantity', flockSource.totalQuantity);
formik.setFieldValue('maxTotalQuantity', flockSource.totalQuantity);
formik.setFieldValue('kandangs', formattedKandangs);
} else {
formik.setFieldValue('totalQuantity', undefined);
formik.setFieldValue('kandangs', undefined);
formik.setFieldValue('reason', '');
}
formik.setFieldTouched('flockSource', true);
formik.setFieldValue('flockSource', val);
};
// TODO: remove dummy data and use real data
// Flock Destination
// const {
// inputValue: flockDestinationInputValue,
// setInputValue: setFlockDestinationInputValue,
// options: flockDestinationOptions,
// isLoadingOptions: isLoadingFlockDestinationOptions,
// } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-destination', 'id', 'name');
// TODO: remove this dummy data
const {
data: flockDestinations,
isLoading: isLoadingFlockDestinationOptions,
} = useSWR('test', () => TransferToLayingApi.getFlockSource());
const flockDestinationOptions = isResponseSuccess(flockDestinations)
? flockDestinations?.data.map((flockDestination) => ({
value: flockDestination.id,
label: flockDestination.name,
}))
: [];
const flockDestinationChangeHandler = (
val: OptionType | OptionType[] | null
) => {
formik.setFieldTouched('flockDestination', true);
formik.setFieldValue('flockDestination', val);
};
useEffect(() => {
formikSetValues(formikInitialValues);
}, [formikSetValues, formikInitialValues]);
useEffect(() => {
// calculate total quantity if kandangs quantity change
if (kandangsValue && kandangsValue.length > 0) {
let newTotalQuantity = 0;
kandangsValue.forEach((item) => {
newTotalQuantity += item.quantity as number;
});
formik.setFieldValue('totalQuantity', newTotalQuantity);
formik.validateField('totalQuantity');
}
}, [formikSetValues, kandangsValue]);
return (
<>
<section className='w-full max-w-3xl'>
<header className='flex flex-col gap-4'>
<Button
href='/production/transfer-to-laying'
variant='link'
className='w-fit p-0 text-primary'
>
<Icon icon='uil:arrow-left' width={24} height={24} />
Kembali
</Button>
<h1 className='text-2xl font-bold text-center'>
{type === 'add' && 'Tambah Transfer ke Laying'}
{type === 'edit' && 'Edit Transfer ke Laying'}
{type === 'detail' && 'Detail Transfer ke Laying'}
</h1>
</header>
<div className='w-full my-4 flex flex-row justify-end gap-2'>
{type === 'detail' && (
<>
<Button
variant='outline'
color='success'
onClick={approveClickHandler}
// disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
<Button
variant='outline'
color='error'
onClick={rejectClickHandler}
// disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:close' width={24} height={24} />
Reject
</Button>
</>
)}
</div>
<form
onSubmit={formik.handleSubmit}
onReset={formik.handleReset}
className='w-full flex flex-col gap-6'
>
<div className='flex flex-col gap-4'>
<TextInput
required
type='date'
label='Tanggal Transfer'
name='transfer_date'
placeholder='Masukkan tanggal transfer'
value={formik.values.transfer_date}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.transfer_date &&
Boolean(formik.errors.transfer_date)
}
errorMessage={formik.errors.transfer_date}
readOnly={type === 'detail'}
/>
<div className='flex flex-col sm:flex-row gap-4'>
<SelectInput
required
label='Flock Asal'
placeholder='Flock asal'
value={formik.values.flockSource as OptionType}
options={flockSourceOptions}
onChange={flockSourceChangeHandler}
isLoading={isLoadingFlockSourceOptions}
// onInputChange={setFlockSourceInputValue}
isError={
formik.touched.flockSource &&
Boolean(typeof formik.errors.flockSource === 'string')
}
errorMessage={formik.errors.flockSource as string}
isDisabled={type === 'detail'}
isClearable
/>
<SelectInput
required
label='Flock Tujuan'
placeholder='Flock tujuan'
value={formik.values.flockDestination as OptionType}
options={flockDestinationOptions}
onChange={flockDestinationChangeHandler}
isLoading={isLoadingFlockDestinationOptions}
// onInputChange={setFlockDestinationInputValue}
isError={
formik.touched.flockDestination &&
Boolean(typeof formik.errors.flockDestination === 'string')
}
errorMessage={formik.errors.flockDestination as string}
isDisabled={type === 'detail'}
isClearable
/>
</div>
<TextInput
required
type='number'
name='totalQuantity'
label='Jumlah Transfer'
bottomLabel={
formikValues.maxTotalQuantity
? `Max: ${formikValues.maxTotalQuantity}`
: undefined
}
placeholder='Masukkan jumlah transfer'
value={formik.values.totalQuantity ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.totalQuantity &&
Boolean(formik.errors.totalQuantity)
}
errorMessage={formik.errors.totalQuantity}
// readOnly={type === 'detail'}
// disabled={Boolean(formik.errors.flockSource)}
disabled
/>
<div>
<div className='overflow-x-auto'>
<table className='table'>
<thead>
<tr>
<th>Kandang</th>
<th>Kuantitas</th>
</tr>
</thead>
<tbody>
{(!formik.values.kandangs ||
formik.values.kandangs.length === 0) && (
<tr>
<td colSpan={2}>
<p className='w-full text-center text-gray-400'>
Pilih flock asal terlebih dahulu!
</p>
</td>
</tr>
)}
{formik.values.kandangs &&
formik.values.kandangs.map((kandang, idx) => (
<tr key={idx}>
<td>
<SelectInput
value={kandang.kandang}
options={[]}
isDisabled
className={{
wrapper: 'min-w-52',
}}
/>
</td>
<td>
<TextInput
required
type='number'
name={`kandangs[${idx}].quantity`}
bottomLabel={
kandang.maxQuantity
? `Max: ${kandang.maxQuantity}`
: undefined
}
placeholder='Masukkan kuantitas'
value={kandang.quantity}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={isRepeaterInputError('quantity', idx)}
errorMessage={repeaterInputErrorMessage(
'quantity',
idx
)}
readOnly={type === 'detail'}
className={{
wrapper: 'min-w-52',
}}
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<TextArea
required
rows={5}
name='reason'
label='Alasan Transfer'
placeholder='Alasan transfer'
value={formik.values.reason}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={formik.touched.reason && Boolean(formik.errors.reason)}
errorMessage={formik.errors.reason}
readOnly={type === 'detail'}
disabled={Boolean(formik.errors.flockSource)}
/>
</div>
<div className='flex flex-row justify-between gap-2 flex-wrap'>
{type !== 'add' && (
<div className='flex flex-row justify-start gap-2'>
<Button
type='button'
color='error'
onClick={deleteTransferToLayingClickHandler}
className='px-4'
>
<Icon
icon='material-symbols:delete-outline-rounded'
width={24}
height={24}
className='justify-start text-sm'
/>
Delete
</Button>
{type !== 'edit' && (
<Button
type='button'
color='warning'
href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
className='px-4'
>
<Icon
icon='material-symbols:edit-outline'
width={24}
height={24}
className='justify-start text-sm'
/>
Edit
</Button>
)}
</div>
)}
{type !== 'detail' && (
<div
className={cn('flex flex-row justify-end gap-2', {
'w-full': type === 'add',
})}
>
<Button type='reset' color='warning' className='px-4'>
Reset
</Button>
<Button
type='submit'
color='primary'
isLoading={formik.isSubmitting}
disabled={!formik.isValid || formik.isSubmitting}
className='px-4'
>
Submit
</Button>
</div>
)}
</div>
{formErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{formErrorMessage}</span>
</div>
)}
</form>
</section>
{type !== 'add' && (
<ConfirmationModal
ref={deleteModal.ref}
type='error'
text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler,
}}
/>
)}
{type === 'detail' && (
<>
<ConfirmationModal
ref={approveModal.ref}
type='success'
text='Apakah anda yakin ingin approve data transfer ke laying ini?'
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
isLoading: isApproveLoading,
onClick: confirmationModalApproveClickHandler,
}}
/>
<ConfirmationModal
ref={rejectModal.ref}
type='error'
text='Apakah anda yakin ingin reject data transfer ke laying ini?'
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isRejectLoading,
onClick: confirmationModalRejectClickHandler,
}}
/>
</>
)}
</>
);
};
export default TransferToLayingForm;