mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-22 14:25:47 +00:00
refactor(FE-114): replace button elements with Button component for consistency and improved styling
This commit is contained in:
rstubryan
@@ -3,6 +3,7 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import CheckboxInput from '@/components/input/CheckboxInput';
|
||||
@@ -262,7 +263,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
body: 'flex flex-col gap-6',
|
||||
}}
|
||||
>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
|
||||
<TextInput
|
||||
required
|
||||
label='Project Flock Kandang ID'
|
||||
@@ -355,7 +356,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name='select-all-body-weights'
|
||||
checked={
|
||||
@@ -374,8 +374,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
setSelectedBodyWeights([]);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
<th>
|
||||
@@ -404,29 +407,31 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
{formik.values.body_weights?.map((bw, idx) => (
|
||||
<tr key={`body-weight-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`body-weight-${idx}`}
|
||||
checked={selectedBodyWeights.includes(idx)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedBodyWeights([
|
||||
...selectedBodyWeights,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedBodyWeights(
|
||||
selectedBodyWeights.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<td className="!align-middle">
|
||||
<CheckboxInput
|
||||
name={`body-weight-${idx}`}
|
||||
checked={selectedBodyWeights.includes(idx)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedBodyWeights([
|
||||
...selectedBodyWeights,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedBodyWeights(
|
||||
selectedBodyWeights.filter((i) => i !== idx),
|
||||
);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<TextInput
|
||||
<TextInput
|
||||
required
|
||||
name={`body_weights.${idx}.weight`}
|
||||
type='number'
|
||||
@@ -494,13 +499,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => removeBodyWeight(idx)}
|
||||
className='btn btn-error btn-sm'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' className='h-4 w-4' />
|
||||
</button>
|
||||
<div className='flex justify-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeBodyWeight(idx)}
|
||||
>
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -509,25 +516,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-end mt-4 gap-2'>
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedBodyWeights.length > 0 && (
|
||||
<button
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedBodyWeights}
|
||||
className='btn btn-error btn-sm'
|
||||
disabled={selectedBodyWeights.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' className='h-4 w-4' />
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
Hapus Terpilih ({selectedBodyWeights.length})
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addBodyWeight}
|
||||
className='btn btn-success btn-sm'
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' className='h-4 w-4' />
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Bobot Badan
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
@@ -546,7 +556,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name='select-all-stocks'
|
||||
checked={
|
||||
@@ -564,8 +573,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
setSelectedStocks([]);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
<th>
|
||||
@@ -588,26 +600,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
{formik.values.stocks?.map((stock, idx) => (
|
||||
<tr key={`stock-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`stock-${idx}`}
|
||||
checked={selectedStocks.includes(idx)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedStocks([...selectedStocks, idx]);
|
||||
} else {
|
||||
setSelectedStocks(
|
||||
selectedStocks.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<td className="!align-middle">
|
||||
<CheckboxInput
|
||||
name={`stock-${idx}`}
|
||||
checked={selectedStocks.includes(idx)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedStocks([...selectedStocks, idx]);
|
||||
} else {
|
||||
setSelectedStocks(
|
||||
selectedStocks.filter((i) => i !== idx),
|
||||
);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<TextInput
|
||||
<TextInput
|
||||
required
|
||||
name={`stocks.${idx}.product_warehouse_id`}
|
||||
type='number'
|
||||
@@ -728,13 +742,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => removeStock(idx)}
|
||||
className='btn btn-error btn-sm'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' className='h-4 w-4' />
|
||||
</button>
|
||||
<div className='flex justify-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeStock(idx)}
|
||||
>
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -743,25 +759,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-end mt-4 gap-2'>
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedStocks.length > 0 && (
|
||||
<button
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedStocks}
|
||||
className='btn btn-error btn-sm'
|
||||
disabled={selectedStocks.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' className='h-4 w-4' />
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
Hapus Terpilih ({selectedStocks.length})
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addStock}
|
||||
className='btn btn-success btn-sm'
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' className='h-4 w-4' />
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Stok
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
@@ -780,7 +799,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name='select-all-depletions'
|
||||
checked={
|
||||
@@ -799,8 +817,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
setSelectedDepletions([]);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
<th>
|
||||
@@ -838,29 +859,31 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
{formik.values.depletions?.map((depletion, idx) => (
|
||||
<tr key={`depletion-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`depletion-${idx}`}
|
||||
checked={selectedDepletions.includes(idx)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDepletions([
|
||||
...selectedDepletions,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedDepletions(
|
||||
selectedDepletions.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<td className="!align-middle">
|
||||
<CheckboxInput
|
||||
name={`depletion-${idx}`}
|
||||
checked={selectedDepletions.includes(idx)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDepletions([
|
||||
...selectedDepletions,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedDepletions(
|
||||
selectedDepletions.filter((i) => i !== idx),
|
||||
);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<TextInput
|
||||
<TextInput
|
||||
required
|
||||
name={`depletions.${idx}.product_warehouse_id`}
|
||||
type='number'
|
||||
@@ -954,13 +977,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => removeDepletion(idx)}
|
||||
className='btn btn-error btn-sm'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' className='h-4 w-4' />
|
||||
</button>
|
||||
<div className='flex justify-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeDepletion(idx)}
|
||||
>
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -969,25 +994,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-end mt-4 gap-2'>
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedDepletions.length > 0 && (
|
||||
<button
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedDepletions}
|
||||
className='btn btn-error btn-sm'
|
||||
disabled={selectedDepletions.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' className='h-4 w-4' />
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
Hapus Terpilih ({selectedDepletions.length})
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addDepletion}
|
||||
className='btn btn-success btn-sm'
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' className='h-4 w-4' />
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Depletion
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user