Skip to content

Commit

Permalink
extend admin dash
Browse files Browse the repository at this point in the history
  • Loading branch information
haseebzaki-07 committed Nov 9, 2024
1 parent 779c61f commit a636be8
Show file tree
Hide file tree
Showing 7 changed files with 586 additions and 1 deletion.
38 changes: 37 additions & 1 deletion frontend/src/AgroRentAI/RentAdminDashboard.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React, { useState, useEffect } from "react";
import { User, BarChart, Box, Package, Bell } from "lucide-react";
import { User, BarChart, Box, Package, Bell, DollarSign, Tag, MessageSquare, Settings, FileText, Shield } from "lucide-react";
import ProductManagement from "./components/AdminProductManagement";
import OrderManagement from "./components/AdminOrderManagement";
import UserManagement from "./components/AdminUserManagement";
import Analytics from "./components/AdminAnalytics";
import { toast } from 'react-toastify'; // Make sure to add this import if using toast
import SalesRevenueAnalytics from "./components/AdminSalesAnalytics";
import MarketingPromotions from "./components/AdminMarketing";
import CustomerSupportReviews from "./components/AdminCustomerSupport";
import SettingsConfiguration from "./components/AdminSettings";
import ReportsDataExport from "./components/AdminReport";
import SecurityAuditLogs from "./components/AdminSecurity";

