mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 21:41:57 +00:00
refactor(FE): Replace Badge with StatusBadge in uniformity views
This commit is contained in:
rstubryan
@@ -19,6 +19,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { type BaseApiResponse } from '@/types/api/api-general';
|
||||
import Table from '@/components/Table';
|
||||
import Badge from '@/components/Badge';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import CheckboxInput from '@/components/input/CheckboxInput';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
@@ -45,6 +46,7 @@ import {
|
||||
getStatusColor,
|
||||
getStatusIndicatorColor,
|
||||
getStatusText,
|
||||
getStatusBadgeColor,
|
||||
} from '@/components/pages/production/uniformity/uniformity-utils';
|
||||
import { generateUniformityPDF } from '@/components/pages/production/uniformity/export/UniformityExportPDF';
|
||||
import { generateUniformityExcel } from '@/components/pages/production/uniformity/export/UniformityExportExcel';
|
||||
@@ -832,7 +834,7 @@ const UniformityTable = () => {
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div>
|
||||
<div className='w-full flex flex-row justify-center'>
|
||||
<CheckboxInput
|
||||
name='row'
|
||||
checked={row.getIsSelected()}
|
||||
@@ -862,8 +864,11 @@ const UniformityTable = () => {
|
||||
{
|
||||
accessorKey: 'week',
|
||||
header: 'Tanggal (Week)',
|
||||
cell: (props) =>
|
||||
`${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`,
|
||||
cell: (props) => (
|
||||
<span className='text-nowrap'>
|
||||
{`${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
@@ -872,20 +877,11 @@ const UniformityTable = () => {
|
||||
const uniformity = props.row.original;
|
||||
const status =
|
||||
uniformity.latest_approval?.action ?? uniformity.status;
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<Badge
|
||||
statusIndicator={true}
|
||||
variant='soft'
|
||||
className={{
|
||||
badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
|
||||
status: getStatusIndicatorColor(status),
|
||||
}}
|
||||
>
|
||||
{getStatusText(status)}
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
|
||||
const badgeColor = getStatusBadgeColor(status);
|
||||
const statusText = getStatusText(status);
|
||||
|
||||
return <StatusBadge color={badgeColor} text={statusText} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -1039,425 +1035,413 @@ const UniformityTable = () => {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className='p-3 pt-0'>
|
||||
<Table<Uniformity>
|
||||
data={isResponseSuccess(uniformities) ? uniformities?.data : []}
|
||||
columns={uniformityColumns}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
|
||||
totalItems={
|
||||
isResponseSuccess(uniformities)
|
||||
? uniformities?.meta?.total_results
|
||||
: 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoading}
|
||||
sorting={sorting}
|
||||
setSorting={setSorting}
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(uniformities) &&
|
||||
uniformities?.data?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full rounded-xl',
|
||||
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',
|
||||
}}
|
||||
emptyContent={<UniformityTableSkeleton />}
|
||||
/>
|
||||
<Table<Uniformity>
|
||||
data={isResponseSuccess(uniformities) ? uniformities?.data : []}
|
||||
columns={uniformityColumns}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
|
||||
totalItems={
|
||||
isResponseSuccess(uniformities)
|
||||
? uniformities?.meta?.total_results
|
||||
: 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoading}
|
||||
sorting={sorting}
|
||||
setSorting={setSorting}
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
className={{
|
||||
containerClassName: cn('p-3 pt-0', {
|
||||
'mb-20':
|
||||
isResponseSuccess(uniformities) &&
|
||||
uniformities?.data?.length === 0,
|
||||
}),
|
||||
headerColumnClassName: 'text-nowrap',
|
||||
}}
|
||||
emptyContent={<UniformityTableSkeleton />}
|
||||
/>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={successModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
text='Data Berhasil Ditambahkan'
|
||||
subtitleText='Data uniformity telah berhasil disimpan.'
|
||||
closeOnBackdrop={false}
|
||||
primaryButton={{
|
||||
text: 'Ok',
|
||||
color: 'primary',
|
||||
onClick: handleSuccessModalClose,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{createdUniformity ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformityDetail={createdUniformity}
|
||||
/>
|
||||
) : selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={singleDeleteModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
text={`Delete This Data?`}
|
||||
subtitleText='Are you sure you want to delete this data?'
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Delete',
|
||||
color: 'primary',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleDeleteHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<UniformityConfirmationPreview uniformity={selectedUniformity} />
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={singleApproveModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
text='Approve This Submission?'
|
||||
subtitleText='Are you sure you want to approve this submission?'
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Approve',
|
||||
color: 'primary',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleApproveHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={bulkApproveModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
text={`Approve This Submission?`}
|
||||
subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Approve',
|
||||
color: 'primary',
|
||||
isLoading: isBulkActionLoading,
|
||||
onClick: bulkApproveHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<UniformityConfirmationPreview uniformity={selectedUniformity} />
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={singleRejectModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
text='Reject This Submission?'
|
||||
subtitleText='Are you sure you want to reject this submission?'
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Reject',
|
||||
color: 'primary',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleRejectHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={bulkRejectModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Reject',
|
||||
color: 'primary',
|
||||
isLoading: isBulkActionLoading,
|
||||
onClick: bulkRejectHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
{/* Filter Modal */}
|
||||
<Modal
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-6'>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-semibold'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={filterModal.closeModal}
|
||||
className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
<ConfirmationModal
|
||||
ref={successModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
text='Data Berhasil Ditambahkan'
|
||||
subtitleText='Data uniformity telah berhasil disimpan.'
|
||||
closeOnBackdrop={false}
|
||||
primaryButton={{
|
||||
text: 'Ok',
|
||||
color: 'primary',
|
||||
onClick: handleSuccessModalClose,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{createdUniformity ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformityDetail={createdUniformity}
|
||||
/>
|
||||
) : selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<div className='space-y-1.5 px-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
|
||||
<div>
|
||||
<DateInput
|
||||
required
|
||||
label='Tanggal mulai'
|
||||
name='start_date'
|
||||
value={filterFormik.values.start_date}
|
||||
onChange={handleFilterStartDateChange}
|
||||
onBlur={filterFormik.handleBlur}
|
||||
isError={
|
||||
filterFormik.touched.start_date &&
|
||||
Boolean(filterFormik.errors.start_date)
|
||||
}
|
||||
errorMessage={filterFormik.errors.start_date}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
ref={singleDeleteModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
text={`Delete This Data?`}
|
||||
subtitleText='Are you sure you want to delete this data?'
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Delete',
|
||||
color: 'primary',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleDeleteHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<UniformityConfirmationPreview uniformity={selectedUniformity} />
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<div>
|
||||
<DateInput
|
||||
required
|
||||
label='Tanggal akhir'
|
||||
name='end_date'
|
||||
value={filterFormik.values.end_date}
|
||||
onChange={handleFilterEndDateChange}
|
||||
onBlur={filterFormik.handleBlur}
|
||||
isError={
|
||||
filterFormik.touched.end_date &&
|
||||
Boolean(filterFormik.errors.end_date)
|
||||
}
|
||||
errorMessage={filterFormik.errors.end_date}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
ref={singleApproveModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
text='Approve This Submission?'
|
||||
subtitleText='Are you sure you want to approve this submission?'
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Approve',
|
||||
color: 'primary',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleApproveHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={bulkApproveModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
text={`Approve This Submission?`}
|
||||
subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Approve',
|
||||
color: 'primary',
|
||||
isLoading: isBulkActionLoading,
|
||||
onClick: bulkApproveHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
<UniformityConfirmationPreview uniformity={selectedUniformity} />
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={singleRejectModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
text='Reject This Submission?'
|
||||
subtitleText='Are you sure you want to reject this submission?'
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Reject',
|
||||
color: 'primary',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: singleRejectHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={bulkRejectModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Reject',
|
||||
color: 'primary',
|
||||
isLoading: isBulkActionLoading,
|
||||
onClick: bulkRejectHandler,
|
||||
}}
|
||||
className={{
|
||||
modalBox: 'rounded-2xl',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4 mt-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
{/* Filter Modal */}
|
||||
<Modal
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-6'>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-semibold'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={filterModal.closeModal}
|
||||
className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='space-y-1.5 px-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
|
||||
<div>
|
||||
<SelectInput
|
||||
<DateInput
|
||||
required
|
||||
label='Lokasi'
|
||||
placeholder='Pilih Lokasi...'
|
||||
value={filterFormik.values.location}
|
||||
onChange={(value) => {
|
||||
handleFilterLocationChange(value);
|
||||
}}
|
||||
options={filterLocationOptions}
|
||||
onInputChange={setFilterLocationInputValue}
|
||||
isLoading={isLoadingFilterLocations}
|
||||
onMenuScrollToBottom={loadMoreFilterLocations}
|
||||
label='Tanggal mulai'
|
||||
name='start_date'
|
||||
value={filterFormik.values.start_date}
|
||||
onChange={handleFilterStartDateChange}
|
||||
onBlur={filterFormik.handleBlur}
|
||||
isError={
|
||||
filterFormik.touched.location &&
|
||||
Boolean(filterFormik.errors.location)
|
||||
filterFormik.touched.start_date &&
|
||||
Boolean(filterFormik.errors.start_date)
|
||||
}
|
||||
errorMessage={filterFormik.errors.location}
|
||||
isClearable
|
||||
errorMessage={filterFormik.errors.start_date}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SelectInput
|
||||
<DateInput
|
||||
required
|
||||
label='Project Flock'
|
||||
placeholder='Pilih Project Flock...'
|
||||
value={filterFormik.values.project_flock}
|
||||
onChange={(value) => {
|
||||
handleFilterProjectFlockChange(value);
|
||||
}}
|
||||
options={filterProjectFlockOptions}
|
||||
onInputChange={setFilterProjectFlockSearchValue}
|
||||
isLoading={isLoadingFilterProjectFlocks}
|
||||
onMenuScrollToBottom={loadMoreFilterProjectFlocks}
|
||||
isDisabled={!filterFormik.values.location}
|
||||
label='Tanggal akhir'
|
||||
name='end_date'
|
||||
value={filterFormik.values.end_date}
|
||||
onChange={handleFilterEndDateChange}
|
||||
onBlur={filterFormik.handleBlur}
|
||||
isError={
|
||||
filterFormik.touched.project_flock &&
|
||||
Boolean(filterFormik.errors.project_flock)
|
||||
filterFormik.touched.end_date &&
|
||||
Boolean(filterFormik.errors.end_date)
|
||||
}
|
||||
errorMessage={filterFormik.errors.project_flock}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SelectInput
|
||||
required
|
||||
label='Kandang'
|
||||
placeholder='Pilih Kandang...'
|
||||
value={filterFormik.values.kandang}
|
||||
onChange={(value) => {
|
||||
handleFilterKandangChange(value);
|
||||
}}
|
||||
options={filterKandangOptions}
|
||||
isDisabled={!filterFormik.values.project_flock}
|
||||
isError={
|
||||
filterFormik.touched.kandang &&
|
||||
Boolean(filterFormik.errors.kandang)
|
||||
}
|
||||
errorMessage={filterFormik.errors.kandang}
|
||||
isClearable
|
||||
errorMessage={filterFormik.errors.end_date}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full'>
|
||||
{/* Error List Alert */}
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='w-full px-4'>
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={close}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<SelectInput
|
||||
required
|
||||
label='Lokasi'
|
||||
placeholder='Pilih Lokasi...'
|
||||
value={filterFormik.values.location}
|
||||
onChange={(value) => {
|
||||
handleFilterLocationChange(value);
|
||||
}}
|
||||
options={filterLocationOptions}
|
||||
onInputChange={setFilterLocationInputValue}
|
||||
isLoading={isLoadingFilterLocations}
|
||||
onMenuScrollToBottom={loadMoreFilterLocations}
|
||||
isError={
|
||||
filterFormik.touched.location &&
|
||||
Boolean(filterFormik.errors.location)
|
||||
}
|
||||
errorMessage={filterFormik.errors.location}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
||||
<Button
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
onClick={handleResetFilters}
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button
|
||||
className='me-4 min-w-36 rounded-lg'
|
||||
onClick={handleApplyFilters}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
<div>
|
||||
<SelectInput
|
||||
required
|
||||
label='Project Flock'
|
||||
placeholder='Pilih Project Flock...'
|
||||
value={filterFormik.values.project_flock}
|
||||
onChange={(value) => {
|
||||
handleFilterProjectFlockChange(value);
|
||||
}}
|
||||
options={filterProjectFlockOptions}
|
||||
onInputChange={setFilterProjectFlockSearchValue}
|
||||
isLoading={isLoadingFilterProjectFlocks}
|
||||
onMenuScrollToBottom={loadMoreFilterProjectFlocks}
|
||||
isDisabled={!filterFormik.values.location}
|
||||
isError={
|
||||
filterFormik.touched.project_flock &&
|
||||
Boolean(filterFormik.errors.project_flock)
|
||||
}
|
||||
errorMessage={filterFormik.errors.project_flock}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SelectInput
|
||||
required
|
||||
label='Kandang'
|
||||
placeholder='Pilih Kandang...'
|
||||
value={filterFormik.values.kandang}
|
||||
onChange={(value) => {
|
||||
handleFilterKandangChange(value);
|
||||
}}
|
||||
options={filterKandangOptions}
|
||||
isDisabled={!filterFormik.values.project_flock}
|
||||
isError={
|
||||
filterFormik.touched.kandang &&
|
||||
Boolean(filterFormik.errors.kandang)
|
||||
}
|
||||
errorMessage={filterFormik.errors.kandang}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Floating Actions Button */}
|
||||
<FloatingActionsButton
|
||||
actions={[
|
||||
{
|
||||
action: 'DETAIL',
|
||||
icon: 'mdi:eye-outline',
|
||||
label: 'Lihat Detail',
|
||||
hidden: selectedRowIds.length !== 1,
|
||||
onClick() {
|
||||
router.push(
|
||||
`/production/uniformity/detail?uniformityId=${selectedRowIds[0]}`
|
||||
);
|
||||
setRowSelection({});
|
||||
},
|
||||
permissions: 'lti.production.uniformity.detail',
|
||||
<div className='w-full'>
|
||||
{/* Error List Alert */}
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='w-full px-4'>
|
||||
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
||||
<Button
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
onClick={handleResetFilters}
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button
|
||||
className='me-4 min-w-36 rounded-lg'
|
||||
onClick={handleApplyFilters}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Floating Actions Button */}
|
||||
<FloatingActionsButton
|
||||
actions={[
|
||||
{
|
||||
action: 'DETAIL',
|
||||
icon: 'mdi:eye-outline',
|
||||
label: 'Lihat Detail',
|
||||
hidden: selectedRowIds.length !== 1,
|
||||
onClick() {
|
||||
router.push(
|
||||
`/production/uniformity/detail?uniformityId=${selectedRowIds[0]}`
|
||||
);
|
||||
setRowSelection({});
|
||||
},
|
||||
{
|
||||
action: 'DELETE',
|
||||
icon: 'mdi:delete-outline',
|
||||
label: 'Delete',
|
||||
hidden: selectedRowIds.length !== 1,
|
||||
onClick: handleDelete,
|
||||
permissions: 'lti.production.uniformity.delete',
|
||||
},
|
||||
]}
|
||||
approvals={[
|
||||
{
|
||||
action: 'APPROVED',
|
||||
icon: 'mdi:check-circle-outline',
|
||||
label: 'Approve',
|
||||
onClick: handleBulkApprove,
|
||||
permissions: 'lti.production.uniformity.approve',
|
||||
disabled: !canApproveReject,
|
||||
},
|
||||
{
|
||||
action: 'REJECTED',
|
||||
icon: 'mdi:close-circle-outline',
|
||||
label: 'Reject',
|
||||
onClick: handleBulkReject,
|
||||
permissions: 'lti.production.uniformity.approve',
|
||||
disabled: !canApproveReject,
|
||||
},
|
||||
]}
|
||||
selectedRowIds={selectedRowIds}
|
||||
onClose={handleCloseFab}
|
||||
/>
|
||||
</section>
|
||||
permissions: 'lti.production.uniformity.detail',
|
||||
},
|
||||
{
|
||||
action: 'DELETE',
|
||||
icon: 'mdi:delete-outline',
|
||||
label: 'Delete',
|
||||
hidden: selectedRowIds.length !== 1,
|
||||
onClick: handleDelete,
|
||||
permissions: 'lti.production.uniformity.delete',
|
||||
},
|
||||
]}
|
||||
approvals={[
|
||||
{
|
||||
action: 'APPROVED',
|
||||
icon: 'mdi:check-circle-outline',
|
||||
label: 'Approve',
|
||||
onClick: handleBulkApprove,
|
||||
permissions: 'lti.production.uniformity.approve',
|
||||
disabled: !canApproveReject,
|
||||
},
|
||||
{
|
||||
action: 'REJECTED',
|
||||
icon: 'mdi:close-circle-outline',
|
||||
label: 'Reject',
|
||||
onClick: handleBulkReject,
|
||||
permissions: 'lti.production.uniformity.approve',
|
||||
disabled: !canApproveReject,
|
||||
},
|
||||
]}
|
||||
selectedRowIds={selectedRowIds}
|
||||
onClose={handleCloseFab}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,11 +10,10 @@ import {
|
||||
UniformityInfoUmum,
|
||||
} from '@/types/api/production/uniformity';
|
||||
import Table from '@/components/Table';
|
||||
import Badge from '@/components/Badge';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import {
|
||||
getWeightStatusColor,
|
||||
getWeightStatusIndicatorColor,
|
||||
getWeightStatusText,
|
||||
getWeightStatusBadgeColor,
|
||||
} from '@/components/pages/production/uniformity/uniformity-utils';
|
||||
import { BodyWeightData } from '@/types/api/production/uniformity';
|
||||
|
||||
@@ -65,30 +64,12 @@ const UniformityDetailsPreview = ({
|
||||
cell: (props) => {
|
||||
const status = props.row.original.status;
|
||||
return status ? (
|
||||
<div className='w-full'>
|
||||
<Badge
|
||||
statusIndicator={true}
|
||||
variant='soft'
|
||||
className={{
|
||||
badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
|
||||
status: getWeightStatusIndicatorColor(status),
|
||||
}}
|
||||
>
|
||||
{getWeightStatusText(status)}
|
||||
</Badge>
|
||||
</div>
|
||||
<StatusBadge
|
||||
color={getWeightStatusBadgeColor(status)}
|
||||
text={getWeightStatusText(status)}
|
||||
/>
|
||||
) : (
|
||||
<Badge
|
||||
statusIndicator={true}
|
||||
variant='soft'
|
||||
className={{
|
||||
badge:
|
||||
'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
|
||||
status: 'bg-info',
|
||||
}}
|
||||
>
|
||||
Unknown
|
||||
</Badge>
|
||||
<StatusBadge color='info' text='Unknown' />
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -14,12 +14,11 @@ import { useRouter } from 'next/navigation';
|
||||
import toast from 'react-hot-toast';
|
||||
import { UniformityApi } from '@/services/api/uniformity';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
import Badge from '@/components/Badge';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import { formatNumber } from '@/lib/helper';
|
||||
import {
|
||||
getWeightStatusColor,
|
||||
getWeightStatusIndicatorColor,
|
||||
getWeightStatusText,
|
||||
getWeightStatusBadgeColor,
|
||||
} from '@/components/pages/production/uniformity/uniformity-utils';
|
||||
import { DetailOptionType } from '@/types/api/production/uniformity';
|
||||
import {
|
||||
@@ -204,30 +203,12 @@ const UniformityResultForm = () => {
|
||||
cell: (props) => {
|
||||
const status = props.row.original.status;
|
||||
return status ? (
|
||||
<div className='w-full'>
|
||||
<Badge
|
||||
statusIndicator={true}
|
||||
variant='soft'
|
||||
className={{
|
||||
badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
|
||||
status: getWeightStatusIndicatorColor(status),
|
||||
}}
|
||||
>
|
||||
{getWeightStatusText(status)}
|
||||
</Badge>
|
||||
</div>
|
||||
<StatusBadge
|
||||
color={getWeightStatusBadgeColor(status)}
|
||||
text={getWeightStatusText(status)}
|
||||
/>
|
||||
) : (
|
||||
<Badge
|
||||
statusIndicator={true}
|
||||
variant='soft'
|
||||
className={{
|
||||
badge:
|
||||
'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
|
||||
status: 'bg-info',
|
||||
}}
|
||||
>
|
||||
Unknown
|
||||
</Badge>
|
||||
<StatusBadge color='info' text='Unknown' />
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user