mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-438): Rework confirmation modals and add bulk approve
This commit is contained in:
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user