const RentAdminDashboard = () => {
const [activeSection, setActiveSection] = useState("Product Management");
Expand Down Expand Up @@ -253,6 +259,18 @@ const RentAdminDashboard = () => {
return <UserManagement users={users} />;
case "Analytics & Reporting":
return <Analytics analytics={analytics} />;
case "Sales & Revenue Analytics":
return <SalesRevenueAnalytics />;
case "Marketing & Promotions":
return <MarketingPromotions />;
case "Customer Support & Reviews":
return <CustomerSupportReviews />;
case "Settings & Configuration":
return <SettingsConfiguration />;
case "Reports and Data Export":
return <ReportsDataExport />;
case "Security & Audit Logs":
return <SecurityAuditLogs />;
default:
return null;
}
Expand All @@ -275,6 +293,24 @@ const RentAdminDashboard = () => {
<li className="cursor-pointer" onClick={() => setActiveSection("Analytics & Reporting")}>
<BarChart className="inline mr-2" /> Analytics & Reporting
</li>
<li className="cursor-pointer" onClick={() => setActiveSection("Sales & Revenue Analytics")}>
<DollarSign className="inline mr-2" /> Sales & Revenue Analytics
</li>
<li className="cursor-pointer" onClick={() => setActiveSection("Marketing & Promotions")}>
<Tag className="inline mr-2" /> Marketing & Promotions
</li>
<li className="cursor-pointer" onClick={() => setActiveSection("Customer Support & Reviews")}>
<MessageSquare className="inline mr-2" /> Customer Support & Reviews
</li>
<li className="cursor-pointer" onClick={() => setActiveSection("Settings & Configuration")}>
<Settings className="inline mr-2" /> Settings & Configuration
</li>
<li className="cursor-pointer" onClick={() => setActiveSection("Reports and Data Export")}>
<FileText className="inline mr-2" /> Reports and Data Export
</li>
<li className="cursor-pointer" onClick={() => setActiveSection("Security & Audit Logs")}>
<Shield className="inline mr-2" /> Security & Audit Logs
</li>
</ul>
</aside>

Expand Down
94 changes: 94 additions & 0 deletions frontend/src/AgroRentAI/components/AdminCustomerSupport.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from "react";
import { MessageCircle, ThumbsUp, AlertTriangle, Clock } from "lucide-react";

const CustomerSupportReviews = () => {
const supportData = {
unresolvedTickets: 3,
recentReviews: ["Great service!", "Loved the product!", "Could be better..."],
avgResponseTime: "2 hours",
satisfactionRating: "85%",
frequentIssues: ["Shipping delays", "Product quality", "Account access issues"]
};

return (
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
<h2 className="text-2xl font-bold text-green-700 text-center mb-6">
Customer Support & Reviews
</h2>

{/* Unresolved Tickets */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<MessageCircle className="mr-2 text-green-700" /> Unresolved Tickets
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Open Tickets:</span> {supportData.unresolvedTickets}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
View Tickets
</button>
</div>

{/* Average Response Time */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<Clock className="mr-2 text-green-700" /> Average Response Time
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Response Time:</span> {supportData.avgResponseTime}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
Improve Response Time
</button>
</div>

{/* Customer Satisfaction Rating */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<ThumbsUp className="mr-2 text-green-700" /> Customer Satisfaction
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Satisfaction Rating:</span> {supportData.satisfactionRating}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
View Satisfaction Trends
</button>
</div>

{/* Frequent Issues */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<AlertTriangle className="mr-2 text-green-700" /> Frequent Issues
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Top Issues:</span> {supportData.frequentIssues.join(", ")}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
Resolve Common Issues
</button>
</div>

{/* Recent Reviews */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<MessageCircle className="mr-2 text-green-700" /> Recent Reviews
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Customer Feedback:</span> {supportData.recentReviews.join(", ")}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
View & Respond
</button>
</div>

{/* General Support Overview Button */}
<div className="flex justify-center mt-6">
<button className="bg-green-600 text-white px-8 py-4 rounded-md hover:bg-green-700 transition-colors duration-300">
View All Support Analytics
</button>
</div>
</div>
);
};

export default CustomerSupportReviews;
94 changes: 94 additions & 0 deletions frontend/src/AgroRentAI/components/AdminMarketing.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from "react";
import { Tag, Gift, Users, TrendingUp } from "lucide-react";

const MarketingPromotions = () => {
const promotionsData = {
activeCampaigns: ["Spring Sale", "Holiday Discounts"],
discountCodes: ["SAVE10", "FREESHIP"],
upcomingCampaigns: ["Back to School", "Black Friday"],
customerSegments: ["New Customers", "Returning Customers", "High Spenders"],
campaignPerformance: {
totalReach: "50,000",
conversionRate: "12%",
revenueGenerated: "$30,000"
}
};

return (
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
<h2 className="text-2xl font-bold text-green-700 text-center mb-6">
Marketing & Promotions
</h2>

{/* Active Campaigns */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<Tag className="mr-2 text-green-700" /> Active Campaigns
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Campaigns:</span> {promotionsData.activeCampaigns.join(", ")}
</p>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Discount Codes:</span> {promotionsData.discountCodes.join(", ")}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
Manage Promotions
</button>
</div>

{/* Upcoming Campaigns */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<Gift className="mr-2 text-green-700" /> Upcoming Campaigns
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Next Campaigns:</span> {promotionsData.upcomingCampaigns.join(", ")}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
View Campaign Calendar
</button>
</div>

{/* Customer Segments */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<Users className="mr-2 text-green-700" /> Targeted Customer Segments
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Segments:</span> {promotionsData.customerSegments.join(", ")}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
Manage Customer Segments
</button>
</div>

{/* Campaign Performance */}
<div className="border rounded-lg p-6 bg-green-50 hover:bg-green-100 shadow-sm transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<TrendingUp className="mr-2 text-green-700" /> Campaign Performance
</h3>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Total Reach:</span> {promotionsData.campaignPerformance.totalReach}
</p>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Conversion Rate:</span> {promotionsData.campaignPerformance.conversionRate}
</p>
<p className="text-lg text-green-700 mb-4">
<span className="font-bold">Revenue Generated:</span> {promotionsData.campaignPerformance.revenueGenerated}
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
View Performance Details
</button>
</div>

{/* General Analytics Button */}
<div className="flex justify-center mt-6">
<button className="bg-green-600 text-white px-8 py-4 rounded-md hover:bg-green-700 transition-colors duration-300">
View All Marketing Analytics
</button>
</div>
</div>
);
};

export default MarketingPromotions;
83 changes: 83 additions & 0 deletions frontend/src/AgroRentAI/components/AdminReport.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from "react";
import { FileText, Download, BarChart, User, Layers, Activity } from "lucide-react";

const ReportsDataExport = () => {
return (
<div className="bg-white p-6 rounded-lg shadow-sm space-y-8">
<h2 className="text-2xl font-bold text-green-700 text-center mb-6">
Reports and Data Export
</h2>

{/* General Overview */}
<div className="border rounded-lg p-6 bg-green-50 shadow-sm hover:bg-green-100 transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<FileText className="mr-2 text-green-700" /> Export Overview
</h3>
<p className="text-green-700 mb-4">
Generate comprehensive reports on sales, user activity, inventory, and performance metrics.
</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300">
Generate All Reports
</button>
</div>

{/* Individual Report Options */}
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-2">

{/* Sales Report */}
<div className="border rounded-lg p-6 bg-green-50 shadow-sm hover:bg-green-100 transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<BarChart className="mr-2 text-green-700" /> Sales Report
</h3>
<p className="text-green-700 mb-4">Download sales data and performance by product and region.</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300 flex items-center">
<Download className="w-4 h-4 mr-2" /> Download Sales Report
</button>
</div>

{/* User Activity Report */}
<div className="border rounded-lg p-6 bg-green-50 shadow-sm hover:bg-green-100 transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<User className="mr-2 text-green-700" /> User Activity Report
</h3>
<p className="text-green-700 mb-4">Access insights on user engagement, sessions, and feedback.</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300 flex items-center">
<Download className="w-4 h-4 mr-2" /> Download User Report
</button>
</div>

{/* Inventory Report */}
<div className="border rounded-lg p-6 bg-green-50 shadow-sm hover:bg-green-100 transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<Layers className="mr-2 text-green-700" /> Inventory Report
</h3>
<p className="text-green-700 mb-4">Export current inventory levels, low stock alerts, and product stats.</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300 flex items-center">
<Download className="w-4 h-4 mr-2" /> Download Inventory Report
</button>
</div>

{/* Performance Metrics Report */}
<div className="border rounded-lg p-6 bg-green-50 shadow-sm hover:bg-green-100 transition-colors duration-200">
<h3 className="text-xl font-semibold text-green-700 mb-4 flex items-center">
<Activity className="mr-2 text-green-700" /> Performance Metrics
</h3>
<p className="text-green-700 mb-4">Analyze website performance metrics, traffic, and conversion rates.</p>
<button className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300 flex items-center">
<Download className="w-4 h-4 mr-2" /> Download Performance Report
</button>
</div>

</div>

{/* General Reports Overview Button */}
<div className="flex justify-center mt-6">
<button className="bg-green-600 text-white px-8 py-4 rounded-md hover:bg-green-700 transition-colors duration-300">
View All Reports
</button>
</div>
</div>
);
};

export default ReportsDataExport;
Loading

0 comments on commit a636be8

Please sign in to comment.