+
+
+ {/* Active filters display */}
+
+ {filterCount > 0 && (
+
+ Active filters:
+
+ Status: In Progress
+
+
+
+ )}
+
);
};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c6517b2..3143bef 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -38,7 +38,7 @@ const Sidebar = () => {
];
return (
-
-
-
-
+
+
+ {isGenerating && (
+ AI Executive Summary
-Refreshed 3 mins ago
++ {isGenerating ? "Generating insights..." : "Updated just now"} +
-
-
+
+
+
+
+ {/* Insight Indicators */}
+
+
+ )}
);
diff --git a/src/components/DashboardControls.tsx b/src/components/DashboardControls.tsx
index 9c58a18..fb69aff 100644
--- a/src/components/DashboardControls.tsx
+++ b/src/components/DashboardControls.tsx
@@ -1,14 +1,46 @@
-import { useState } from "react";
-import { RefreshCw, Filter, Plus } from "lucide-react";
+import { useState, useEffect } from "react";
+import { RefreshCw, Filter, Plus, ChevronDown } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
const DashboardControls = () => {
const [editMode, setEditMode] = useState(false);
const [autoRefresh, setAutoRefresh] = useState(true);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+ const [lastRefresh, setLastRefresh] = useState("3 mins ago");
+ const [filterCount, setFilterCount] = useState(0);
+ const [showFilters, setShowFilters] = useState(false);
+
+ const handleRefresh = () => {
+ setIsRefreshing(true);
+ setTimeout(() => {
+ setIsRefreshing(false);
+ setLastRefresh("just now");
+ }, 1500);
+ };
+
+ const toggleFilter = () => {
+ setFilterCount(prev => prev === 0 ? 1 : 0);
+ };
+
+ useEffect(() => {
+ if (autoRefresh) {
+ const interval = setInterval(() => {
+ setLastRefresh(prev => {
+ if (prev === "just now") return "1 min ago";
+ if (prev === "1 min ago") return "2 mins ago";
+ if (prev === "2 mins ago") return "3 mins ago";
+ return "3 mins ago";
+ });
+ }, 60000);
+ return () => clearInterval(interval);
+ }
+ }, [autoRefresh]);
return (
-
+ {/* Main Insight Card */}
+ Executive Summary
-- No tasks were updated in the last week. -
-
+
+
+
+
+
+ + {currentData.title} +
++ {currentData.content} +
+
+ {insights.map((_, index) => (
+
+ {/* Recommendations Section */}
+
-
- Key Efforts & Initiatives
+
+
+ {isExpanded && (
+
- Key Efforts & Initiatives
+
+
+ AI Recommendations
-
There are no active tasks.
+
+ {recommendations.map((rec, index) => (
+
+
+ ))}
+
+ {index + 1}
+
+ {rec}
+Detailed Analytics
+
+
+
+
+ 92%
+ Team Efficiency
+
+
+ +18%
+ Week over Week
+
+ {/* Edit Mode Toggle */}
+ {/* Add Card Button */}
Edit mode:
+ {editMode && (
+
+ Active
+
+ )}
+ {/* Refresh Status */}
-
-
+
+ {/* Auto Refresh Toggle */}
Auto refresh:
- On
+
+ {autoRefresh ? 'On' : 'Off'}
+
-
+ {/* Filters */}
+
+
+
+ {/* Filter Dropdown */}
+
+ {showFilters && (
+
+
+ )}
+
+
Filter Options
+
+ {['Status', 'Assignee', 'Priority', 'Date'].map((filter) => (
+
+ ))}
+
+
+
+
diff --git a/src/components/TaskCharts.tsx b/src/components/TaskCharts.tsx
index 31cf79c..47f178f 100644
--- a/src/components/TaskCharts.tsx
+++ b/src/components/TaskCharts.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import {
PieChart,
Pie,
@@ -7,81 +8,226 @@ import {
XAxis,
YAxis,
ResponsiveContainer,
+ Tooltip,
+ LineChart,
+ Line,
} from "recharts";
+import { motion } from "framer-motion";
const TaskCharts = () => {
+ const [activeIndex, setActiveIndex] = useState(-1);
+ const [selectedChart, setSelectedChart] = useState(null);
+
const pieData = [
- { name: "Assigned", value: 20 },
- { name: "Unassigned", value: 80 },
+ { name: "Assigned", value: 65, color: "#10B981" },
+ { name: "Unassigned", value: 35, color: "#9CA3AF" },
];
const barData = [
- { name: "User A", value: 7 },
- { name: "User B", value: 6 },
- { name: "User C", value: 5 },
- { name: "User D", value: 4 },
- { name: "User E", value: 3 },
+ { name: "Alice", value: 8, avatar: "👩💼" },
+ { name: "Bob", value: 6, avatar: "👨💻" },
+ { name: "Carol", value: 5, avatar: "👩🎨" },
+ { name: "David", value: 4, avatar: "👨🔬" },
+ { name: "Emma", value: 3, avatar: "👩🚀" },
+ ];
+
+ const weeklyData = [
+ { day: "Mon", completed: 12, pending: 3 },
+ { day: "Tue", completed: 15, pending: 5 },
+ { day: "Wed", completed: 8, pending: 7 },
+ { day: "Thu", completed: 18, pending: 2 },
+ { day: "Fri", completed: 22, pending: 4 },
+ { day: "Sat", completed: 5, pending: 1 },
+ { day: "Sun", completed: 3, pending: 0 },
];
- const COLORS = ["#9CA3AF", "#E5E7EB"];
+ const onPieEnter = (_: unknown, index: number) => {
+ setActiveIndex(index);
+ };
+
+ const onPieLeave = () => {
+ setActiveIndex(-1);
+ };
+
+ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: Array<{ value: number; payload: Record }>; label?: string }) => {
+ if (active && payload && payload.length) {
+ return (
+
+
+ );
+ }
+ return null;
+ };
+
+ const PieTooltip = ({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number }> }) => {
+ if (active && payload && payload.length) {
+ return (
+ {`${label}: ${payload[0].value} tasks`}
+
+
+ );
+ }
+ return null;
+ };
return (
- {`${payload[0].name}: ${payload[0].value}%`}
+
-
+
+ {/* Pie Chart */}
+ setSelectedChart(selectedChart === 'pie' ? null : 'pie')}
+ >
-
Total Tasks by Assignee
-
+
- {pieData.map((entry, index) => (
+ {pieData.map((entry) => (
|
))}
+
-
+
+ {pieData.map((entry) => (
+
+
+
+ {entry.name} ({entry.value}%)
+
+ ))}
+
+ {/* Bar Chart */}
+ setSelectedChart(selectedChart === 'bar' ? null : 'bar')}
+ >
-
Open Tasks by Assignee
-Tasks
-
+
-
-
+
-
+ Active Tasks
+
+ {barData.slice(0, 3).map((user) => (
+
+
+
+ ))}
+ {user.avatar}
+ {user.name}
+ {user.value}
+
+ {/* Line Chart */}
+ setSelectedChart(selectedChart === 'line' ? null : 'line')}
+ >
(null);
+
+ const data = [
+ { name: "Development", completed: 45, inProgress: 25, pending: 15, total: 85 },
+ { name: "Design", completed: 30, inProgress: 20, pending: 10, total: 60 },
+ { name: "Testing", completed: 20, inProgress: 15, pending: 5, total: 40 },
+ { name: "Review", completed: 35, inProgress: 10, pending: 8, total: 53 },
+ ];
+
+ const teamStats = [
+ { label: "Active Members", value: 12, icon: Users, color: "text-gray-600" },
+ { label: "Capacity Used", value: "73%", icon: Activity, color: "text-blue-600" },
+ { label: "Weekly Goal", value: "85%", icon: Target, color: "text-green-600" },
+ ];
+
+ const CustomTooltip = ({ active, payload, label }: {
+ active?: boolean;
+ payload?: Array<{ payload: { completed: number; inProgress: number; pending: number; total: number } }>;
+ label?: string
+ }) => {
+ if (active && payload && payload.length) {
+ const data = payload[0].payload;
+ return (
+
- Tasks Completed This Week + Weekly Task Completion
-
-
);
};
diff --git a/src/components/TaskStatusOverview.tsx b/src/components/TaskStatusOverview.tsx
index b8980bc..7898b26 100644
--- a/src/components/TaskStatusOverview.tsx
+++ b/src/components/TaskStatusOverview.tsx
@@ -1,26 +1,123 @@
+import { useState, useEffect } from "react";
+import { Clock, CheckCircle, AlertCircle, TrendingUp } from "lucide-react";
+import { motion } from "framer-motion";
+
const TaskStatusOverview = () => {
+ const [animateNumbers, setAnimateNumbers] = useState(false);
+
const statusData = [
- { label: "Unassigned", count: 6, color: "bg-gray-100 text-gray-700" },
- { label: "In Progress", count: 1, color: "bg-blue-100 text-blue-700" },
- { label: "Completed", count: 0, color: "bg-green-100 text-green-700" },
+ {
+ label: "Unassigned",
+ count: 8,
+ color: "bg-gray-50 border-gray-200",
+ textColor: "text-gray-700",
+ numberColor: "text-gray-900",
+ icon: AlertCircle,
+ iconColor: "text-gray-500",
+ trend: "+2 from yesterday",
+ trendColor: "text-gray-600"
+ },
+ {
+ label: "In Progress",
+ count: 12,
+ color: "bg-blue-50 border-blue-200",
+ textColor: "text-blue-700",
+ numberColor: "text-blue-600",
+ icon: Clock,
+ iconColor: "text-blue-500",
+ trend: "+5 from yesterday",
+ trendColor: "text-blue-600"
+ },
+ {
+ label: "Completed",
+ count: 24,
+ color: "bg-green-50 border-green-200",
+ textColor: "text-green-700",
+ numberColor: "text-green-600",
+ icon: CheckCircle,
+ iconColor: "text-green-500",
+ trend: "+8 from yesterday",
+ trendColor: "text-green-600"
+ },
];
+ useEffect(() => {
+ const timer = setTimeout(() => setAnimateNumbers(true), 100);
+ return () => clearTimeout(timer);
+ }, []);
+
+ const CountUpAnimation = ({ target, className }: { target: number; className: string }) => {
+ const [current, setCurrent] = useState(0);
+
+ useEffect(() => {
+ if (!animateNumbers) return;
+
+ const increment = target / 20;
+ const timer = setInterval(() => {
+ setCurrent(prev => {
+ const next = prev + increment;
+ if (next >= target) {
+ clearInterval(timer);
+ return target;
+ }
+ return next;
+ });
+ }, 50);
+
+ return () => clearInterval(timer);
+ }, [target]);
+
+ return (
+
-
+
📋
- No Results
+Last 7 days
+
+
+
+
+
+
+
+
-
+
+ Completed
+
+
+
+ Pending
+ {Math.floor(current)}
+
+ );
+ };
+
return (
- {statusData.map((status, index) => (
-
+
+ );
+ })}
);
};
diff --git a/src/components/WorkloadChart.tsx b/src/components/WorkloadChart.tsx
index 9ea1645..a7b0893 100644
--- a/src/components/WorkloadChart.tsx
+++ b/src/components/WorkloadChart.tsx
@@ -1,29 +1,176 @@
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
+import { useState } from "react";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Tooltip, Cell } from "recharts";
+import { Users, Activity, Target } from "lucide-react";
+import { motion } from "framer-motion";
const WorkloadChart = () => {
- const data = [{ name: "Workload", gray: 85, blue: 15 }];
+ const [activeBar, setActiveBar] = useState
-
- ))}
+ {statusData.map((status, index) => {
+ const IconComponent = status.icon;
+ return (
+ - {status.label} -
-
- {status.count}
-
- tasks
-
+
+
+ + {status.label} +
+tasks
+
+
+
+
+ {/* Simple progress indicator */}
+
+
+
+
+ );
+ }
+ return null;
+ };
return (
- {label}
+
+
+
+
+ Completed: {data.completed}
+
+
+
+ In Progress: {data.inProgress}
+
+
+
+ Pending: {data.pending}
+
+
+ Total: {data.total} tasks
+
+
-
- Workload by Status -
-
+
+
-
- {
+ if (e && e.activeTooltipIndex !== undefined) {
+ setActiveBar(e.activeTooltipIndex);
+ }
+ }}
+ onMouseLeave={() => setActiveBar(null)}
+ >
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
-
);
};
+
+
+ {/* Team Stats */}
+ + Team Workload Overview +
+
+
+
+
+
+
+ {teamStats.map((stat, index) => {
+ const IconComponent = stat.icon;
+ return (
+
+
+ );
+ })}
+
+
+ {stat.value}
+ {stat.label}
+
- 0
- Tasks
- 100
+
+ {/* Legend */}
+
+
+
-
+
+ Completed
+
+
+
+ In Progress
+
+
+
+ Pending
+