refactor(FE-438): Rework confirmation modals and add bulk approve

This commit is contained in:
rstubryan
2025-12-28 17:08:47 +07:00
parent 6e4462e217
commit 8224dbf8ec
@@ -463,155 +463,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
emptyContent={<UniformityTableSkeleton />}
/>
<ConfirmationModal
ref={singleDeleteModal.ref}
type='error'
iconPosition='left'
iconSize={32}
text={`Apakah anda yakin ingin menghapus data Uniformity ini?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: singleDeleteHandler,
}}
className={{
modalBox: 'rounded-2xl',
}}
>
{' '}
<div className='flex flex-col gap-4 mt-4'>
<Table
data={[
{
id: 'tanggal',
label: 'Tanggal',
value: '28 Desember 2025',
},
{
id: 'lokasi-farm',
label: 'Lokasi Farm',
value: 'Farm A',
},
{
id: 'project-flock',
label: 'Project Flock',
value: 'Flock 2025-01',
},
{
id: 'kandang',
label: 'Kandang',
value: 'Kandang 1',
},
{
id: 'file-uniformity',
label: 'File Uniformity',
value: 'uniformity_data.xlsx',
},
{
id: 'status',
label: 'Status',
value: 'Disetujui',
},
]}
columns={[
{
accessorKey: 'label',
header: 'Label',
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
cell: (props) => <span>{props.row.original.value}</span>,
},
]}
pageSize={6}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</ConfirmationModal>
<ConfirmationModal
ref={bulkDeleteModal.ref}
type='error'
iconPosition='left'
iconSize={32}
text={`Apakah anda yakin ingin menghapus ${selectedRowIds.length} data Uniformity yang dipilih?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isBulkActionLoading,
onClick: bulkDeleteHandler,
}}
className={{
modalBox: 'rounded-2xl',
}}
>
<div className='flex flex-col gap-4 mt-4'>
<Table
data={[
{
id: 'tanggal',
label: 'Tanggal',
value: '28 Desember 2025',
},
{
id: 'lokasi-farm',
label: 'Lokasi Farm',
value: 'Farm A',
},
{
id: 'project-flock',
label: 'Project Flock',
value: 'Flock 2025-01',
},
{
id: 'kandang',
label: 'Kandang',
value: 'Kandang 1',
},
{
id: 'file-uniformity',
label: 'File Uniformity',
value: 'uniformity_data.xlsx',
},
{
id: 'status',
label: 'Status',
value: 'Disetujui',
},
]}
columns={[
{
accessorKey: 'label',
header: 'Label',
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
cell: (props) => <span>{props.row.original.value}</span>,
},
]}
pageSize={6}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</ConfirmationModal>
<ConfirmationModal
ref={successModal.ref}
type='success'
@@ -684,12 +535,163 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
</div>
</ConfirmationModal>
<ConfirmationModal
ref={singleDeleteModal.ref}
type='error'
iconPosition='left'
iconSize={32}
text={`Delete This Data?`}
subtitleText='Are you sure you want to delete this data?'
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: singleDeleteHandler,
}}
className={{
modalBox: 'rounded-2xl',
}}
>
<div className='flex flex-col gap-4 mt-4'>
<Table
data={[
{
id: 'tanggal',
label: 'Tanggal',
value: '28 Desember 2025',
},
{
id: 'lokasi-farm',
label: 'Lokasi Farm',
value: 'Farm A',
},
{
id: 'project-flock',
label: 'Project Flock',
value: 'Flock 2025-01',
},
{
id: 'kandang',
label: 'Kandang',
value: 'Kandang 1',
},
{
id: 'file-uniformity',
label: 'File Uniformity',
value: 'uniformity_data.xlsx',
},
{
id: 'status',
label: 'Status',
value: 'Disetujui',
},
]}
columns={[
{
accessorKey: 'label',
header: 'Label',
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
cell: (props) => <span>{props.row.original.value}</span>,
},
]}
pageSize={6}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</ConfirmationModal>
<ConfirmationModal
ref={bulkDeleteModal.ref}
type='error'
iconPosition='left'
iconSize={32}
text={`Delete This Data?`}
subtitleText={`Are you sure you want to delete this data? (${selectedRowIds.length} data)`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isBulkActionLoading,
onClick: bulkDeleteHandler,
}}
className={{
modalBox: 'rounded-2xl',
}}
>
<div className='flex flex-col gap-4 mt-4'>
<Table
data={[
{
id: 'tanggal',
label: 'Tanggal',
value: '28 Desember 2025',
},
{
id: 'lokasi-farm',
label: 'Lokasi Farm',
value: 'Farm A',
},
{
id: 'project-flock',
label: 'Project Flock',
value: 'Flock 2025-01',
},
{
id: 'kandang',
label: 'Kandang',
value: 'Kandang 1',
},
{
id: 'file-uniformity',
label: 'File Uniformity',
value: 'uniformity_data.xlsx',
},
{
id: 'status',
label: 'Status',
value: 'Disetujui',
},
]}
columns={[
{
accessorKey: 'label',
header: 'Label',
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
cell: (props) => <span>{props.row.original.value}</span>,
},
]}
pageSize={6}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</ConfirmationModal>
<ConfirmationModal
ref={singleApproveModal.ref}
type='success'
iconPosition='left'
iconSize={32}
text='Apakah anda yakin ingin menyetujui data Uniformity ini?'
text='Approve This Submission?'
subtitleText='Are you sure you want to approve this submission?'
secondaryButton={{
text: 'Tidak',
}}
@@ -760,12 +762,61 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
</div>
</ConfirmationModal>
<ConfirmationModal
ref={bulkApproveModal.ref}
type='success'
iconPosition='left'
iconSize={32}
text={`Approve This Submission?`}
subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
isLoading: isBulkActionLoading,
onClick: bulkApproveHandler,
}}
className={{
modalBox: 'rounded-2xl',
}}
>
<div className='flex flex-col gap-4 mt-4'>
<Table
data={selectedUniformities.map((u, index) => ({
id: `bulk-approve-${index}`,
label: `${index + 1}. ${u.location_name}`,
value: `${u.flock_name} - ${u.kandang_name}`,
}))}
columns={[
{
accessorKey: 'label',
header: 'Label',
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
cell: (props) => <span>{props.row.original.value}</span>,
},
]}
pageSize={selectedUniformities.length}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</ConfirmationModal>
<ConfirmationModal
ref={singleRejectModal.ref}
type='error'
iconPosition='left'
iconSize={32}
text='Apakah anda yakin ingin menolak data Uniformity ini?'
text='Reject This Submission?'
subtitleText='Are you sure you want to reject this submission?'
secondaryButton={{
text: 'Tidak',
}}
@@ -836,53 +887,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
</div>
</ConfirmationModal>
<ConfirmationModal
ref={bulkApproveModal.ref}
type='success'
iconPosition='left'
iconSize={32}
text={`Apakah anda yakin ingin menyetujui ${selectedRowIds.length} data Uniformity yang dipilih?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
isLoading: isBulkActionLoading,
onClick: bulkApproveHandler,
}}
className={{
modalBox: 'rounded-2xl',
}}
>
<div className='flex flex-col gap-4 mt-4'>
<Table
data={selectedUniformities.map((u, index) => ({
id: `bulk-approve-${index}`,
label: `${index + 1}. ${u.location_name}`,
value: `${u.flock_name} - ${u.kandang_name}`,
}))}
columns={[
{
accessorKey: 'label',
header: 'Label',
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
cell: (props) => <span>{props.row.original.value}</span>,
},
]}
pageSize={selectedUniformities.length}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</ConfirmationModal>
<ConfirmationModal
ref={bulkRejectModal.ref}
type='error'