matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize various design elements

Browse Source
This commit is contained in:
Matt
2024-12-29 09:43:05 -05:00
parent 5504390fc5
commit 4192e64179
10 changed files with 924 additions and 876 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
dashboard/src/components/dashboard/AircallDashboard.jsx
View File

@@ -168,18 +168,18 @@ const AgentPerformanceTable = ({ agents, onSort }) => {
const SkeletonMetricCard = () => (
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-col items-start p-4">
<Skeleton className="h-4 w-24 mb-2" />
<Skeleton className="h-8 w-32 mb-2" />
<Skeleton className="h-4 w-24 mb-2 bg-muted" />
<Skeleton className="h-8 w-32 mb-2 bg-muted" />
<div className="flex gap-4">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-20 bg-muted" />
<Skeleton className="h-4 w-20 bg-muted" />
</div>
</CardHeader>
</Card>
);
const SkeletonChart = ({ type = "line" }) => (
<div className="h-[300px] w-full bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
<div className="h-[300px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-4">
<div className="h-full flex flex-col">
<div className="flex-1 relative">
{type === "bar" ? (
@@ -187,7 +187,7 @@ const SkeletonChart = ({ type = "line" }) => (
{[...Array(24)].map((_, i) => (
<div
key={i}
className="w-full bg-gray-200 dark:bg-gray-700 rounded-t animate-pulse"
className="w-full bg-muted rounded-t animate-pulse"
style={{ height: `${15 + Math.random() * 70}%` }}
/>
))}
@@ -197,12 +197,12 @@ const SkeletonChart = ({ type = "line" }) => (
{[...Array(5)].map((_, i) => (
<div
key={i}
className="absolute w-full h-px bg-gray-200 dark:bg-gray-700"
className="absolute w-full h-px bg-muted"
style={{ top: `${20 + i * 20}%` }}
/>
))}
<div
className="absolute inset-0 bg-gray-300 dark:bg-gray-600 animate-pulse"
className="absolute inset-0 bg-muted animate-pulse"
style={{
opacity: 0.2,
clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
@@ -219,21 +219,21 @@ const SkeletonTable = ({ rows = 5 }) => (
<Table>
<TableHeader>
<TableRow className="hover:bg-transparent">
<TableHead><Skeleton className="h-4 w-24" /></TableHead>
<TableHead><Skeleton className="h-4 w-24" /></TableHead>
<TableHead><Skeleton className="h-4 w-24" /></TableHead>
<TableHead><Skeleton className="h-4 w-24" /></TableHead>
<TableHead><Skeleton className="h-4 w-24" /></TableHead>
<TableHead><Skeleton className="h-4 w-24 bg-muted" /></TableHead>
<TableHead><Skeleton className="h-4 w-24 bg-muted" /></TableHead>
<TableHead><Skeleton className="h-4 w-24 bg-muted" /></TableHead>
<TableHead><Skeleton className="h-4 w-24 bg-muted" /></TableHead>
<TableHead><Skeleton className="h-4 w-24 bg-muted" /></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{[...Array(rows)].map((_, i) => (
<TableRow key={i} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
<TableCell><Skeleton className="h-4 w-32" /></TableCell>
<TableCell><Skeleton className="h-4 w-16" /></TableCell>
<TableCell><Skeleton className="h-4 w-16" /></TableCell>
<TableCell><Skeleton className="h-4 w-16" /></TableCell>
<TableCell><Skeleton className="h-4 w-24" /></TableCell>
<TableRow key={i} className="hover:bg-muted/50 transition-colors">
<TableCell><Skeleton className="h-4 w-32 bg-muted" /></TableCell>
<TableCell><Skeleton className="h-4 w-16 bg-muted" /></TableCell>
<TableCell><Skeleton className="h-4 w-16 bg-muted" /></TableCell>
<TableCell><Skeleton className="h-4 w-16 bg-muted" /></TableCell>
<TableCell><Skeleton className="h-4 w-24 bg-muted" /></TableCell>
</TableRow>
))}
</TableBody>
@@ -356,9 +356,13 @@ const AircallDashboard = () => {
if (error) {
return (
<Alert variant="destructive" className="m-4">
<AlertDescription>Error loading call data: {error}</AlertDescription>
</Alert>
<Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardContent className="p-4">
<div className="p-4 m-6 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/20">
Error loading call data: {error}
</div>
</CardContent>
</Card>
);
}
@@ -372,7 +376,7 @@ const AircallDashboard = () => {
</div>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-[130px] h-9">
<SelectTrigger className="w-[130px] h-9 bg-white dark:bg-gray-800">
<SelectValue placeholder="Select range" />
</SelectTrigger>
<SelectContent>
@@ -400,10 +404,10 @@ const AircallDashboard = () => {
<CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-300">Total Calls</CardTitle>
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">{metrics.total}</div>
<div className="flex gap-4 mt-2">
<div className="text-sm">
<div className="text-sm text-muted-foreground">
<span className="text-blue-500">↑ {metrics.by_direction.inbound}</span> inbound
</div>
<div className="text-sm">
<div className="text-sm text-muted-foreground">
<span className="text-emerald-500">↓ {metrics.by_direction.outbound}</span> outbound
</div>
</div>
@@ -416,10 +420,10 @@ const AircallDashboard = () => {
{`${((metrics.by_status.answered / metrics.total) * 100).toFixed(1)}%`}
</div>
<div className="flex gap-6">
<div className="text-sm">
<div className="text-sm text-muted-foreground">
<span className="text-emerald-500">{metrics.by_status.answered}</span> answered
</div>
<div className="text-sm">
<div className="text-sm text-muted-foreground">
<span className="text-rose-500">{metrics.by_status.missed}</span> missed
</div>
</div>
@@ -453,11 +457,11 @@ const AircallDashboard = () => {
</div>
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="w-[300px]">
<TooltipContent side="bottom" className="w-[300px] bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<div className="space-y-2">
<p className="font-medium">Duration Distribution</p>
<p className="font-medium text-gray-900 dark:text-gray-100">Duration Distribution</p>
{metrics?.duration_distribution?.map((d, i) => (
<div key={i} className="flex justify-between text-sm">
<div key={i} className="flex justify-between text-sm text-muted-foreground">
<span>{d.range}</span>
<span>{d.count} calls</span>
</div>
@@ -487,15 +491,15 @@ const AircallDashboard = () => {
) : (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData.daily} margin={{ top: 0, right: 5, left: -35, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" className="stroke-gray-200 dark:stroke-gray-700" />
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="date"
tick={{ fontSize: 12 }}
className="text-gray-600 dark:text-gray-300"
className="text-muted-foreground"
/>
<YAxis
tick={{ fontSize: 12 }}
className="text-gray-600 dark:text-gray-300"
className="text-muted-foreground"
/>
<RechartsTooltip content={<CustomTooltip />} />
<Legend />
@@ -518,16 +522,16 @@ const AircallDashboard = () => {
) : (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData.hourly} margin={{ top: 0, right: 5, left: -35, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" className="stroke-gray-200 dark:stroke-gray-700" />
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="hour"
tick={{ fontSize: 12 }}
interval={2}
className="text-gray-600 dark:text-gray-300"
className="text-muted-foreground"
/>
<YAxis
tick={{ fontSize: 12 }}
className="text-gray-600 dark:text-gray-300"
className="text-muted-foreground"
/>
<RechartsTooltip content={<CustomTooltip />} />
<Bar dataKey="calls" fill={COLORS.hourly} name="Calls" />
@@ -549,10 +553,12 @@ const AircallDashboard = () => {
{isLoading ? (
<SkeletonTable rows={5} />
) : (
<div className="overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
<AgentPerformanceTable
agents={sortedAgents}
onSort={(key, direction) => setAgentSort({ key, direction })}
/>
</div>
)}
</CardContent>
</Card>
@@ -566,16 +572,17 @@ const AircallDashboard = () => {
{isLoading ? (
<SkeletonTable rows={5} />
) : (
<div className="overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
<Table>
<TableHeader>
<TableRow className="hover:bg-transparent">
<TableHead>Reason</TableHead>
<TableHead className="text-right">Count</TableHead>
<TableHead className="font-medium text-gray-900 dark:text-gray-100">Reason</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Count</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{chartData.missedReasons.map((reason, index) => (
<TableRow key={index} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
<TableRow key={index} className="hover:bg-muted/50 transition-colors">
<TableCell className="font-medium text-gray-900 dark:text-gray-100">
{reason.reason}
</TableCell>
@@ -586,6 +593,7 @@ const AircallDashboard = () => {
))}
</TableBody>
</Table>
</div>
)}
</CardContent>
</Card>

196
dashboard/src/components/dashboard/AnalyticsDashboard.jsx
View File

@@ -23,6 +23,8 @@ import {
import { Loader2, TrendingUp, AlertCircle } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
// Add helper function for currency formatting
const formatCurrency = (value, useFractionDigits = true) => {
@@ -38,40 +40,42 @@ const formatCurrency = (value, useFractionDigits = true) => {
// Add skeleton components
const SkeletonChart = () => (
<div className="h-[400px] w-full bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
<div className="h-[400px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-6">
<div className="h-full flex flex-col">
<div className="flex-1 relative">
<div className="h-full w-full relative">
{/* Grid lines */}
{[...Array(5)].map((_, i) => (
<div
key={i}
className="absolute w-full h-px bg-gray-200 dark:bg-gray-700"
style={{ top: `${20 + i * 20}%` }}
className="absolute w-full h-px bg-muted"
style={{ top: `${(i + 1) * 20}%` }}
/>
))}
{/* Y-axis labels */}
<div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
{[...Array(5)].map((_, i) => (
<Skeleton key={i} className="h-3 w-6 bg-muted rounded-sm" />
))}
</div>
{/* X-axis labels */}
<div className="absolute left-8 right-4 bottom-0 flex justify-between">
{[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-3 w-8 bg-muted rounded-sm" />
))}
</div>
{/* Chart line */}
<div className="absolute inset-x-8 bottom-6 top-4">
<div className="h-full w-full relative">
<div
className="absolute inset-0 bg-gray-300 dark:bg-gray-600 animate-pulse"
className="absolute inset-0 bg-muted rounded-sm"
style={{
opacity: 0.2,
opacity: 0.5,
clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
}}
/>
<div className="absolute inset-0 flex justify-between">
{[...Array(8)].map((_, i) => (
<div
key={i}
className="w-px h-full bg-gray-200 dark:bg-gray-700"
style={{ opacity: 0.5 }}
/>
))}
</div>
</div>
</div>
<div className="flex justify-between pt-4">
{[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-4 w-12 dark:bg-gray-700" />
))}
</div>
</div>
</div>
);
@@ -79,13 +83,13 @@ const SkeletonChart = () => (
const SkeletonStats = () => (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 py-4">
{[...Array(4)].map((_, i) => (
<Card key={i}>
<Card key={i} className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<Skeleton className="h-4 w-24 dark:bg-gray-700" />
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
</CardHeader>
<CardContent className="p-4 pt-0">
<Skeleton className="h-8 w-32 mb-2 dark:bg-gray-700" />
<Skeleton className="h-4 w-24 dark:bg-gray-700" />
<Skeleton className="h-8 w-32 bg-muted rounded-sm mb-2" />
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
</CardContent>
</Card>
))}
@@ -95,7 +99,7 @@ const SkeletonStats = () => (
const SkeletonButtons = () => (
<div className="flex flex-wrap gap-1">
{[...Array(4)].map((_, i) => (
<Skeleton key={i} className="h-8 w-20 dark:bg-gray-700" />
<Skeleton key={i} className="h-8 w-20 bg-muted rounded-sm" />
))}
</div>
);
@@ -109,12 +113,12 @@ const StatCard = ({
trendValue,
colorClass = "text-gray-900 dark:text-gray-100",
}) => (
<Card>
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<span className="text-sm text-muted-foreground">{title}</span>
<span className="text-sm text-muted-foreground font-medium">{title}</span>
{trend && (
<span
className={`text-sm flex items-center gap-1 ${
className={`text-sm flex items-center gap-1 font-medium ${
trend === "up"
? "text-emerald-600 dark:text-emerald-400"
: "text-rose-600 dark:text-rose-400"
@@ -125,9 +129,9 @@ const StatCard = ({
)}
</CardHeader>
<CardContent className="p-4 pt-0">
<div className={`text-2xl font-bold mb-1 ${colorClass}`}>{value}</div>
<div className={`text-2xl font-bold mb-1.5 ${colorClass}`}>{value}</div>
{description && (
<div className="text-sm text-muted-foreground">{description}</div>
<div className="text-sm font-medium text-muted-foreground">{description}</div>
)}
</CardContent>
</Card>
@@ -252,19 +256,19 @@ export const AnalyticsDashboard = () => {
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<Card className="p-3 shadow-lg bg-white dark:bg-gray-800 border-none">
<Card className="p-3 shadow-lg bg-white dark:bg-gray-900/60 backdrop-blur-sm border border-border">
<CardContent className="p-0 space-y-2">
<p className="font-medium text-sm border-b pb-1 mb-2">
<p className="font-medium text-sm border-b border-border pb-1.5 mb-2 text-foreground">
{label instanceof Date ? label.toLocaleDateString() : label}
</p>
<div className="space-y-1">
<div className="space-y-1.5">
{payload.map((entry, index) => (
<div
key={index}
className="flex justify-between items-center text-sm"
>
<span style={{ color: entry.color }}>{entry.name}:</span>
<span className="font-medium ml-4">
<span className="font-medium" style={{ color: entry.color }}>{entry.name}:</span>
<span className="font-medium ml-4 text-foreground">
{entry.value.toLocaleString()}
</span>
</div>
@@ -282,12 +286,100 @@ export const AnalyticsDashboard = () => {
<CardHeader className="p-6 pb-4">
<div className="flex flex-col space-y-2">
<div className="flex justify-between items-start">
<div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
Analytics Overview
</CardTitle>
</div>
<div className="flex items-center gap-2">
{loading ? (
<Skeleton className="h-9 w-[130px] dark:bg-gray-700" />
<Skeleton className="h-9 w-[130px] bg-muted rounded-sm" />
) : (
<>
<Dialog>
<DialogTrigger asChild>
<Button variant="outline" className="h-9">
Details
</Button>
</DialogTrigger>
<DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<DialogHeader className="flex-none">
<DialogTitle className="text-gray-900 dark:text-gray-100">Daily Details</DialogTitle>
<div className="flex items-center justify-center gap-2 pt-4">
<div className="flex flex-wrap gap-1">
{Object.entries(metrics).map(([key, value]) => (
<Button
key={key}
variant={value ? "default" : "outline"}
size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
[key]: !prev[key],
}))
}
>
{key === "activeUsers" ? "Active Users" :
key === "newUsers" ? "New Users" :
key === "pageViews" ? "Page Views" :
"Conversions"}
</Button>
))}
</div>
</div>
</DialogHeader>
<div className="flex-1 overflow-y-auto mt-6">
<div className="rounded-lg border bg-white dark:bg-gray-900/60 backdrop-blur-sm w-full">
<Table className="w-full">
<TableHeader>
<TableRow>
<TableHead className="text-center whitespace-nowrap px-6 w-[120px]">Date</TableHead>
{metrics.activeUsers && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Active Users</TableHead>
)}
{metrics.newUsers && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">New Users</TableHead>
)}
{metrics.pageViews && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Page Views</TableHead>
)}
{metrics.conversions && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">Conversions</TableHead>
)}
</TableRow>
</TableHeader>
<TableBody>
{data.map((day) => (
<TableRow key={day.date}>
<TableCell className="text-center whitespace-nowrap px-6">{formatXAxis(day.date)}</TableCell>
{metrics.activeUsers && (
<TableCell className="text-center whitespace-nowrap px-6">
{day.activeUsers.toLocaleString()}
</TableCell>
)}
{metrics.newUsers && (
<TableCell className="text-center whitespace-nowrap px-6">
{day.newUsers.toLocaleString()}
</TableCell>
)}
{metrics.pageViews && (
<TableCell className="text-center whitespace-nowrap px-6">
{day.pageViews.toLocaleString()}
</TableCell>
)}
{metrics.conversions && (
<TableCell className="text-center whitespace-nowrap px-6">
{day.conversions.toLocaleString()}
</TableCell>
)}
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
</DialogContent>
</Dialog>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-[130px] h-9">
<SelectValue placeholder="Select range" />
@@ -299,8 +391,10 @@ export const AnalyticsDashboard = () => {
<SelectItem value="90">Last 90 days</SelectItem>
</SelectContent>
</Select>
</>
)}
</div>
</div>
{loading ? (
<SkeletonStats />
@@ -341,14 +435,12 @@ export const AnalyticsDashboard = () => {
</div>
) : null}
<div className="flex flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
{loading ? (
<SkeletonButtons />
) : (
<div className="flex items-center flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
<div className="flex flex-wrap gap-1">
<Button
variant={metrics.activeUsers ? "default" : "outline"}
size="sm"
className="font-medium"
onClick={() =>
setMetrics((prev) => ({
...prev,
@@ -362,6 +454,7 @@ export const AnalyticsDashboard = () => {
<Button
variant={metrics.newUsers ? "default" : "outline"}
size="sm"
className="font-medium"
onClick={() =>
setMetrics((prev) => ({
...prev,
@@ -375,6 +468,7 @@ export const AnalyticsDashboard = () => {
<Button
variant={metrics.pageViews ? "default" : "outline"}
size="sm"
className="font-medium"
onClick={() =>
setMetrics((prev) => ({
...prev,
@@ -383,11 +477,12 @@ export const AnalyticsDashboard = () => {
}
>
<span className="hidden sm:inline">Page Views</span>
<span className="sm:hidden">Page Views</span>
<span className="sm:hidden">Views</span>
</Button>
<Button
variant={metrics.conversions ? "default" : "outline"}
size="sm"
className="font-medium"
onClick={() =>
setMetrics((prev) => ({
...prev,
@@ -396,10 +491,9 @@ export const AnalyticsDashboard = () => {
}
>
<span className="hidden sm:inline">Conversions</span>
<span className="sm:hidden">Conversions</span>
<span className="sm:hidden">Conv.</span>
</Button>
</div>
)}
</div>
</div>
</CardHeader>
@@ -410,17 +504,19 @@ export const AnalyticsDashboard = () => {
) : !data.length ? (
<div className="flex items-center justify-center h-[400px] text-muted-foreground">
<div className="text-center">
<TrendingUp className="h-12 w-12 mx-auto mb-4" />
<div className="font-medium mb-2">No analytics data available</div>
<div className="text-sm">Try selecting a different time range</div>
<TrendingUp className="h-12 w-12 mx-auto mb-4 opacity-50" />
<div className="font-medium mb-2 text-gray-900 dark:text-gray-100">No analytics data available</div>
<div className="text-sm text-muted-foreground">
Try selecting a different time range
</div>
</div>
</div>
) : (
<div className="h-[400px] mt-4 bg-card rounded-lg p-0">
<div className="h-[400px] mt-4 bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-0 relative">
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={data}
margin={{ top: 5, right: 0, left: -5, bottom: 5 }}
margin={{ top: 5, right: -30, left: -5, bottom: 5 }}
>
<CartesianGrid
strokeDasharray="3 3"
@@ -429,18 +525,18 @@ export const AnalyticsDashboard = () => {
<XAxis
dataKey="date"
tickFormatter={formatXAxis}
className="text-xs"
className="text-xs text-muted-foreground"
tick={{ fill: "currentColor" }}
/>
<YAxis
yAxisId="left"
className="text-xs"
className="text-xs text-muted-foreground"
tick={{ fill: "currentColor" }}
/>
<YAxis
yAxisId="right"
orientation="right"
className="text-xs"
className="text-xs text-muted-foreground"
tick={{ fill: "currentColor" }}
/>
<Tooltip content={<CustomTooltip />} />

74
dashboard/src/components/dashboard/EventFeed.jsx
View File

@@ -148,24 +148,22 @@ const LoadingState = () => (
<div className="shrink-0">
<Skeleton className="h-10 w-10 rounded-full bg-muted" />
</div>
<div className="flex-1 min-w-0">
<div className="space-y-2">
<div className="flex-1 min-w-0 space-y-2">
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-24 bg-muted" />
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
</div>
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-48 bg-muted" />
<Skeleton className="h-4 w-48 bg-muted rounded-sm" />
</div>
<div className="flex gap-1.5 items-center flex-wrap">
<Skeleton className="h-5 w-16 rounded-full bg-muted" />
<Skeleton className="h-5 w-20 rounded-full bg-muted" />
<Skeleton className="h-5 w-14 rounded-full bg-muted" />
</div>
<Skeleton className="h-5 w-16 bg-muted rounded-md" />
<Skeleton className="h-5 w-20 bg-muted rounded-md" />
<Skeleton className="h-5 w-14 bg-muted rounded-md" />
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<Skeleton className="h-4 w-16 bg-muted" />
<Skeleton className="h-4 w-4 bg-muted" />
<Skeleton className="h-4 w-16 bg-muted rounded-sm" />
<Skeleton className="h-4 w-4 bg-muted rounded-full" />
</div>
</div>
))}
@@ -174,14 +172,14 @@ const LoadingState = () => (
// Empty State Component
const EmptyState = () => (
<div className="h-full flex flex-col items-center justify-center py-16 px-4">
<div className="h-full flex flex-col items-center justify-center py-16 px-4 text-center">
<div className="bg-gray-100 dark:bg-gray-800 rounded-full p-3 mb-4">
<Activity className="h-8 w-8 text-gray-400 dark:text-gray-500" />
<Activity className="h-8 w-8 text-muted-foreground" />
</div>
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
No activity yet today
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400 text-center max-w-sm">
<p className="text-sm text-muted-foreground max-w-sm">
Recent activity will appear here as it happens
</p>
</div>
@@ -1402,18 +1400,18 @@ const EventFeed = ({
return (
<Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm w-full">
<CardHeader className="p-6">
<CardHeader className="p-6 pb-2">
<div className="flex justify-between items-start">
<div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
{lastUpdate && (
<CardDescription className="text-xs">
<CardDescription className="text-sm text-muted-foreground">
Last updated {format(lastUpdate, "h:mm a")}
</CardDescription>
)}
</div>
{!error && (
<div className="flex flex-wrap gap-1">
<div className="flex flex-wrap gap-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
@@ -1421,7 +1419,7 @@ const EventFeed = ({
variant={activeEventTypes[METRIC_IDS.PLACED_ORDER] ? "default" : "outline"}
size="sm"
onClick={() => handleEventTypeClick(METRIC_IDS.PLACED_ORDER)}
className="h-8 w-8 p-0"
className="h-8 w-8 p-0 rounded-md"
>
<Package className="h-4 w-4" />
</Button>
@@ -1439,7 +1437,7 @@ const EventFeed = ({
variant={activeEventTypes[METRIC_IDS.SHIPPED_ORDER] ? "default" : "outline"}
size="sm"
onClick={() => handleEventTypeClick(METRIC_IDS.SHIPPED_ORDER)}
className="h-8 w-8 p-0"
className="h-8 w-8 p-0 rounded-md"
>
<Truck className="h-4 w-4" />
</Button>
@@ -1457,7 +1455,7 @@ const EventFeed = ({
variant={activeEventTypes[METRIC_IDS.ACCOUNT_CREATED] ? "default" : "outline"}
size="sm"
onClick={() => handleEventTypeClick(METRIC_IDS.ACCOUNT_CREATED)}
className="h-8 w-8 p-0"
className="h-8 w-8 p-0 rounded-md"
>
<UserPlus className="h-4 w-4" />
</Button>
@@ -1475,7 +1473,7 @@ const EventFeed = ({
variant={activeEventTypes[METRIC_IDS.CANCELED_ORDER] ? "default" : "outline"}
size="sm"
onClick={() => handleEventTypeClick(METRIC_IDS.CANCELED_ORDER)}
className="h-8 w-8 p-0"
className="h-8 w-8 p-0 rounded-md"
>
<XCircle className="h-4 w-4" />
</Button>
@@ -1493,7 +1491,7 @@ const EventFeed = ({
variant={activeEventTypes[METRIC_IDS.PAYMENT_REFUNDED] ? "default" : "outline"}
size="sm"
onClick={() => handleEventTypeClick(METRIC_IDS.PAYMENT_REFUNDED)}
className="h-8 w-8 p-0"
className="h-8 w-8 p-0 rounded-md"
>
<DollarSign className="h-4 w-4" />
</Button>
@@ -1511,7 +1509,7 @@ const EventFeed = ({
variant={activeEventTypes[METRIC_IDS.NEW_BLOG_POST] ? "default" : "outline"}
size="sm"
onClick={() => handleEventTypeClick(METRIC_IDS.NEW_BLOG_POST)}
className="h-8 w-8 p-0"
className="h-8 w-8 p-0 rounded-md"
>
<FileText className="h-4 w-4" />
</Button>
@@ -1525,7 +1523,7 @@ const EventFeed = ({
)}
</div>
{/* Order Property Filters - only show if not in error state */}
{/* Order Property Filters - update styling */}
{!error && (
<div className="flex flex-wrap gap-2 justify-center mt-4 pt-1">
{counts.orderProperties.hasPreorder > 0 && (
@@ -1536,7 +1534,7 @@ const EventFeed = ({
orderFilters.hasPreorder
? 'bg-purple-800 text-purple-200 hover:bg-purple-700'
: 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
Pre-order ({counts.orderProperties.hasPreorder})
</Badge>
@@ -1549,7 +1547,7 @@ const EventFeed = ({
orderFilters.localPickup
? 'bg-green-800 text-green-200 hover:bg-green-700'
: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
Local ({counts.orderProperties.localPickup})
</Badge>
@@ -1562,7 +1560,7 @@ const EventFeed = ({
orderFilters.isOnHold
? 'bg-blue-800 text-blue-200 hover:bg-blue-700'
: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
On Hold ({counts.orderProperties.isOnHold})
</Badge>
@@ -1575,7 +1573,7 @@ const EventFeed = ({
orderFilters.onHoldReleased
? 'bg-green-800 text-green-200 hover:bg-green-700'
: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
Hold Released ({counts.orderProperties.onHoldReleased})
</Badge>
@@ -1588,7 +1586,7 @@ const EventFeed = ({
orderFilters.hasDigiItem
? 'bg-indigo-800 text-indigo-200 hover:bg-indigo-700'
: 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
Digital ({counts.orderProperties.hasDigiItem})
</Badge>
@@ -1601,7 +1599,7 @@ const EventFeed = ({
orderFilters.hasNotions
? 'bg-yellow-800 text-yellow-200 hover:bg-yellow-700'
: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
Notions ({counts.orderProperties.hasNotions})
</Badge>
@@ -1614,7 +1612,7 @@ const EventFeed = ({
orderFilters.hasGiftCard
? 'bg-pink-800 text-pink-200 hover:bg-pink-700'
: 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
eGift Card ({counts.orderProperties.hasGiftCard})
</Badge>
@@ -1627,7 +1625,7 @@ const EventFeed = ({
orderFilters.stillOwes
? 'bg-red-800 text-red-200 hover:bg-red-700'
: 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/20'
} cursor-pointer`}
} cursor-pointer rounded-md`}
>
Owes ({counts.orderProperties.stillOwes})
</Badge>
@@ -1641,7 +1639,7 @@ const EventFeed = ({
{loading && !events.length ? (
<LoadingState />
) : error ? (
<Alert variant="destructive" className="mt-1" >
<Alert variant="destructive" className="mt-1 mx-6">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
@@ -1649,17 +1647,7 @@ const EventFeed = ({
</AlertDescription>
</Alert>
) : !filteredEvents || filteredEvents.length === 0 ? (
<div className="h-full flex flex-col items-center justify-center py-16 px-4">
<div className="bg-gray-100 dark:bg-gray-800 rounded-full p-3 mb-4">
<Activity className="h-8 w-8 text-muted-foreground" />
</div>
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
No activity yet today
</h3>
<p className="text-sm text-muted-foreground text-center max-w-sm">
Recent activity will appear here as it happens
</p>
</div>
<EmptyState />
) : (
<div className="divide-y divide-gray-100 dark:divide-gray-800">
{filteredEvents.map((event) => (

102
dashboard/src/components/dashboard/GorgiasOverview.jsx
View File

@@ -168,13 +168,13 @@ const SkeletonMetricCard = () => (
<CardContent className="pt-6 h-full">
<div className="flex justify-between items-start">
<div className="flex-1 min-w-0">
<Skeleton className="h-4 w-24 mb-4 dark:bg-gray-700" />
<Skeleton className="h-4 w-24 mb-4 bg-muted" />
<div className="flex items-baseline gap-2">
<Skeleton className="h-8 w-20 dark:bg-gray-700" />
<Skeleton className="h-4 w-12 dark:bg-gray-700" />
<Skeleton className="h-8 w-20 bg-muted" />
<Skeleton className="h-4 w-12 bg-muted" />
</div>
</div>
<Skeleton className="h-5 w-5 rounded-full dark:bg-gray-700" />
<Skeleton className="h-5 w-5 rounded-full bg-muted" />
</div>
</CardContent>
</Card>
@@ -184,19 +184,19 @@ const TableSkeleton = () => (
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead><Skeleton className="h-4 w-24 dark:bg-gray-700" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableHead>
<TableHead><Skeleton className="h-4 w-24 bg-muted" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted" /></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{[...Array(5)].map((_, i) => (
<TableRow key={i} className="dark:border-gray-800">
<TableCell><Skeleton className="h-4 w-32 dark:bg-gray-700" /></TableCell>
<TableCell className="text-right"><Skeleton className="h-4 w-12 ml-auto dark:bg-gray-700" /></TableCell>
<TableCell className="text-right"><Skeleton className="h-4 w-12 ml-auto dark:bg-gray-700" /></TableCell>
<TableCell className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableCell>
<TableCell><Skeleton className="h-4 w-32 bg-muted" /></TableCell>
<TableCell className="text-right"><Skeleton className="h-4 w-12 ml-auto bg-muted" /></TableCell>
<TableCell className="text-right"><Skeleton className="h-4 w-12 ml-auto bg-muted" /></TableCell>
<TableCell className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted" /></TableCell>
</TableRow>
))}
</TableBody>
@@ -326,13 +326,23 @@ const GorgiasOverview = () => {
console.log('Processed agents:', agents);
if (error) return <p className="text-red-500">Error: {error}</p>;
if (error) {
return (
<Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardContent className="p-4">
<div className="p-4 m-6 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/20">
{error}
</div>
</CardContent>
</Card>
);
}
return (
<Card className="bg-white dark:bg-gray-900">
<Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader>
<div className="flex justify-between items-center">
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
Customer Service
</h2>
<div className="flex items-center gap-2">
@@ -414,10 +424,6 @@ const GorgiasOverview = () => {
loading={loading}
/>
</div>
</>
)}
{/* Satisfaction & Efficiency */}
<div className="h-full">
<MetricCard
title="Customer Satisfaction"
@@ -462,40 +468,43 @@ const GorgiasOverview = () => {
loading={loading}
/>
</div>
</>
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Channel Distribution */}
<div className="bg-white dark:bg-gray-900 rounded-lg border dark:border-gray-800 p-4 pt-0">
<div className="p-4 pl-2">
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="pb-0">
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
Channel Distribution
</h3>
</div>
</CardHeader>
<CardContent className="overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
{loading ? (
<TableSkeleton />
) : (
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead>Channel</TableHead>
<TableHead className="text-right">Total</TableHead>
<TableHead className="text-right">%</TableHead>
<TableHead className="text-right">Change</TableHead>
<TableHead className="text-left font-medium text-gray-900 dark:text-gray-100">Channel</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Total</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">%</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Change</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{channels
.sort((a, b) => b.total - a.total)
.map((channel, index) => (
<TableRow key={index} className="dark:border-gray-800">
<TableCell className="dark:text-gray-300">
<TableRow key={index} className="dark:border-gray-800 hover:bg-muted/50 transition-colors">
<TableCell className="text-gray-900 dark:text-gray-100">
{channel.name}
</TableCell>
<TableCell className="text-right dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{channel.total}
</TableCell>
<TableCell className="text-right dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{channel.percentage}%
</TableCell>
<TableCell
@@ -504,7 +513,7 @@ const GorgiasOverview = () => {
? "text-green-600 dark:text-green-500"
: channel.delta < 0
? "text-red-600 dark:text-red-500"
: "dark:text-gray-300"
: "text-muted-foreground"
}`}
>
<div className="flex items-center justify-end gap-0.5">
@@ -525,39 +534,41 @@ const GorgiasOverview = () => {
</TableBody>
</Table>
)}
</div>
</CardContent>
</Card>
{/* Agent Performance */}
<div className="bg-white dark:bg-gray-900 rounded-lg border dark:border-gray-800 p-4 pt-0">
<div className="p-4 pl-2">
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="pb-0">
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
Agent Performance
</h3>
</div>
</CardHeader>
<CardContent className="overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
{loading ? (
<TableSkeleton />
) : (
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead>Agent</TableHead>
<TableHead className="text-right">Closed</TableHead>
<TableHead className="text-right">Rating</TableHead>
<TableHead className="text-right">Change</TableHead>
<TableHead className="text-left font-medium text-gray-900 dark:text-gray-100">Agent</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Closed</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Rating</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Change</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{agents
.filter((agent) => agent.name !== "Unassigned")
.map((agent, index) => (
<TableRow key={index} className="dark:border-gray-800">
<TableCell className="dark:text-gray-300">
<TableRow key={index} className="dark:border-gray-800 hover:bg-muted/50 transition-colors">
<TableCell className="text-gray-900 dark:text-gray-100">
{agent.name}
</TableCell>
<TableCell className="text-right dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{agent.closed}
</TableCell>
<TableCell className="text-right dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{agent.rating ? `${agent.rating}/5` : "-"}
</TableCell>
<TableCell
@@ -566,7 +577,7 @@ const GorgiasOverview = () => {
? "text-green-600 dark:text-green-500"
: agent.delta < 0
? "text-red-600 dark:text-red-500"
: "dark:text-gray-300"
: "text-muted-foreground"
}`}
>
<div className="flex items-center justify-end gap-0.5">
@@ -587,7 +598,8 @@ const GorgiasOverview = () => {
</TableBody>
</Table>
)}
</div>
</CardContent>
</Card>
</div>
</CardContent>
</Card>

128
dashboard/src/components/dashboard/MetaCampaigns.jsx
View File

@@ -84,34 +84,26 @@ const summaryCard = (label, value, options = {}) => {
);
};
const MetricCell = ({
value,
label,
sublabel,
isMonetary = false,
isPercentage = false,
decimalPlaces = 0,
}) => (
<td className="p-2 text-center align-top">
<div className="text-blue-600 dark:text-blue-400 text-center font-semibold">
{isMonetary
const MetricCell = ({ value, label, sublabel, isMonetary = false, isPercentage = false, decimalPlaces = 0 }) => {
const formattedValue = isMonetary
? formatCurrency(value, decimalPlaces)
: isPercentage
? formatPercent(value, decimalPlaces)
: formatNumber(value, decimalPlaces)}
: formatNumber(value, decimalPlaces);
return (
<td className="p-2 text-center align-top">
<div className="text-blue-600 dark:text-blue-400 text-lg font-semibold">
{formattedValue}
</div>
{label && (
<div className="text-xs text-center text-gray-500 dark:text-gray-400">
{label}
</div>
)}
{sublabel && (
<div className="text-xs text-center text-gray-500 dark:text-gray-400">
{sublabel}
{(label || sublabel) && (
<div className="text-muted-foreground text-sm">
{label || sublabel}
</div>
)}
</td>
);
);
};
const getActionValue = (campaign, actionType) => {
if (actionType === "impressions" || actionType === "reach") {
@@ -256,47 +248,50 @@ const SkeletonMetricCard = () => (
<CardContent className="pt-6 h-full">
<div className="flex justify-between items-start">
<div className="flex-1 min-w-0">
<Skeleton className="h-4 w-24 mb-4 dark:bg-gray-700" />
<Skeleton className="h-4 w-24 mb-4 bg-muted" />
<div className="flex items-baseline gap-2">
<Skeleton className="h-8 w-20 dark:bg-gray-700" />
<Skeleton className="h-8 w-20 bg-muted" />
</div>
</div>
<Skeleton className="h-5 w-5 rounded-full dark:bg-gray-700" />
<Skeleton className="h-5 w-5 rounded-full bg-muted" />
</div>
</CardContent>
</Card>
);
const SkeletonTable = () => (
<div className="grid overflow-x-auto">
<div className="overflow-y-auto max-h-[400px]">
<div className="h-full max-h-[400px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2">
<table className="min-w-full">
<thead>
<tr className="border-b border-gray-200 dark:border-gray-800">
<th className="p-2 sticky top-0 bg-white dark:bg-gray-900 z-10">
<Skeleton className="h-4 w-32 dark:bg-gray-700" />
<th className="p-2 sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10">
<Skeleton className="h-4 w-32 bg-muted" />
</th>
{[...Array(8)].map((_, i) => (
<th key={i} className="p-2 text-center sticky top-0 bg-white dark:bg-gray-900 z-10">
<Skeleton className="h-4 w-20 mx-auto dark:bg-gray-700" />
<th key={i} className="p-2 text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10">
<Skeleton className="h-4 w-20 mx-auto bg-muted" />
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-800">
{[...Array(5)].map((_, rowIndex) => (
<tr key={rowIndex}>
<tr key={rowIndex} className="hover:bg-muted/50 transition-colors">
<td className="p-2">
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-4 bg-muted" />
<div className="space-y-2">
<Skeleton className="h-4 w-48 dark:bg-gray-700" />
<Skeleton className="h-3 w-24 dark:bg-gray-700" />
<Skeleton className="h-4 w-48 bg-muted" />
<Skeleton className="h-3 w-64 bg-muted" />
<Skeleton className="h-3 w-32 bg-muted" />
</div>
</div>
</td>
{[...Array(8)].map((_, colIndex) => (
<td key={colIndex} className="p-2 text-center">
<div className="space-y-1">
<Skeleton className="h-4 w-16 mx-auto dark:bg-gray-700" />
<Skeleton className="h-3 w-12 mx-auto dark:bg-gray-700" />
<div className="flex flex-col items-center gap-1">
<Skeleton className="h-4 w-16 bg-muted" />
<Skeleton className="h-3 w-24 bg-muted" />
</div>
</td>
))}
@@ -305,7 +300,6 @@ const SkeletonTable = () => (
</tbody>
</table>
</div>
</div>
);
const MetaCampaigns = () => {
@@ -449,7 +443,7 @@ const MetaCampaigns = () => {
if (loading) {
return (
<Card className="bg-white dark:bg-gray-900">
<Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="pb-2">
<div className="flex justify-between items-start mb-6">
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
@@ -479,16 +473,18 @@ const MetaCampaigns = () => {
if (error) {
return (
<Card className="bg-white dark:bg-gray-900">
<Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardContent className="p-4">
<div className="text-red-500 dark:text-red-400">{error}</div>
<div className="p-4 m-6 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/20">
{error}
</div>
</CardContent>
</Card>
);
}
return (
<Card className="h-full bg-white dark:bg-gray-900">
<Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="pb-2">
<div className="flex justify-between items-start mb-6">
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
@@ -577,88 +573,86 @@ const MetaCampaigns = () => {
</div>
</CardHeader>
<CardContent className="p-4">
<div className="grid overflow-x-auto">
<div className="overflow-y-auto max-h-[400px]">
<table className="min-w-full">
<CardContent className="overflow-y-auto pl-4 max-h-[400px] mb-4">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200 dark:border-gray-800">
<th className="p-2 sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 text-left font-medium sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant="ghost"
className="pl-0 justify-start w-full"
className="pl-0 justify-start w-full h-8"
onClick={() => handleSort("date")}
>
Campaign
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "spend" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("spend")}
>
Spend
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "reach" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("reach")}
>
Reach
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "impressions" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("impressions")}
>
Impressions
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "cpm" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("cpm")}
>
CPM
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "ctr" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("ctr")}
>
CTR
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "results" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("results")}
>
Results
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "value" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("value")}
>
Value
</Button>
</th>
<th className="p-2 text-center font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
<th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 text-gray-900 dark:text-gray-100">
<Button
variant={sortConfig.key === "engagements" ? "default" : "ghost"}
className="w-full justify-center"
className="w-full justify-center h-8"
onClick={() => handleSort("engagements")}
>
Engagements
@@ -670,15 +664,17 @@ const MetaCampaigns = () => {
{sortedCampaigns.map((campaign) => (
<tr
key={campaign.id}
className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
className="hover:bg-muted/50 transition-colors"
>
<td className="p-2 align-top">
<div>
<div className="font-medium text-gray-900 dark:text-gray-100 break-words min-w-[200px] max-w-[300px]">
<CampaignName name={campaign.name} />
</div>
<div className="text-xs text-gray-500 dark:text-gray-400">
<div className="text-sm text-muted-foreground">
{campaign.objective}
</div>
</div>
</td>
<MetricCell
@@ -733,8 +729,6 @@ const MetaCampaigns = () => {
))}
</tbody>
</table>
</div>
</div>
</CardContent>
</Card>
);

54
dashboard/src/components/dashboard/ProductGrid.jsx
View File

@@ -106,18 +106,18 @@ const ProductGrid = ({
</td>
<td className="p-1 align-middle min-w-[200px]">
<div className="flex flex-col gap-1.5">
<Skeleton className="h-4 w-[180px] bg-muted" />
<Skeleton className="h-3 w-[140px] bg-muted" />
<Skeleton className="h-4 w-[180px] bg-muted rounded-sm" />
<Skeleton className="h-3 w-[140px] bg-muted rounded-sm" />
</div>
</td>
<td className="p-1 align-middle text-center">
<Skeleton className="h-4 w-8 mx-auto bg-muted" />
<Skeleton className="h-4 w-8 mx-auto bg-muted rounded-sm" />
</td>
<td className="p-1 align-middle text-center">
<Skeleton className="h-4 w-16 mx-auto bg-muted" />
<Skeleton className="h-4 w-16 mx-auto bg-muted rounded-sm" />
</td>
<td className="p-1 align-middle text-center">
<Skeleton className="h-4 w-8 mx-auto bg-muted" />
<Skeleton className="h-4 w-8 mx-auto bg-muted rounded-sm" />
</td>
</tr>
);
@@ -128,41 +128,41 @@ const ProductGrid = ({
<table className="w-full">
<thead>
<tr className="hover:bg-transparent">
<th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 w-[50px] min-w-[50px] border-b dark:border-gray-800" />
<th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 min-w-[200px] border-b dark:border-gray-800">
<th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 w-[50px] min-w-[50px] border-b dark:border-gray-800" />
<th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 min-w-[200px] border-b dark:border-gray-800">
<Button
variant="ghost"
className="w-full p-2 justify-start h-8 pointer-events-none"
disabled
>
<Skeleton className="h-4 w-16 bg-muted" />
<Skeleton className="h-4 w-16 bg-muted rounded-sm" />
</Button>
</th>
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant="ghost"
className="w-full p-2 justify-center h-8 pointer-events-none"
disabled
>
<Skeleton className="h-4 w-12 bg-muted" />
<Skeleton className="h-4 w-12 bg-muted rounded-sm" />
</Button>
</th>
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant="ghost"
className="w-full p-2 justify-center h-8 pointer-events-none"
disabled
>
<Skeleton className="h-4 w-12 bg-muted" />
<Skeleton className="h-4 w-12 bg-muted rounded-sm" />
</Button>
</th>
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant="ghost"
className="w-full p-2 justify-center h-8 pointer-events-none"
disabled
>
<Skeleton className="h-4 w-16 bg-muted" />
<Skeleton className="h-4 w-16 bg-muted rounded-sm" />
</Button>
</th>
</tr>
@@ -185,17 +185,17 @@ const ProductGrid = ({
<div className="flex justify-between items-start">
<div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
<Skeleton className="h-6 w-32 bg-muted" />
<Skeleton className="h-6 w-32 bg-muted rounded-sm" />
</CardTitle>
{description && (
<CardDescription className="mt-1">
<Skeleton className="h-4 w-48 bg-muted" />
<Skeleton className="h-4 w-48 bg-muted rounded-sm" />
</CardDescription>
)}
</div>
<div className="flex items-center gap-2">
<Skeleton className="h-9 w-9 bg-muted" />
<Skeleton className="h-9 w-[130px] bg-muted" />
<Skeleton className="h-9 w-9 bg-muted rounded-sm" />
<Skeleton className="h-9 w-[130px] bg-muted rounded-sm" />
</div>
</div>
</div>
@@ -218,7 +218,7 @@ const ProductGrid = ({
<div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
{description && (
<CardDescription className="mt-1">{description}</CardDescription>
<CardDescription className="mt-1 text-muted-foreground">{description}</CardDescription>
)}
</div>
<div className="flex items-center gap-2">
@@ -280,7 +280,7 @@ const ProductGrid = ({
<CardContent className="p-6 pt-0 flex-1 overflow-hidden -mt-1">
<div className="h-full">
{error ? (
<Alert variant="destructive" >
<Alert variant="destructive" className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
@@ -290,7 +290,7 @@ const ProductGrid = ({
) : !products?.length ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<Package className="h-12 w-12 text-muted-foreground mb-4" />
<p className="font-medium mb-2">No product data available</p>
<p className="font-medium mb-2 text-gray-900 dark:text-gray-100">No product data available</p>
<p className="text-sm text-muted-foreground">Try selecting a different time range</p>
</div>
) : (
@@ -299,8 +299,8 @@ const ProductGrid = ({
<table className="w-full">
<thead>
<tr className="hover:bg-transparent">
<th className="p-1 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 h-[50px] min-h-[50px] w-[50px] min-w-[35px] border-b dark:border-gray-800" />
<th className="p-1 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1 text-left font-medium sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 h-[50px] min-h-[50px] w-[50px] min-w-[35px] border-b dark:border-gray-800" />
<th className="p-1 text-left font-medium sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant={sorting.column === "name" ? "default" : "ghost"}
onClick={() => handleSort("name")}
@@ -309,7 +309,7 @@ const ProductGrid = ({
Product
</Button>
</th>
<th className="p-1 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant={sorting.column === "totalQuantity" ? "default" : "ghost"}
onClick={() => handleSort("totalQuantity")}
@@ -318,7 +318,7 @@ const ProductGrid = ({
Sold
</Button>
</th>
<th className="p-1 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant={sorting.column === "totalRevenue" ? "default" : "ghost"}
onClick={() => handleSort("totalRevenue")}
@@ -327,7 +327,7 @@ const ProductGrid = ({
Rev
</Button>
</th>
<th className="p-1 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b dark:border-gray-800">
<th className="p-1 font-medium text-center sticky top-0 bg-white dark:bg-gray-900/60 backdrop-blur-sm z-10 border-b dark:border-gray-800">
<Button
variant={sorting.column === "orderCount" ? "default" : "ghost"}
onClick={() => handleSort("orderCount")}
@@ -377,7 +377,7 @@ const ProductGrid = ({
</TooltipProvider>
</div>
</td>
<td className="p-1 align-middle text-center text-sm font-medium">
<td className="p-1 align-middle text-center text-sm font-medium text-gray-900 dark:text-gray-100">
{product.totalQuantity}
</td>
<td className="p-1 align-middle text-center text-emerald-600 dark:text-emerald-400 text-sm font-medium">

12
dashboard/src/components/dashboard/RealtimeAnalytics.jsx
View File

@@ -181,7 +181,7 @@ const QuotaInfo = ({ tokenQuota }) => {
};
const SkeletonSummaryCard = () => (
<Card>
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 px-4 py-2">
<Skeleton className="h-4 w-24 bg-muted" />
</CardHeader>
@@ -247,10 +247,10 @@ const SkeletonTable = () => (
<TableBody>
{[...Array(8)].map((_, i) => (
<TableRow key={i} className="dark:border-gray-800">
<TableCell>
<TableCell className="py-2.5">
<Skeleton className="h-4 w-48 bg-muted" />
</TableCell>
<TableCell className="text-right">
<TableCell className="text-right py-2.5">
<Skeleton className="h-4 w-12 ml-auto bg-muted" />
</TableCell>
</TableRow>
@@ -438,14 +438,14 @@ export const RealtimeAnalytics = () => {
<CardHeader className="p-6 pb-2">
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
<Skeleton className="h-6 w-48 bg-muted" />
Real-Time Analytics
</CardTitle>
<Skeleton className="h-4 w-32 bg-muted" />
</div>
</CardHeader>
<CardContent className="p-6 pt-0">
<div className="grid grid-cols-2 gap-4 mt-1 mb-3">
<div className="grid grid-cols-2 gap-2 md:gap-3 mt-1 mb-3">
<SkeletonSummaryCard />
<SkeletonSummaryCard />
</div>
@@ -453,7 +453,7 @@ export const RealtimeAnalytics = () => {
<div className="space-y-4">
<div className="flex gap-2">
{[...Array(3)].map((_, i) => (
<Skeleton key={i} className="h-8 w-20 bg-muted" />
<Skeleton key={i} className="h-8 w-20 bg-muted rounded-md" />
))}
</div>
<SkeletonBarChart />

90
dashboard/src/components/dashboard/SalesChart.jsx
View File

@@ -502,7 +502,7 @@ SummaryStats.displayName = "SummaryStats";
// Add these skeleton components near the top of the file
const SkeletonChart = () => (
<div className="h-[400px] w-full bg-card rounded-lg p-4">
<div className="h-[400px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-6">
<div className="h-full flex flex-col">
<div className="flex-1 relative">
{/* Grid lines */}
@@ -516,13 +516,13 @@ const SkeletonChart = () => (
{/* Y-axis labels */}
<div className="absolute left-0 top-0 bottom-0 w-16 flex flex-col justify-between py-4">
{[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-4 w-12 bg-muted" />
<Skeleton key={i} className="h-4 w-12 bg-muted rounded-sm" />
))}
</div>
{/* X-axis labels */}
<div className="absolute left-16 right-0 bottom-0 flex justify-between px-4">
{[...Array(7)].map((_, i) => (
<Skeleton key={i} className="h-4 w-12 bg-muted" />
<Skeleton key={i} className="h-4 w-12 bg-muted rounded-sm" />
))}
</div>
{/* Chart line */}
@@ -540,16 +540,16 @@ const SkeletonChart = () => (
);
const SkeletonStats = () => (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3">
{[...Array(4)].map((_, i) => (
<Card key={i}>
<Card key={i} className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<Skeleton className="h-4 w-24 bg-muted" />
<Skeleton className="h-4 w-16 bg-muted" />
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
<Skeleton className="h-4 w-8 bg-muted rounded-sm" />
</CardHeader>
<CardContent className="p-4 pt-0">
<Skeleton className="h-7 w-28 mb-1 bg-muted" />
<Skeleton className="h-4 w-20 bg-muted" />
<Skeleton className="h-7 w-32 bg-muted rounded-sm mb-1" />
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
</CardContent>
</Card>
))}
@@ -557,49 +557,15 @@ const SkeletonStats = () => (
);
const SkeletonTable = () => (
<div className="rounded-lg border bg-card">
<Table>
<TableHeader>
<TableRow className="hover:bg-transparent">
<TableHead className="w-[120px]">
<Skeleton className="h-4 w-16 bg-muted" />
</TableHead>
<TableHead className="text-center">
<Skeleton className="h-4 w-20 mx-auto bg-muted" />
</TableHead>
<TableHead className="text-center">
<Skeleton className="h-4 w-24 mx-auto bg-muted" />
</TableHead>
<TableHead className="text-center">
<Skeleton className="h-4 w-16 mx-auto bg-muted" />
</TableHead>
<TableHead className="text-center">
<Skeleton className="h-4 w-24 mx-auto bg-muted" />
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{[...Array(10)].map((_, i) => (
<TableRow key={i} className="hover:bg-muted/50">
<TableCell>
<Skeleton className="h-4 w-20 bg-muted" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="h-4 w-12 mx-auto bg-muted" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="h-4 w-20 mx-auto bg-muted" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="h-4 w-16 mx-auto bg-muted" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="h-4 w-20 mx-auto bg-muted" />
</TableCell>
</TableRow>
<div className="rounded-lg border bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<div className="p-4 space-y-4">
{[...Array(7)].map((_, i) => (
<div key={i} className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
<Skeleton className="h-4 w-16 bg-muted rounded-sm" />
</div>
))}
</TableBody>
</Table>
</div>
</div>
);
@@ -724,9 +690,9 @@ const SalesChart = ({
Details
</Button>
</DialogTrigger>
<DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col">
<DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<DialogHeader className="flex-none">
<DialogTitle>Daily Details</DialogTitle>
<DialogTitle className="text-gray-900 dark:text-gray-100">Daily Details</DialogTitle>
<div className="flex items-center justify-center gap-2 pt-4">
<div className="flex flex-wrap gap-1">
<Button
@@ -796,7 +762,7 @@ const SalesChart = ({
</div>
</DialogHeader>
<div className="flex-1 overflow-y-auto mt-6">
<div className="rounded-lg border bg-card w-full">
<div className="rounded-lg border bg-white dark:bg-gray-900/60 backdrop-blur-sm w-full">
<Table className="w-full">
<TableHeader>
<TableRow>
@@ -984,12 +950,12 @@ const SalesChart = ({
<div className="space-y-6">
<SkeletonChart />
<div className="mt-4 flex justify-end">
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-24 bg-muted rounded-sm" />
</div>
{showDailyTable && <SkeletonTable />}
</div>
) : error ? (
<Alert variant="destructive">
<Alert variant="destructive" className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
@@ -1000,15 +966,15 @@ const SalesChart = ({
<div className="flex items-center justify-center h-[400px] text-muted-foreground">
<div className="text-center">
<TrendingUp className="h-12 w-12 mx-auto mb-4" />
<div className="font-medium mb-2">No sales data available</div>
<div className="text-sm">
<div className="font-medium mb-2 text-gray-900 dark:text-gray-100">No sales data available</div>
<div className="text-sm text-muted-foreground">
Try selecting a different time range
</div>
</div>
</div>
) : (
<>
<div className="h-[400px] mt-4 bg-card rounded-lg p-0 relative">
<div className="h-[400px] mt-4 bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-0 relative">
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={data}
@@ -1021,20 +987,20 @@ const SalesChart = ({
<XAxis
dataKey="timestamp"
tickFormatter={formatXAxis}
className="text-xs"
className="text-xs text-muted-foreground"
tick={{ fill: "currentColor" }}
/>
<YAxis
yAxisId="revenue"
tickFormatter={(value) => formatCurrency(value, false)}
className="text-xs"
className="text-xs text-muted-foreground"
tick={{ fill: "currentColor" }}
/>
<YAxis
yAxisId="orders"
orientation="right"
tickFormatter={(value) => value.toLocaleString()}
className="text-xs"
className="text-xs text-muted-foreground"
tick={{ fill: "currentColor" }}
/>
<Tooltip content={<CustomTooltip />} />

46
dashboard/src/components/dashboard/StatCards.jsx
View File

@@ -981,7 +981,7 @@ const StatCard = ({
progress,
}) => (
<Card
className={`${className} ${
className={`${className} bg-white dark:bg-gray-900/60 backdrop-blur-sm ${
onClick || onDetailsClick
? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
: ""
@@ -1005,8 +1005,8 @@ const StatCard = ({
<CardContent className="p-4 pt-0">
{isLoading ? (
<>
<Skeleton className="h-8 w-32 mb-2" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-8 w-32 mb-2 bg-muted rounded-sm" />
<Skeleton className="h-4 w-24 bg-muted rounded-sm" />
</>
) : (
<div className="space-y-2">
@@ -1094,7 +1094,7 @@ const useDebouncedEffect = (effect, deps, delay) => {
// Add these skeleton components near the top of the file
const SkeletonCard = () => (
<Card className="relative">
<Card className="relative bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-24 bg-muted" />
@@ -1107,7 +1107,7 @@ const SkeletonCard = () => (
<Skeleton className="h-8 w-24 bg-muted" />
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-32 bg-muted" />
<Skeleton className="h-4 w-16 bg-muted" />
<Skeleton className="h-4 w-16 bg-muted rounded-md" />
</div>
</div>
</CardContent>
@@ -1115,7 +1115,7 @@ const SkeletonCard = () => (
);
const SkeletonChart = ({ type = "line" }) => (
<div className="h-[400px] w-full bg-card rounded-lg p-4">
<div className="h-[400px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-6">
<div className="h-full relative">
{/* Grid lines */}
{[...Array(5)].map((_, i) => (
@@ -1128,21 +1128,21 @@ const SkeletonChart = ({ type = "line" }) => (
{/* Y-axis labels */}
<div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
{[...Array(5)].map((_, i) => (
<Skeleton key={i} className="h-3 w-6 bg-muted" />
<Skeleton key={i} className="h-3 w-6 bg-muted rounded-sm" />
))}
</div>
{/* X-axis labels */}
<div className="absolute left-8 right-4 bottom-0 flex justify-between">
{[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-3 w-8 bg-muted" />
<Skeleton key={i} className="h-3 w-8 bg-muted rounded-sm" />
))}
</div>
{type === "bar" ? (
<div className="absolute inset-x-8 bottom-6 top-4 flex items-end justify-between">
<div className="absolute inset-x-8 bottom-6 top-4 flex items-end justify-between gap-1">
{[...Array(24)].map((_, i) => (
<div
key={i}
className="w-2 bg-muted"
className="w-2 bg-muted rounded-sm"
style={{ height: `${Math.random() * 80 + 10}%` }}
/>
))}
@@ -1151,7 +1151,7 @@ const SkeletonChart = ({ type = "line" }) => (
<div className="absolute inset-x-8 bottom-6 top-4">
<div className="h-full w-full relative">
<div
className="absolute inset-0 bg-muted"
className="absolute inset-0 bg-muted rounded-sm"
style={{
opacity: 0.5,
clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
@@ -1165,18 +1165,18 @@ const SkeletonChart = ({ type = "line" }) => (
);
const SkeletonTable = ({ rows = 8 }) => (
<div className="rounded-lg border bg-card">
<div className="rounded-lg border bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead>
<Skeleton className="h-4 w-32 bg-muted" />
<Skeleton className="h-4 w-32 bg-muted rounded-sm" />
</TableHead>
<TableHead className="text-right">
<Skeleton className="h-4 w-24 ml-auto bg-muted" />
<Skeleton className="h-4 w-24 ml-auto bg-muted rounded-sm" />
</TableHead>
<TableHead className="text-right">
<Skeleton className="h-4 w-24 ml-auto bg-muted" />
<Skeleton className="h-4 w-24 ml-auto bg-muted rounded-sm" />
</TableHead>
</TableRow>
</TableHeader>
@@ -1184,13 +1184,13 @@ const SkeletonTable = ({ rows = 8 }) => (
{[...Array(rows)].map((_, i) => (
<TableRow key={i} className="dark:border-gray-800">
<TableCell>
<Skeleton className="h-4 w-48 bg-muted" />
<Skeleton className="h-4 w-48 bg-muted rounded-sm" />
</TableCell>
<TableCell className="text-right">
<Skeleton className="h-4 w-16 ml-auto bg-muted" />
<Skeleton className="h-4 w-16 ml-auto bg-muted rounded-sm" />
</TableCell>
<TableCell className="text-right">
<Skeleton className="h-4 w-16 ml-auto bg-muted" />
<Skeleton className="h-4 w-16 ml-auto bg-muted rounded-sm" />
</TableCell>
</TableRow>
))}
@@ -1731,7 +1731,7 @@ const StatCards = ({
if (loading && !stats) {
return (
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="p-6">
<CardHeader className="p-6 pb-2">
<div className="flex flex-col space-y-2">
<div className="flex justify-between items-start">
<div>
@@ -1739,19 +1739,19 @@ const StatCards = ({
{title}
</CardTitle>
{description && (
<CardDescription className="mt-1">
<CardDescription className="mt-1 text-muted-foreground">
{description}
</CardDescription>
)}
</div>
<div className="flex items-center gap-4">
<Skeleton className="h-4 w-32 bg-muted" />
<Skeleton className="h-4 w-32 bg-muted rounded-sm" />
<Skeleton className="h-9 w-[130px] bg-muted rounded-md" />
</div>
</div>
</div>
</CardHeader>
<CardContent className="p-6 pt-0">
<CardContent className="p-6 pt-0 space-y-4">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-3 2xl:grid-cols-4 gap-2 md:gap-3">
{[...Array(12)].map((_, i) => (
<SkeletonCard key={i} />
@@ -1773,7 +1773,7 @@ const StatCards = ({
{title}
</CardTitle>
{description && (
<CardDescription className="mt-1">
<CardDescription className="mt-1 text-muted-foreground">
{description}
</CardDescription>
)}

104
dashboard/src/components/dashboard/UserBehaviorDashboard.jsx
View File

@@ -33,19 +33,19 @@ const SkeletonTable = ({ rows = 12 }) => (
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead><Skeleton className="h-4 w-48 dark:bg-gray-700" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableHead>
<TableHead><Skeleton className="h-4 w-48 bg-muted rounded-sm" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted rounded-sm" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted rounded-sm" /></TableHead>
<TableHead className="text-right"><Skeleton className="h-4 w-16 ml-auto bg-muted rounded-sm" /></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{[...Array(rows)].map((_, i) => (
<TableRow key={i} className="dark:border-gray-800">
<TableCell className="py-3"><Skeleton className="h-4 w-64 dark:bg-gray-700" /></TableCell>
<TableCell className="text-right py-3"><Skeleton className="h-4 w-12 ml-auto dark:bg-gray-700" /></TableCell>
<TableCell className="text-right py-3"><Skeleton className="h-4 w-12 ml-auto dark:bg-gray-700" /></TableCell>
<TableCell className="text-right py-3"><Skeleton className="h-4 w-16 ml-auto dark:bg-gray-700" /></TableCell>
<TableCell className="py-3"><Skeleton className="h-4 w-64 bg-muted rounded-sm" /></TableCell>
<TableCell className="text-right py-3"><Skeleton className="h-4 w-12 ml-auto bg-muted rounded-sm" /></TableCell>
<TableCell className="text-right py-3"><Skeleton className="h-4 w-12 ml-auto bg-muted rounded-sm" /></TableCell>
<TableCell className="text-right py-3"><Skeleton className="h-4 w-16 ml-auto bg-muted rounded-sm" /></TableCell>
</TableRow>
))}
</TableBody>
@@ -56,13 +56,13 @@ const SkeletonTable = ({ rows = 12 }) => (
const SkeletonPieChart = () => (
<div className="h-60 relative">
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-40 h-40 rounded-full bg-gray-100 dark:bg-gray-800 animate-pulse" />
<div className="w-40 h-40 rounded-full bg-muted animate-pulse" />
</div>
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex gap-4">
{[...Array(3)].map((_, i) => (
<div key={i} className="flex items-center gap-2">
<Skeleton className="h-3 w-3 rounded-full dark:bg-gray-700" />
<Skeleton className="h-4 w-16 dark:bg-gray-700" />
<Skeleton className="h-3 w-3 rounded-full bg-muted" />
<Skeleton className="h-4 w-16 bg-muted rounded-sm" />
</div>
))}
</div>
@@ -73,7 +73,7 @@ const SkeletonTabs = () => (
<div className="space-y-2">
<div className="flex gap-2 mb-4">
{[...Array(3)].map((_, i) => (
<Skeleton key={i} className="h-8 w-24 dark:bg-gray-700" />
<Skeleton key={i} className="h-8 w-24 bg-muted rounded-sm" />
))}
</div>
</div>
@@ -194,16 +194,16 @@ export const UserBehaviorDashboard = () => {
if (loading) {
return (
<Card className="bg-white dark:bg-gray-900 h-full">
<CardHeader>
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm h-full">
<CardHeader className="p-6 pb-4">
<div className="flex justify-between items-start">
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
User Behavior Analysis
</CardTitle>
<Skeleton className="h-9 w-36 dark:bg-gray-700" />
<Skeleton className="h-9 w-36 bg-muted rounded-sm" />
</div>
</CardHeader>
<CardContent>
<CardContent className="p-6 pt-0">
<Tabs defaultValue="pages" className="w-full">
<TabsList className="mb-4">
<TabsTrigger value="pages" disabled>Top Pages</TabsTrigger>
@@ -245,21 +245,21 @@ export const UserBehaviorDashboard = () => {
if (active && payload && payload.length) {
const data = payload[0].payload;
const percentage = ((data.pageViews / totalViews) * 100).toFixed(1);
const sessionPercentage = ((data.sessions / totalSessions) * 100).toFixed(
1
);
const sessionPercentage = ((data.sessions / totalSessions) * 100).toFixed(1);
return (
<div className="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg p-3">
<Card className="p-3 shadow-lg bg-white dark:bg-gray-900/60 backdrop-blur-sm border border-border">
<CardContent className="p-0 space-y-2">
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{data.device}
</p>
<p className="text-sm text-gray-600 dark:text-gray-300">
<p className="text-sm text-muted-foreground">
{data.pageViews.toLocaleString()} views ({percentage}%)
</p>
<p className="text-sm text-gray-600 dark:text-gray-300">
<p className="text-sm text-muted-foreground">
{data.sessions.toLocaleString()} sessions ({sessionPercentage}%)
</p>
</div>
</CardContent>
</Card>
);
}
return null;
@@ -272,14 +272,14 @@ export const UserBehaviorDashboard = () => {
};
return (
<Card className="bg-white dark:bg-gray-900 h-full">
<CardHeader>
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm h-full">
<CardHeader className="p-6 pb-4">
<div className="flex justify-between items-start">
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
User Behavior Analysis
</CardTitle>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-36 bg-white dark:bg-gray-800">
<SelectTrigger className="w-36 h-9">
<SelectValue>
{timeRange === "7" && "Last 7 days"}
{timeRange === "14" && "Last 14 days"}
@@ -296,7 +296,7 @@ export const UserBehaviorDashboard = () => {
</Select>
</div>
</CardHeader>
<CardContent>
<CardContent className="p-6 pt-0">
<Tabs defaultValue="pages" className="w-full">
<TabsList className="mb-4">
<TabsTrigger value="pages">Top Pages</TabsTrigger>
@@ -311,33 +311,25 @@ export const UserBehaviorDashboard = () => {
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead className="text-gray-900 dark:text-gray-100">
Page Path
</TableHead>
<TableHead className="text-right text-gray-900 dark:text-gray-100">
Views
</TableHead>
<TableHead className="text-right text-gray-900 dark:text-gray-100">
Bounce Rate
</TableHead>
<TableHead className="text-right text-gray-900 dark:text-gray-100">
Avg. Duration
</TableHead>
<TableHead className="text-foreground">Page Path</TableHead>
<TableHead className="text-right text-foreground">Views</TableHead>
<TableHead className="text-right text-foreground">Bounce Rate</TableHead>
<TableHead className="text-right text-foreground">Avg. Duration</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data?.data?.pageData?.pageData.map((page, index) => (
<TableRow key={index} className="dark:border-gray-800">
<TableCell className="font-medium text-gray-900 dark:text-gray-100">
<TableCell className="font-medium text-foreground">
{page.path}
</TableCell>
<TableCell className="text-right text-gray-600 dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{page.pageViews.toLocaleString()}
</TableCell>
<TableCell className="text-right text-gray-600 dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{page.bounceRate.toFixed(1)}%
</TableCell>
<TableCell className="text-right text-gray-600 dark:text-gray-300">
<TableCell className="text-right text-muted-foreground">
{formatDuration(page.avgSessionDuration)}
</TableCell>
</TableRow>
@@ -353,33 +345,25 @@ export const UserBehaviorDashboard = () => {
<Table>
<TableHeader>
<TableRow className="dark:border-gray-800">
<TableHead className="text-gray-900 dark:text-gray-100">
Source
</TableHead>
<TableHead className="text-right text-gray-900 dark:text-gray-100">
Sessions
</TableHead>
<TableHead className="text-right text-gray-900 dark:text-gray-100">
Conversions
</TableHead>
<TableHead className="text-right text-gray-900 dark:text-gray-100">
Conv. Rate
</TableHead>
<TableHead className="text-foreground w-[35%] min-w-[120px]">Source</TableHead>
<TableHead className="text-right text-foreground w-[20%] min-w-[80px]">Sessions</TableHead>
<TableHead className="text-right text-foreground w-[20%] min-w-[80px]">Conv.</TableHead>
<TableHead className="text-right text-foreground w-[25%] min-w-[80px]">Conv. Rate</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data?.data?.sourceData?.map((source, index) => (
<TableRow key={index} className="dark:border-gray-800">
<TableCell className="font-medium text-gray-900 dark:text-gray-100">
<TableCell className="font-medium text-foreground break-words max-w-[160px]">
{source.source}
</TableCell>
<TableCell className="text-right text-gray-600 dark:text-gray-300">
<TableCell className="text-right text-muted-foreground whitespace-nowrap">
{source.sessions.toLocaleString()}
</TableCell>
<TableCell className="text-right text-gray-600 dark:text-gray-300">
<TableCell className="text-right text-muted-foreground whitespace-nowrap">
{source.conversions.toLocaleString()}
</TableCell>
<TableCell className="text-right text-gray-600 dark:text-gray-300">
<TableCell className="text-right text-muted-foreground whitespace-nowrap">
{((source.conversions / source.sessions) * 100).toFixed(1)}%
</TableCell>
</TableRow>
@@ -392,7 +376,7 @@ export const UserBehaviorDashboard = () => {
value="devices"
className="mt-4 space-y-2 h-full max-h-[540px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
>
<div className="h-60">
<div className="h-60 bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-4">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie