Introduce interactive tour to guide new users and improve onboarding

Adds onboarding tour using Joyride and i18n for guiding new users and wraps the app with TourManagerProvider.

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/30336e9a-3f94-4a8a-8590-caabbe309010.jpg

client/src/App.tsx

@@ -8,6 +8,7 @@ import { AuthProvider } from "@/context/AuthContext";
 import { ThemeProvider } from "@/context/ThemeContext";
 import { VoiceProvider } from "@/context/VoiceProvider";
 import { NotificationProvider } from "@/context/NotificationProvider";
+import { TourManagerProvider } from "@/components/onboarding/TourManager";
 import LandingPage from "@/pages/LandingPage";
 import DashboardPage from "@/pages/DashboardPage";
 import LoginPage from "@/pages/LoginPage";
@@ -50,11 +51,13 @@ function App() {
         <AuthProvider>
           <NotificationProvider>
             <VoiceProvider>
-              <TooltipProvider>
+              <TourManagerProvider>
-                <Toaster />
+                <TooltipProvider>
-                <Router />
+                  <Toaster />
-                <FloatingVoiceControl />
+                  <Router />
-              </TooltipProvider>
+                  <FloatingVoiceControl />
+                </TooltipProvider>
+              </TourManagerProvider>
             </VoiceProvider>
           </NotificationProvider>
         </AuthProvider>

client/src/i18n/locales/ar.json

@@ -344,5 +344,89 @@
     "acceptedInsurance": "التأمين المقبول",
     "onlineConsultation": "استشارة عبر الإنترنت",
     "inPersonConsultation": "استشارة شخصية"
+  },
+  "onboarding": {
+    "welcome": {
+      "title": "مرحباً بك في TaskFin!",
+      "content": "دعنا نأخذ جولة سريعة لمساعدتك على البدء مع جميع الميزات القوية المتاحة."
+    },
+    "navigation": {
+      "title": "قائمة التنقل",
+      "content": "استخدم هذا الشريط الجانبي للتنقل بين أقسام التطبيق المختلفة. كل قسم يوفر أدوات متخصصة للإنتاجية والتنظيم."
+    },
+    "dashboard": {
+      "title": "لوحة التحكم",
+      "content": "مركزك الرئيسي الذي يعرض المقاييس الرئيسية والأنشطة الأخيرة والوصول السريع للميزات المهمة."
+    },
+    "tasks": {
+      "title": "إدارة المهام",
+      "content": "إنشاء وتنظيم وتتبع مهامك مع خيارات التصفية والتصنيف القوية."
+    },
+    "createTask": {
+      "title": "إنشاء مهمة جديدة",
+      "content": "اضغط هنا لإضافة مهام جديدة. يمكنك تعيين الأولويات وتواريخ الاستحقاق وتنظيمها في مشاريع."
+    },
+    "finances": {
+      "title": "الإدارة المالية",
+      "content": "تتبع دخلك ومصاريفك وميزانياتك مع أدوات التخطيط المالي الشاملة."
+    },
+    "voice": {
+      "title": "التحكم الصوتي",
+      "content": "استخدم الأوامر الصوتية لإنشاء المهام بسرعة أو إضافة المصاريف أو التنقل في التطبيق بدون استخدام اليدين."
+    },
+    "ai": {
+      "title": "المساعد الذكي",
+      "content": "احصل على رؤى ذكية واقتراحات تلقائية ومساعدة مفيدة في مهامك اليومية."
+    },
+    "profile": {
+      "title": "قائمة الملف الشخصي",
+      "content": "الوصول إلى إعدادات حسابك وتفضيلاتك ومعلومات ملفك الشخصي."
+    },
+    "settings": {
+      "title": "الإعدادات",
+      "content": "خصص تجربتك مع المظاهر وتفضيلات اللغة وإعدادات التطبيق."
+    },
+    "taskList": {
+      "title": "مهامك",
+      "content": "عرض وإدارة جميع مهامك في هذه القائمة المنظمة. اضغط على أي مهمة للتحرير أو وضع علامة عليها كمكتملة."
+    },
+    "taskFilters": {
+      "title": "خيارات التصفية",
+      "content": "استخدم هذه المرشحات للعثور بسرعة على مهام محددة حسب الحالة أو الأولوية أو الفئة."
+    },
+    "taskCreate": {
+      "title": "نموذج إنشاء المهام",
+      "content": "املأ هذا النموذج لإنشاء مهام مفصلة مع الوصف والأولويات وتواريخ الاستحقاق."
+    },
+    "financialOverview": {
+      "title": "النظرة المالية العامة",
+      "content": "احصل على لمحة عن صحتك المالية مع ملخصات الدخل والمصاريف والميزانية."
+    },
+    "addRecord": {
+      "title": "إضافة سجل مالي",
+      "content": "اضغط هنا لإضافة سجلات الدخل أو المصاريف بسرعة لتتبع أموالك."
+    },
+    "budgetPlanner": {
+      "title": "تخطيط الميزانية",
+      "content": "إعداد الميزانيات وتتبع إنفاقك مقابل أهدافك المالية."
+    },
+    "voiceRecorder": {
+      "title": "التسجيل الصوتي",
+      "content": "اضغط مع الاستمرار لتسجيل الأوامر الصوتية أو الملاحظات التي ستتم معالجتها تلقائياً."
+    },
+    "voiceCommands": {
+      "title": "الأوامر المتاحة",
+      "content": "عرض جميع الأوامر الصوتية المتاحة ووظائفها للمرجع السريع."
+    },
+    "voiceShortcuts": {
+      "title": "الاختصارات الصوتية",
+      "content": "أزرار الوصول السريع للأوامر الصوتية والإجراءات الشائعة."
+    },
+    "previous": "السابق",
+    "next": "التالي",
+    "finish": "إنهاء الجولة",
+    "optional": "اختياري",
+    "clickInstruction": "جرب النقر على هذا العنصر لترى كيف يعمل.",
+    "hoverInstruction": "مرر فوق هذا العنصر لاستكشاف وظائفه."
   }
 }

