From 4bb76ae5f77fc99716eb4175e0eb4e83f25ff9d8 Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 07:22:17 +0000
Subject: [PATCH] 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
---
 client/src/components/layout/Sidebar.tsx |  3 ++-
 client/src/pages/DashboardPage.tsx       | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/components/layout/Sidebar.tsx b/client/src/components/layout/Sidebar.tsx
index c5dbd05..29cf674 100644
--- a/client/src/components/layout/Sidebar.tsx
+++ b/client/src/components/layout/Sidebar.tsx
@@ -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}
diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx
index deaa4b6..30fe774 100644
--- a/client/src/pages/DashboardPage.tsx
+++ b/client/src/pages/DashboardPage.tsx
@@ -32,6 +32,11 @@ export default function DashboardPage() {
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   const { isListening, speak } = useVoiceContext();
   const { unreadCount } = useNotifications();
+  const { startTour } = useTourManager();
+
+  const handleStartTour = () => {
+    startTour("main", getMainTourSteps());
+  };
 
   useEffect(() => {
     if (!isLoading && !user) {
@@ -92,6 +97,15 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div className="flex items-center space-x-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleStartTour}
+                  className="flex items-center space-x-1 text-xs"
+                >
+                  <HelpCircle className="w-3 h-3" />
+                  <span>Take Tour</span>
+                </Button>
                 <Badge variant="secondary" className="text-xs">
                   {user.role === "admin" ? "Admin" : user.role === "pro" ? "Pro" : "Standard"} User
                 </Badge>