Card Component Library
Browse and explore components
Revenue Updates Chart
Component Code
Copy Code
"use client"
import { useState } from "react"
import { Button, Select } from "flowbite-react"
import CardBox from "@/app/components/shared/CardBox";
import dynamic from "next/dynamic";
import { Icon } from "@iconify/react/dist/iconify.js";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const RevenueUpdate = () => {
const [selectedMonth, setSelectedMonth] = useState("March 2025");
// Chart data for each month
const chartDataByMonth: Record<string, any> = {
"March 2025": {
series: [
{ name: "Earnings this month", data: [1.5, 2.7, 2.2, 3.6, 1.5, 1.0] },
{ name: "Expense this month", data: [-1.8, -1.1, -2.5, -1.5, -0.6, -1.8] },
],
xaxis: {
categories: ["16/08", "17/08", "18/08", "19/08", "20/08", "21/08"]
}
},
"April 2025": {
series: [
{ name: "Earnings this month", data: [2.0, 2.5, 2.8, 3.2, 2.0, 1.5] },
{ name: "Expense this month", data: [-1.2, -1.5, -2.0, -1.0, -0.8, -1.3] },
],
xaxis: {
categories: ["16/09", "17/09", "18/09", "19/09", "20/09", "21/09"]
}
},
"May 2025": {
series: [
{ name: "Earnings this month", data: [1.8, 2.2, 2.6, 3.0, 1.7, 1.2] },
{ name: "Expense this month", data: [-1.5, -1.3, -2.2, -1.2, -0.7, -1.6] },
],
xaxis: {
categories: ["16/10", "17/10", "18/10", "19/10", "20/10", "21/10"]
}
},
"June 2025": {
series: [
{ name: "Earnings this month", data: [2.1, 2.9, 2.4, 3.4, 2.1, 1.3] },
{ name: "Expense this month", data: [-1.7, -1.0, -2.3, -1.7, -0.5, -1.7] },
],
xaxis: {
categories: ["16/11", "17/11", "18/11", "19/11", "20/11", "21/11"]
}
},
};
// Base chart options (shared)
const baseChartOptions = {
chart: {
toolbar: { show: false },
type: "bar" as const,
fontFamily: "inherit",
foreColor: "#adb0bb",
height: 310,
stacked: true,
width: "100%",
offsetX: -20,
animations: {
enabled: true,
easing: 'easeinout' as const,
speed: 800,
animateGradually: {
enabled: true,
delay: 150,
},
dynamicAnimation: {
enabled: true,
speed: 800,
},
},
},
colors: ["var(--color-primary)", "var(--color-secondary)"],
plotOptions: {
bar: {
horizontal: false,
barHeight: "60%",
columnWidth: "20%",
borderRadius: 6,
borderRadiusApplication: 'end',
borderRadiusWhenStacked: 'all',
} satisfies {
borderRadiusApplication?: 'end' | 'around';
borderRadiusWhenStacked?: 'all';
horizontal?: boolean;
barHeight?: string;
columnWidth?: string;
borderRadius?: number;
},
},
dataLabels: { enabled: false },
legend: { show: false },
grid: {
borderColor: "rgba(0,0,0,0.1)",
strokeDashArray: 3,
},
yaxis: { min: -4, max: 4, tickAmount: 4 },
tooltip: { theme: "dark" },
};
// Merge base options with month-specific data
const ChartData = {
...baseChartOptions,
xaxis: chartDataByMonth[selectedMonth].xaxis,
};
return (
<>
<CardBox>
<>
<div className="sm:flex items-center justify-between mb-6">
<div>
<h5 className="card-title">Revenue Updates</h5>
<p className="card-subtitle">Overview of profit</p>
</div>
<div className="sm:mt-0 mt-4">
<Select
className="form-control select-md"
value={selectedMonth}
onChange={e => setSelectedMonth(e.target.value)}
>
<option>March 2025</option>
<option>April 2025</option>
<option>May 2025</option>
<option>June 2025</option>
</Select>
</div>
</div>
<div className="grid grid-cols-12 gap-6">
<div className="lg:col-span-8 md:col-span-8 sm:col-span-12 col-span-12">
<div className="-me-6">
<Chart
options={ChartData}
series={chartDataByMonth[selectedMonth].series}
type="bar"
height="316px"
width={"100%"}
/>
</div>
</div>
<div className="lg:col-span-4 md:col-span-4 sm:col-span-12 col-span-12">
<div className="flex items-center gap-4 pt-6">
<div className="bg-lightprimary dark:bg-darkprimary shrink-0 h-10 w-10 flex justify-center items-center rounded-md">
<Icon icon="tabler:grid-dots" className="text-xl text-primary" />
</div>
<div>
<h4 className="text-2xl text-dark dark:text-white font-semibold">
$63,489.50
</h4>
<p>Total Earnings</p>
</div>
</div>
<div className="flex items-baseline gap-3 pt-9">
<i className="h-2 w-2 rounded-full bg-primary" />
<div>
<p>Earnings this month</p>
<h6 className="text-lg">$48,820</h6>
</div>
</div>
<div className="flex items-baseline gap-3 pt-5">
<i className="h-2 w-2 rounded-full bg-secondary" />
<div>
<p>Expense this month</p>
<h6 className="text-lg">$26,498</h6>
</div>
</div>
<a href="/assets/revenue_expense_report.csv" download >
<Button color="primary" className="mt-7 rounded-md capitalize w-full" >
view full report
</Button>
</a>
</div>
</div>
</>
</CardBox>
</>
)
}
export default RevenueUpdateYarly Breakup Chart
Yearly Breakup
$36,358
+9%
last year
2023
2025
Component Code
Copy Code
"use client";
import { Icon } from "@iconify/react";
import React from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import CardBox from "../../../shared/CardBox";
const YarlyBreakup = () => {
const ChartData: any = {
color: "#adb5bd",
series: [38, 40, 25],
labels: ["2023", "2022", "2025"],
chart: {
height: 150,
type: "donut",
fontFamily: "inherit",
foreColor: "#adb0bb",
},
plotOptions: {
pie: {
startAngle: 0,
endAngle: 360,
donut: {
size: "75%",
},
},
},
stroke: {
show: false,
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
colors: [
"var(--color-primary)",
"var(--color-lightprimary)",
"var(--color-lightsecondary)",
],
responsive: [
{
breakpoint: 991,
options: {
chart: {
width: 120,
},
},
},
],
tooltip: {
theme: "dark",
fillSeriesColor: false,
},
};
return (
<>
<CardBox>
<div className="grid grid-cols-12 gap-4 items-center">
<div className="col-span-6">
<h5 className="card-title mb-4">Yearly Breakup</h5>
<h6 className="text-xl">$36,358</h6>
<div className="flex items-center mb-3 mt-1 gap-2">
<span className="rounded-full p-1 bg-lightsuccess dark:bg-lightsuccess text-success flex items-center justify-center ">
<Icon icon="solar:arrow-left-up-outline" height={15} />
</span>
<p className="text-ld text-sm mb-0">+9%</p>
<p className=" mb-0 text-sm">last year</p>
</div>
<div className="flex gap-3 items-center mt-8">
<div className="flex gap-2 items-center">
<span className="h-2 w-2 rounded-full bg-primary"></span>
<span className="text-xs ">2023</span>
</div>
<div className="flex gap-2 items-center">
<span className="h-2 w-2 rounded-full bg-lightsecondary"></span>
<span className="text-xs ">2025</span>
</div>
</div>
</div>
<div className="col-span-6">
<Chart
options={ChartData}
series={ChartData.series}
type="donut"
height='150px'
width='100%'
/>
</div>
</div>
</CardBox>
</>
);
};
export default YarlyBreakup;
Monthly Earning Chart
Monthly Earnings
$6,820
+9%
Component Code
Copy Code
"use client";
import Image from "next/image";
import React from "react";
import icon from "/public/images/svgs/icon-master-card-2.svg";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import { Icon } from "@iconify/react";
const MonthlyEarning = () => {
const ChartData: any = {
series: [
{
name: "",
data: [25, 66, 20, 40, 12, 58, 20],
},
],
chart: {
type: "area",
height: 80,
fontFamily: `inherit`,
foreColor: "#adb0bb",
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
group: "sparklines",
},
colors: ["var(--color-primary)"],
stroke: {
curve: "smooth",
width: 2,
},
fill: {
type: "gradient",
color: ["var(--color-primary)"],
gradient: {
shadeIntensity: 0,
inverseColors: false,
opacityFrom: 0.2,
opacityTo: 0.8,
stops: [100],
},
},
tooltip: {
theme: "dark",
x: {
format: "dd/MM/yy HH:mm",
},
},
};
return (
<>
<CardBox className="mt-[30px] p-0 overflow-hidden">
<div className="p-6">
<div className="flex justify-between items-center ">
<h5 className="card-title">Monthly Earnings</h5>
<div className="h-10 w-10 bg-lightprimary dark:bg-lightprimary rounded-md flex justify-center items-center">
<Image src={icon} alt="icon" />
</div>
</div>
<div className="flex items-center mb-3 mt-1 gap-2">
<h4 className="text-2xl">$6,820</h4>
<span className="rounded-full p-1 bg-lightsuccess dark:bg-lightsuccess text-success flex items-center justify-center ">
<Icon icon="solar:arrow-left-up-outline" height={15} />
</span>
<p className="text-ld text-sm mb-0">+9%</p>
</div>
</div>
<Chart
options={ChartData}
series={ChartData.series}
type="area"
height='80px'
width='100%'
/>
</CardBox>
</>
);
};
export default MonthlyEarning;
Yearly Sales Chart
Yearly Sales
Every month
Salary
$36,358
Expance
$5,296
Component Code
Copy Code
"use client";
import { Icon } from "@iconify/react";
import React from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import CardBox from "../../../shared/CardBox";
const YarlyBreakup = () => {
const ChartData: any = {
color: "#adb5bd",
series: [38, 40, 25],
labels: ["2023", "2022", "2025"],
chart: {
height: 150,
type: "donut",
fontFamily: "inherit",
foreColor: "#adb0bb",
},
plotOptions: {
pie: {
startAngle: 0,
endAngle: 360,
donut: {
size: "75%",
},
},
},
stroke: {
show: false,
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
colors: [
"var(--color-primary)",
"var(--color-lightprimary)",
"var(--color-lightsecondary)",
],
responsive: [
{
breakpoint: 991,
options: {
chart: {
width: 120,
},
},
},
],
tooltip: {
theme: "dark",
fillSeriesColor: false,
},
};
return (
<>
<CardBox>
<div className="grid grid-cols-12 gap-4 items-center">
<div className="col-span-6">
<h5 className="card-title mb-4">Yearly Breakup</h5>
<h6 className="text-xl">$36,358</h6>
<div className="flex items-center mb-3 mt-1 gap-2">
<span className="rounded-full p-1 bg-lightsuccess dark:bg-lightsuccess text-success flex items-center justify-center ">
<Icon icon="solar:arrow-left-up-outline" height={15} />
</span>
<p className="text-ld text-sm mb-0">+9%</p>
<p className=" mb-0 text-sm">last year</p>
</div>
<div className="flex gap-3 items-center mt-8">
<div className="flex gap-2 items-center">
<span className="h-2 w-2 rounded-full bg-primary"></span>
<span className="text-xs ">2023</span>
</div>
<div className="flex gap-2 items-center">
<span className="h-2 w-2 rounded-full bg-lightsecondary"></span>
<span className="text-xs ">2025</span>
</div>
</div>
</div>
<div className="col-span-6">
<Chart
options={ChartData}
series={ChartData.series}
type="donut"
height='150px'
width='100%'
/>
</div>
</div>
</CardBox>
</>
);
};
export default YarlyBreakup;
Current Year Chart
Current Year
$98,260
Component Code
Copy Code
"use client";
import React from "react";
import dynamic from "next/dynamic";
import CardBox from "@/app/components/shared/CardBox";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const CurrentYear = () => {
const ChartData: any = {
series: [55, 55, 55],
labels: ["Income", "Current", "Expance"],
chart: {
type: "donut",
height: 200,
fontFamily: `inherit`,
toolbar: {
show: false,
},
stacked: true,
sparkline: {
enabled: true,
},
},
colors: ["var(--color-primary)", "#EAEFF4", "var(--color-secondary)"],
plotOptions: {
pie: {
startAngle: 0,
endAngle: 360,
donut: {
size: "89%",
background: "transparent",
labels: {
show: true,
name: {
show: true,
offsetY: 7,
},
value: {
show: false,
},
total: {
show: true,
fontSize: "20px",
fontWeight: "600",
label: "$98,260",
},
},
},
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: false,
},
legend: {
show: false,
},
tooltip: {
theme: "dark",
fillSeriesColor: false,
},
};
return (
<CardBox>
<Chart
options={ChartData}
series={ChartData.series}
type="donut"
height='200px'
width='100%'
/>
<div className="flex justify-between items-end mt-4">
<div>
<p className="card-subtitle">Current Year</p>
<h5 className="text-xl">$98,260</h5>
</div>
<span className="text-success text-sm">+2.5%</span>
</div>
</CardBox>
);
};
export default CurrentYear;
Weekly Stats Chart
Weekly Stats
Average sales
Top Sales
Johnathan Doe
Best Seller
MaterialPro Admin
Most Commented
Ample Admin
Component Code
Copy Code
"use client"
import dynamic from "next/dynamic";
import { Icon } from "@iconify/react/dist/iconify.js";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import CardBox from "@/app/components/shared/CardBox";
import { Badge } from "flowbite-react";
const WeeklyStats = () => {
const ChartData: any = {
series: [
{
name: "Sales Per Week",
color: "var(--color-primary)",
data: [5, 15, 10, 20],
},
],
chart: {
id: "sparkline3",
type: "area",
height: 180,
sparkline: {
enabled: true,
},
group: "sparklines",
fontFamily: "inherit",
foreColor: "#adb0bb",
},
stroke: {
curve: "smooth",
width: 2,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 0,
inverseColors: false,
opacityFrom: 0.1,
opacityTo: 0,
stops: [20, 280],
},
},
markers: {
size: 0,
},
tooltip: {
theme: "dark",
fixed: {
enabled: true,
position: "right",
},
x: {
show: false,
},
},
};
const SalesData = [
{
key: "topSales",
title: "Top Sales",
subtitle: "Johnathan Doe",
badgeColor: "lightprimary",
bgcolor: "bg-lightprimary text-primary"
},
{
key: "topSeller",
title: "Best Seller",
subtitle: "MaterialPro Admin",
badgeColor: "lightsuccess",
bgcolor: "bg-lightsuccess text-success"
},
{
key: "topCommented",
title: " Most Commented",
subtitle: "Ample Admin",
badgeColor: "lighterror",
bgcolor: "bg-lighterror text-error"
}
]
return (
<CardBox>
<h5 className="card-title">Weekly Stats</h5>
<p className="card-subtitle">Average sales</p>
<div className="my-6">
<Chart
options={ChartData}
series={ChartData.series}
type="area"
height="170px"
width={"100%"}
/>
</div>
{SalesData.map((item) => {
return (
<div key={item.key} className="flex items-center justify-between mb-7 last:mb-0">
<div className="flex items-center gap-3">
<div className={`${item.bgcolor} h-10 w-10 flex justify-center items-center rounded-md`}>
<Icon icon="tabler:grid-dots" className=' text-xl' />
</div>
<div>
<h6 className="text-base">{item.title}</h6>
<p className=" dark:text-darklink ">{item.subtitle}</p>
</div>
</div>
<Badge color={`${item.badgeColor}`} className="py-1.1 rounded-md text-sm" >+68</Badge>
</div>
)
})}
</CardBox>
)
}
export default WeeklyStatsExpance Chart
Expance
$12,260
Component Code
Copy Code
"use client";
import React from "react";
import dynamic from "next/dynamic";
import CardBox from "@/app/components/shared/CardBox";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const ExpnaceChart = () => {
const ChartData: any = {
series: [
{
name: "",
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5],
},
{
name: "",
data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8],
},
],
chart: {
type: "bar",
height: 200,
fontFamily: `inherit`,
toolbar: {
show: false,
},
stacked: true,
sparkline: {
enabled: true,
},
},
colors: ["var(--color-secondary)", "var(--color-secondary)"],
plotOptions: {
bar: {
horizontal: false,
barHeight: "60%",
columnWidth: "20%",
borderRadius: [6],
borderRadiusApplication: "end",
borderRadiusWhenStacked: "all",
},
},
stroke: {
show: false,
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
grid: {
show: false,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
yaxis: {
min: -5,
max: 5,
tickAmount: 4,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
axisTicks: {
show: false,
},
},
tooltip: {
theme: "light",
},
};
return (
<CardBox>
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='200px'
width='100%'
/>
<div className="flex justify-between items-end mt-4">
<div>
<p className="card-subtitle">Expance</p>
<h5 className="text-xl">$12,260</h5>
</div>
<span className="text-success text-sm">+4.25%</span>
</div>
</CardBox>
);
};
export default ExpnaceChart;
Customer Chart
Customers
36,358
+9%
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import { Icon } from "@iconify/react";
const Customers = () => {
const ChartData: any = {
chart: {
id: "customers",
type: "area",
height: 80,
sparkline: {
enabled: true,
},
group: "customers",
fontFamily: "inherit",
foreColor: "#adb0bb",
},
series: [
{
name: "",
color: "var(--color-secondary)",
data: [30, 25, 35, 20, 30, 40],
},
],
stroke: {
curve: "smooth",
width: 2,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 0,
inverseColors: false,
opacityFrom: 0.1,
opacityTo: 0,
stops: [20, 180],
},
},
markers: {
size: 0,
},
tooltip: {
theme: "dark",
fixed: {
enabled: true,
position: "right",
},
x: {
show: false,
},
},
};
return (
<>
<CardBox className="overflow-hidden p-0">
<div className="p-6">
<p className="text-subtitle">Customers</p>
<h5 className="text-xl">36,358</h5>
<div className="flex items-center mt-1 gap-1.5">
<span className="rounded-full p-1 bg-lighterror dark:bg-lighterror text-error flex items-center justify-center ">
<Icon icon="solar:arrow-right-down-linear" height={15} />
</span>
<p className="text-ld text-sm mb-0">+9%</p>
</div>
</div>
<Chart
options={ChartData}
series={ChartData.series}
type="area"
height='80px'
width='100%'
/>
</CardBox>
</>
);
};
export default Customers;
Earned Chart
2,545
Earned
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const EarnedChart = () => {
const ChartData: any = {
series: [
{
name: "",
data: [0, 3, 1, 2, 8, 1, 5, 1],
},
],
chart: {
type: "area",
fontFamily: `inherit`,
foreColor: "#adb0bb",
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
group: "sparklines",
},
colors: ["var(--color-primary)"],
stroke: {
curve: "smooth",
width: 2,
},
fill: {
type: "gradient",
color: ["var(--color-primary)"],
gradient: {
shadeIntensity: 0,
inverseColors: false,
opacityFrom: 0.2,
opacityTo: 0.8,
stops: [100],
},
},
tooltip: {
theme: "dark",
x: {
format: "dd/MM/yy HH:mm",
},
},
};
return (
<>
<CardBox className="p-0 overflow-hidden">
<div className="flex justify-between p-6 items-end">
<div>
<h5 className="card-title">2,545</h5>
<p className="card-subtitle">Earned</p>
</div>
<span className="text-success text-sm">+1.20%</span>
</div>
<Chart
options={ChartData}
series={ChartData.series}
type="area"
height='90px'
width='100%'
/>
</CardBox>
</>
);
};
export default EarnedChart;
Follower Chart
2,545
Followers
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const FollowersChart = () => {
const ChartData: any = {
series: [
{
name: "",
data: [0, 150, 110, 240, 200, 200, 300, 200],
},
],
chart: {
type: "area",
fontFamily: `inherit`,
foreColor: "#adb0bb",
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
group: "sparklines",
},
colors: ["var(--color-primary)"],
stroke: {
curve: "smooth",
width: 2,
},
fill: {
type: "gradient",
color: ["var(--color-primary)"],
gradient: {
shadeIntensity: 0,
inverseColors: false,
opacityFrom: 0.2,
opacityTo: 0.8,
stops: [100],
},
},
tooltip: {
theme: "dark",
x: {
format: "dd/MM/yy HH:mm",
},
},
};
return (
<>
<CardBox className="p-0 overflow-hidden">
<div className="flex justify-between p-6 items-end">
<div>
<h5 className="card-title">2,545</h5>
<p className="card-subtitle">Followers</p>
</div>
<span className="text-success text-sm">+1.20%</span>
</div>
<Chart
options={ChartData}
series={ChartData.series}
type="area"
height='88px'
width='100%'
/>
</CardBox>
</>
);
};
export default FollowersChart;
Income Chart
Income
$25,260
Component Code
Copy Code
"use client";
import React from "react";
import dynamic from "next/dynamic";
import CardBox from "@/app/components/shared/CardBox";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const IncomeChart = () => {
const ChartData: any = {
series: [
{
name: "",
data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5],
},
{
name: "",
data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8],
},
],
chart: {
type: "bar",
height: 200,
fontFamily: `inherit`,
toolbar: {
show: false,
},
stacked: true,
sparkline: {
enabled: true,
},
},
colors: ["var(--color-primary)", "var(--color-primary)"],
plotOptions: {
bar: {
horizontal: false,
barHeight: "60%",
columnWidth: "20%",
borderRadius: [6],
borderRadiusApplication: "end",
borderRadiusWhenStacked: "all",
},
},
stroke: {
show: false,
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
grid: {
show: false,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
yaxis: {
min: -5,
max: 5,
tickAmount: 4,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
axisTicks: {
show: false,
},
},
tooltip: {
theme: "light",
},
};
return (
<CardBox>
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='200px'
width='100%'
/>
<div className="flex justify-between items-end mt-4">
<div>
<p className="card-subtitle">Income</p>
<p className="text-xl text-inherit">$25,260</p>
</div>
<span className="text-success text-sm">+1.20%</span>
</div>
</CardBox>
);
};
export default IncomeChart;
Most Visited Chart
Most Visited
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import { Select } from "flowbite-react";
const MostVisited = () => {
const ChartData: any = {
series:[
{
name: 'San Francisco',
data: [44, 55, 41, 67, 22, 43]
},
{
name: 'Diego',
data: [13, 23, 20, 8, 13, 27]
}
],
chart: {
height: 265,
type: 'bar',
fontFamily: 'inherit',
foreColor: '#adb0bb',
toolbar: {
show: false
},
stacked: true
},
colors: ["var(--color-primary)", "var(--color-secondary)"],
plotOptions: {
bar: {
borderRadius: [6],
horizontal: false,
barHeight: '60%',
columnWidth: '40%',
borderRadiusApplication: 'end',
borderRadiusWhenStacked: 'all'
}
},
stroke: {
show: false
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
grid: {
show: false,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
yaxis: {
tickAmount: 4
},
xaxis: {
categories: ['01', '02', '03', '04', '05', '06'],
axisTicks: {
show: false
}
},
tooltip: {
theme: 'dark',
fillSeriesColor: false,
x: {
show: false
}
}
}
return (
<>
<CardBox className="mt-[30px] overflow-hidden">
<div className="flex justify-between items-center ">
<h5 className="card-title">Most Visited</h5>
<Select id="countries" className="select-md" required>
<option>March 2025</option>
<option>April 2025</option>
<option>May 2025</option>
</Select>
</div>
<div className="rounded-bars -ms-4 mt-4">
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='265px'
width='100%'
/>
<div className="flex gap-5 justify-center items-center">
<div className="flex gap-2 items-center">
<span className="h-2 w-2 rounded-full bg-primary"></span>
<span className="text-sm">San Francisco</span>
</div>
<div className="flex gap-2 items-center">
<span className="h-2 w-2 rounded-full bg-secondary"></span>
<span className="text-sm">Diego</span>
</div>
</div>
</div>
</CardBox>
</>
);
};
export default MostVisited;
Page Impressions Chart
Page Impressions
$456,120
(Change Yesterday)
+9%
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import { Icon } from "@iconify/react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const PageImpression = () => {
const ChartData: any = {
series: [
{
name: "",
data: [20, 15, 30, 25, 10],
},
],
chart: {
toolbar: {
show: false,
},
height: 100,
type: "bar",
sparkline: {
enabled: true,
},
fontFamily: "inherit",
foreColor: "#adb0bb",
},
colors: [
"var(--color-lightsecondary)",
"var(--color-lightsecondary)",
"var(--color-secondary)",
"var(--color-lightsecondary)",
"var(--color-lightsecondary)",
],
plotOptions: {
bar: {
borderRadius: 3,
columnWidth: "64%",
distributed: true,
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
grid: {
yaxis: {
lines: {
show: false,
},
},
},
xaxis: {
axisBorder: {
show: false,
},
labels: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
labels: {
show: false,
},
},
tooltip: {
theme: "dark",
},
};
return (
<>
<CardBox className="mt-[30px] overflow-hidden">
<h5 className="card-title">Page Impressions</h5>
<div className="grid grid-cols-12 gap-4 items-center">
<div className="col-span-6">
<h6 className="text-xl">$456,120</h6>
<p className="text-darklink text-xs">(Change Yesterday)</p>
<div className="flex items-center mt-3 gap-2">
<span className="rounded-full p-1 bg-lighterror dark:bg-lighterror text-error flex items-center justify-center ">
<Icon icon="solar:arrow-right-down-linear" height={15} />
</span>
<p className="text-ld text-sm mb-0">+9%</p>
</div>
</div>
<div className="col-span-6">
<div className="-me-4">
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='100px'
width='100%'
/>
</div>
</div>
</div>
</CardBox>
</>
);
};
export default PageImpression;
Projects Chart
Projects
78,298
+9%
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
import { Icon } from "@iconify/react";
const Projects = () => {
const ChartData: any = {
series: [
{
name: "",
data: [4, 10, 9, 7, 9, 10],
},
],
chart: {
toolbar: {
show: false,
},
height: 75,
type: "bar",
sparkline: {
enabled: true,
},
fontFamily: "inherit",
foreColor: "#adb0bb",
offsetX: -5,
},
colors: [
"var(--color-primary)",
"var(--color-primary)",
"var(--color-primary)",
"var(--color-primary)",
"var(--color-primary)",
"var(--color-primary)",
],
plotOptions: {
bar: {
borderRadius: 2,
columnWidth: "40%",
distributed: true,
endingShape: "rounded",
borderRadiusApplication: "end",
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
grid: {
yaxis: {
lines: {
show: false,
},
},
},
xaxis: {
axisBorder: {
show: false,
},
labels: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
labels: {
show: false,
},
},
tooltip: {
theme: "dark",
},
};
return (
<>
<CardBox className="overflow-hidden">
<div>
<p className="text-subtitle">Projects</p>
<h5 className="text-xl">78,298</h5>
<div className="flex items-center mt-1 gap-1.5">
<span className="rounded-full p-1 bg-lightsuccess dark:bg-lightsuccess text-success flex items-center justify-center ">
<Icon icon="solar:arrow-left-up-outline" height={15} />
</span>
<p className="text-ld text-sm mb-0">+9%</p>
</div>
</div>
<div className="rounded-bars mt-2">
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='75px'
width='100%'
/>
</div>
</CardBox>
</>
);
};
export default Projects;
Sales Overview Chart
Sales Overview
Every Month
$23,450
Salary
$23,450
Expance
Component Code
Copy Code
"use client"
import { useState } from "react"
import { Button, Select } from "flowbite-react"
import CardBox from "@/app/components/shared/CardBox";
import dynamic from "next/dynamic";
import { Icon } from "@iconify/react/dist/iconify.js";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const RevenueUpdate = () => {
const [selectedMonth, setSelectedMonth] = useState("March 2025");
// Chart data for each month
const chartDataByMonth: Record<string, any> = {
"March 2025": {
series: [
{ name: "Earnings this month", data: [1.5, 2.7, 2.2, 3.6, 1.5, 1.0] },
{ name: "Expense this month", data: [-1.8, -1.1, -2.5, -1.5, -0.6, -1.8] },
],
xaxis: {
categories: ["16/08", "17/08", "18/08", "19/08", "20/08", "21/08"]
}
},
"April 2025": {
series: [
{ name: "Earnings this month", data: [2.0, 2.5, 2.8, 3.2, 2.0, 1.5] },
{ name: "Expense this month", data: [-1.2, -1.5, -2.0, -1.0, -0.8, -1.3] },
],
xaxis: {
categories: ["16/09", "17/09", "18/09", "19/09", "20/09", "21/09"]
}
},
"May 2025": {
series: [
{ name: "Earnings this month", data: [1.8, 2.2, 2.6, 3.0, 1.7, 1.2] },
{ name: "Expense this month", data: [-1.5, -1.3, -2.2, -1.2, -0.7, -1.6] },
],
xaxis: {
categories: ["16/10", "17/10", "18/10", "19/10", "20/10", "21/10"]
}
},
"June 2025": {
series: [
{ name: "Earnings this month", data: [2.1, 2.9, 2.4, 3.4, 2.1, 1.3] },
{ name: "Expense this month", data: [-1.7, -1.0, -2.3, -1.7, -0.5, -1.7] },
],
xaxis: {
categories: ["16/11", "17/11", "18/11", "19/11", "20/11", "21/11"]
}
},
};
// Base chart options (shared)
const baseChartOptions = {
chart: {
toolbar: { show: false },
type: "bar" as const,
fontFamily: "inherit",
foreColor: "#adb0bb",
height: 310,
stacked: true,
width: "100%",
offsetX: -20,
animations: {
enabled: true,
easing: 'easeinout' as const,
speed: 800,
animateGradually: {
enabled: true,
delay: 150,
},
dynamicAnimation: {
enabled: true,
speed: 800,
},
},
},
colors: ["var(--color-primary)", "var(--color-secondary)"],
plotOptions: {
bar: {
horizontal: false,
barHeight: "60%",
columnWidth: "20%",
borderRadius: 6,
borderRadiusApplication: 'end',
borderRadiusWhenStacked: 'all',
} satisfies {
borderRadiusApplication?: 'end' | 'around';
borderRadiusWhenStacked?: 'all';
horizontal?: boolean;
barHeight?: string;
columnWidth?: string;
borderRadius?: number;
},
},
dataLabels: { enabled: false },
legend: { show: false },
grid: {
borderColor: "rgba(0,0,0,0.1)",
strokeDashArray: 3,
},
yaxis: { min: -4, max: 4, tickAmount: 4 },
tooltip: { theme: "dark" },
};
// Merge base options with month-specific data
const ChartData = {
...baseChartOptions,
xaxis: chartDataByMonth[selectedMonth].xaxis,
};
return (
<>
<CardBox>
<>
<div className="sm:flex items-center justify-between mb-6">
<div>
<h5 className="card-title">Revenue Updates</h5>
<p className="card-subtitle">Overview of profit</p>
</div>
<div className="sm:mt-0 mt-4">
<Select
className="form-control select-md"
value={selectedMonth}
onChange={e => setSelectedMonth(e.target.value)}
>
<option>March 2025</option>
<option>April 2025</option>
<option>May 2025</option>
<option>June 2025</option>
</Select>
</div>
</div>
<div className="grid grid-cols-12 gap-6">
<div className="lg:col-span-8 md:col-span-8 sm:col-span-12 col-span-12">
<div className="-me-6">
<Chart
options={ChartData}
series={chartDataByMonth[selectedMonth].series}
type="bar"
height="316px"
width={"100%"}
/>
</div>
</div>
<div className="lg:col-span-4 md:col-span-4 sm:col-span-12 col-span-12">
<div className="flex items-center gap-4 pt-6">
<div className="bg-lightprimary dark:bg-darkprimary shrink-0 h-10 w-10 flex justify-center items-center rounded-md">
<Icon icon="tabler:grid-dots" className="text-xl text-primary" />
</div>
<div>
<h4 className="text-2xl text-dark dark:text-white font-semibold">
$63,489.50
</h4>
<p>Total Earnings</p>
</div>
</div>
<div className="flex items-baseline gap-3 pt-9">
<i className="h-2 w-2 rounded-full bg-primary" />
<div>
<p>Earnings this month</p>
<h6 className="text-lg">$48,820</h6>
</div>
</div>
<div className="flex items-baseline gap-3 pt-5">
<i className="h-2 w-2 rounded-full bg-secondary" />
<div>
<p>Expense this month</p>
<h6 className="text-lg">$26,498</h6>
</div>
</div>
<a href="/assets/revenue_expense_report.csv" download >
<Button color="primary" className="mt-7 rounded-md capitalize w-full" >
view full report
</Button>
</a>
</div>
</div>
</>
</CardBox>
</>
)
}
export default RevenueUpdateTotal Earning Chart
Total Earning
$78,298
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const TotalEarning = () => {
const ChartData: any = {
series: [
{
name: "projects",
data: [4, 10, 9, 7, 9, 10, 11, 8, 10, 12, 9],
},
],
chart: {
type: "bar",
height: 55,
fontFamily: `inherit`,
sparkline: {
enabled: true,
},
},
colors: ["var(--color-secondary)"],
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: "60%",
distributed: true,
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2.5,
colors: ["rgba(0,0,0,0.01)"],
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
labels: {
show: false,
},
},
axisBorder: {
show: false,
},
fill: {
opacity: 1,
},
tooltip: {
theme: "dark",
x: {
show: false,
},
},
};
return (
<>
<CardBox className="overflow-hidden">
<div className="flex justify-between items-end">
<div>
<p className="card-subtitle">Total Earning</p>
<h5 className="card-title">$78,298</h5>
</div>
</div>
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='55px'
width='100%'
className="mt-8"
/>
</CardBox>
</>
);
};
export default TotalEarning;
Views Chart
15,480
Views
Component Code
Copy Code
"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const ViewsChart = () => {
const ChartData: any = {
series: [
{
name: '',
data: [20, 15, 30, 25, 10, 18, 20, 15, 12, 10]
}
],
chart: {
type: 'bar',
height: 80,
fontFamily: `inherit`,
sparkline: {
enabled: true
}
},
colors: ['var(--color-lightsecondary)', 'var(--color-lightsecondary)', 'var(--color-secondary)', 'var(--color-lightsecondary)', 'var(--color-lightsecondary)', 'var(--color-lightsecondary)'],
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: '50%',
distributed: true,
endingShape: 'rounded'
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
grid: {
show: false,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
xaxis: {
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
theme: 'dark'
}
};
return (
<>
<CardBox className="overflow-hidden">
<div className="flex justify-between items-end">
<div>
<h5 className="card-title">15,480</h5>
<p className="card-subtitle">Views</p>
</div>
<span className="text-error text-sm">-4.150%</span>
</div>
<Chart
options={ChartData}
series={ChartData.series}
type="bar"
height='80px'
width='100%'
className="mt-2"
/>
</CardBox>
</>
);
};
export default ViewsChart;