refactor(FE-316): Use CSS background classes for status badges

This commit is contained in:
rstubryan
2025-12-24 10:57:02 +07:00
parent b9c1989cae
commit 20d124504b
@@ -22,16 +22,15 @@ import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal'; import ConfirmationModal from '@/components/modal/ConfirmationModal';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import Card from '@/components/Card'; import Card from '@/components/Card';
import { Color } from '@/types/theme';
const statusColorMap: Record<string, Color> = { const statusColorMap: Record<string, string> = {
APPROVED: 'success', APPROVED: 'bg-[#00D39033]',
REJECTED: 'error', REJECTED: 'bg-error/10',
CREATED: 'none', CREATED: 'bg-[#f3f3f4]',
}; };
const statusIndicatorColorMap: Record<string, string> = { const statusIndicatorColorMap: Record<string, string> = {
APPROVED: 'bg-success', APPROVED: 'bg-[#008000]',
REJECTED: 'bg-error', REJECTED: 'bg-error',
CREATED: 'bg-[#D9D9D9]', CREATED: 'bg-[#D9D9D9]',
}; };
@@ -42,8 +41,8 @@ const statusTextMap: Record<string, string> = {
CREATED: 'Pengajuan', CREATED: 'Pengajuan',
}; };
const getStatusColor = (status: string): Color => { const getStatusColor = (status: string): string => {
return statusColorMap[status] || 'info'; return statusColorMap[status] || 'bg-info';
}; };
const getStatusIndicatorColor = (status: string): string => { const getStatusIndicatorColor = (status: string): string => {
@@ -273,9 +272,8 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
<Badge <Badge
statusIndicator={true} statusIndicator={true}
variant='soft' variant='soft'
color={getStatusColor(status)}
className={{ className={{
badge: `rounded-xl w-full justify-start border border-gray-200`, badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
status: getStatusIndicatorColor(status), status: getStatusIndicatorColor(status),
}} }}
> >