-
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.
Merge branch 'main' into new_branch_5
- Loading branch information
Showing
4 changed files
with
310 additions
and
3 deletions.
There are no files selected for viewing
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,173 @@ | ||
import React, { useState, useEffect } from 'react'; | ||
import { Plus, Edit, Trash, BarChart, Bell } from 'lucide-react'; | ||
|
||
const RentAdminDashboard = () => { | ||
const [products, setProducts] = useState([]); | ||
const [orders, setOrders] = useState([]); | ||
const [users, setUsers] = useState([]); | ||
const [analytics, setAnalytics] = useState({ | ||
popularProducts: [], | ||
revenue: '$0', | ||
rentalFrequency: [], | ||
userBehavior: [], | ||
}); | ||
|
||
// Fetch data | ||
useEffect(() => { | ||
const fetchData = async () => { | ||
const productData = await fetchProducts(); | ||
const orderData = await fetchOrders(); | ||
const userData = await fetchUsers(); | ||
const analyticsData = await fetchAnalytics(); | ||
|
||
setProducts(productData); | ||
setOrders(orderData); | ||
setUsers(userData); | ||
setAnalytics(analyticsData); | ||
}; | ||
|
||
fetchData(); | ||
}, []); | ||
|
||
// Mock API calls | ||
const fetchProducts = async () => { | ||
return [ | ||
{ id: 1, name: 'Tractor', price: '$300', category: 'Heavy Machinery', availability: 'In Stock' }, | ||
{ id: 2, name: 'Lawn Mower', price: '$100', category: 'Gardening', availability: 'In Stock' }, | ||
]; | ||
}; | ||
|
||
const fetchOrders = async () => { | ||
return [ | ||
{ id: 1, item: 'Tractor', user: 'John Doe', status: 'Pending Approval', returnDate: '2024-12-01' }, | ||
{ id: 2, item: 'Lawn Mower', user: 'Jane Smith', status: 'Active', returnDate: '2024-11-15' }, | ||
]; | ||
}; | ||
|
||
const fetchUsers = async () => { | ||
return [ | ||
{ id: 1, name: 'John Doe', email: 'john@example.com', feedback: 'Excellent service!' }, | ||
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', feedback: 'Very helpful!' }, | ||
]; | ||
}; | ||
|
||
const fetchAnalytics = async () => { | ||
return { | ||
popularProducts: ['Tractor', 'Lawn Mower'], | ||
revenue: '$1200', | ||
rentalFrequency: ['Daily', 'Weekly'], | ||
userBehavior: ['Frequently rented Tractor and Plow'], | ||
}; | ||
}; | ||
|
||
const handleAddProduct = () => { | ||
// Add product logic | ||
}; | ||
|
||
const handleUpdateProduct = (id) => { | ||
// Update product logic | ||
}; | ||
|
||
const handleDeleteProduct = (id) => { | ||
setProducts(products.filter((product) => product.id !== id)); | ||
}; | ||
|
||
const handleOrderApproval = (id) => { | ||
setOrders(orders.map((order) => (order.id === id ? { ...order, status: 'Approved' } : order))); | ||
}; | ||
|
||
const handleSendNotification = () => { | ||
// Send notification logic | ||
}; | ||
|
||
return ( | ||
<div className="min-h-screen bg-gray-100 p-8"> | ||
<h1 className="text-3xl font-extrabold tracking-tight text-green-900 mb-8 mt-16">Admin Dashboard</h1> | ||
|
||
{/* Product Management Section */} | ||
<div className="bg-gradient-to-r from-green-50 to-green-100 rounded-lg shadow-lg p-6 mb-8"> | ||
<h2 className="text-2xl text-center text-green-500 font-bold mb-4">Product Management</h2> | ||
<button onClick={handleAddProduct} className="inline-block bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-500 transition-colors duration-300 mb-4"> | ||
<Plus className="inline w-4 h-4 mr-1" /> Add Product | ||
</button> | ||
<div> | ||
{products.map((product) => ( | ||
<div key={product.id} className="flex justify-between items-center border-b py-4"> | ||
<div> | ||
<p className="text-lg text-green-700">{product.name}</p> | ||
<p className="text-green-600">{product.price} - {product.category} - {product.availability}</p> | ||
</div> | ||
<div className="flex items-center"> | ||
<button onClick={() => handleUpdateProduct(product.id)} className="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-500 transition-colors duration-300 mr-2"> | ||
<Edit className="w-4 h-4" /> Edit | ||
</button> | ||
<button onClick={() => handleDeleteProduct(product.id)} className="bg-red-600 text-white px-3 py-2 rounded-md hover:bg-red-500 transition-colors duration-300"> | ||
<Trash className="w-4 h-4" /> Delete | ||
</button> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
|
||
{/* Order Management Section */} | ||
<div className="bg-gradient-to-r from-green-50 to-green-100 rounded-lg shadow-lg p-6 mb-8"> | ||
<h2 className="text-2xl text-center text-green-500 font-bold mb-4">Order Management</h2> | ||
<div> | ||
{orders.map((order) => ( | ||
<div key={order.id} className="flex justify-between items-center border-b py-4"> | ||
<div> | ||
<p className="text-lg text-green-700">{order.item}</p> | ||
<p className="text-green-600">User: {order.user} - Status: {order.status} - Return Date: {order.returnDate}</p> | ||
</div> | ||
<button onClick={() => handleOrderApproval(order.id)} className="inline-block bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-500 transition-colors duration-300"> | ||
Approve | ||
</button> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
|
||
{/* User Management Section */} | ||
<div className="bg-gradient-to-r from-green-50 to-green-100 rounded-lg shadow-lg p-6 mb-8"> | ||
<h2 className="text-2xl text-center text-green-500 font-bold mb-4">User Management</h2> | ||
<div> | ||
{users.map((user) => ( | ||
<div key={user.id} className="flex justify-between items-center border-b py-4"> | ||
<div> | ||
<p className="text-lg text-green-700">{user.name}</p> | ||
<p className="text-green-600">Email: {user.email}</p> | ||
<p className="text-green-600">Feedback: {user.feedback}</p> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
|
||
{/* Analytics & Reporting Section */} | ||
<div className="bg-gradient-to-r from-green-50 to-green-100 rounded-lg shadow-lg p-6 mb-8"> | ||
<h2 className="text-2xl text-center text-green-500 font-bold mb-4">Analytics & Reporting</h2> | ||
<div> | ||
<p className="text-lg text-green-700">Revenue: {analytics.revenue}</p> | ||
<p className="text-green-700">Popular Products: {analytics.popularProducts.join(', ')}</p> | ||
<p className="text-green-700">Rental Frequency: {analytics.rentalFrequency.join(', ')}</p> | ||
<p className="text-green-700">User Behavior: {analytics.userBehavior.join(', ')}</p> | ||
<button className="bg-green-600 text-white px-6 py-3 mt-4 rounded-md hover:bg-green-500 transition-colors duration-300"> | ||
<BarChart className="inline w-4 h-4 mr-1" /> View Detailed Report | ||
</button> | ||
</div> | ||
</div> | ||
|
||
{/* Notifications Section */} | ||
<div className="bg-gradient-to-r from-green-50 to-green-100 rounded-lg shadow-lg p-6 mb-8"> | ||
<h2 className="text-2xl text-center text-green-500 font-bold mb-4">Notifications</h2> | ||
<p className="text-green-600">Send reminders and alerts to users.</p> | ||
<button onClick={handleSendNotification} className="inline-block bg-green-600 text-white px-6 py-3 mt-4 rounded-md hover:bg-green-500 transition-colors duration-300"> | ||
<Bell className="inline w-4 h-4 mr-1" /> Send Notifications | ||
</button> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default RentAdminDashboard; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
import React, { useState } from "react"; | ||
import { BiChevronUp } from 'react-icons/bi'; | ||
|
||
const FAQ = () => { | ||
const [activeIndex, setActiveIndex] = useState(null); | ||
const [faqCount, setFaqCount] = useState(5); // Show 5 FAQs initially | ||
|
||
const faqs = [ | ||
{ | ||
"question": "What types of products does AgroShop offer?", | ||
"answer": "AgroShop offers a wide range of products to meet all agricultural needs, including seeds, fertilizers, pesticides, soil health kits, farming tools, machinery, and crop disease prediction tools." | ||
}, | ||
{ | ||
"question": "How can I track my order?", | ||
"answer": "Once your order is confirmed, we’ll send a tracking link to your email or SMS. You can also log in to your AgroShop account and go to 'My Orders' to view the current status of your order." | ||
}, | ||
{ | ||
"question": "Do you offer bulk discounts?", | ||
"answer": "Yes, we offer bulk discounts on selected products. Contact our customer support team or check the product page for information on available bulk pricing options." | ||
}, | ||
{ | ||
"question": "How do I return a product?", | ||
"answer": "If you’re not satisfied with your purchase, you can initiate a return within 7 days of receiving your order. Go to 'My Orders', select the item you wish to return, and follow the return instructions provided." | ||
}, | ||
{ | ||
"question": "Can I get expert advice on which products to buy?", | ||
"answer": "Yes! AgroShop provides access to expert recommendations for farmers. Our team can help you select the right products for your specific crops, soil type, and climate." | ||
}, | ||
{ | ||
"question": "What payment options are available?", | ||
"answer": "We accept multiple payment methods including credit/debit cards, net banking, UPI, and popular mobile wallets for a seamless checkout experience." | ||
}, | ||
{ | ||
"question": "Do you deliver to rural areas?", | ||
"answer": "Yes, AgroShop is committed to serving farmers across urban and rural areas. We deliver nationwide, ensuring that farmers everywhere have access to quality agricultural products." | ||
}, | ||
{ | ||
"question": "Are the products on AgroShop certified?", | ||
"answer": "Yes, we only offer products from certified suppliers to ensure quality and reliability. Each product listing includes certification details for your reference." | ||
}, | ||
{ | ||
"question": "Can I cancel my order?", | ||
"answer": "You can cancel your order before it is shipped by going to 'My Orders' and selecting the cancel option. Once shipped, cancellation may not be available." | ||
}, | ||
{ | ||
"question": "How does AgroShop handle product quality issues?", | ||
"answer": "If you encounter any quality issues with your purchase, please reach out to our support team. We will assist you with a return or exchange based on the situation." | ||
}, | ||
{ | ||
"question": "Does AgroShop offer any loyalty or reward program?", | ||
"answer": "Yes, AgroShop has a loyalty program where you earn points on every purchase. These points can be redeemed for discounts on future orders." | ||
}, | ||
{ | ||
"question": "Can I set up a subscription for recurring products like fertilizers?", | ||
"answer": "Yes, we offer a subscription service for products you need regularly, such as fertilizers and seeds. Choose the subscription option on the product page to set your delivery frequency." | ||
}, | ||
{ | ||
"question": "How can I contact customer support?", | ||
"answer": "You can reach our customer support team via phone, email, or live chat on our website. Our team is available to assist you Monday to Saturday from 9 AM to 6 PM." | ||
} | ||
] | ||
|
||
const handleToggle = (index) => { | ||
setActiveIndex(activeIndex === index ? null : index); | ||
}; | ||
|
||
const loadMoreFAQs = () => { | ||
setFaqCount(prevCount => Math.min(prevCount + 3, faqs.length)); // Load 3 more FAQs but not exceed total FAQs | ||
}; | ||
|
||
return ( | ||
<div className="bg-green-100 w-full py-2"> | ||
|
||
<section className=""> | ||
<div className="max-w-4xl mx-auto px-4 bg-white py-16 rounded-lg"> | ||
<h2 className="text-3xl md:text-4xl mb-10 font-bold text-green-600 text-center"> | ||
Frequently Asked Questions | ||
</h2> | ||
<dl className="space-y-4"> | ||
{faqs.slice(0, faqCount).map((faq, index) => ( | ||
<div key={index} className="transition-transform duration-300 group"> | ||
<div className="rounded-lg border border-green-300 bg-white shadow-lg hover:shadow-2xl transition-shadow duration-300"> | ||
<button | ||
onClick={() => handleToggle(index)} | ||
className="flex justify-between items-center w-full p-4 text-lg font-semibold text-green-700 bg-gradient-to-r from-green-500 to-green-700 rounded-lg text-white transition-all duration-300 hover:bg-gradient-to-l" | ||
> | ||
<span>{faq.question}</span> | ||
<BiChevronUp | ||
className={`w-5 h-5 transition-transform duration-300 ${activeIndex === index ? 'rotate-180' : ''}`} | ||
/> | ||
</button> | ||
</div> | ||
<div | ||
className={`overflow-hidden transition-all duration-600 transform ${ | ||
activeIndex === index ? 'max-h-[500px] opacity-100 scale-y-100' : 'max-h-0 opacity-0 scale-y-95' | ||
}`} | ||
style={{ transitionProperty: 'max-height, opacity, transform' }} | ||
> | ||
<div className="mt-2 p-4 rounded-lg bg-green-50 text-green-800"> | ||
{faq.answer} | ||
</div> | ||
</div> | ||
</div> | ||
))} | ||
</dl> | ||
{faqCount < faqs.length && ( | ||
<div className="text-center mt-8"> | ||
<button | ||
onClick={loadMoreFAQs} | ||
className="px-6 py-3 bg-green-600 text-white font-semibold rounded-lg transition-all duration-300 hover:bg-green-700 hover:scale-105 shadow-md" | ||
> | ||
Load More FAQs | ||
</button> | ||
</div> | ||
)} | ||
</div> | ||
</section> | ||
</div> | ||
|
||
); | ||
}; | ||
|
||
export default FAQ; |
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