mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-331): implement permission guard in project flock, chickin and closing kandang
This commit is contained in:
randy-ar
@@ -1,11 +0,0 @@
|
|||||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
|
||||||
|
|
||||||
const Layout = ({
|
|
||||||
children,
|
|
||||||
}: Readonly<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
}>) => {
|
|
||||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Layout;
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
|
||||||
import ProjectFlockChickinDetail from '@/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail';
|
|
||||||
import { useSearchParams } from 'next/navigation';
|
|
||||||
|
|
||||||
const AddChickin = () => {
|
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const projectFlockId = searchParams.get('projectFlockId');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section className='w-full'>
|
|
||||||
<ProjectFlockChickinDetail projectFlockId={Number(projectFlockId)} />
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AddChickin;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
|
|
||||||
|
|
||||||
const Chickin = () => {
|
|
||||||
return (
|
|
||||||
<section className='w-full'>
|
|
||||||
<ChickinTable />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default Chickin;
|
|
||||||
@@ -1,324 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import Button from '@/components/Button';
|
|
||||||
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
|
|
||||||
import { OptionType } from '@/components/input/SelectInput';
|
|
||||||
import Modal, { useModal } from '@/components/Modal';
|
|
||||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
|
||||||
import Table from '@/components/Table';
|
|
||||||
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
|
|
||||||
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
|
|
||||||
import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
|
|
||||||
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
|
|
||||||
import { ROWS_OPTIONS } from '@/config/constant';
|
|
||||||
import { isResponseSuccess } from '@/lib/api-helper';
|
|
||||||
import { cn, formatNumber } from '@/lib/helper';
|
|
||||||
import { ChickinApi } from '@/services/api/production/chickin';
|
|
||||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
|
||||||
import { Chickin } from '@/types/api/production/chickin';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
import { CellContext, SortingState } from '@tanstack/react-table';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import useSWR from 'swr';
|
|
||||||
|
|
||||||
const ChickinTable = () => {
|
|
||||||
const {
|
|
||||||
state: tableFilterState,
|
|
||||||
updateFilter,
|
|
||||||
setPage,
|
|
||||||
setPageSize,
|
|
||||||
toQueryString: getTableFilterQueryString,
|
|
||||||
} = useTableFilter({
|
|
||||||
initial: {
|
|
||||||
search: '',
|
|
||||||
},
|
|
||||||
paramMap: {
|
|
||||||
page: 'page',
|
|
||||||
pageSize: 'limit',
|
|
||||||
search: 'search',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const [sorting, setSorting] = useState<SortingState>([]);
|
|
||||||
const [selectedChickin, setSelectedChickin] = useState<Chickin | undefined>(
|
|
||||||
undefined
|
|
||||||
);
|
|
||||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
|
||||||
|
|
||||||
const deleteModal = useModal();
|
|
||||||
const chickinModal = useModal();
|
|
||||||
|
|
||||||
// Data Fetching
|
|
||||||
const {
|
|
||||||
data: chickins,
|
|
||||||
isLoading,
|
|
||||||
mutate: refreshChickins,
|
|
||||||
} = useSWR(
|
|
||||||
`${ChickinApi.basePath}${getTableFilterQueryString()}`,
|
|
||||||
ChickinApi.getAllFetcher
|
|
||||||
);
|
|
||||||
|
|
||||||
const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
updateFilter('search', event.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 ChickinApi.delete(selectedChickin?.id as number);
|
|
||||||
refreshChickins();
|
|
||||||
deleteModal.closeModal();
|
|
||||||
} finally {
|
|
||||||
setIsDeleteLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className='flex flex-col gap-4'>
|
|
||||||
<div className='flex flex-col gap-2 mb-4'>
|
|
||||||
<div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
|
|
||||||
<Button
|
|
||||||
href='/production/project-flock/chickin/add?projectFlockId=1'
|
|
||||||
variant='outline'
|
|
||||||
color='primary'
|
|
||||||
className='w-full sm:w-fit'
|
|
||||||
>
|
|
||||||
<Icon icon='uil:plus' width={24} height={24} />
|
|
||||||
Tambah
|
|
||||||
</Button>
|
|
||||||
<DebouncedTextInput
|
|
||||||
name='search'
|
|
||||||
placeholder='Cari Chickin'
|
|
||||||
value={tableFilterState.search}
|
|
||||||
onChange={searchChangeHandler}
|
|
||||||
className={{ wrapper: 'sm:max-w-3xs' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<TableRowSizeSelector
|
|
||||||
value={tableFilterState.pageSize}
|
|
||||||
onChange={pageSizeChangeHandler}
|
|
||||||
options={ROWS_OPTIONS}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Table<Chickin>
|
|
||||||
data={isResponseSuccess(chickins) ? chickins?.data : []}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
header: '#',
|
|
||||||
cell: (props) =>
|
|
||||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
|
||||||
props.row.index +
|
|
||||||
1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row.project_flock_kandang?.kandang.name,
|
|
||||||
header: 'Kandang',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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,
|
|
||||||
header: 'Tanggal Chickin',
|
|
||||||
cell: (props) => {
|
|
||||||
if (props.row.original.chick_in_date) {
|
|
||||||
return new Date(
|
|
||||||
props.row.original.chick_in_date
|
|
||||||
).toLocaleDateString('id-ID');
|
|
||||||
} else {
|
|
||||||
return '-';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row.note,
|
|
||||||
header: 'Catatan',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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 = () => {
|
|
||||||
setSelectedChickin(props.row.original);
|
|
||||||
deleteModal.openModal();
|
|
||||||
};
|
|
||||||
|
|
||||||
const editClickHandler = () => {
|
|
||||||
setSelectedChickin(props.row.original);
|
|
||||||
chickinModal.openModal();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{currentPageSize > 2 && (
|
|
||||||
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
|
||||||
<RowOptionsMenu
|
|
||||||
type='dropdown'
|
|
||||||
props={props}
|
|
||||||
deleteClickHandler={deleteClickHandler}
|
|
||||||
editClickHandler={editClickHandler}
|
|
||||||
/>
|
|
||||||
</RowDropdownOptions>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentPageSize <= 2 && (
|
|
||||||
<RowCollapseOptions>
|
|
||||||
<RowOptionsMenu
|
|
||||||
type='collapse'
|
|
||||||
props={props}
|
|
||||||
deleteClickHandler={deleteClickHandler}
|
|
||||||
editClickHandler={editClickHandler}
|
|
||||||
/>
|
|
||||||
</RowCollapseOptions>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pageSize={tableFilterState.pageSize}
|
|
||||||
page={isResponseSuccess(chickins) ? chickins?.meta?.page : 0}
|
|
||||||
totalItems={
|
|
||||||
isResponseSuccess(chickins) ? chickins?.meta?.total_results : 0
|
|
||||||
}
|
|
||||||
onPageChange={setPage}
|
|
||||||
isLoading={isLoading}
|
|
||||||
sorting={sorting}
|
|
||||||
setSorting={setSorting}
|
|
||||||
className={{
|
|
||||||
containerClassName: cn({
|
|
||||||
'mb-20':
|
|
||||||
isResponseSuccess(chickins) && chickins?.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 Chickin ini?`}
|
|
||||||
secondaryButton={{
|
|
||||||
text: 'Tidak',
|
|
||||||
}}
|
|
||||||
primaryButton={{
|
|
||||||
text: 'Ya',
|
|
||||||
onClick: confirmationModalDeleteClickHandler,
|
|
||||||
isLoading: isDeleteLoading,
|
|
||||||
color: 'error',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Modal ref={chickinModal.ref}>
|
|
||||||
<div className='flex flex-row justify-between items-center'>
|
|
||||||
<h1 className='text-xl font-semibold text-center mb-6'>
|
|
||||||
Chickin Kandang -{' '}
|
|
||||||
{selectedChickin?.project_flock_kandang &&
|
|
||||||
selectedChickin?.project_flock_kandang.kandang?.name}
|
|
||||||
</h1>
|
|
||||||
<Button
|
|
||||||
color='error'
|
|
||||||
variant='link'
|
|
||||||
onClick={chickinModal.closeModal}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
className='text-black'
|
|
||||||
icon='uil:times'
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{/* <ChickinForm
|
|
||||||
initialValues={selectedChickin}
|
|
||||||
formType='edit'
|
|
||||||
afterSubmit={() => {
|
|
||||||
refreshChickins();
|
|
||||||
chickinModal.closeModal();
|
|
||||||
}}
|
|
||||||
/> */}
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const RowOptionsMenu = ({
|
|
||||||
type = 'dropdown',
|
|
||||||
props,
|
|
||||||
editClickHandler,
|
|
||||||
deleteClickHandler,
|
|
||||||
}: {
|
|
||||||
type: 'dropdown' | 'collapse';
|
|
||||||
props: CellContext<Chickin, unknown>;
|
|
||||||
editClickHandler: () => void;
|
|
||||||
deleteClickHandler: () => void;
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<RowOptionsMenuWrapper type={type}>
|
|
||||||
<Button
|
|
||||||
href={`/production/project-flock/chickin/detail?chickinId=${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
|
|
||||||
variant='ghost'
|
|
||||||
color='warning'
|
|
||||||
className='justify-start text-sm'
|
|
||||||
onClick={editClickHandler}
|
|
||||||
>
|
|
||||||
<Icon icon='mdi:pencil-outline' width={16} height={16} />
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={deleteClickHandler}
|
|
||||||
variant='ghost'
|
|
||||||
color='error'
|
|
||||||
className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='material-symbols:delete-outline-rounded'
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
className='justify-start text-sm'
|
|
||||||
/>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</RowOptionsMenuWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChickinTable;
|
|
||||||
@@ -17,6 +17,7 @@ import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
|
|||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import Badge from '@/components/Badge';
|
import Badge from '@/components/Badge';
|
||||||
import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
|
import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
|
||||||
|
import RequirePermission from '@/components/helper/RequirePermission';
|
||||||
const ChickinFormKandang = ({
|
const ChickinFormKandang = ({
|
||||||
formType = 'add',
|
formType = 'add',
|
||||||
initialValues,
|
initialValues,
|
||||||
@@ -144,17 +145,24 @@ const ChickinFormKandang = ({
|
|||||||
<h2 className='text-xl font-semibold'>Informasi Chick In</h2>
|
<h2 className='text-xl font-semibold'>Informasi Chick In</h2>
|
||||||
{/* Badge Row */}
|
{/* Badge Row */}
|
||||||
<div className='flex flex-row gap-2'>
|
<div className='flex flex-row gap-2'>
|
||||||
<Badge
|
<RequirePermission permissions='lti.production.chickins.create'>
|
||||||
variant='soft'
|
<Badge
|
||||||
color={'success'}
|
variant='soft'
|
||||||
className={{
|
color={'success'}
|
||||||
badge: 'rounded-lg px-2',
|
className={{
|
||||||
}}
|
badge: 'rounded-lg px-2',
|
||||||
>
|
}}
|
||||||
<Icon icon='mdi:circle' width={12} height={12} color={'success'} />{' '}
|
>
|
||||||
Perlu Chick In ({initialValues.available_qtys?.length ?? 0})
|
<Icon
|
||||||
</Badge>
|
icon='mdi:circle'
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
width={12}
|
||||||
|
height={12}
|
||||||
|
color={'success'}
|
||||||
|
/>{' '}
|
||||||
|
Perlu Chick In ({initialValues.available_qtys?.length ?? 0})
|
||||||
|
</Badge>
|
||||||
|
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||||
|
</RequirePermission>
|
||||||
<Badge
|
<Badge
|
||||||
color='neutral'
|
color='neutral'
|
||||||
variant='soft'
|
variant='soft'
|
||||||
@@ -176,11 +184,13 @@ const ChickinFormKandang = ({
|
|||||||
afterSubmit={afterSubmitFormChickin}
|
afterSubmit={afterSubmitFormChickin}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<ChickinFormView
|
<RequirePermission permissions='lti.production.chickins.create'>
|
||||||
initialValues={initialValues}
|
<ChickinFormView
|
||||||
formType={formType}
|
initialValues={initialValues}
|
||||||
afterSubmit={afterSubmitFormChickin}
|
formType={formType}
|
||||||
/>
|
afterSubmit={afterSubmitFormChickin}
|
||||||
|
/>
|
||||||
|
</RequirePermission>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import Alert from '@/components/Alert';
|
import Alert from '@/components/Alert';
|
||||||
import Button from '@/components/Button';
|
import Button from '@/components/Button';
|
||||||
import Card from '@/components/Card';
|
import Card from '@/components/Card';
|
||||||
|
import RequirePermission from '@/components/helper/RequirePermission';
|
||||||
import { useModal } from '@/components/Modal';
|
import { useModal } from '@/components/Modal';
|
||||||
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
|
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
|
||||||
import PillBadge from '@/components/PillBadge';
|
import PillBadge from '@/components/PillBadge';
|
||||||
@@ -146,14 +147,16 @@ const ChickinLogsView = ({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{initialValues?.approval?.step_number <= 2 && (
|
{initialValues?.approval?.step_number <= 2 && (
|
||||||
<Button
|
<RequirePermission permissions='lti.production.chickins.approve'>
|
||||||
color='success'
|
<Button
|
||||||
onClick={handleClickApprove}
|
color='success'
|
||||||
className='w-full'
|
onClick={handleClickApprove}
|
||||||
>
|
className='w-full'
|
||||||
<Icon width={24} height={24} icon='material-symbols:check' />
|
>
|
||||||
Approve Semua Chick In
|
<Icon width={24} height={24} icon='material-symbols:check' />
|
||||||
</Button>
|
Approve Semua Chick In
|
||||||
|
</Button>
|
||||||
|
</RequirePermission>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{chickinErrorMessage && (
|
{chickinErrorMessage && (
|
||||||
|
|||||||
@@ -307,32 +307,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
Tambah
|
Tambah
|
||||||
</Button>
|
</Button>
|
||||||
</RequirePermission>
|
</RequirePermission>
|
||||||
{/* <Button
|
|
||||||
variant='outline'
|
|
||||||
color='success'
|
|
||||||
onClick={() => {
|
|
||||||
setApprovalAction('APPROVED');
|
|
||||||
confirmModal.openModal();
|
|
||||||
}}
|
|
||||||
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={() => {
|
|
||||||
setApprovalAction('REJECTED');
|
|
||||||
confirmModal.openModal();
|
|
||||||
}}
|
|
||||||
disabled={selectedRowIds.length === 0}
|
|
||||||
className='w-full sm:w-fit'
|
|
||||||
>
|
|
||||||
<Icon icon='mdi:times' width={24} height={24} />
|
|
||||||
Reject
|
|
||||||
</Button> */}
|
|
||||||
<div className='ms-auto w-full sm:w-auto'>
|
<div className='ms-auto w-full sm:w-auto'>
|
||||||
<DebouncedTextInput
|
<DebouncedTextInput
|
||||||
name='search'
|
name='search'
|
||||||
@@ -551,49 +525,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
cell: (props) =>
|
cell: (props) =>
|
||||||
formatDate(props.row.original.created_at, 'MMM DD, YYYY'),
|
formatDate(props.row.original.created_at, 'MMM DD, YYYY'),
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// 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='collapse'
|
|
||||||
// props={props}
|
|
||||||
// deleteClickHandler={deleteClickHandler}
|
|
||||||
// />
|
|
||||||
// </RowCollapseOptions>
|
|
||||||
// )}
|
|
||||||
// </>
|
|
||||||
// );
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
]}
|
]}
|
||||||
pageSize={tableFilterState.pageSize}
|
pageSize={tableFilterState.pageSize}
|
||||||
page={
|
page={
|
||||||
|
|||||||
@@ -1,643 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import Badge from '@/components/Badge';
|
|
||||||
import Button from '@/components/Button';
|
|
||||||
import Card from '@/components/Card';
|
|
||||||
import SelectInput, {
|
|
||||||
OptionType,
|
|
||||||
useSelect,
|
|
||||||
} from '@/components/input/SelectInput';
|
|
||||||
import PillBadge from '@/components/PillBadge';
|
|
||||||
import Table from '@/components/Table';
|
|
||||||
import { isResponseSuccess } from '@/lib/api-helper';
|
|
||||||
import { cn, formatDate, formatTitleCase } from '@/lib/helper';
|
|
||||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
|
||||||
import { ProjectFlockKandangApi } from '@/services/api/production';
|
|
||||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
|
||||||
import { ProjectFlock } from '@/types/api/production/project-flock';
|
|
||||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import useSWR from 'swr';
|
|
||||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import RequirePermission from '@/components/helper/RequirePermission';
|
|
||||||
|
|
||||||
const ProjectFlockChickinDetail = ({
|
|
||||||
projectFlockId,
|
|
||||||
}: {
|
|
||||||
projectFlockId: number | undefined;
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
// Tables Props
|
|
||||||
const { state: tableFilterState } = useTableFilter({
|
|
||||||
initial: { search: '' },
|
|
||||||
paramMap: { page: 'page', pageSize: 'limit' },
|
|
||||||
});
|
|
||||||
|
|
||||||
// States
|
|
||||||
const [searchProjectFlock, setSearchProjectFlock] = useState('');
|
|
||||||
const [selectedProjectFlock, setSelectedProjectFlock] =
|
|
||||||
useState<OptionType | null>(null);
|
|
||||||
const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
|
|
||||||
|
|
||||||
// Fetch Data
|
|
||||||
const { data: listProjectFlockKandang } = useSWR(
|
|
||||||
`${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
|
|
||||||
search: searchProjectFlock,
|
|
||||||
project_flock_id:
|
|
||||||
projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
|
|
||||||
}).toString()}`,
|
|
||||||
ProjectFlockKandangApi.getAllFetcher
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
options: options,
|
|
||||||
isLoadingOptions: isLoadingListProjectFlock,
|
|
||||||
rawData: listProjectFlock,
|
|
||||||
} = useSelect<ProjectFlock>(
|
|
||||||
ProjectFlockApi.basePath,
|
|
||||||
'id',
|
|
||||||
'flock_name',
|
|
||||||
'',
|
|
||||||
{
|
|
||||||
search: searchProjectFlock,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle Function
|
|
||||||
const handleChickinClick = async (
|
|
||||||
projectFlockKandang: ProjectFlockKandang
|
|
||||||
) => {
|
|
||||||
router.push(
|
|
||||||
`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChangeProjectFlock = (val: OptionType | null) => {
|
|
||||||
setSelectedProjectFlock(val);
|
|
||||||
if (isResponseSuccess(listProjectFlock) && val) {
|
|
||||||
const selected = listProjectFlock.data.find(
|
|
||||||
(pf) => pf.id === Number(val.value)
|
|
||||||
);
|
|
||||||
setProjectFlock(selected);
|
|
||||||
} else {
|
|
||||||
setProjectFlock(undefined);
|
|
||||||
}
|
|
||||||
if (projectFlockId) {
|
|
||||||
router.push('/production/project-flock/chickin/add');
|
|
||||||
}
|
|
||||||
if (!val && projectFlockId) {
|
|
||||||
router.push('/production/project-flock/chickin/add');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (projectFlockId && isResponseSuccess(listProjectFlock)) {
|
|
||||||
setProjectFlock(
|
|
||||||
listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [projectFlockId, listProjectFlock]);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Header */}
|
|
||||||
<div className='flex flex-row justify-between items-center px-4 py-4'>
|
|
||||||
<div className='flex flex-row items-center h-full gap-2'>
|
|
||||||
<Link
|
|
||||||
href={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
|
|
||||||
className='hover:text-gray-400'
|
|
||||||
>
|
|
||||||
<Icon icon='mdi:arrow-left' width={24} height={24} />
|
|
||||||
</Link>
|
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
|
||||||
<div className='text-sm text-neutral'>
|
|
||||||
Chick In {projectFlock?.flock_name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* <FormHeader
|
|
||||||
title={`Chick In ${projectFlock?.flock_name ?? 'Project Flock'}`}
|
|
||||||
backUrl={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
|
|
||||||
/> */}
|
|
||||||
{/* <div className='flex flex-col gap-4 w-full my-4'>
|
|
||||||
<div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
|
|
||||||
<SelectInput
|
|
||||||
required
|
|
||||||
label='Ganti Project Flock'
|
|
||||||
placeholder='Pilih Project Flock'
|
|
||||||
options={options}
|
|
||||||
onInputChange={(val) => {
|
|
||||||
setSearchProjectFlock(val);
|
|
||||||
}}
|
|
||||||
isLoading={isLoadingListProjectFlock}
|
|
||||||
value={
|
|
||||||
projectFlock
|
|
||||||
? {
|
|
||||||
label: `${projectFlock?.flock_name}`,
|
|
||||||
value: projectFlock?.id,
|
|
||||||
}
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
onChange={(val) => {
|
|
||||||
handleChangeProjectFlock(val as OptionType | null);
|
|
||||||
}}
|
|
||||||
isSearchable
|
|
||||||
isClearable
|
|
||||||
startAdornment={
|
|
||||||
projectFlock && (
|
|
||||||
<Badge
|
|
||||||
variant='soft'
|
|
||||||
color='success'
|
|
||||||
size='sm'
|
|
||||||
className={{
|
|
||||||
badge: 'whitespace-nowrap font-semibold',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Periode {projectFlock?.period}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
{/* Informasi Umum */}
|
|
||||||
{projectFlock && (
|
|
||||||
<div className='border-t-1 border-gray-300'>
|
|
||||||
<div className='p-4 flex flex-col gap-4'>
|
|
||||||
<h2 className='text-2xl font-semibold'>Informasi Umum</h2>
|
|
||||||
{/* Badge Row */}
|
|
||||||
<div className='flex flex-row gap-2'>
|
|
||||||
<Badge
|
|
||||||
variant='soft'
|
|
||||||
color={
|
|
||||||
projectFlock.approval.step_number == 1
|
|
||||||
? 'neutral'
|
|
||||||
: projectFlock.approval.step_number == 2
|
|
||||||
? 'success'
|
|
||||||
: projectFlock.approval.step_number >= 3
|
|
||||||
? 'error'
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
className={{
|
|
||||||
badge: 'rounded-lg px-2',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='mdi:circle'
|
|
||||||
width={12}
|
|
||||||
height={12}
|
|
||||||
color={
|
|
||||||
projectFlock.approval.step_number == 1
|
|
||||||
? 'neutral'
|
|
||||||
: projectFlock.approval.step_number == 2
|
|
||||||
? 'success'
|
|
||||||
: projectFlock.approval.step_number >= 3
|
|
||||||
? 'error'
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
/>{' '}
|
|
||||||
{projectFlock.approval.step_name}
|
|
||||||
</Badge>
|
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
|
||||||
<Badge
|
|
||||||
color='neutral'
|
|
||||||
variant='soft'
|
|
||||||
className={{ badge: 'rounded-lg px-2' }}
|
|
||||||
>
|
|
||||||
<Icon icon='mdi:bookmark' width={12} height={12} />
|
|
||||||
{` ${formatTitleCase(projectFlock.category)}`}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
{/* Information Grid */}
|
|
||||||
<div className='grid grid-cols-3 gap-4'>
|
|
||||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
|
||||||
<Icon width={14} height={14} icon='mdi:account' /> Submitted
|
|
||||||
</div>
|
|
||||||
<div className='col-span-2'>
|
|
||||||
<Badge
|
|
||||||
variant='soft'
|
|
||||||
color='neutral'
|
|
||||||
className={{
|
|
||||||
badge: 'rounded-lg px-2',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon icon='mdi:account-circle' width={14} height={14} />{' '}
|
|
||||||
{projectFlock.created_user.name}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
|
||||||
<Icon width={14} height={14} icon={'mdi:clock'} /> History
|
|
||||||
</div>
|
|
||||||
<div className='col-span-2'>
|
|
||||||
<Button variant='outline' className='py-1 text-sm'>
|
|
||||||
See History{' '}
|
|
||||||
<Icon
|
|
||||||
icon='mdi:arrow-top-right-thin'
|
|
||||||
width={11}
|
|
||||||
height={11}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* BARIS 1 */}
|
|
||||||
<div
|
|
||||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
|
||||||
relative
|
|
||||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
|
||||||
>
|
|
||||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
|
|
||||||
</div>
|
|
||||||
<div className='col-span-2'>{projectFlock.area.name}</div>
|
|
||||||
|
|
||||||
{/* BARIS 2 */}
|
|
||||||
<div
|
|
||||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
|
||||||
relative
|
|
||||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
|
||||||
>
|
|
||||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
|
|
||||||
</div>
|
|
||||||
<div className='col-span-2'>{projectFlock.location.name}</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
|
||||||
relative
|
|
||||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
|
||||||
>
|
|
||||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
|
|
||||||
</div>
|
|
||||||
<div className='col-span-2'>{projectFlock.fcr.name}</div>
|
|
||||||
|
|
||||||
{/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
|
|
||||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
|
||||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
|
|
||||||
Kategori
|
|
||||||
</div>
|
|
||||||
<div className='col-span-2'>
|
|
||||||
{formatTitleCase(projectFlock.category)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* <Card
|
|
||||||
title='Informasi Flock'
|
|
||||||
className={{
|
|
||||||
wrapper: 'w-full bg-white mb-3',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Table<ProjectFlock>
|
|
||||||
emptyContent={
|
|
||||||
<div className='w-full p-5 text-center'>
|
|
||||||
<span className='text-lg opacity-50'>
|
|
||||||
Pilih project flock terlebih dahulu...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
data={projectFlock ? [projectFlock] : []}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
header: 'ID',
|
|
||||||
accessorKey: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Area',
|
|
||||||
accessorKey: 'area.name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Lokasi',
|
|
||||||
accessorKey: 'location.name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Nama Flock',
|
|
||||||
accessorKey: 'flock_name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Kategori',
|
|
||||||
accessorKey: 'category',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Status',
|
|
||||||
accessorKey: 'status',
|
|
||||||
cell: (props) => {
|
|
||||||
return props.row.original.approval?.step_name ? (
|
|
||||||
<PillBadge
|
|
||||||
color={(() => {
|
|
||||||
switch (
|
|
||||||
props.row.original.approval?.step_name.toUpperCase()
|
|
||||||
) {
|
|
||||||
case 'AKTIF':
|
|
||||||
return 'red';
|
|
||||||
case 'PENGAJUAN':
|
|
||||||
return 'green';
|
|
||||||
default:
|
|
||||||
return 'gray';
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
content={props.row.original.approval?.step_name
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/_/g, ' ')
|
|
||||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'-'
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'FCR Layer',
|
|
||||||
accessorKey: 'fcr.name',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
page={undefined}
|
|
||||||
className={{
|
|
||||||
containerClassName: cn({
|
|
||||||
'mb-20': projectFlock && projectFlock.kandangs?.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',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Card> */}
|
|
||||||
{/* Card Kandangs */}
|
|
||||||
<div className='border-t-1 border-gray-300'>
|
|
||||||
<div className='p-4 flex flex-col gap-4'>
|
|
||||||
<h2 className='text-2xl font-semibold'>Daftar Kandang</h2>
|
|
||||||
{isResponseSuccess(listProjectFlock) ? (
|
|
||||||
<>
|
|
||||||
{/* Badge Row */}
|
|
||||||
<div className='flex flex-row gap-2'>
|
|
||||||
<Badge
|
|
||||||
variant='soft'
|
|
||||||
color={'success'}
|
|
||||||
className={{
|
|
||||||
badge: 'rounded-lg px-2',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='mdi:circle'
|
|
||||||
width={12}
|
|
||||||
height={12}
|
|
||||||
color={'success'}
|
|
||||||
/>{' '}
|
|
||||||
Disetujui (
|
|
||||||
{isResponseSuccess(listProjectFlockKandang) &&
|
|
||||||
listProjectFlockKandang.data.filter(
|
|
||||||
(k) => k.approval?.step_number == 1
|
|
||||||
).length}
|
|
||||||
)
|
|
||||||
</Badge>
|
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
|
||||||
<Badge
|
|
||||||
variant='soft'
|
|
||||||
color={'neutral'}
|
|
||||||
className={{
|
|
||||||
badge: 'rounded-lg px-2',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='mdi:circle'
|
|
||||||
width={12}
|
|
||||||
height={12}
|
|
||||||
color={'neutral'}
|
|
||||||
/>{' '}
|
|
||||||
Pengajuan (
|
|
||||||
{isResponseSuccess(listProjectFlockKandang) &&
|
|
||||||
listProjectFlockKandang.data.filter(
|
|
||||||
(k) => k.approval?.step_number == 2
|
|
||||||
).length}
|
|
||||||
)
|
|
||||||
</Badge>
|
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
|
||||||
<Badge
|
|
||||||
color='error'
|
|
||||||
variant='soft'
|
|
||||||
className={{ badge: 'rounded-lg px-2' }}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={`mdi:circle`}
|
|
||||||
width={12}
|
|
||||||
height={12}
|
|
||||||
color='error'
|
|
||||||
/>
|
|
||||||
Belum Chickin (
|
|
||||||
{isResponseSuccess(listProjectFlockKandang) &&
|
|
||||||
listProjectFlockKandang.data.filter(
|
|
||||||
(k) => k.approval == null
|
|
||||||
).length}
|
|
||||||
)
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
{/* Card Kandang */}
|
|
||||||
<Card
|
|
||||||
variant='bordered'
|
|
||||||
className={{
|
|
||||||
wrapper: 'w-full',
|
|
||||||
body: 'p-3',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex flex-col gap-6'>
|
|
||||||
{isResponseSuccess(listProjectFlockKandang) &&
|
|
||||||
listProjectFlockKandang.data.map((kandang) => (
|
|
||||||
<div
|
|
||||||
key={kandang.id}
|
|
||||||
className='flex flex-row justify-between items-center'
|
|
||||||
>
|
|
||||||
<div className='flex flex-row gap-2 items-center cursor-pointer text-gray-400'>
|
|
||||||
<Badge
|
|
||||||
variant='soft'
|
|
||||||
color={
|
|
||||||
kandang.approval
|
|
||||||
? kandang.approval.step_number == 1
|
|
||||||
? 'success'
|
|
||||||
: 'neutral'
|
|
||||||
: 'error'
|
|
||||||
}
|
|
||||||
className={{
|
|
||||||
badge: 'rounded-lg px-2',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='mdi:circle'
|
|
||||||
width={12}
|
|
||||||
height={12}
|
|
||||||
color={
|
|
||||||
kandang.approval
|
|
||||||
? kandang.approval.step_number == 1
|
|
||||||
? 'success'
|
|
||||||
: 'neutral'
|
|
||||||
: 'gray'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Badge>
|
|
||||||
<span className='font-semibold'>
|
|
||||||
{kandang.kandang.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<RequirePermission permissions='lti.production.chickins.create'>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
className='py-1 text-sm'
|
|
||||||
onClick={() => {
|
|
||||||
handleChickinClick(kandang);
|
|
||||||
}}
|
|
||||||
disabled={projectFlock?.approval?.step_number === 1}
|
|
||||||
>
|
|
||||||
Chick In{' '}
|
|
||||||
<Icon
|
|
||||||
icon='mdi:arrow-top-right-thin'
|
|
||||||
width={11}
|
|
||||||
height={11}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</RequirePermission>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className='w-full p-5 text-center'>
|
|
||||||
<span className='text-lg opacity-50'>
|
|
||||||
Pilih project flock terlebih dahulu...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* <Card
|
|
||||||
title='Daftar Kandang'
|
|
||||||
className={{
|
|
||||||
wrapper: 'w-full bg-white',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Table<ProjectFlockKandang>
|
|
||||||
emptyContent={
|
|
||||||
<div className='w-full p-5 text-center'>
|
|
||||||
<span className='text-lg opacity-50'>
|
|
||||||
Pilih project flock terlebih dahulu...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
data={
|
|
||||||
projectFlock && isResponseSuccess(listProjectFlockKandang)
|
|
||||||
? listProjectFlockKandang.data
|
|
||||||
: []
|
|
||||||
}
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
header: '#',
|
|
||||||
cell: (props) =>
|
|
||||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
|
||||||
props.row.index +
|
|
||||||
1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row?.project_flock?.area?.name,
|
|
||||||
header: 'Area',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row?.project_flock?.location?.name,
|
|
||||||
header: 'Lokasi',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'kandang.name',
|
|
||||||
header: 'Kandang',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'kandang.capacity',
|
|
||||||
header: 'Kapasitas',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: () => projectFlock?.period,
|
|
||||||
header: 'Periode',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'approval.step_name',
|
|
||||||
header: 'Status',
|
|
||||||
cell: (props) => {
|
|
||||||
return props.row.original.approval?.step_name ? (
|
|
||||||
<PillBadge
|
|
||||||
color={(() => {
|
|
||||||
switch (
|
|
||||||
props.row.original.approval?.step_name.toUpperCase()
|
|
||||||
) {
|
|
||||||
case 'DISETUJUI':
|
|
||||||
return 'green';
|
|
||||||
case 'PENGAJUAN':
|
|
||||||
return 'yellow';
|
|
||||||
default:
|
|
||||||
return 'gray';
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
content={props.row.original.approval?.step_name
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/_/g, ' ')
|
|
||||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
|
||||||
/>
|
|
||||||
) : projectFlock?.approval?.step_number === 1 ? (
|
|
||||||
<PillBadge color='red' content={'Tidak Dapat Chick In'} />
|
|
||||||
) : (
|
|
||||||
<PillBadge color='gray' content={'Belum Chick In'} />
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Aksi',
|
|
||||||
cell: (props) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
color='success'
|
|
||||||
variant='outline'
|
|
||||||
onClick={() => {
|
|
||||||
handleChickinClick(props.row.original);
|
|
||||||
}}
|
|
||||||
className='p-1'
|
|
||||||
disabled={projectFlock?.approval?.step_number === 1}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='mdi:home-import-outline'
|
|
||||||
width={18}
|
|
||||||
height={18}
|
|
||||||
/>
|
|
||||||
Chickin
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
page={undefined}
|
|
||||||
className={{
|
|
||||||
containerClassName: cn({
|
|
||||||
'mb-20': projectFlock && projectFlock.kandangs?.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',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Card> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProjectFlockChickinDetail;
|
|
||||||
@@ -22,6 +22,7 @@ import toast from 'react-hot-toast';
|
|||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
|
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
|
||||||
import { ApprovalApi } from '@/services/api/approval';
|
import { ApprovalApi } from '@/services/api/approval';
|
||||||
|
import RequirePermission from '@/components/helper/RequirePermission';
|
||||||
|
|
||||||
const ProjectFlockClosingForm = ({
|
const ProjectFlockClosingForm = ({
|
||||||
projectFlock,
|
projectFlock,
|
||||||
@@ -285,16 +286,18 @@ const ProjectFlockClosingForm = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='p-4 mt-6'>
|
<div className='p-4 mt-6'>
|
||||||
<Button
|
<RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
|
||||||
className='w-full'
|
<Button
|
||||||
color='error'
|
className='w-full'
|
||||||
isLoading={isLoading}
|
color='error'
|
||||||
disabled={!isCanCloseValid}
|
isLoading={isLoading}
|
||||||
onClick={() => closeModal.openModal()}
|
disabled={!isCanCloseValid}
|
||||||
>
|
onClick={() => closeModal.openModal()}
|
||||||
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
>
|
||||||
{isCanClose ? 'Close' : 'Unclose'}
|
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
||||||
</Button>
|
{isCanClose ? 'Close' : 'Unclose'}
|
||||||
|
</Button>
|
||||||
|
</RequirePermission>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ConfirmationModal
|
<ConfirmationModal
|
||||||
|
|||||||
@@ -423,7 +423,7 @@ const ProjectFlockDetail = ({
|
|||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</Card>
|
</Card>
|
||||||
<div className='grid grid-cols-4 gap-3'>
|
<div className='grid grid-cols-4 gap-3'>
|
||||||
<RequirePermission permissions='lti.production.chickins.create'>
|
<RequirePermission permissions='lti.production.chickins.detail'>
|
||||||
<Link
|
<Link
|
||||||
href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
|
href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
|
||||||
className='m-0 p-0'
|
className='m-0 p-0'
|
||||||
@@ -441,7 +441,7 @@ const ProjectFlockDetail = ({
|
|||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</RequirePermission>
|
</RequirePermission>
|
||||||
<RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
|
<RequirePermission permissions='lti.production.project_flock_kandangs.closing.detail'>
|
||||||
<Link
|
<Link
|
||||||
href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
|
href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
|
||||||
className='m-0 p-0'
|
className='m-0 p-0'
|
||||||
|
|||||||
Reference in New Issue
Block a user