client/src/i18n/locales/en.json

@@ -222,5 +222,89 @@
     "deleted": "Successfully deleted",
     "updated": "Successfully updated",
     "created": "Successfully created"
+  },
+  "onboarding": {
+    "welcome": {
+      "title": "Welcome to TaskFin!",
+      "content": "Let's take a quick tour to help you get started with all the powerful features available."
+    },
+    "navigation": {
+      "title": "Navigation Menu",
+      "content": "Use this sidebar to navigate between different sections of the application. Each section offers specialized tools for productivity and organization."
+    },
+    "dashboard": {
+      "title": "Dashboard",
+      "content": "Your central hub showing key metrics, recent activities, and quick access to important features."
+    },
+    "tasks": {
+      "title": "Task Management",
+      "content": "Create, organize, and track your tasks with powerful filtering and categorization options."
+    },
+    "createTask": {
+      "title": "Create New Task",
+      "content": "Click here to add new tasks. You can set priorities, due dates, and organize them into projects."
+    },
+    "finances": {
+      "title": "Financial Management",
+      "content": "Track your income, expenses, and budgets with comprehensive financial planning tools."
+    },
+    "voice": {
+      "title": "Voice Control",
+      "content": "Use voice commands to quickly create tasks, add expenses, or navigate the application hands-free."
+    },
+    "ai": {
+      "title": "AI Assistant",
+      "content": "Get intelligent insights, automated suggestions, and helpful assistance with your daily tasks."
+    },
+    "profile": {
+      "title": "Profile Menu",
+      "content": "Access your account settings, preferences, and user profile information."
+    },
+    "settings": {
+      "title": "Settings",
+      "content": "Customize your experience with themes, language preferences, and application settings."
+    },
+    "taskList": {
+      "title": "Your Tasks",
+      "content": "View and manage all your tasks in this organized list. Click on any task to edit or mark as complete."
+    },
+    "taskFilters": {
+      "title": "Filter Options",
+      "content": "Use these filters to quickly find specific tasks by status, priority, or category."
+    },
+    "taskCreate": {
+      "title": "Task Creation Form",
+      "content": "Fill out this form to create detailed tasks with descriptions, priorities, and due dates."
+    },
+    "financialOverview": {
+      "title": "Financial Overview",
+      "content": "Get a snapshot of your financial health with income, expenses, and budget summaries."
+    },
+    "addRecord": {
+      "title": "Add Financial Record",
+      "content": "Click here to quickly add income or expense records to track your finances."
+    },
+    "budgetPlanner": {
+      "title": "Budget Planning",
+      "content": "Set up budgets and track your spending against your financial goals."
+    },
+    "voiceRecorder": {
+      "title": "Voice Recording",
+      "content": "Press and hold to record voice commands or notes that will be processed automatically."
+    },
+    "voiceCommands": {
+      "title": "Available Commands",
+      "content": "View all available voice commands and their functions for quick reference."
+    },
+    "voiceShortcuts": {
+      "title": "Voice Shortcuts",
+      "content": "Quick access buttons for common voice commands and actions."
+    },
+    "previous": "Previous",
+    "next": "Next",
+    "finish": "Finish Tour",
+    "optional": "Optional",
+    "clickInstruction": "Try clicking on this element to see how it works.",
+    "hoverInstruction": "Hover over this element to explore its functionality."
   }
 }

client/src/pages/DashboardPage.tsx

@@ -21,8 +21,10 @@ import {
   Brain, 
   Activity, 
   TrendingUp,
-  Zap 
+  Zap,
+  HelpCircle
 } from "lucide-react";
+import { useTourManager, getMainTourSteps } from "@/components/onboarding/TourManager";
 
 export default function DashboardPage() {
   const { user, isLoading } = useAuth();