mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 07:45:47 +00:00
fix(FE): fixing classname using dynamic value
This commit is contained in:
randy-ar
@@ -211,7 +211,7 @@ const DashboardProduction = () => {
|
||||
|
||||
useEffect(() => {
|
||||
setNavbarActions(
|
||||
<div className='hidden sm:flex flex-row justify-end gap-[12px] '>
|
||||
<div className='hidden sm:flex flex-row justify-end gap-3 '>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
@@ -226,24 +226,26 @@ const DashboardProduction = () => {
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
|
||||
'p-2 rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
<Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
|
||||
Export
|
||||
<div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
|
||||
<div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
|
||||
<Icon width={14} height={14} icon='heroicons:chevron-down' />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
className={{
|
||||
content: 'w-full',
|
||||
content: 'w-full mt-1 p-0',
|
||||
}}
|
||||
>
|
||||
<Menu className={exporting ? 'hidden' : ''}>
|
||||
<Menu
|
||||
className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
|
||||
>
|
||||
<MenuItem
|
||||
className='text-sm padding-[12px]'
|
||||
className='text-sm p-3'
|
||||
title='PDF'
|
||||
onClick={handleExportPDF}
|
||||
/>
|
||||
@@ -270,8 +272,8 @@ const DashboardProduction = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full p-[12px] space-y-[12px]'>
|
||||
<div className='flex sm:hidden flex-row justify-end gap-[12px] '>
|
||||
<section className='w-full p-3 space-y-3'>
|
||||
<div className='flex sm:hidden flex-row justify-end gap-3 '>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
@@ -286,7 +288,7 @@ const DashboardProduction = () => {
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
|
||||
'p-2 rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
@@ -296,18 +298,21 @@ const DashboardProduction = () => {
|
||||
icon='heroicons:cloud-arrow-down'
|
||||
/>
|
||||
Export
|
||||
<div className='w-[26px] h-[20px] flex items-center justify-center border-l border-base-content/10'>
|
||||
<div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
|
||||
<Icon width={14} height={14} icon='heroicons:chevron-down' />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
className={{
|
||||
content: 'w-full',
|
||||
content:
|
||||
'w-full mt-1 p-0 shadow-button-soft border border-base-content/10 rounded-lg',
|
||||
}}
|
||||
>
|
||||
<Menu className={exporting ? 'hidden' : ''}>
|
||||
<Menu
|
||||
className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
|
||||
>
|
||||
<MenuItem
|
||||
className='text-sm padding-[12px]'
|
||||
className='text-sm p-3'
|
||||
title='PDF'
|
||||
onClick={handleExportPDF}
|
||||
/>
|
||||
@@ -405,107 +410,106 @@ const DashboardProduction = () => {
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-xl',
|
||||
modalBox: 'p-0 rounded-[14px]',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-[16px]'>
|
||||
<div className='flex flex-col'>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-[8px] py-[16px] border-b border-[#E5E7EB]'>
|
||||
<div className='flex items-center gap-[8px] ms-[16px] text-[#0069E0]'>
|
||||
<div className='flex items-center justify-between p-4 border-b border-base-content/10'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-semibold'>Filter Data</h3>
|
||||
<h3 className='font-medium text-sm'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={() => filterModal.closeModal()}
|
||||
className='text-gray-500 hover:text-gray-700 me-[16px]'
|
||||
className='text-gray-500 hover:text-gray-700'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className='space-y-[8px]'
|
||||
className='flex flex-col'
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetFilter}
|
||||
>
|
||||
{/* Rentang Waktu */}
|
||||
<div className='px-[16px]'>
|
||||
<label className='flex text-xs items-center gap-2 mb-[8px] font-semibold'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex items-start gap-2'>
|
||||
<DateInput
|
||||
name='startDate'
|
||||
placeholder='Tanggal Mulai'
|
||||
value={formik.values.startDate}
|
||||
errorMessage={formik.errors.startDate}
|
||||
onChange={formik.handleChange}
|
||||
isError={
|
||||
Boolean(formik.errors.startDate) &&
|
||||
Boolean(formik.touched.startDate)
|
||||
}
|
||||
/>
|
||||
<div className='hidden md:block mt-3 text-center text-[#18181B]/10 '>
|
||||
—
|
||||
<div className='flex flex-col p-4 gap-1.5'>
|
||||
{/* Rentang Waktu */}
|
||||
<div>
|
||||
<label className='flex text-xs items-center gap-2 py-2 font-semibold'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex items-center gap-2'>
|
||||
<DateInput
|
||||
name='startDate'
|
||||
placeholder='Tanggal Mulai'
|
||||
value={formik.values.startDate}
|
||||
errorMessage={formik.errors.startDate}
|
||||
onChange={formik.handleChange}
|
||||
isError={
|
||||
Boolean(formik.errors.startDate) &&
|
||||
Boolean(formik.touched.startDate)
|
||||
}
|
||||
/>
|
||||
<hr className='w-full max-w-3 h-px border-base-content/10'></hr>
|
||||
<DateInput
|
||||
name='endDate'
|
||||
placeholder='Tanggal Akhir'
|
||||
value={formik.values.endDate}
|
||||
errorMessage={formik.errors.endDate}
|
||||
onChange={formik.handleChange}
|
||||
isError={
|
||||
Boolean(formik.errors.endDate) &&
|
||||
Boolean(formik.touched.endDate)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<DateInput
|
||||
name='endDate'
|
||||
placeholder='Tanggal Akhir'
|
||||
value={formik.values.endDate}
|
||||
errorMessage={formik.errors.endDate}
|
||||
onChange={formik.handleChange}
|
||||
className={{
|
||||
inputWrapper:
|
||||
'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
isError={
|
||||
Boolean(formik.errors.endDate) &&
|
||||
Boolean(formik.touched.endDate)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analysis Mode */}
|
||||
<div className='px-[16px]'>
|
||||
<label className='block mb-[8px] text-xs font-semibold'>
|
||||
Analysis Mode
|
||||
</label>
|
||||
<RadioGroup
|
||||
name='analysisMode'
|
||||
value={formik.values.analysisMode}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setAnalysisMode(e.target.value as 'OVERVIEW' | 'COMPARISON');
|
||||
// Reset all dependent fields when analysis mode changes
|
||||
formik.setFieldValue('location', []);
|
||||
formik.setFieldValue('flock', []);
|
||||
formik.setFieldValue('kandang', []);
|
||||
formik.setFieldValue('comparisonType', '');
|
||||
setSelectedLocationIds([]);
|
||||
}}
|
||||
color='primary'
|
||||
className={{
|
||||
wrapper:
|
||||
'w-full flex flex-row items-center min-h-[45px] font-medium text-[#18181B]/50',
|
||||
}}
|
||||
>
|
||||
<RadioGroupItem
|
||||
{/* Analysis Mode */}
|
||||
<div>
|
||||
<label className='block py-2 text-xs font-semibold'>
|
||||
Analysis Mode
|
||||
</label>
|
||||
<RadioGroup
|
||||
name='analysisMode'
|
||||
value={formik.values.analysisMode}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setAnalysisMode(
|
||||
e.target.value as 'OVERVIEW' | 'COMPARISON'
|
||||
);
|
||||
// Reset all dependent fields when analysis mode changes
|
||||
formik.setFieldValue('location', []);
|
||||
formik.setFieldValue('flock', []);
|
||||
formik.setFieldValue('kandang', []);
|
||||
formik.setFieldValue('comparisonType', '');
|
||||
setSelectedLocationIds([]);
|
||||
}}
|
||||
color='primary'
|
||||
value='OVERVIEW'
|
||||
label='Performance Overview'
|
||||
/>
|
||||
<RadioGroupItem
|
||||
color='primary'
|
||||
value='COMPARISON'
|
||||
label='Performance Comparison'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
className={{
|
||||
wrapper:
|
||||
'w-full flex flex-row items-center font-medium text-base-content/50',
|
||||
radioWrapper: 'w-full grid grid-cols-2 gap-0 p-0',
|
||||
}}
|
||||
>
|
||||
<RadioGroupItem
|
||||
color='primary'
|
||||
value='OVERVIEW'
|
||||
label='Performance Overview'
|
||||
className='w-full p-3'
|
||||
/>
|
||||
<RadioGroupItem
|
||||
color='primary'
|
||||
value='COMPARISON'
|
||||
label='Performance Comparison'
|
||||
className='w-full p-3'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{formik.values.analysisMode === 'COMPARISON' && (
|
||||
<div className='px-[16px]'>
|
||||
{formik.values.analysisMode === 'COMPARISON' && (
|
||||
<SelectInputRadio
|
||||
label='Compared By'
|
||||
value={comparisonTypeOptions.find(
|
||||
@@ -525,15 +529,12 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.touched.comparisonType)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Location */}
|
||||
<div className='px-[16px]'>
|
||||
{/* Location */}
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FARM' ? (
|
||||
@@ -564,7 +565,7 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.touched.location)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
@@ -595,166 +596,164 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.touched.location)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Flock */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(
|
||||
formik.values.comparisonType === 'FLOCK' ||
|
||||
formik.values.comparisonType === 'KANDANG'
|
||||
)
|
||||
) && (
|
||||
<>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FLOCK' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Kandang */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(formik.values.comparisonType === 'KANDANG')
|
||||
) && (
|
||||
<>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'KANDANG' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='w-full'>
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={close}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Flock */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(
|
||||
formik.values.comparisonType === 'FLOCK' ||
|
||||
formik.values.comparisonType === 'KANDANG'
|
||||
)
|
||||
) && (
|
||||
<div className='px-[16px]'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FLOCK' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Kandang */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(formik.values.comparisonType === 'KANDANG')
|
||||
) && (
|
||||
<div className='px-[16px]'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'KANDANG' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='w-full p-4'>
|
||||
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
|
||||
<div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-[#F9FAFB]'>
|
||||
<Button
|
||||
type='reset'
|
||||
variant='soft'
|
||||
className='ms-4 px-[16px] rounded-[8px] bg-[#F9FAFB] border-[#F9FAFB] text-[#4A5565] hover:bg-[#4A5565]/10'
|
||||
className='rounded-lg p-3 bg-[#F9FAFB] border-[#F9FAFB] text-base-content/65 hover:bg-base-content/10'
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
className='me-4 min-w-[160px] px-[16px] rounded-[8px]'
|
||||
className='min-w-40 text-sm p-3 text-white rounded-lg'
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user