import { Card, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
interface MetricCardProps {
title: string;
value: string | number;
trend?: {
value: number;
label: string;
};
}
const MetricCard = ({ title, value, trend }: MetricCardProps) => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return (
{title}
{value}
{trend && (
= 0 ? "green" : "red"} fw={600}>
{trend.value >= 0 ? "↑" : "↓"} {Math.abs(trend.value)}%{" "}
{trend.label}
)}
);
};
interface ProdukUnggulanProps {
data?: {
totalPenjualan: number;
produkAktif: number;
totalTransaksi: number;
trend?: {
value: number;
label: string;
};
};
}
export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
const defaultData = {
totalPenjualan: 30900000,
produkAktif: 7,
totalTransaksi: 500,
trend: {
value: 18,
label: "vs bulan lalu",
},
};
const displayData = data || defaultData;
const formatCurrency = (value: number) => {
if (value >= 1000000) {
return `Rp ${(value / 1000000).toFixed(1)}M`;
}
if (value >= 1000) {
return `Rp ${(value / 1000).toFixed(0)}K`;
}
return `Rp ${value.toLocaleString()}`;
};
return (
);
};