Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
Responsive dashboard widgets based on React Grid Layout.
"use client"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
import { ResponsiveDashboardGrid } from "@/components/dashboards/responsive-dashboard-grid"
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
import { Layout } from "react-grid-layout/legacy"
const widgets = [
{ i: "stats-1", x: 0, y: 0, w: 4, h: 2, title: "Total Revenue" },
{ i: "stats-2", x: 4, y: 0, w: 4, h: 2, title: "Active Users" },
{ i: "stats-3", x: 8, y: 0, w: 4, h: 2, title: "Bounce Rate" },
{ i: "chart-1", x: 0, y: 2, w: 8, h: 6, title: "Revenue Overview" },
{ i: "list-1", x: 8, y: 2, w: 4, h: 6, title: "Recent Activity" },
]
export function WidgetLayout01() {
return (
<ResponsiveDashboardGrid
layouts={{ lg: widgets as unknown as Layout }}
className="w-full"
isResizable={false}
isDraggable={false}
>
{widgets.map((widget) => (
<div key={widget.i}>
<DashboardWidgetWrapper className="p-4">
<div className="mb-4 text-sm font-medium text-muted-foreground">
{widget.title}
</div>
{widget.i.startsWith("stats") && (
<div className="text-3xl font-bold">$45,231.89</div>
)}
{widget.i === "chart-1" && (
<div className="h-[200px] w-full mt-4">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={[
{ name: "Jan", total: Math.floor(Math.random() * 5000) + 1000 },
{ name: "Feb", total: Math.floor(Math.random() * 5000) + 1000 },
{ name: "Mar", total: Math.floor(Math.random() * 5000) + 1000 },
{ name: "Apr", total: Math.floor(Math.random() * 5000) + 1000 },
{ name: "May", total: Math.floor(Math.random() * 5000) + 1000 },
{ name: "Jun", total: Math.floor(Math.random() * 5000) + 1000 },
]}>
<XAxis
dataKey="name"
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
/>
<YAxis
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
tickFormatter={(value) => `$${value}`}
/>
<Bar
dataKey="total"
fill="currentColor"
radius={[4, 4, 0, 0]}
className="fill-primary"
/>
</BarChart>
</ResponsiveContainer>
</div>
)}
{widget.i === "list-1" && (
<div className="space-y-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="flex items-center gap-4">
<div className="h-2 w-2 rounded-full bg-blue-500" />
<div className="space-y-1">
<p className="text-sm font-medium leading-none">
New user registered
</p>
<p className="text-xs text-muted-foreground">
{i + 2} minutes ago
</p>
</div>
</div>
))}
</div>
)}
</DashboardWidgetWrapper>
</div>
))}
</ResponsiveDashboardGrid>
)
}
"use client"
import { useMemo } from "react"
import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, XAxis } from "recharts"
import { intervalToDuration } from "date-fns"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/components/ui/chart"
import {
DashboardCardActionsDropdown,
DashboardOverviewCardV3,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
import { formatDuration, formatPercent } from "@/lib/utils"
// --- Mock Data ---
interface OverviewType {
uniqueVisitors: {
averageValue: number
percentageChange: number
perMonth: { month: string; value: number }[]
}
averageSessionDuration: {
averageValue: number
percentageChange: number
perMonth: { month: string; value: number; fill: string }[]
}
bounceRate: {
averageValue: number
percentageChange: number
perMonth: { month: string; value: number }[]
}
conversionRate: {
averageValue: number
percentageChange: number
perMonth: { month: string; value: number }[]
}
}
export const overviewData: OverviewType = {
uniqueVisitors: {
averageValue: 15091.67,
percentageChange: 0.07,
perMonth: [
{ month: "January", value: 12000 },
{ month: "February", value: 16000 },
{ month: "March", value: 15050 },
{ month: "April", value: 14000 },
{ month: "May", value: 17500 },
{ month: "June", value: 16000 },
],
},
averageSessionDuration: {
averageValue: 73333.33,
percentageChange: -0.04,
perMonth: [
{ month: "January", value: 110000, fill: "var(--chart-1)" },
{ month: "February", value: -90000, fill: "var(--chart-2)" },
{ month: "March", value: 220000, fill: "var(--chart-1)" },
{ month: "April", value: -130000, fill: "var(--chart-2)" },
{ month: "May", value: 135000, fill: "var(--chart-1)" },
{ month: "June", value: 195000, fill: "var(--chart-1)" },
],
},
bounceRate: {
averageValue: 0.5933,
percentageChange: 0.05,
perMonth: [
{ month: "January", value: 0.12 },
{ month: "February", value: 0.55 },
{ month: "March", value: 0.68 },
{ month: "April", value: 0.48 },
{ month: "May", value: 0.7 },
{ month: "June", value: 0.53 },
],
},
conversionRate: {
averageValue: 0.5631,
percentageChange: 0.038,
perMonth: [
{ month: "January", value: 0.4 },
{ month: "February", value: 0.48 },
{ month: "March", value: 0.43 },
{ month: "April", value: 0.6 },
{ month: "May", value: 0.52 },
{ month: "June", value: 0.75 },
],
},
}
// --- Hooks ---
function useIsRtl() {
// Simplified for this demo
return false
}
function useRadius() {
return 8
}
// --- Chart Components ---
// 1. Unique Visitors Chart
const uniqueVisitorsConfig = {
value: {
label: "Visitors",
},
} satisfies ChartConfig
function UniqueVisitorsChart({
data,
}: {
data: OverviewType["uniqueVisitors"]["perMonth"]
}) {
const isRtl = useIsRtl()
return (
<ChartContainer
config={uniqueVisitorsConfig}
className="h-32 w-full rounded-b-md overflow-hidden"
>
<AreaChart
accessibilityLayer
data={data}
margin={{
left: 0,
right: 0,
}}
>
<CartesianGrid vertical={false} />
<XAxis
reversed={isRtl}
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
hide
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
<Area
dataKey="value"
type="natural"
fill="var(--chart-1)"
fillOpacity={0.4}
stroke="var(--chart-1)"
/>
</AreaChart>
</ChartContainer>
)
}
function UniqueVisitors({
data,
}: {
data: OverviewType["uniqueVisitors"]
}) {
return (
<DashboardOverviewCardV3
data={{
value: data.averageValue,
percentageChange: data.percentageChange,
}}
title="Unique Visitors"
action={<DashboardCardActionsDropdown />}
chart={<UniqueVisitorsChart data={data.perMonth} />}
/>
)
}
// 2. Average Session Duration Chart
const avgSessionConfig = {
value: {
label: "Duration",
},
} satisfies ChartConfig
function ModifiedDurationTooltipContent(props: any) {
if (!props.payload || props.payload.length === 0) return null
return (
<ChartTooltipContent
{...props}
payload={props.payload.map((item: any) => ({
...item,
value: formatDuration(Number(item.value)),
}))}
/>
)
}
function AverageSessionDurationChart({
data,
}: {
data: OverviewType["averageSessionDuration"]["perMonth"]
}) {
const isRtl = useIsRtl()
const radius = useRadius()
return (
<ChartContainer
config={avgSessionConfig}
className="h-32 w-full rounded-b-md overflow-hidden"
>
<BarChart accessibilityLayer data={data}>
<CartesianGrid vertical={false} />
<ChartTooltip
cursor={false}
content={<ModifiedDurationTooltipContent />}
/>
<XAxis reversed={isRtl} dataKey="month" hide />
<Bar dataKey="value" barSize={44} radius={radius} />
</BarChart>
</ChartContainer>
)
}
function AverageSessionDuration({
data,
}: {
data: OverviewType["averageSessionDuration"]
}) {
return (
<DashboardOverviewCardV3
data={{
value: data.averageValue,
percentageChange: data.percentageChange,
}}
title="Avg. Session Duration"
action={<DashboardCardActionsDropdown />}
chart={<AverageSessionDurationChart data={data.perMonth} />}
formatStyle="duration"
/>
)
}
// 3. Bounce Rate Chart
const bounceRateConfig = {
value: {
label: "Rate",
},
} satisfies ChartConfig
function ModifiedPercentTooltipContent(props: any) {
if (!props.payload || props.payload.length === 0) return null
return (
<ChartTooltipContent
{...props}
payload={props.payload.map((item: any) => ({
...item,
value: formatPercent(Number(item.value)),
}))}
/>
)
}
function BounceRateChart({
data,
}: {
data: OverviewType["bounceRate"]["perMonth"]
}) {
const isRtl = useIsRtl()
return (
<ChartContainer
config={bounceRateConfig}
className="h-32 w-full rounded-b-md overflow-hidden"
>
<LineChart
accessibilityLayer
data={data}
margin={{
left: 0,
right: 0,
}}
>
<CartesianGrid vertical={false} />
<XAxis reversed={isRtl} dataKey="month" hide />
<ChartTooltip
cursor={false}
content={<ModifiedPercentTooltipContent />}
/>
<Line
dataKey="value"
type="linear"
stroke="var(--chart-3)"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ChartContainer>
)
}
function BounceRate({ data }: { data: OverviewType["bounceRate"] }) {
return (
<DashboardOverviewCardV3
data={{
value: data.averageValue,
percentageChange: data.percentageChange,
}}
title="Bounce Rate"
action={<DashboardCardActionsDropdown />}
chart={<BounceRateChart data={data.perMonth} />}
formatStyle="percent"
/>
)
}
// 4. Conversion Rate Chart
const conversionRateConfig = {
value: {
label: "Rate",
},
} satisfies ChartConfig
function ConversionRateChart({
data,
}: {
data: OverviewType["conversionRate"]["perMonth"]
}) {
const isRtl = useIsRtl()
return (
<ChartContainer
config={conversionRateConfig}
className="h-32 w-full rounded-b-md overflow-hidden"
>
<AreaChart
accessibilityLayer
data={data}
margin={{
left: 0,
right: 0,
}}
>
<CartesianGrid vertical={false} />
<XAxis reversed={isRtl} dataKey="month" hide />
<ChartTooltip
cursor={false}
content={<ModifiedPercentTooltipContent />}
/>
<Area
dataKey="value"
type="step"
fill="var(--chart-4)"
stroke="var(--chart-4)"
strokeWidth={2}
dot={false}
/>
</AreaChart>
</ChartContainer>
)
}
function ConversionRate({
data,
}: {
data: OverviewType["conversionRate"]
}) {
return (
<DashboardOverviewCardV3
data={{
value: data.averageValue,
percentageChange: data.percentageChange,
}}
title="Conversion Rate"
action={<DashboardCardActionsDropdown />}
chart={<ConversionRateChart data={data.perMonth} />}
formatStyle="percent"
/>
)
}
// --- Main Widget Component ---
export function WidgetAnalyticsOverview() {
return (
<DashboardWidgetWrapper>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:col-span-full md:grid-cols-4">
<UniqueVisitors data={overviewData.uniqueVisitors} />
<AverageSessionDuration data={overviewData.averageSessionDuration} />
<BounceRate data={overviewData.bounceRate} />
<ConversionRate data={overviewData.conversionRate} />
</div>
</DashboardWidgetWrapper>
)
}
"use client"
import { UniversalWidget } from "@/components/dashboards/universal-widget"
import { WidgetDefinition } from "@/types/infoshard-schema"
const definition: WidgetDefinition = {
title: "Traffic Sources",
dataSource: {
provider: "infoshard",
uri: "infoshard://analytics/traffic-data",
},
visualization: {
// We rely on the InfoShard's 'x-visualization-hints'
// to define the type ('composite') and the config (colors, columns).
// This makes the definition extremely lightweight.
type: "composite"
}
}
export function WidgetTrafficSources() {
return <UniversalWidget definition={definition} />
}
"use client"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import {
ChartContainer,
type ChartConfig,
} from "@/components/ui/chart"
import {
DashboardCard,
DashboardCardActionsDropdown,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
// --- Mock Data ---
interface FunnelStep {
name: string
value: number
}
interface ConversionFunnelType {
period: string
funnelSteps: FunnelStep[]
}
export const conversionFunnelData: ConversionFunnelType = {
period: "Last month",
funnelSteps: [
{
name: "Visited Page",
value: 15000,
},
{
name: "Added to Cart",
value: 5000,
},
{
name: "Initiated Checkout",
value: 1000,
},
{
name: "Completed Purchase",
value: 300,
},
],
}
// --- Hooks ---
function useIsRtl() {
return false
}
// --- Chart Component ---
function ConversionFunnelChart({
data,
}: {
data: ConversionFunnelType["funnelSteps"]
}) {
const isRtl = useIsRtl()
return (
<ChartContainer config={{}} className="aspect-video h-40 w-full">
<AreaChart
accessibilityLayer
data={data}
margin={{
left: 0,
right: 0,
}}
>
<CartesianGrid vertical={false} />
<XAxis reversed={isRtl} dataKey="name" hide />
<Area
dataKey="value"
type="step" // Changed to step as 'bump' might not be standard Recharts or requires special handling
// Upstream used type="bump", verify if recharts supports it natively or via curve function
// Assuming "monotone" or "step" for now to be safe, or "bump" if using latest recharts
// Let's use "monotone" for safer rendering or "step" for funnel look
activeDot={false}
fill="var(--chart-2)"
fillOpacity={0.4}
stroke="var(--chart-2)"
/>
</AreaChart>
</ChartContainer>
)
}
// --- List/Item Components ---
function ConversionFunnelItem({
data,
}: {
data: ConversionFunnelType["funnelSteps"][number]
}) {
return (
<li className="flex flex-col items-center text-center">
<p className="text-xl font-semibold sm:text-2xl">
{data.value.toLocaleString()}
</p>
<h3 className="text-sm text-muted-foreground">{data.name}</h3>
</li>
)
}
function ConversionFunnelList({
data,
}: {
data: ConversionFunnelType["funnelSteps"]
}) {
return (
<ul
style={{
gridTemplateColumns: `repeat(${data.length}, 1fr)`,
}}
className="w-full grid gap-x-3 px-6"
>
{data.map((stage) => (
<ConversionFunnelItem key={stage.name} data={stage} />
))}
</ul>
)
}
// --- Main Component ---
export function WidgetConversionFunnel() {
return (
<DashboardWidgetWrapper>
<DashboardCard
title="Conversion Funnel"
period={conversionFunnelData.period}
action={<DashboardCardActionsDropdown />}
className="overflow-hidden"
contentClassName="p-0"
size="sm"
>
<ConversionFunnelList data={conversionFunnelData.funnelSteps} />
<ConversionFunnelChart data={conversionFunnelData.funnelSteps} />
</DashboardCard>
</DashboardWidgetWrapper>
)
}
"use client"
import { BadgePercent, HandCoins, Users } from "lucide-react"
import {
DashboardCardActionsDropdown,
DashboardOverviewCard,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
// --- Mock Data ---
const overviewData = {
totalSales: {
period: "Last month",
value: 1234567,
percentageChange: 5.9,
},
totalProfit: {
period: "Last month",
value: 345678,
percentageChange: -0.2,
},
revenueGrowth: {
period: "Last month",
value: 789123,
percentageChange: 7.3,
},
newCustomers: {
period: "Last month",
value: 456,
percentageChange: 12.4,
},
}
export function WidgetCrmOverview() {
return (
<DashboardWidgetWrapper>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:col-span-full md:grid-cols-4">
<DashboardOverviewCard
data={overviewData.totalSales}
title="Total Sales"
period={overviewData.totalSales.period}
action={<DashboardCardActionsDropdown />}
icon={BadgePercent}
formatStyle="currency"
/>
<DashboardOverviewCard
data={overviewData.totalProfit}
title="Total Profit"
period={overviewData.totalProfit.period}
action={<DashboardCardActionsDropdown />}
icon={HandCoins}
formatStyle="currency"
/>
<DashboardOverviewCard
data={overviewData.revenueGrowth}
title="Revenue Growth"
period={overviewData.revenueGrowth.period}
action={<DashboardCardActionsDropdown />}
icon={HandCoins}
formatStyle="currency"
/>
<DashboardOverviewCard
data={overviewData.newCustomers}
title="New Customers"
period={overviewData.newCustomers.period}
action={<DashboardCardActionsDropdown />}
icon={Users}
/>
</div>
</DashboardWidgetWrapper>
)
}
"use client"
import { useState } from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/components/ui/chart"
import { Button } from "@/components/ui/button"
import {
DashboardCard,
DashboardCardActionsDropdown,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
import { cn } from "@/lib/utils"
// --- Mock Data ---
interface SalesTrendType {
period: string
summary: {
totalLead: number
totalProposal: number
totalNegotiation: number
totalClosed: number
}
monthly: {
month: string
lead: number
proposal: number
negotiation: number
closed: number
}[]
}
const salesTrendData: SalesTrendType = {
period: "Last year",
summary: {
totalLead: 2200,
totalProposal: 1550,
totalNegotiation: 900,
totalClosed: 700,
},
monthly: [
{ month: "January", lead: 250, proposal: 200, negotiation: 80, closed: 50 },
{
month: "February",
lead: 230,
proposal: 190,
negotiation: 70,
closed: 55,
},
{ month: "March", lead: 200, proposal: 180, negotiation: 75, closed: 60 },
{ month: "April", lead: 180, proposal: 160, negotiation: 85, closed: 65 },
{ month: "May", lead: 190, proposal: 140, negotiation: 90, closed: 50 },
{ month: "June", lead: 170, proposal: 130, negotiation: 95, closed: 45 },
{ month: "July", lead: 160, proposal: 120, negotiation: 100, closed: 70 },
{ month: "August", lead: 150, proposal: 130, negotiation: 110, closed: 80 },
{
month: "September",
lead: 200,
proposal: 150,
negotiation: 120,
closed: 90,
},
{
month: "October",
lead: 220,
proposal: 170,
negotiation: 100,
closed: 85,
},
{
month: "November",
lead: 240,
proposal: 190,
negotiation: 70,
closed: 70,
},
{
month: "December",
lead: 210,
proposal: 220,
negotiation: 100,
closed: 80,
},
],
}
// --- Hooks ---
function useIsRtl() {
return false
}
function useRadius() {
return 8
}
// --- Chart Component ---
const chartConfig = {
lead: {
label: "Lead",
color: "var(--chart-1)",
},
proposal: {
label: "Proposal",
color: "var(--chart-2)",
},
negotiation: {
label: "Negotiation",
color: "var(--chart-3)",
},
closed: {
label: "Closed",
color: "var(--chart-4)",
},
} satisfies ChartConfig
function SalesTrendChart({ data }: { data: SalesTrendType }) {
const [activeChart, setActiveChart] =
useState<keyof typeof chartConfig>("lead")
const isRtl = useIsRtl()
const radius = useRadius()
const { monthly, summary } = data
return (
<>
<div className="grid grid-cols-2 gap-2 md:grid-cols-4">
{Object.entries(summary).map(([key, value]) => {
const stage = key
.replace("total", "")
.toLowerCase() as keyof typeof chartConfig
return (
<Button
key={key}
variant="outline"
className={cn(
"size-auto flex-col items-start gap-0 p-3 h-auto",
activeChart === stage && "bg-accent"
)}
onClick={() => setActiveChart(stage)}
>
<div className="flex items-center gap-x-1 mb-1">
<span
style={{
backgroundColor: chartConfig[stage].color,
}}
className="h-2.5 w-2.5 rounded-sm"
/>
<span className="text-sm text-muted-foreground">
{chartConfig[stage].label}
</span>
</div>
<span className="text-2xl font-semibold">
{value.toLocaleString()}
</span>
</Button>
)
})}
</div>
<ChartContainer config={chartConfig} className="grow aspect-auto w-full h-[300px] mt-4">
<BarChart
accessibilityLayer
key={activeChart}
data={monthly}
margin={{ top: 0, bottom: 0 }}
>
<CartesianGrid vertical={false} />
<XAxis
reversed={isRtl}
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="dot" />}
/>
<Bar
dataKey={activeChart}
maxBarSize={44}
fill={chartConfig[activeChart].color}
radius={radius}
/>
</BarChart>
</ChartContainer>
</>
)
}
export function WidgetCrmSalesTrend() {
return (
<DashboardWidgetWrapper>
<DashboardCard
title="Sales Trend"
period={salesTrendData.period}
action={<DashboardCardActionsDropdown />}
className="col-span-full"
>
<SalesTrendChart data={salesTrendData} />
</DashboardCard>
</DashboardWidgetWrapper>
)
}
"use client"
import { BadgePercent, HandCoins, ShoppingBag } from "lucide-react"
import {
DashboardCardActionsDropdown,
DashboardOverviewCardV2,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
// --- Mock Data ---
const overviewData = {
totalSales: {
value: 1243000,
percentageChange: 0.08,
period: "Last month",
},
revenueSummary: {
value: 952000,
percentageChange: 0.05,
period: "Last month",
},
numberOfOrders: {
value: 256,
percentageChange: 0.12,
period: "Last month",
},
averageOrderValue: {
value: 4648,
percentageChange: -0.03,
period: "Last month",
},
}
export function WidgetEcommerceOverview() {
return (
<DashboardWidgetWrapper>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:col-span-full md:grid-cols-4">
<DashboardOverviewCardV2
data={overviewData.totalSales}
title="Total Sales"
period={overviewData.totalSales.period}
action={<DashboardCardActionsDropdown />}
icon={BadgePercent}
formatStyle="currency"
/>
<DashboardOverviewCardV2
data={overviewData.revenueSummary}
title="Revenue Summary"
period={overviewData.revenueSummary.period}
action={<DashboardCardActionsDropdown />}
icon={HandCoins}
formatStyle="currency"
/>
<DashboardOverviewCardV2
data={overviewData.numberOfOrders}
title="Number of Orders"
period={overviewData.numberOfOrders.period}
action={<DashboardCardActionsDropdown />}
icon={ShoppingBag}
/>
<DashboardOverviewCardV2
data={overviewData.averageOrderValue}
title="Avg. Order Value"
period={overviewData.averageOrderValue.period}
action={<DashboardCardActionsDropdown />}
icon={HandCoins}
formatStyle="currency"
/>
</div>
</DashboardWidgetWrapper>
)
}
"use client"
import { Bar, BarChart, XAxis, YAxis } from "recharts"
import {
DashboardCard,
DashboardCardActionsDropdown,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
import { ChartContainer } from "@/components/ui/chart"
import { Badge } from "@/components/ui/badge"
import { PercentageChangeBadge } from "@/components/dashboards/percentage-change-badge"
import { formatCurrency, formatPercent } from "@/lib/utils"
// --- Mock Data ---
interface RevenueBySourceType {
period: string
summary: {
totalRevenue: number
percentageChange: number
}
sources: {
name: string
value: number
percentage: number
fill: string
}[]
}
const revenueBySourceData: RevenueBySourceType = {
period: "Last year",
summary: {
totalRevenue: 1000000,
percentageChange: 0.08,
},
sources: [
{
name: "Direct",
value: 250000,
percentage: 0.26,
fill: "var(--chart-1)",
},
{
name: "Organic Search",
value: 320000,
percentage: 0.33,
fill: "var(--chart-2)",
},
{
name: "Paid Ads",
value: 180000,
percentage: 0.19,
fill: "var(--chart-3)",
},
{
name: "Social Media",
value: 120000,
percentage: 0.12,
fill: "var(--chart-4)",
},
{
name: "Referrals",
value: 82000,
percentage: 0.08,
fill: "var(--chart-5)",
},
{
name: "Email Marketing",
value: 48000,
percentage: 0.05,
fill: "var(--muted-foreground)",
},
],
}
// --- Hooks ---
function useIsRtl() {
return false
}
function useRadius() {
return 8
}
// --- Components ---
function RevenueBySourceChart({
data,
}: {
data: RevenueBySourceType["sources"]
}) {
const isRtl = useIsRtl()
const radius = useRadius()
const chartData = data.reduce((acc: { [key: string]: number }, source) => {
acc[source.name.toLocaleLowerCase()] = source.value
return acc
}, {})
return (
<ChartContainer config={{}} className="h-4 w-full">
<BarChart
accessibilityLayer
data={[chartData]}
layout="vertical"
margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
>
<XAxis type="number" reversed={isRtl} hide />
<YAxis type="category" hide />
{data.map((item) => (
<Bar
key={item.name}
dataKey={item.name.toLocaleLowerCase()}
stackId="a"
fill={item.fill}
radius={radius}
/>
))}
</BarChart>
</ChartContainer>
)
}
function RevenueBySourceItem({
data,
}: {
data: RevenueBySourceType["sources"][number]
}) {
return (
<li className="flex justify-between items-center gap-x-2">
<div className="flex items-center gap-x-1">
<div
style={{
backgroundColor: data.fill,
}}
className="h-2.5 w-2.5 rounded-md"
/>
<h4 className="text-sm">{data.name}</h4>
</div>
<div className="inline-flex items-center gap-x-1">
<p className="font-semibold">{formatCurrency(data.value)}</p>
<Badge
style={{
backgroundColor: data.fill,
}}
className="w-12 justify-center"
>
{formatPercent(data.percentage)}
</Badge>
</div>
</li>
)
}
function RevenueBySourceList({
data,
}: {
data: RevenueBySourceType["sources"]
}) {
return (
<ul className="space-y-1">
{data.map((item) => (
<RevenueBySourceItem key={item.name} data={item} />
))}
</ul>
)
}
function RevenueBySourceSummary({
data,
}: {
data: RevenueBySourceType["summary"]
}) {
return (
<div className="flex items-end gap-x-1">
<p className="text-2xl font-semibold">
{formatCurrency(data.totalRevenue)}
</p>
<PercentageChangeBadge
value={data.percentageChange}
variant="ghost"
className="p-0"
/>
</div>
)
}
export function WidgetEcommerceRevenueBySource() {
return (
<DashboardWidgetWrapper>
<DashboardCard
title="Revenue by Source"
period={revenueBySourceData.period}
action={<DashboardCardActionsDropdown />}
size="sm"
contentClassName="gap-y-3"
>
<RevenueBySourceSummary data={revenueBySourceData.summary} />
<RevenueBySourceChart data={revenueBySourceData.sources} />
<RevenueBySourceList data={revenueBySourceData.sources} />
</DashboardCard>
</DashboardWidgetWrapper>
)
}
"use client"
import Image from "next/image"
import {
DashboardCard,
DashboardCardActionsDropdown,
} from "@/components/dashboards/dashboard-card"
import { DashboardWidgetWrapper } from "@/components/dashboards/dashboard-widget-wrapper"
import { Card } from "@/components/ui/card"
import { formatCurrency } from "@/lib/utils"
// --- Mock Data ---
interface ProductSales {
value: number
percentageChange: number
}
interface ProductRevenue {
value: number
percentageChange: number
}
interface Product {
name: string
sku: string
sales: ProductSales
revenue: ProductRevenue
order: number
image: string
}
interface TopProductType {
period: string
products: Product[]
}
const topProductsData: TopProductType = {
period: "Last month",
products: [
{
name: "Bluetooth Headphones",
sku: "BH-001",
sales: { value: 85, percentageChange: 0.15 },
revenue: { value: 340000, percentageChange: 0.1 },
order: 1,
image: "https://placehold.co/100x100?text=BH",
},
{
name: "Smartwatch",
sku: "SW-002",
sales: { value: 72, percentageChange: 0.2 },
revenue: { value: 576000, percentageChange: 0.12 },
order: 2,
image: "https://placehold.co/100x100?text=SW",
},
{
name: "Mirrorless Camera",
sku: "MC-003",
sales: { value: 54, percentageChange: -0.05 },
revenue: { value: 162000, percentageChange: 0.08 },
order: 3,
image: "https://placehold.co/100x100?text=MC",
},
{
name: "Smartphone",
sku: "SP-004",
sales: { value: 67, percentageChange: 0.1 },
revenue: { value: 134000, percentageChange: 0.07 },
order: 4,
image: "https://placehold.co/100x100?text=SP",
},
],
}
// --- Components ---
function TopProductsItem({
product,
}: {
product: TopProductType["products"][0]
}) {
return (
<Card className="grid overflow-hidden" asChild>
<li>
<div className="flex items-center gap-4 p-2">
<Image
src={product.image}
alt={product.name}
width={100}
height={100}
className="aspect-square h-12 w-12 rounded-lg object-cover"
/>
<div className="flex flex-col truncate">
<h3 className="break-all truncate">
<span>#{product.order}</span>{" "}
<span className="font-semibold">{product.name}</span>
</h3>
<p className="text-sm text-muted-foreground">
Item: #{product.sku}
</p>
</div>
</div>
<div className="flex justify-between bg-accent p-2 truncate">
<p className="text-accent-foreground">
<span className="text-muted-foreground">Sales: </span>
<span className="font-semibold">
{product.sales.value.toLocaleString()}
</span>
</p>
<p className="text-accent-foreground">
<span className="text-muted-foreground">Revenue: </span>
<span className="font-semibold">
{formatCurrency(product.revenue.value)}
</span>
</p>
</div>
</li>
</Card>
)
}
function TopProductsList({
data,
}: {
data: TopProductType["products"]
}) {
return (
<ul className="space-y-2">
{data.map((product) => (
<TopProductsItem key={product.sku} product={product} />
))}
</ul>
)
}
export function WidgetEcommerceTopProducts() {
return (
<DashboardWidgetWrapper>
<DashboardCard
title="Top Products"
period={topProductsData.period}
action={<DashboardCardActionsDropdown />}
size="lg"
>
<TopProductsList data={topProductsData.products} />
</DashboardCard>
</DashboardWidgetWrapper>
)
}
