Merge pull request #44 from JJtan2002/settings

Settings

backend/users/urls.py

@@ -11,4 +11,5 @@
     path('forgotPassword/', views.forgetpassword, name="forgetpassword"),
     path('resetPassword/', views.resetPassword, name="resetPassword"),
     path('profile/', ProfileAPIView.as_view(), name='profile'),
+    path('feedback/', views.feedback, name='feedback'),
 ]

backend/users/views.py

@@ -176,4 +176,25 @@ def put(self, request):
 
 
         return JsonResponse({"message": "This is setProfile view"})
+
+
+
+@api_view(['POST'])
+@permission_classes([AllowAny])
+def feedback(request):
+    subject = request.data.get('subject')
+    content = request.data.get('content')
+
+    send_mail(
+        f'Feedback from CashFlow: {subject}',
+        f'Dear Developer, below is the feedback from CashFlow user:\n\n{content}\n',
+        settings.DEFAULT_FROM_EMAIL,
+        ['[email protected]', '[email protected]'],
+        fail_silently=False,
+    )
+
+    return JsonResponse({
+        'success': 'true',
+        'message': 'Feedback sent',
+    }, status=200)
 

frontend/src/contexts/DashBoardContext.js

@@ -76,7 +76,7 @@ const DashboardContextProvider = ({ children }) => {
         queryFn: () => getLabels(),
     });
 
-    
+
     const {
         refetch: refetchBardata,
         data: bardata,
@@ -222,7 +222,7 @@ const DashboardContextProvider = ({ children }) => {
         await refetchExpenses();
         await refetchBardata();
         await refetchPiedata();
-        toast.success("Transaction added!");
+        toast.success(`Transaction ${ev.target.title.value} added!`);
     }
 
     const handleDeleteTransaction = async (transactionId) => {
@@ -231,7 +231,7 @@ const DashboardContextProvider = ({ children }) => {
         await refetchExpenses();
         await refetchBardata();
         await refetchPiedata();
-        toast.warning("Transaction deleted!");
+        toast.warning(`Transaction deleted!`);
     };
 
     return (

frontend/src/pages/About.js

@@ -1,11 +1,30 @@
+import axios from "axios";
 import React, { useRef } from "react";
+import { toast } from "react-toastify";
 
 const About = () => {
-    const handleSubmit = () => {
+    const FeedbackURL = process.env.REACT_APP_BACKEND_URL + "/users/feedback/";
+    const handleSubmit = async (ev) => {
+        ev.preventDefault();
+        try {
+            const formData = {
+                subject: ev.target.subject.value,
+                content: ev.target.content.value,
+            };
+            const res = await axios.post(FeedbackURL, formData);
+            const data = await res.data;
+            if (data.success) {
+                toast.success(data.message);
+                formRef.current.reset()
+            }
+        } catch (err) {
+            toast.error(err);
+        }
 
     };
 
     const contentRef = useRef();
+    const formRef = useRef();
 
     const autoResize = () => {
         const textarea = contentRef.current;
@@ -25,19 +44,19 @@ const About = () => {
         {
             title: "What We Offer",
             content: [
-                "1. Create Account: the link in the Home page will take you to the register page.",
-                "2. Log In: there is a Login page link in the Navigation Bar.",
-                "3. Forget Password: find the link in Login Page.",
-                "4. Reset Password: the link in the reset password email will take you to the page.",
-                "5. Add Transaction Record: there is a add transaction card in the Dashboard page.",
-                "6. 5/10/15/30-Day Expense Amount and Distribution Chart: check these charts are in the Dashboard page.",
-                "7. Transaction List: you can either check 5 latest added transaction records in the Dashboard page, or check all the transaction records in the Transactions page.",
-                "8. Add and Edit Expense Labels and Goals: you can approach these features in the Wallet page, where you can adjust the goal amount and color(to be displayed on pie chart), also decide whether it is a monthly goal or accumulative goal from the very beginning.",
-                "9. Edit Balance: this feature can be found in Wallet page.",
-                "10. Delete Transaction Records and Labels: there is a trash bin icon with each records, click it will do.",
-                "11. Watchlist:",
-                "12. Resource Page: you can access a list of links to finance education websites. We also offer a brief introduction to the websites as guidance for beginers.",
-                "13. Update Settings: you can update your profile photo, account name, password and display theme in the setting page."
+                "1. Create Account: Start your journey by clicking the link on the Home page to create an account.",
+                "2. Log In: Access your account easily through the Login link in the Navigation Bar.",
+                "3. Forget Password: If you need to recover your password, find the 'Forget Password' link on the Login page.",
+                "4. Reset Password: Follow the link in the reset password email to securely update your password.",
+                "5. Add Transaction Record: Use the 'Add Transaction' card on the Dashboard page to keep track of your expenses.",
+                "6. 5/10/15/30-Day Expense Amount and Distribution Chart: View 5/10/15/30-day expense charts on the Dashboard to monitor your spending habits.",
+                "7. Transaction List: Check the latest 5 transactions on the Dashboard or view all your transactions on the Transactions page.",
+                "8. Manage Expense Labels and Goals: On the Wallet page, add or edit expense labels and set or adjust goals, choosing between monthly or accumulative goals. Customize the goal amounts and colors for better visualization on your pie chart.",
+                "9. Edit Balance: Update your balance directly from the Wallet page.",
+                "10. Delete Transaction Records and Labels: Simply click the trash bin icon next to each record to delete it.",
+                "11. Watchlist: Add stocks to your watchlist and view basic price data.",
+                "12. Resource Page: Access a list of links to finance education websites, along with brief introductions to guide beginners.",
+                "13. Update Settings: Update your profile photo, account name, password, and display theme on the Settings page."
             ],
         },
         {
@@ -57,24 +76,24 @@ const About = () => {
 
     return (
         <div className="w-4/5 mx-auto mt-8 bg-white dark:bg-gray-800 dark:text-gray-100 min-h-screen flex flex-col">
-        {sections.map((section, index) => (
-            <div
-            key={index}
-            className="mb-6 p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-600"
-            >
-            <h2 className="text-2xl font-bold text-left mb-4 text-gray-900 dark:text-white">
-                {section.title}
-            </h2>
-            {section.content.map((paragraph, idx) => (
-                <p key={idx} className="text-left text-gray-700 dark:text-gray-400 mb-2">
-                {paragraph}
-                </p>
+            {sections.map((section, index) => (
+                <div
+                    key={index}
+                    className="mb-6 p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-600"
+                >
+                    <h2 className="text-2xl font-bold text-left mb-4 text-gray-900 dark:text-white">
+                        {section.title}
+                    </h2>
+                    {section.content.map((paragraph, idx) => (
+                        <p key={idx} className="text-left text-gray-700 dark:text-gray-400 mb-2">
+                            {paragraph}
+                        </p>
+                    ))}
+                </div>
             ))}
-            </div>
-        ))}
             <div className="w-full  p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-600">
                 <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white text-center">Feedback</h5>
-                <form className="flex flex-col flex-col gap-4" onSubmit={handleSubmit}>
+                <form className="flex flex-col flex-col gap-4" onSubmit={handleSubmit} ref={formRef}>
                     <div>
                         <div className="mb-2 block">
                             <label htmlFor="subject" className="text-sm font-medium required">Subject</label>
@@ -87,11 +106,11 @@ const About = () => {
                         <div className="mb-2 block">
                             <label htmlFor="content" className="text-sm font-medium required">Content</label>
                         </div>
-                        <textarea 
-                            id="content" 
-                            type="text" 
-                            name="content" 
-                            placeholder="Enter your content" 
+                        <textarea
+                            id="content"
+                            type="text"
+                            name="content"
+                            placeholder="Enter your content"
                             required
                             ref={contentRef}
                             rows={1}

frontend/src/pages/Wallet.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
-import { useTransactions } from "../hooks/useTransactions";
 import { useWallet } from "../hooks/useWallet";
 import { useLabels } from "../hooks/useLabels";
 import { useQuery } from "@tanstack/react-query";
@@ -16,8 +15,6 @@ const Wallet = () => {
     const { isLoggedIn, user } = useAuth();
     const { getWallet, updateWallet } = useWallet();
     const { getLabels, createLabel, deleteLabel, editLabel } = useLabels();
-    const [expenseCategories, setExpenseCategories] = useState([]);
-    const [incomeCategories, setIncomeCategories] = useState([]);
 
     let navigate = useNavigate();
 
@@ -111,7 +108,7 @@ const Wallet = () => {
                     <h2 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">Wallet Balance</h2>
                     <div className="mb-4">
                         <label htmlFor="monthly-balance" className="block text-sm font-medium text-gray-700 dark:text-white">Current Amount</label>
-                        <input type="text" id="monthly-balance" className="w-full p-2 border border-gray-300 rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white" value={wallet.current_amount} readOnly />
+                        <input type="text" id="monthly-balance" className="bg-gray-50 rounded-lg block w-full p-3 dark:bg-gray-700 dark:border-gray-600 dark:text-white" value={wallet.current_amount} readOnly />
                     </div>
                     <form id="wallet-form" className="w-full" onSubmit={handleWallet}>
                         <div className="mb-4">