From 0b5d5986737a6029ba287ad6e2ea414deba8252d Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Sun, 10 Nov 2024 17:22:37 +0530 Subject: [PATCH] Add personalization --- frontend/package-lock.json | 22 ++++ frontend/package.json | 1 + frontend/src/AgroRentAI/RentUserDashboard.jsx | 11 ++ .../components/PersonalizationSettings.jsx | 115 ++++++++++++++++++ .../AgroRentAI/components/RentalReminders.jsx | 97 +++++++++++++++ .../sub-components/Recommendations.jsx | 38 +++++- 6 files changed, 279 insertions(+), 5 deletions(-) create mode 100644 frontend/src/AgroRentAI/components/PersonalizationSettings.jsx create mode 100644 frontend/src/AgroRentAI/components/RentalReminders.jsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ef1b3531..3e744e9b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -45,6 +45,7 @@ "react-icons": "^5.3.0", "react-leaflet": "^4.2.1", "react-modal": "^3.16.1", + "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.24.1", "react-toastify": "^10.0.6", "react-tsparticles": "^2.12.2", @@ -6527,6 +6528,17 @@ "react": "^18.3.1" } }, + "node_modules/react-easy-swipe": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz", + "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==", + "dependencies": { + "prop-types": "^15.5.8" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/react-fontawesome": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz", @@ -6623,6 +6635,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-responsive-carousel": { + "version": "3.2.23", + "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz", + "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==", + "dependencies": { + "classnames": "^2.2.5", + "prop-types": "^15.5.8", + "react-easy-swipe": "^0.0.21" + } + }, "node_modules/react-router": { "version": "6.26.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index a4d00ba7..3568443f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -47,6 +47,7 @@ "react-icons": "^5.3.0", "react-leaflet": "^4.2.1", "react-modal": "^3.16.1", + "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.24.1", "react-toastify": "^10.0.6", "react-tsparticles": "^2.12.2", diff --git a/frontend/src/AgroRentAI/RentUserDashboard.jsx b/frontend/src/AgroRentAI/RentUserDashboard.jsx index 0756aa13..c00c2d1a 100644 --- a/frontend/src/AgroRentAI/RentUserDashboard.jsx +++ b/frontend/src/AgroRentAI/RentUserDashboard.jsx @@ -12,6 +12,8 @@ import { LifeBuoy, FileText, Package, + AlertTriangle, + Settings, } from "lucide-react"; import ProfileComponent from "./components/AccountInformation"; import RentalHistoryComponent from "./components/RentalHistory"; @@ -23,6 +25,8 @@ import SecurityPrivacyComponent from "./components/SecurityPrivacyComponent"; import SupportAssistanceComponent from "./components/SupportAssistance"; import SubscriptionMembershipComponent from "./components/Subscription"; import OrderDeliveryTrackingComponent from "./components/OrderTracking"; +import RentalRemindersComponent from "./components/RentalReminders"; +import PersonalizationSettingsComponent from "./components/PersonalizationSettings"; const RentUserDashboard = () => { const [profile, setProfile] = useState({ @@ -125,6 +129,10 @@ const RentUserDashboard = () => { return ; case "Order & Delivery Tracking": return ; + case "Rental Reminders": + return ; + case "Personalization Settings": + return ; default: return null; } @@ -182,6 +190,9 @@ const RentUserDashboard = () => {
  • setActiveSection("Order & Delivery Tracking")}> Order & Delivery Tracking
    • +
  • setActiveSection("Rental Reminders")}> Rental Reminders
    • +
  • setActiveSection("Personalization Settings")}> Personalization Settings
    • + diff --git a/frontend/src/AgroRentAI/components/PersonalizationSettings.jsx b/frontend/src/AgroRentAI/components/PersonalizationSettings.jsx new file mode 100644 index 00000000..377f0d9f --- /dev/null +++ b/frontend/src/AgroRentAI/components/PersonalizationSettings.jsx @@ -0,0 +1,115 @@ +// src/components/PersonalizationSettings.js +import React, { useState } from "react"; + +const PersonalizationSettingsComponent = () => { + const [emailNotifications, setEmailNotifications] = useState(true); + const [promoNotifications, setPromoNotifications] = useState(false); + const [favoriteCategories, setFavoriteCategories] = useState(["Agriculture", "Gardening"]); + const [preferredDuration, setPreferredDuration] = useState("Weekly"); + const [budgetRange, setBudgetRange] = useState(100); + const [themePreference, setThemePreference] = useState("Light"); + + const handleEmailNotificationToggle = () => setEmailNotifications(!emailNotifications); + const handlePromoNotificationToggle = () => setPromoNotifications(!promoNotifications); + const handleCategoryChange = (event) => { + const category = event.target.value; + setFavoriteCategories((prevCategories) => + prevCategories.includes(category) + ? prevCategories.filter((cat) => cat !== category) + : [...prevCategories, category] + ); + }; + + return ( +
    +

    Personalization Settings

    + + {/* Email Notifications */} +
    + +
    + + {/* Promotional Notifications */} +
    + +
    + + {/* Favorite Categories */} +
    +

    Favorite Categories

    + {["Agriculture", "Gardening", "Landscaping", "Tools", "Machinery"].map((category) => ( + + ))} +
    + + {/* Preferred Rental Duration */} +
    +

    Preferred Rental Duration

    + +
    + + {/* Budget Range */} +
    +

    Rental Budget Range

    + setBudgetRange(e.target.value)} + className="w-full" + /> +
    Selected Budget: ${budgetRange}
    +
    + + {/* Theme Preference */} +
    +

    Theme Preference

    + +
    +
    + ); +}; + +export default PersonalizationSettingsComponent; diff --git a/frontend/src/AgroRentAI/components/RentalReminders.jsx b/frontend/src/AgroRentAI/components/RentalReminders.jsx new file mode 100644 index 00000000..4b7bd175 --- /dev/null +++ b/frontend/src/AgroRentAI/components/RentalReminders.jsx @@ -0,0 +1,97 @@ +// src/components/RentalReminders.js +import React from "react"; +import { toast, ToastContainer } from "react-toastify"; + +const RentalRemindersComponent = () => { + // Dummy reminders data + const reminders = [ + { + id: 1, + itemName: "Tractor", + dueDate: "2024-11-15", + status: "Active", + duration: 7, + remainingDays: 3, + cost: 150, + }, + { + id: 2, + itemName: "Plow", + dueDate: "2024-11-18", + status: "Active", + duration: 5, + remainingDays: 6, + cost: 80, + }, + { + id: 3, + itemName: "Seeder", + dueDate: "2024-11-20", + status: "Overdue", + duration: 10, + remainingDays: -2, + cost: 200, + }, + ]; + + const handleExtendRental = (id) => { + toast.success(`Extend rental for item ID: ${id}`); + }; + + const handleViewDetails = (id) => { + return; + }; + + const handleContactSupport = (id) => { + return + }; + + return ( +
    + +

    Rental Reminders

    + {reminders.length > 0 ? ( + reminders.map((reminder) => ( +
    +
    +

    {reminder.itemName}

    + Due Date: {reminder.dueDate} +
    + +
    +

    Status: {reminder.status}

    +

    Rental Duration: {reminder.duration} days

    +

    Days Left: {reminder.remainingDays >= 0 ? `${reminder.remainingDays} days` : "Overdue"}

    +

    Total Rental Cost: ${reminder.cost}

    +
    + +
    + + + +
    +
    + )) + ) : ( +

    No rental reminders at this time.

    + )} +
    + ); +}; + +export default RentalRemindersComponent; diff --git a/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx b/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx index 5010350e..42e3e4cc 100644 --- a/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx +++ b/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx @@ -1,16 +1,44 @@ import React from "react"; import ProductCard from "./ProductCard"; +import { motion } from "framer-motion"; +import { BsArrowRight } from "react-icons/bs"; // Importing an icon for CTA button +import { Carousel } from "react-responsive-carousel"; // Carousel package +import "react-responsive-carousel/lib/styles/carousel.min.css"; // Carousel styling const Recommendations = ({ products }) => { - const recommended = products.slice(0, 4); // Just a slice for demonstration + const recommended = products.slice(0, 8); // More recommendations for a full carousel return ( -
    -

    Recommended Products

    -
    +
    +

    Recommended for You

    + + {/* Carousel for recommended products */} + {recommended.map((product) => ( - + + + ))} + + + {/* "View All" CTA button */} +
    +
    );