-
Notifications
You must be signed in to change notification settings - Fork 117
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
88246fc
commit 0b5d598
Showing
6 changed files
with
279 additions
and
5 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
frontend/src/AgroRentAI/components/PersonalizationSettings.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="p-6 bg-white rounded-lg shadow-md"> | ||
| <h3 className="text-xl font-semibold text-green-700 mb-4">Personalization Settings</h3> | ||
|
|
||
| {/* Email Notifications */} | ||
| <div className="mb-6"> | ||
| <label className="flex items-center"> | ||
| <input | ||
| type="checkbox" | ||
| checked={emailNotifications} | ||
| onChange={handleEmailNotificationToggle} | ||
| className="mr-2" | ||
| /> | ||
| Receive Email Notifications | ||
| </label> | ||
| </div> | ||
|
|
||
| {/* Promotional Notifications */} | ||
| <div className="mb-6"> | ||
| <label className="flex items-center"> | ||
| <input | ||
| type="checkbox" | ||
| checked={promoNotifications} | ||
| onChange={handlePromoNotificationToggle} | ||
| className="mr-2" | ||
| /> | ||
| Receive Promotional Offers Notifications | ||
| </label> | ||
| </div> | ||
|
|
||
| {/* Favorite Categories */} | ||
| <div className="mb-6"> | ||
| <h4 className="font-semibold text-gray-700 mb-2">Favorite Categories</h4> | ||
| {["Agriculture", "Gardening", "Landscaping", "Tools", "Machinery"].map((category) => ( | ||
| <label key={category} className="flex items-center mb-2"> | ||
| <input | ||
| type="checkbox" | ||
| value={category} | ||
| checked={favoriteCategories.includes(category)} | ||
| onChange={handleCategoryChange} | ||
| className="mr-2" | ||
| /> | ||
| {category} | ||
| </label> | ||
| ))} | ||
| </div> | ||
|
|
||
| {/* Preferred Rental Duration */} | ||
| <div className="mb-6"> | ||
| <h4 className="font-semibold text-gray-700 mb-2">Preferred Rental Duration</h4> | ||
| <select | ||
| value={preferredDuration} | ||
| onChange={(e) => setPreferredDuration(e.target.value)} | ||
| className="p-2 border border-gray-300 rounded-lg w-full" | ||
| > | ||
| <option value="Daily">Daily</option> | ||
| <option value="Weekly">Weekly</option> | ||
| <option value="Monthly">Monthly</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| {/* Budget Range */} | ||
| <div className="mb-6"> | ||
| <h4 className="font-semibold text-gray-700 mb-2">Rental Budget Range</h4> | ||
| <input | ||
| type="range" | ||
| min="50" | ||
| max="500" | ||
| value={budgetRange} | ||
| onChange={(e) => setBudgetRange(e.target.value)} | ||
| className="w-full" | ||
| /> | ||
| <div className="text-gray-600 mt-2">Selected Budget: ${budgetRange}</div> | ||
| </div> | ||
|
|
||
| {/* Theme Preference */} | ||
| <div className="mb-6"> | ||
| <h4 className="font-semibold text-gray-700 mb-2">Theme Preference</h4> | ||
| <select | ||
| value={themePreference} | ||
| onChange={(e) => setThemePreference(e.target.value)} | ||
| className="p-2 border border-gray-300 rounded-lg w-full" | ||
| > | ||
| <option value="Light">Light</option> | ||
| <option value="Dark">Dark</option> | ||
| <option value="System Default">System Default</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PersonalizationSettingsComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="p-6 bg-white rounded-lg shadow-md"> | ||
| <ToastContainer/> | ||
| <h3 className="text-xl font-semibold text-green-700 mb-4">Rental Reminders</h3> | ||
| {reminders.length > 0 ? ( | ||
| reminders.map((reminder) => ( | ||
| <div key={reminder.id} className="p-4 mb-4 bg-green-50 border border-green-200 rounded-lg"> | ||
| <div className="flex items-center justify-between mb-2"> | ||
| <h4 className="text-lg font-semibold text-gray-800">{reminder.itemName}</h4> | ||
| <span className="text-sm text-gray-600">Due Date: {reminder.dueDate}</span> | ||
| </div> | ||
|
|
||
| <div className="text-gray-800 mb-2"> | ||
| <p><strong>Status:</strong> {reminder.status}</p> | ||
| <p><strong>Rental Duration:</strong> {reminder.duration} days</p> | ||
| <p><strong>Days Left:</strong> {reminder.remainingDays >= 0 ? `${reminder.remainingDays} days` : "Overdue"}</p> | ||
| <p><strong>Total Rental Cost:</strong> ${reminder.cost}</p> | ||
| </div> | ||
|
|
||
| <div className="flex items-center space-x-4 mt-3"> | ||
| <button | ||
| className="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded-lg text-sm" | ||
| onClick={() => handleExtendRental(reminder.id)} | ||
| > | ||
| Extend Rental | ||
| </button> | ||
| <button | ||
| className="bg-yellow-500 hover:bg-yellow-600 text-white py-1 px-3 rounded-lg text-sm" | ||
| onClick={() => handleViewDetails(reminder.id)} | ||
| > | ||
| View Details | ||
| </button> | ||
| <button | ||
| className="bg-red-500 hover:bg-red-600 text-white py-1 px-3 rounded-lg text-sm" | ||
| onClick={() => handleContactSupport(reminder.id)} | ||
| > | ||
| Contact Support | ||
| </button> | ||
| </div> | ||
| </div> | ||
| )) | ||
| ) : ( | ||
| <p className="text-gray-500">No rental reminders at this time.</p> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RentalRemindersComponent; |
38 changes: 33 additions & 5 deletions
38
frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters