Merge branch 'main' into fix-ocr-to-form

client/src/components/Chart.jsx

@@ -1,10 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import BackButton from "./BackButton.jsx";
 import { auth, onAuthStateChanged } from "../config/initializeFirestore.js";
 import '../App.css';
 import HamburgerMenu from "./HamburgerMenu.jsx";
+import { AppContext } from '../context/AppContext.jsx';
+import ExpenseChartJoyride from './ExpenseChartJoyride.jsx';
+
+
 
 function App() {
+  const {runChartTour, setRunChartTour} = useContext(AppContext);
   const [userId, setUserId] = useState("");
   const [userEmail, setUserEmail] = useState("");
   const [dimensions, setDimensions] = useState({
@@ -40,6 +45,7 @@ function App() {
 
   return (
     <div className="App">
+      < ExpenseChartJoyride />
       <h1>SimpliTrac</h1>
       <HamburgerMenu />
       <LookerStudioChart dimensions={dimensions} userEmail={userEmail} />

client/src/components/ExpenseChartJoyride.jsx

@@ -0,0 +1,62 @@
+import React, { useContext } from 'react';
+import Joyride, { STATUS } from 'react-joyride';
+import { AppContext } from '../context/AppContext';
+
+const steps = [
+  {
+    target: 'body',
+    content: 'Welcome to the Expense Chart! This guide will walk you through the features of this powerful visualization tool.',
+    placement: 'center',
+    disableBeacon: true,
+  },
+  {
+    target: '#report-frame',
+    content: 'This is your expense chart. It provides a detailed view of your spending patterns.',
+  },
+  {
+    target: '#report-frame',
+    content: 'In the top left corner, you can switch between Mobile and Desktop views.',
+  },
+  {
+    target: '#report-frame',
+    content: 'The three-dot menu in the top right allows you to export your data in various formats.',
+  },
+  {
+    target: '#report-frame',
+    content: 'Use the date range selector at the top to filter your expenses for specific time periods.',
+  },
+  {
+    target: 'body',
+    content: 'Explore your spending patterns and gain insights into your financial habits. Remember to refer back to these features as you use the chart!',
+    placement: 'center',
+  },
+];
+
+const ExpenseChartJoyride = () => {
+  const { runChartTour, setRunChartTour } = useContext(AppContext);
+
+  const handleJoyrideCallback = (data) => {
+    const { status } = data;
+    if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
+      setRunChartTour(false);
+    }
+  };
+
+  return (
+    <Joyride
+      steps={steps}
+      run={runChartTour}
+      continuous={true}
+      showSkipButton={true}
+      showProgress={true}
+      styles={{
+        options: {
+          zIndex: 10000,
+        },
+      }}
+      callback={handleJoyrideCallback}
+    />
+  );
+};
+
+export default ExpenseChartJoyride;

client/src/components/ExpensesTable.jsx

@@ -7,6 +7,7 @@ import { AppContext } from "../context/AppContext.jsx";
 import Transaction from "../models/Transaction.js";
 import User from "../models/User.js";
 import Updating from "./Updating.jsx";
+import ExpenseChartJoyride from "./ExpenseChartJoyride.jsx";
 
 const ExpensesForm = () => {
     const { user, formData, setFormData, setUser, ocrData, setOcrData, serverResponse, setServerResponse, isUpdating, setIsUpdating } = useContext(AppContext);
@@ -126,6 +127,8 @@ const ExpensesForm = () => {
 
     return (
         <Box as="form" onSubmit={handleSubmit(onSubmit)} maxW="500px" mx="auto">
+          < ExpenseChartJoyride />
+
             {isUpdating && <Updating />} {/* Show overlay when isUpdating is true */}
             <FormControl mb={4} isInvalid={errors.date}>
                 <FormLabel>Date</FormLabel>

client/src/components/HamburgerMenu.jsx

@@ -24,7 +24,9 @@ const HamburgerMenu = () => {
         renderNewScreen,
         showCategories,
         toggleCategoriesList,
-        user, setRunTour
+        user, 
+        setRunTour,
+        setRunChartTour
     } = useContext(AppContext);
     const {isOpen, onOpen, onClose} = useDisclosure();
 
@@ -86,7 +88,14 @@ const HamburgerMenu = () => {
                                     variant="ghost"
                                     w="100%"
                                     data-tour="expense-chart"
-                                    onClick={() => renderNewScreen("chart")}>Expense Chart</Button>
+                                    onClick={() => {
+                                        renderNewScreen("chart");
+                                        setRunChartTour(true);
+                                        setShowHamburger(false);
+                                    }}
+                                    >
+                                    Expense Chart
+                                </Button>
                                 <Button
                                     variant="ghost"
                                     w="100%"

client/src/components/JoyRideTour.jsx

@@ -13,17 +13,6 @@ const steps = [
     target: '.chakra-container',
     content: 'This is your main dashboard where you can view and manage your expenses.',
   },
-  {
-    target: '.expenses-table',
-    content: 'Here you can manually enter your expenses or view your recent transactions.',
-  },
-  {
-    target: '[data-tour="scan-receipt"]',
-    content: 'Use our intuitive AI-driven camera to snap pictures of your receipts and record expenses instantly.',
-  },
-  {
-    content: 'This is your main dashboard where you can view, manage and manually enter your expenses.',
-  },
   {
     target: '[data-tour="scan-receipt"]',
     content: 'Use our intuitive AI-driven camera to snap pictures of your receipts and record expenses instantly.',
@@ -33,8 +22,9 @@ const steps = [
     content: 'Easily modify or correct any of your recorded expenses here.',
   },
   {
-    target: '[data-tour="expense-chart"]',
-    content: 'View a detailed breakdown of your spending habits with our interactive chart feature.',
+    target: 'body',
+    content: 'Be sure to check your achievements tab to see how you rank among other users and earn badges while maintaining financial peace of mind!',
+    placement: 'center',
   },
 ];
 const JoyrideTour = () => {

client/src/context/AppContext.jsx

@@ -42,6 +42,7 @@ const AppProvider = ({ children }) => {
     const [categoriesSelected, setCategoriesSelected] = useState(false);
     const [runTour, setRunTour] = useState(false);
     const [runEditTransactionsTour, setRunEditTransactionsTour] =useState(false);
+    const [runChartTour, setRunChartTour] =useState(false);
 
 
 
@@ -93,6 +94,7 @@ const AppProvider = ({ children }) => {
         setShowCategories(false)
         setRunTour(false)
         setRunEditTransactionsTour(false)
+        setRunChartTour(false)
     };
 
     // updating data based on user state
@@ -121,6 +123,7 @@ const AppProvider = ({ children }) => {
         toggleCategoriesList,
         categoriesSelected, setCategoriesSelected,
         runEditTransactionsTour, setRunEditTransactionsTour,
+        runChartTour, setRunChartTour,
     };
 
 

src/components/JoyRideTour.jsx

@@ -13,10 +13,6 @@ const steps = [
     target: '.chakra-container',
     content: 'This is your main dashboard where you can view and manage your expenses.',
   },
-  {
-    target: '.chakra-container',
-    content: 'Here you can manually enter your expenses or view your recent transactions.',
-  },
   {
     target: '[data-tour="scan-receipt"]',
     content: 'Use our intuitive AI-driven camera to snap pictures of your receipts and record expenses instantly.',