Sales Overview Table - Copy this React, Tailwind Component to your project

Import React from 'react'; import { AiOutlineDollarCircle, AiOutlineArrowUp, AiOutlineArrowDown } from 'react icons/ai'; import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, PieChart, Pie, Cell, Legend, BarChart, Bar } from 'recharts'; const dummyData = { totalSales: '$1,050,000', salesGrowth: 15, salesOverTime: [ {name: 'Jan', Sales: 2400}, {name: 'Feb', Sales: 1398}, {name: 'Mar', Sales: 9800}, {name: 'Apr', Sales: 3908}, {name: 'May', Sales: 4800}, {name: 'Jun', Sales: 3800}, {name: 'Jul', Sales: 4300}, ], salesByRegion: [ {name: 'North America', value: 35}, {name: 'Europe', value: 25}, {name: 'Asia', value: 40} ], topSellingProducts: [ {name: 'Product A', Sales: 300}, {name: 'Product B', Sales: 250}, {name: 'Product C', Sales: 200} ] }; const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; const Dashboard = () => { return ( <div className='p 4'> <h1 className='text xl font bold text gray 700 mb 6'>Sales Overview</h1> <div className='grid grid cols 1 md:grid cols 2 lg:grid cols 4 gap 4 mb 8'> <div className='bg white shadow md rounded p 4 flex items center justify between'> <div> <span className='block text sm text gray 700'>Total Sales</span> <span className='block text lg font bold'>{dummyData.totalSales}</span> </div> <AiOutlineDollarCircle className='text 3xl text green 500' /> </div> <div className='bg white shadow md rounded p 4 flex items center justify between'> <div> <span className='block text sm text gray 700'>Sales Growth</span> <span className='block text lg font bold'>{dummyData.salesGrowth}%</span> </div> <div>{dummyData.salesGrowth > 0 ? <AiOutlineArrowUp className='text 3xl text green 500' /> : <AiOutlineArrowDown className='text 3xl text red 500' />}</div> </div> </div> <div className='grid grid cols 1 md:grid cols 2 gap 4 mb 8'> <div className='bg white p 4 shadow md rounded'> <h2 className='text lg font bold text gray 700 mb 4'>Sales Growth Over Time</h2> <ResponsiveContainer width='100%' height={250}> <LineChart data={dummyData.salesOverTime}> <CartesianGrid strokeDasharray='3 3' /> <XAxis dataKey='name' /> <YAxis /> <Tooltip /> <Line type='monotone' dataKey='Sales' stroke='#8884d8' activeDot={{ r: 8 }} /> </LineChart> </ResponsiveContainer> </div> <div className='bg white p 4 shadow md rounded'> <h2 className='text lg font bold text gray 700 mb 4'>Sales by Region</h2> <ResponsiveContainer width='100%' height={250}> <PieChart> <Pie dataKey='value' isAnimationActive={false} data={dummyData.salesByRegion} cx='50%' cy='50%' outerRadius={80} fill='#8884d8' label> {dummyData.salesByRegion.map((entry, index) => ( <Cell key={`cell ${index}`} fill={COLORS[index % COLORS.length]} /> ))} </Pie> <Tooltip /> <Legend /> </PieChart> </ResponsiveContainer> </div> </div> <div className='bg white p 4 shadow md rounded mb 8'> <h2 className='text lg font bold text gray 700 mb 4'>Top Selling Products</h2> <ResponsiveContainer width='100%' height={300}> <BarChart data={dummyData.topSellingProducts}> <CartesianGrid strokeDasharray='3 3' /> <XAxis dataKey='name' /> <YAxis /> <Tooltip /> <Bar dataKey='Sales' fill='#8884d8' /> </BarChart> </ResponsiveContainer> </div> </div> ); }; export default Dashboard; Add a related table right below the existing output. Take dummy data for the table.