import React from 'react'; import { Card, Typography } from '@material-tailwind/react'; import * as HeroIcons from '@heroicons/react/24/outline'; const COMPONENT_DATA = [ { title: "Total Sales", desc: "Total sales generated since 2018.", value: 1500000, icon: "CurrencyDollar", column_span: "4" }, { title: "Average Monthly Sales", desc: "Average sales per month.", value: 25000, icon: "TrendingUpIcon", column_span: "4" }, { title: "Sales Growth Rate", desc: "Percentage growth in sales year-over-year.", value: 15, icon: "ArrowUpIcon", column_span: "4" } ]; function MetricCardComponent({ item }) { const details = item || { title: "Metric Name", value: "0", desc: "Stat description", change: "+0%", icon: "StarIcon", trend: { is_up: true, value: 0 } }; const iconName = details?.icon ? details.icon : "StarIcon"; const IconComponent = HeroIcons[iconName as keyof typeof HeroIcons]; return (

{IconComponent && }

{details?.trend?.is_up ? : } {details.change}

{details.value} {details.title} {details.desc} ); } function SalesPerformanceOverview() { return (

{COMPONENT_DATA.map((item, index) => (

))}

); } export default SalesPerformanceOverview;

Sales Performance Dashboard - Code

Project Files

No file selected