refactor: replace icons and adjust text sizes in SummaryPanel component

This commit is contained in:
Firman Ramdhani
2026-07-23 18:38:30 +07:00
parent 1812f7c585
commit 1e082a20cc
@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Paper, Stack, Group, ThemeIcon, Text, SimpleGrid, ScrollArea } from '@mantine/core'; import { Paper, Stack, Group, ThemeIcon, Text, SimpleGrid, ScrollArea } from '@mantine/core';
import { Info, Check, X } from 'lucide-react'; // Atau tabler-icons, sesuaikan dengan library Anda import { Info, CircleCheck, XCircle } from 'lucide-react';
export interface AggregatedResult { export interface AggregatedResult {
totalItems: number; totalItems: number;
@@ -30,11 +30,11 @@ const SummaryPanel = React.memo(function SummaryPanel({
<ThemeIcon variant="transparent" color="blue.7" size="sm"> <ThemeIcon variant="transparent" color="blue.7" size="sm">
<Info size={16} strokeWidth={2.5} /> <Info size={16} strokeWidth={2.5} />
</ThemeIcon> </ThemeIcon>
<Text size="xs" fw={600} c="blue.9"> <Text size="sm" fw={600} c="blue.9">
{t('common:bulkAction.totalData')} {t('common:bulkAction.totalData')}
</Text> </Text>
</Group> </Group>
<Text size="sm" fw={700} c="blue.9"> <Text size="md" fw={700} c="blue.9">
{result.totalItems} {result.totalItems}
</Text> </Text>
</Group> </Group>
@@ -45,13 +45,13 @@ const SummaryPanel = React.memo(function SummaryPanel({
<Group gap="xs" justify="space-between" wrap="nowrap"> <Group gap="xs" justify="space-between" wrap="nowrap">
<Group gap={6} wrap="nowrap"> <Group gap={6} wrap="nowrap">
<ThemeIcon variant="transparent" color="green.7" size="sm"> <ThemeIcon variant="transparent" color="green.7" size="sm">
<Check size={16} strokeWidth={2.5} /> <CircleCheck size={16} strokeWidth={2.5} />
</ThemeIcon> </ThemeIcon>
<Text size="xs" fw={600} c="green.9"> <Text size="sm" fw={600} c="green.9">
{t('common:bulkAction.totalSuccess')} {t('common:bulkAction.totalSuccess')}
</Text> </Text>
</Group> </Group>
<Text size="sm" fw={700} c="green.9"> <Text size="md" fw={700} c="green.9">
{result.totalSuccess} {result.totalSuccess}
</Text> </Text>
</Group> </Group>
@@ -62,13 +62,13 @@ const SummaryPanel = React.memo(function SummaryPanel({
<Group gap="xs" justify="space-between" wrap="nowrap"> <Group gap="xs" justify="space-between" wrap="nowrap">
<Group gap={6} wrap="nowrap"> <Group gap={6} wrap="nowrap">
<ThemeIcon variant="transparent" color="red.7" size="sm"> <ThemeIcon variant="transparent" color="red.7" size="sm">
<X size={16} strokeWidth={2.5} /> <XCircle size={16} strokeWidth={2.5} />
</ThemeIcon> </ThemeIcon>
<Text size="xs" fw={600} c="red.9"> <Text size="sm" fw={600} c="red.9">
{t('common:bulkAction.totalFailed')} {t('common:bulkAction.totalFailed')}
</Text> </Text>
</Group> </Group>
<Text size="sm" fw={700} c="red.9"> <Text size="md" fw={700} c="red.9">
{result.totalFailed} {result.totalFailed}
</Text> </Text>
</Group> </Group>