diff --git a/package.json b/package.json index 5dec6bb..069db54 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "dependencies": { "next": "^14.2.0", "react": "^18.3.0", - "react-dom": "^18.3.0" + "react-dom": "^18.3.0", + "recharts": "^2.10.0" }, "devDependencies": { "@types/node": "^20.0.0", diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..9b18636 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,21 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..915cfe8 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,19 @@ +import type { Metadata } from "next"; +import "./globals.css"; + +export const metadata: Metadata = { + title: "Analytics Dashboard", + description: "Real-time analytics and metrics dashboard", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..b77c584 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,249 @@ +"use client"; + +import React, { useState, useMemo } from "react"; +import { KPICard } from "@/components/KPICard"; +import { + LineChart, + Line, + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, +} from "recharts"; + +// Sample data +const chartData = [ + { date: "Jan 1", visitors: 2400, conversions: 24, revenue: 2400 }, + { date: "Jan 2", visitors: 2210, conversions: 22, revenue: 2210 }, + { date: "Jan 3", visitors: 2290, conversions: 25, revenue: 2290 }, + { date: "Jan 4", visitors: 2000, conversions: 20, revenue: 2000 }, + { date: "Jan 5", visitors: 2181, conversions: 21, revenue: 2181 }, + { date: "Jan 6", visitors: 2500, conversions: 27, revenue: 2500 }, + { date: "Jan 7", visitors: 2100, conversions: 23, revenue: 2100 }, +]; + +const tableData = [ + { id: 1, source: "Organic", visitors: 12500, conversions: 456, rate: "3.65%" }, + { id: 2, source: "Direct", visitors: 8900, conversions: 289, rate: "3.25%" }, + { id: 3, source: "Social", visitors: 15600, conversions: 598, rate: "3.83%" }, + { id: 4, source: "Referral", visitors: 6200, conversions: 155, rate: "2.50%" }, + { id: 5, source: "Paid Ads", visitors: 22100, conversions: 1023, rate: "4.63%" }, +]; + +export default function Home() { + const [dateRange, setDateRange] = useState({ from: "Jan 1", to: "Jan 7" }); + + // Calculate KPIs + const kpis = useMemo(() => { + const totalVisitors = chartData.reduce((sum, d) => sum + d.visitors, 0); + const totalConversions = chartData.reduce((sum, d) => sum + d.conversions, 0); + const totalRevenue = chartData.reduce((sum, d) => sum + d.revenue, 0); + const conversionRate = ((totalConversions / totalVisitors) * 100).toFixed(2); + + return { + visitors: totalVisitors.toLocaleString(), + conversions: totalConversions, + revenue: `$${totalRevenue.toLocaleString()}`, + conversionRate: `${conversionRate}%`, + }; + }, []); + + return ( +
+
+ {/* Header */} +
+

Analytics Dashboard

+

Real-time metrics and performance insights

+
+ + {/* Date Range Filter */} +
+
+
+ + + setDateRange({ ...dateRange, from: e.target.value }) + } + className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="Start date" + /> +
+
+ + + setDateRange({ ...dateRange, to: e.target.value }) + } + className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder="End date" + /> +
+ +
+
+ + {/* KPI Cards */} +
+ + + + +
+ + {/* Charts Section */} +
+ {/* Line Chart - Visitors Over Time */} +
+

Visitors Trend

+ + + + + + + + + + +
+ + {/* Bar Chart - Conversions by Date */} +
+

+ Conversions by Date +

+ + + + + + + + + + +
+
+ + {/* Revenue Chart */} +
+

Revenue Trend

+ + + + + + `$${value}`} /> + + + + +
+ + {/* Data Table */} +
+
+

+ Traffic by Source +

+
+
+ + + + + + + + + + + {tableData.map((row) => ( + + + + + + + ))} + +
+ Source + + Visitors + + Conversions + + Conversion Rate +
+ {row.source} + + {row.visitors.toLocaleString()} + + {row.conversions.toLocaleString()} + + + {row.rate} + +
+
+
+
+
+ ); +} diff --git a/src/components/KPICard.tsx b/src/components/KPICard.tsx new file mode 100644 index 0000000..bbcff5f --- /dev/null +++ b/src/components/KPICard.tsx @@ -0,0 +1,36 @@ +"use client"; + +import React from "react"; + +interface KPICardProps { + title: string; + value: string | number; + icon: React.ReactNode; + change?: string; + isPositive?: boolean; +} + +export function KPICard({ + title, + value, + icon, + change, + isPositive = true, +}: KPICardProps) { + return ( +
+
+
+

{title}

+

{value}

+ {change && ( +

+ {isPositive ? "↑" : "↓"} {change} +

+ )} +
+
{icon}
+
+
+ ); +}