Enhance analytics page with live data and improved layout
Refactors AnalyticsPage and RealTimeAnalytics components to fetch and display live data, adds header, and improves layout with Tailwind CSS. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/848ca96a-3b08-40c5-b403-0781a68331d9.jpg
This commit is contained in:
ghaddaditw
@@ -1,28 +1,7 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Activity,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Users,
|
||||
Clock,
|
||||
Target,
|
||||
Brain,
|
||||
Zap,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
BarChart3,
|
||||
RefreshCw,
|
||||
Download,
|
||||
Calendar
|
||||
} from 'lucide-react';
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Activity, TrendingUp, Users, Zap, Brain, Server, Gauge, AlertCircle, Target } from "lucide-react";
|
||||
|
||||
interface AnalyticsData {
|
||||
performance: {
|
||||
@@ -66,144 +45,68 @@ interface MetricCard {
|
||||
format: 'number' | 'percentage' | 'currency' | 'time';
|
||||
}
|
||||
|
||||
const RealTimeAnalytics = () => {
|
||||
const { t } = useTranslation();
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [selectedTimeRange, setSelectedTimeRange] = useState('24h');
|
||||
const [alertsVisible, setAlertsVisible] = useState(true);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
|
||||
// Fetch real analytics data from the backend
|
||||
const { data: analyticsData, refetch } = useQuery({
|
||||
queryKey: ['/api/analytics/dashboard', selectedTimeRange],
|
||||
export default function RealTimeAnalytics() {
|
||||
const { data: analyticsData, isLoading, error } = useQuery({
|
||||
queryKey: ['/api/analytics/dashboard'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`/api/analytics/dashboard?range=${selectedTimeRange}`);
|
||||
const response = await fetch('/api/analytics/dashboard');
|
||||
if (!response.ok) {
|
||||
// Return current session analytics if dashboard endpoint doesn't exist
|
||||
const behaviorResponse = await fetch('/api/analytics/user-behavior');
|
||||
if (behaviorResponse.ok) {
|
||||
const behaviorData = await behaviorResponse.json();
|
||||
return transformBehaviorToAnalytics(behaviorData);
|
||||
}
|
||||
throw new Error('Failed to fetch analytics');
|
||||
throw new Error('Failed to fetch analytics data');
|
||||
}
|
||||
return response.json() as AnalyticsData;
|
||||
return await response.json() as AnalyticsData;
|
||||
},
|
||||
refetchInterval: 30000,
|
||||
refetchInterval: 30000, // Refresh every 30 seconds
|
||||
});
|
||||
|
||||
const transformBehaviorToAnalytics = (behaviorData: any): AnalyticsData => {
|
||||
return {
|
||||
performance: {
|
||||
responseTime: 150,
|
||||
throughput: 250,
|
||||
errorRate: 0.5,
|
||||
uptime: 99.8
|
||||
},
|
||||
user: {
|
||||
activeUsers: 1,
|
||||
sessionDuration: behaviorData.performanceMetrics?.averageSessionDuration || 45,
|
||||
bounceRate: 25,
|
||||
conversionRate: behaviorData.performanceMetrics?.taskCompletionRate || 75
|
||||
},
|
||||
business: {
|
||||
tasksCompleted: 0,
|
||||
revenueGenerated: 0,
|
||||
clientSatisfaction: behaviorData.performanceMetrics?.satisfactionScore || 85,
|
||||
growthRate: 12
|
||||
},
|
||||
system: {
|
||||
memoryUsage: 65,
|
||||
cpuUsage: 42,
|
||||
diskUsage: 78,
|
||||
networkLatency: 35
|
||||
},
|
||||
aiInsights: {
|
||||
productivityScore: behaviorData.performanceMetrics?.taskCompletionRate || 78,
|
||||
efficiencyTrends: [5.2, 3.8, 7.1, 2.4],
|
||||
recommendedActions: [
|
||||
'Consider using the Productivity layout during morning hours',
|
||||
'Enable focus mode for deep work sessions',
|
||||
'Review task prioritization to improve completion rates'
|
||||
],
|
||||
workspaceOptimization: 82
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Real-time WebSocket connection for live updates
|
||||
useEffect(() => {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||
const formatValue = (value: number | string, format: MetricCard['format']) => {
|
||||
if (typeof value === 'string') return value;
|
||||
|
||||
wsRef.current = new WebSocket(wsUrl);
|
||||
|
||||
wsRef.current.onopen = () => {
|
||||
console.log('Analytics WebSocket connected');
|
||||
wsRef.current?.send(JSON.stringify({
|
||||
type: 'subscribe',
|
||||
channel: 'analytics'
|
||||
}));
|
||||
};
|
||||
|
||||
wsRef.current.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'analytics_update') {
|
||||
refetch();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing WebSocket data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
wsRef.current?.close();
|
||||
};
|
||||
}, [refetch]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setIsRefreshing(true);
|
||||
await refetch();
|
||||
setTimeout(() => setIsRefreshing(false), 1000);
|
||||
};
|
||||
|
||||
const formatValue = (value: number, format: MetricCard['format']): string => {
|
||||
switch (format) {
|
||||
case 'percentage':
|
||||
return `${value.toFixed(1)}%`;
|
||||
case 'currency':
|
||||
return `$${value.toLocaleString()}`;
|
||||
return `$${value.toFixed(2)}`;
|
||||
case 'time':
|
||||
return `${Math.round(value)}ms`;
|
||||
return `${value}ms`;
|
||||
default:
|
||||
return value.toLocaleString();
|
||||
return value.toString();
|
||||
}
|
||||
};
|
||||
|
||||
const getChangeIcon = (change: number) => {
|
||||
return change >= 0 ? TrendingUp : TrendingDown;
|
||||
const MetricCardComponent = ({ metric }: { metric: MetricCard }) => {
|
||||
const IconComponent = metric.icon;
|
||||
const isPositive = metric.change >= 0;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">{metric.title}</CardTitle>
|
||||
<IconComponent className={`h-4 w-4 ${metric.color}`} />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={`text-2xl font-bold ${metric.color}`}>
|
||||
{formatValue(metric.value, metric.format)}
|
||||
</div>
|
||||
<p className={`text-xs ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{isPositive ? '+' : ''}{metric.change.toFixed(1)}% from last period
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const getChangeColor = (change: number) => {
|
||||
return change >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400';
|
||||
};
|
||||
|
||||
if (!analyticsData) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold">Real-Time Analytics</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
<span className="text-sm text-muted-foreground">Loading analytics...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<Card key={i} className="animate-pulse">
|
||||
<CardContent className="p-6">
|
||||
<div className="h-16 bg-muted rounded"></div>
|
||||
<Card key={i}>
|
||||
<CardHeader>
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2"></div>
|
||||
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
@@ -212,354 +115,202 @@ const RealTimeAnalytics = () => {
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !analyticsData) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card className="border-red-200 dark:border-red-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
Analytics Unavailable
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-red-600 dark:text-red-400">
|
||||
Unable to load real-time analytics data. Please check your connection and try again.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const performanceMetrics: MetricCard[] = [
|
||||
{
|
||||
title: 'Response Time',
|
||||
title: "Response Time",
|
||||
value: analyticsData.performance.responseTime,
|
||||
change: -12.5,
|
||||
icon: Clock,
|
||||
color: 'text-blue-600',
|
||||
format: 'time'
|
||||
change: -5.2,
|
||||
icon: Zap,
|
||||
color: "text-blue-600",
|
||||
format: "time"
|
||||
},
|
||||
{
|
||||
title: 'Throughput',
|
||||
title: "Throughput",
|
||||
value: analyticsData.performance.throughput,
|
||||
change: 8.3,
|
||||
icon: Activity,
|
||||
color: 'text-green-600',
|
||||
format: 'number'
|
||||
change: 12.3,
|
||||
icon: TrendingUp,
|
||||
color: "text-green-600",
|
||||
format: "number"
|
||||
},
|
||||
{
|
||||
title: 'Error Rate',
|
||||
title: "Error Rate",
|
||||
value: analyticsData.performance.errorRate,
|
||||
change: -2.1,
|
||||
icon: AlertTriangle,
|
||||
color: 'text-red-600',
|
||||
format: 'percentage'
|
||||
change: -15.1,
|
||||
icon: AlertCircle,
|
||||
color: "text-red-600",
|
||||
format: "percentage"
|
||||
},
|
||||
{
|
||||
title: 'Uptime',
|
||||
title: "Uptime",
|
||||
value: analyticsData.performance.uptime,
|
||||
change: 0.2,
|
||||
icon: CheckCircle,
|
||||
color: 'text-green-600',
|
||||
format: 'percentage'
|
||||
change: 0.1,
|
||||
icon: Server,
|
||||
color: "text-green-600",
|
||||
format: "percentage"
|
||||
}
|
||||
];
|
||||
|
||||
const userMetrics: MetricCard[] = [
|
||||
{
|
||||
title: 'Active Users',
|
||||
title: "Active Users",
|
||||
value: analyticsData.user.activeUsers,
|
||||
change: 8.2,
|
||||
icon: Users,
|
||||
color: "text-purple-600",
|
||||
format: "number"
|
||||
},
|
||||
{
|
||||
title: "Session Duration",
|
||||
value: `${analyticsData.user.sessionDuration}min`,
|
||||
change: 15.7,
|
||||
icon: Users,
|
||||
color: 'text-purple-600',
|
||||
format: 'number'
|
||||
},
|
||||
{
|
||||
title: 'Session Duration',
|
||||
value: analyticsData.user.sessionDuration,
|
||||
change: 5.2,
|
||||
icon: Clock,
|
||||
color: 'text-orange-600',
|
||||
format: 'time'
|
||||
},
|
||||
{
|
||||
title: 'Bounce Rate',
|
||||
value: analyticsData.user.bounceRate,
|
||||
change: -3.8,
|
||||
icon: TrendingDown,
|
||||
color: 'text-yellow-600',
|
||||
format: 'percentage'
|
||||
},
|
||||
{
|
||||
title: 'Conversion Rate',
|
||||
value: analyticsData.user.conversionRate,
|
||||
change: 12.4,
|
||||
icon: Target,
|
||||
color: 'text-green-600',
|
||||
format: 'percentage'
|
||||
}
|
||||
];
|
||||
|
||||
const businessMetrics: MetricCard[] = [
|
||||
{
|
||||
title: 'Tasks Completed',
|
||||
value: analyticsData.business.tasksCompleted,
|
||||
change: 22.1,
|
||||
icon: CheckCircle,
|
||||
color: 'text-blue-600',
|
||||
format: 'number'
|
||||
},
|
||||
{
|
||||
title: 'Revenue Generated',
|
||||
value: analyticsData.business.revenueGenerated,
|
||||
change: 18.5,
|
||||
icon: TrendingUp,
|
||||
color: 'text-green-600',
|
||||
format: 'currency'
|
||||
},
|
||||
{
|
||||
title: 'Client Satisfaction',
|
||||
value: analyticsData.business.clientSatisfaction,
|
||||
change: 4.2,
|
||||
icon: Users,
|
||||
color: 'text-purple-600',
|
||||
format: 'percentage'
|
||||
},
|
||||
{
|
||||
title: 'Growth Rate',
|
||||
value: analyticsData.business.growthRate,
|
||||
change: 7.8,
|
||||
icon: TrendingUp,
|
||||
color: 'text-green-600',
|
||||
format: 'percentage'
|
||||
}
|
||||
];
|
||||
|
||||
const systemMetrics: MetricCard[] = [
|
||||
{
|
||||
title: 'Memory Usage',
|
||||
value: analyticsData.system.memoryUsage,
|
||||
change: 2.3,
|
||||
icon: Brain,
|
||||
color: 'text-indigo-600',
|
||||
format: 'percentage'
|
||||
},
|
||||
{
|
||||
title: 'CPU Usage',
|
||||
value: analyticsData.system.cpuUsage,
|
||||
change: -1.5,
|
||||
icon: Zap,
|
||||
color: 'text-yellow-600',
|
||||
format: 'percentage'
|
||||
},
|
||||
{
|
||||
title: 'Disk Usage',
|
||||
value: analyticsData.system.diskUsage,
|
||||
change: 0.8,
|
||||
icon: BarChart3,
|
||||
color: 'text-orange-600',
|
||||
format: 'percentage'
|
||||
},
|
||||
{
|
||||
title: 'Network Latency',
|
||||
value: analyticsData.system.networkLatency,
|
||||
change: -5.2,
|
||||
icon: Activity,
|
||||
color: 'text-blue-600',
|
||||
format: 'time'
|
||||
color: "text-orange-600",
|
||||
format: "number"
|
||||
},
|
||||
{
|
||||
title: "Bounce Rate",
|
||||
value: analyticsData.user.bounceRate,
|
||||
change: -8.3,
|
||||
icon: TrendingUp,
|
||||
color: "text-red-600",
|
||||
format: "percentage"
|
||||
},
|
||||
{
|
||||
title: "Conversion Rate",
|
||||
value: analyticsData.user.conversionRate,
|
||||
change: 22.1,
|
||||
icon: Target,
|
||||
color: "text-green-600",
|
||||
format: "percentage"
|
||||
}
|
||||
];
|
||||
|
||||
const MetricCardComponent = ({ metric }: { metric: MetricCard }) => {
|
||||
const Icon = metric.icon;
|
||||
const ChangeIcon = getChangeIcon(metric.change);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Card className="relative overflow-hidden">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{metric.title}
|
||||
</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatValue(Number(metric.value), metric.format)}
|
||||
</p>
|
||||
<div className={`flex items-center gap-1 text-sm ${getChangeColor(metric.change)}`}>
|
||||
<ChangeIcon className="h-3 w-3" />
|
||||
{Math.abs(metric.change)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-3 rounded-full bg-muted ${metric.color}`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
{t('analytics.realTime', 'Real-Time Analytics')}
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
{t('analytics.description', 'Monitor your application performance and user engagement in real-time')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={isRefreshing}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Insights Alert */}
|
||||
<AnimatePresence>
|
||||
{alertsVisible && analyticsData.aiInsights.recommendedActions.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
>
|
||||
<Card className="border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-950">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Brain className="h-5 w-5 text-orange-600 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">
|
||||
AI-Powered Insights
|
||||
</h4>
|
||||
<ul className="space-y-1 text-sm text-orange-800 dark:text-orange-200">
|
||||
{analyticsData.aiInsights.recommendedActions.map((action, index) => (
|
||||
<li key={index} className="flex items-start gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-orange-600 mt-2" />
|
||||
{action}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setAlertsVisible(false)}
|
||||
className="text-orange-600 hover:text-orange-700"
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Time Range Selector */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">Time Range:</span>
|
||||
<div className="flex gap-1">
|
||||
{['1h', '24h', '7d', '30d'].map((range) => (
|
||||
<Button
|
||||
key={range}
|
||||
variant={selectedTimeRange === range ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedTimeRange(range)}
|
||||
>
|
||||
{range}
|
||||
</Button>
|
||||
{/* Performance Metrics */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Performance Metrics</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{performanceMetrics.map((metric, index) => (
|
||||
<MetricCardComponent key={index} metric={metric} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analytics Tabs */}
|
||||
<Tabs defaultValue="performance" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="performance" className="flex items-center gap-2">
|
||||
<Activity className="h-4 w-4" />
|
||||
Performance
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="users" className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
Users
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="business" className="flex items-center gap-2">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
Business
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="system" className="flex items-center gap-2">
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
System
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
{/* User Metrics */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">User Engagement</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{userMetrics.map((metric, index) => (
|
||||
<MetricCardComponent key={index} metric={metric} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TabsContent value="performance">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{performanceMetrics.map((metric, index) => (
|
||||
<MetricCardComponent key={index} metric={metric} />
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
{/* System Health */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">System Health</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Gauge className="h-5 w-5 text-blue-600" />
|
||||
Resource Usage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>Memory</span>
|
||||
<span>{analyticsData.system.memoryUsage}%</span>
|
||||
</div>
|
||||
<Progress value={analyticsData.system.memoryUsage} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>CPU</span>
|
||||
<span>{analyticsData.system.cpuUsage}%</span>
|
||||
</div>
|
||||
<Progress value={analyticsData.system.cpuUsage} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>Disk</span>
|
||||
<span>{analyticsData.system.diskUsage}%</span>
|
||||
</div>
|
||||
<Progress value={analyticsData.system.diskUsage} className="h-2" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<TabsContent value="users">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{userMetrics.map((metric, index) => (
|
||||
<MetricCardComponent key={index} metric={metric} />
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Brain className="h-5 w-5 text-purple-600" />
|
||||
AI Insights
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>Productivity Score</span>
|
||||
<span>{analyticsData.aiInsights.productivityScore}%</span>
|
||||
</div>
|
||||
<Progress value={analyticsData.aiInsights.productivityScore} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span>Workspace Optimization</span>
|
||||
<span>{analyticsData.aiInsights.workspaceOptimization.toFixed(0)}%</span>
|
||||
</div>
|
||||
<Progress value={analyticsData.aiInsights.workspaceOptimization} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TabsContent value="business">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{businessMetrics.map((metric, index) => (
|
||||
<MetricCardComponent key={index} metric={metric} />
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="system">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{systemMetrics.map((metric, index) => (
|
||||
<MetricCardComponent key={index} metric={metric} />
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* AI Productivity Score */}
|
||||
<Card className="p-6">
|
||||
<CardHeader className="p-0 mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Brain className="h-5 w-5 text-primary" />
|
||||
AI Productivity Score
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-sm">
|
||||
{analyticsData.aiInsights.productivityScore}/100
|
||||
</Badge>
|
||||
</div>
|
||||
{/* AI Recommendations */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Brain className="h-5 w-5 text-indigo-600" />
|
||||
AI Recommendations
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Overall Productivity</span>
|
||||
<span className="font-medium">{analyticsData.aiInsights.productivityScore}%</span>
|
||||
</div>
|
||||
<Progress value={analyticsData.aiInsights.productivityScore} className="h-3" />
|
||||
<div className="grid grid-cols-2 gap-4 text-sm text-muted-foreground">
|
||||
<div>
|
||||
<span>Workspace Optimization: </span>
|
||||
<span className="font-medium">{analyticsData.aiInsights.workspaceOptimization}%</span>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{analyticsData.aiInsights.recommendedActions.map((action, index) => (
|
||||
<div key={index} className="flex items-start gap-2 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="w-2 h-2 rounded-full bg-indigo-500 mt-2 flex-shrink-0"></div>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">{action}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>Efficiency Trend: </span>
|
||||
<span className="font-medium text-green-600">
|
||||
+{analyticsData.aiInsights.efficiencyTrends[0]}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RealTimeAnalytics;
|
||||
}
|
||||
+180
-316
@@ -1,9 +1,9 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import Header from "@/components/layout/Header";
|
||||
import Sidebar from "@/components/layout/Sidebar";
|
||||
import { BarChart3, TrendingUp, TrendingDown, Calendar, Target, DollarSign, Activity, Brain } from "lucide-react";
|
||||
import { BarChart3, TrendingUp, TrendingDown, Calendar, Target, DollarSign, Activity } from "lucide-react";
|
||||
import RealTimeAnalytics from "@/components/analytics/RealTimeAnalytics";
|
||||
|
||||
interface Task {
|
||||
@@ -41,14 +41,16 @@ export default function AnalyticsPage() {
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<Sidebar className="w-64 border-r" />
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="h-32 bg-gray-200 dark:bg-gray-700 rounded"></div>
|
||||
))}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Header />
|
||||
<div className="flex-1 p-6">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded"></div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="h-32 bg-gray-200 dark:bg-gray-700 rounded"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,38 +59,40 @@ export default function AnalyticsPage() {
|
||||
}
|
||||
|
||||
// Calculate task analytics
|
||||
const completedTasks = tasks.filter((task: any) => task.status === 'completed').length;
|
||||
const pendingTasks = tasks.filter((task: any) => task.status === 'pending').length;
|
||||
const inProgressTasks = tasks.filter((task: any) => task.status === 'in_progress').length;
|
||||
const totalTasks = tasks.length;
|
||||
const tasksArray = Array.isArray(tasks) ? tasks as Task[] : [];
|
||||
const completedTasks = tasksArray.filter(task => task.status === 'completed' || task.completed).length;
|
||||
const pendingTasks = tasksArray.filter(task => task.status === 'pending').length;
|
||||
const inProgressTasks = tasksArray.filter(task => task.status === 'in_progress').length;
|
||||
const totalTasks = tasksArray.length;
|
||||
const completionRate = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
|
||||
|
||||
// Calculate financial analytics
|
||||
const summary = financialSummary as FinancialSummary;
|
||||
const recordsArray = Array.isArray(records) ? records as FinancialRecord[] : [];
|
||||
const thisMonth = new Date().getMonth();
|
||||
const thisYear = new Date().getFullYear();
|
||||
const monthlyRecords = records.filter((record: any) => {
|
||||
const monthlyRecords = recordsArray.filter(record => {
|
||||
const recordDate = new Date(record.createdAt);
|
||||
return recordDate.getMonth() === thisMonth && recordDate.getFullYear() === thisYear;
|
||||
});
|
||||
|
||||
const monthlyIncome = monthlyRecords
|
||||
.filter((record: any) => record.type === 'income')
|
||||
.reduce((sum: number, record: any) => sum + record.amount, 0);
|
||||
.filter(record => record.type === 'income')
|
||||
.reduce((sum, record) => sum + record.amount, 0);
|
||||
|
||||
const monthlyExpenses = monthlyRecords
|
||||
.filter((record: any) => record.type === 'expense')
|
||||
.reduce((sum: number, record: any) => sum + record.amount, 0);
|
||||
.filter(record => record.type === 'expense')
|
||||
.reduce((sum, record) => sum + record.amount, 0);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<Sidebar className="w-64 border-r" />
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="p-6">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Header />
|
||||
<div className="flex-1 p-6 overflow-auto">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Analytics</h1>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
Comprehensive insights and performance metrics
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Analytics Dashboard</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">Comprehensive insights and performance metrics</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="realtime" className="space-y-6">
|
||||
@@ -99,11 +103,11 @@ export default function AnalyticsPage() {
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="tasks" className="flex items-center gap-2">
|
||||
<Target className="h-4 w-4" />
|
||||
Tasks
|
||||
Task Analytics
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="financial" className="flex items-center gap-2">
|
||||
<DollarSign className="h-4 w-4" />
|
||||
Financial
|
||||
Financial Analytics
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -112,305 +116,165 @@ export default function AnalyticsPage() {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="tasks" className="space-y-6">
|
||||
{/* Task Analytics */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Task Performance</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
|
||||
<Target className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{totalTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">All time</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
|
||||
<Target className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-600">{totalTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">All time</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Completed</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">{completedTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{completionRate.toFixed(1)}% completion rate
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Completed</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">{completedTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{completionRate.toFixed(1)}% completion rate
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">In Progress</CardTitle>
|
||||
<Calendar className="h-4 w-4 text-orange-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-orange-600">{inProgressTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">Active tasks</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">In Progress</CardTitle>
|
||||
<Calendar className="h-4 w-4 text-orange-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-orange-600">{inProgressTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">Active tasks</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Pending</CardTitle>
|
||||
<TrendingDown className="h-4 w-4 text-red-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-600">{pendingTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">Awaiting action</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Financial Analytics */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Financial Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Income</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
${financialSummary.income.toFixed(2)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This month: ${monthlyIncome.toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
|
||||
<TrendingDown className="h-4 w-4 text-red-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
${financialSummary.expenses.toFixed(2)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This month: ${monthlyExpenses.toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Net Balance</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={`text-2xl font-bold ${financialSummary.net >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
${financialSummary.net.toFixed(2)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Monthly: ${(monthlyIncome - monthlyExpenses).toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Insights */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5" />
|
||||
Task Distribution
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Breakdown of your task statuses
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded"></div>
|
||||
<span className="text-sm">Completed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{completedTasks}</span>
|
||||
<Badge variant="secondary">{totalTasks > 0 ? ((completedTasks / totalTasks) * 100).toFixed(0) : 0}%</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-orange-500 rounded"></div>
|
||||
<span className="text-sm">In Progress</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{inProgressTasks}</span>
|
||||
<Badge variant="secondary">{totalTasks > 0 ? ((inProgressTasks / totalTasks) * 100).toFixed(0) : 0}%</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded"></div>
|
||||
<span className="text-sm">Pending</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{pendingTasks}</span>
|
||||
<Badge variant="secondary">{totalTasks > 0 ? ((pendingTasks / totalTasks) * 100).toFixed(0) : 0}%</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Pending</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-gray-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-gray-600">{pendingTasks}</div>
|
||||
<p className="text-xs text-muted-foreground">Awaiting action</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Financial Health</CardTitle>
|
||||
<CardDescription>
|
||||
Your financial performance indicators
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Savings Rate</span>
|
||||
<Badge variant={financialSummary.income > 0 && (financialSummary.net / financialSummary.income) > 0.2 ? "default" : "secondary"}>
|
||||
{financialSummary.income > 0 ? ((financialSummary.net / financialSummary.income) * 100).toFixed(1) : 0}%
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Monthly Trends</span>
|
||||
<Badge variant={(monthlyIncome - monthlyExpenses) >= 0 ? "default" : "destructive"}>
|
||||
{(monthlyIncome - monthlyExpenses) >= 0 ? "Positive" : "Negative"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Transaction Count</span>
|
||||
<Badge variant="outline">
|
||||
{records.length} total
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">This Month</span>
|
||||
<Badge variant="outline">
|
||||
{monthlyRecords.length} transactions
|
||||
</Badge>
|
||||
</div>
|
||||
{/* Performance Insights */}
|
||||
<div className="mt-6">
|
||||
<h3 className="text-md font-medium text-gray-900 dark:text-white mb-3">Performance Insights</h3>
|
||||
{completionRate >= 80 && (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
||||
<p className="text-sm text-green-800 dark:text-green-200">
|
||||
<strong>Excellent!</strong> You're maintaining a high completion rate of {completionRate.toFixed(1)}%.
|
||||
Keep up the great work!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{completionRate < 50 && totalTasks > 0 && (
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Room for Improvement:</strong> Your completion rate is {completionRate.toFixed(1)}%.
|
||||
Consider breaking tasks into smaller, manageable chunks.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{totalTasks === 0 && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>Get Started:</strong> Create your first task to begin tracking your productivity!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recommendations */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Recommendations</CardTitle>
|
||||
<CardDescription>
|
||||
Suggestions to improve your productivity and financial health
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{completionRate < 70 && (
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Task Management:</strong> Your completion rate is {completionRate.toFixed(1)}%.
|
||||
Consider breaking down large tasks into smaller, manageable pieces.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pendingTasks > inProgressTasks && pendingTasks > 0 && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>Productivity:</strong> You have {pendingTasks} pending tasks.
|
||||
Start working on them to improve your productivity flow.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{financialSummary.net < 0 && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<p className="text-sm text-red-800 dark:text-red-200">
|
||||
<strong>Financial Health:</strong> Your expenses exceed your income.
|
||||
Review your spending patterns and consider creating a budget.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{financialSummary.income > 0 && (financialSummary.net / financialSummary.income) > 0.3 && (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
||||
<p className="text-sm text-green-800 dark:text-green-200">
|
||||
<strong>Great Job!</strong> You're saving over 30% of your income.
|
||||
Consider investing your savings for long-term growth.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="financial" className="space-y-6">
|
||||
{/* Financial Analytics Content */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Financial Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Income</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
${(financialSummary as any)?.income?.toFixed(2) || '0.00'}
|
||||
<TabsContent value="financial" className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Financial Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Income</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
${summary?.income?.toFixed(2) || '0.00'}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This month: ${monthlyIncome.toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
|
||||
<TrendingDown className="h-4 w-4 text-red-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
${summary?.expenses?.toFixed(2) || '0.00'}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This month: ${monthlyExpenses.toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Net Worth</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
${summary?.net?.toFixed(2) || '0.00'}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Total financial position
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Financial Insights */}
|
||||
<div className="mt-6">
|
||||
<h3 className="text-md font-medium text-gray-900 dark:text-white mb-3">Financial Insights</h3>
|
||||
{summary?.net > 0 && summary?.income > 0 && (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
||||
<p className="text-sm text-green-800 dark:text-green-200">
|
||||
<strong>Positive Growth!</strong> You're maintaining a positive net worth.
|
||||
Consider investing your surplus for long-term growth.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{summary?.net < 0 && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<p className="text-sm text-red-800 dark:text-red-200">
|
||||
<strong>Action Needed:</strong> Your expenses exceed income.
|
||||
Review your spending patterns and consider cost reduction strategies.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{summary?.income === 0 && summary?.expenses === 0 && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>Start Tracking:</strong> Add your income and expenses to get personalized financial insights!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This month: ${monthlyIncome.toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
|
||||
<TrendingDown className="h-4 w-4 text-red-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
${(financialSummary as any)?.expenses?.toFixed(2) || '0.00'}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This month: ${monthlyExpenses.toFixed(2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Net Worth</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
${(financialSummary as any)?.net?.toFixed(2) || '0.00'}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Total financial position
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user