From c34decacd4a00fe948df8c7e5324d4af2a3521b3 Mon Sep 17 00:00:00 2001 From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com> Date: Sun, 8 Jun 2025 07:20:56 +0000 Subject: [PATCH] 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 | 13 +++-- client/src/i18n/locales/ar.json | 84 ++++++++++++++++++++++++++++++ client/src/i18n/locales/en.json | 84 ++++++++++++++++++++++++++++++ client/src/pages/DashboardPage.tsx | 4 +- 4 files changed, 179 insertions(+), 6 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 330385a..4ff92d4 100644 --- a/client/src/App.tsx +++ b/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() { - - - - - + + + + + + + diff --git a/client/src/i18n/locales/ar.json b/client/src/i18n/locales/ar.json index e1575ae..fe151e3 100644 --- a/client/src/i18n/locales/ar.json +++ b/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": "مرر فوق هذا العنصر لاستكشاف وظائفه." } } \ No newline at end of file diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json index 9bf5dea..19b0768 100644 --- a/client/src/i18n/locales/en.json +++ b/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." } } \ No newline at end of file diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx index e959276..deaa4b6 100644 --- a/client/src/pages/DashboardPage.tsx +++ b/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();