Add guided tour feature to help users navigate the application easily

Implements guided tours using `useTourManager` and adds `data-tour` attributes to Sidebar and DashboardPage components.

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/47ecb46e-13fc-4ae3-8146-3786e1ce2a8b.jpg
This commit is contained in:
ghaddaditw
2025-06-08 07:22:17 +00:00
parent c34decacd4
commit 4bb76ae5f7
2 changed files with 16 additions and 1 deletions
+2 -1
View File
@@ -121,7 +121,7 @@ export default function Sidebar({ className }: SidebarProps) {
};
return (
<div className={cn("pb-12 min-h-screen", className)}>
<div className={cn("pb-12 min-h-screen", className)} data-tour="navigation">
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<div className="space-y-1">
@@ -134,6 +134,7 @@ export default function Sidebar({ className }: SidebarProps) {
<Button
variant={isActive(item.href) ? "secondary" : "ghost"}
className="w-full justify-start"
data-tour={item.href === "/dashboard" ? "dashboard" : item.href === "/tasks" ? "tasks" : item.href === "/finances" ? "finances" : item.href === "/voice" ? "voice" : item.href === "/ai" ? "ai" : undefined}
>
<item.icon className="mr-2 h-4 w-4" />
{item.name}