-
- User Management
-
-
- {/* Search and Filter */}
-
-
-
-
+import React, { useState } from "react";
+import { Edit, Lock, Eye } from "lucide-react";
+
+const UserManagement = () => {
+ // Dummy data for users
+ const [users, setUsers] = useState([
+ {
+ id: 1,
+ name: "Alice Johnson",
+ email: "alice@example.com",
+ role: "admin",
+ feedback: "Great service!",
+ accountStatus: "active",
+ createdAt: "2022-01-15",
+ lastLogin: "2023-10-01",
+ },
+ {
+ id: 2,
+ name: "Bob Smith",
+ email: "bob@example.com",
+ role: "customer",
+ feedback: "Needs improvement.",
+ accountStatus: "suspended",
+ createdAt: "2021-11-03",
+ lastLogin: "2023-09-29",
+ },
+ {
+ id: 3,
+ name: "Charlie Brown",
+ email: "charlie@example.com",
+ role: "vendor",
+ feedback: "Satisfied with the platform.",
+ accountStatus: "active",
+ createdAt: "2020-06-21",
+ lastLogin: "2023-10-02",
+ },
+ ]);
+
+ const [searchQuery, setSearchQuery] = useState("");
+ const [roleFilter, setRoleFilter] = useState("all");
+ const [statusFilter, setStatusFilter] = useState("all");
+
+ // Modal states
+ const [isViewModalOpen, setIsViewModalOpen] = useState(false);
+ const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+ const [isSuspendModalOpen, setIsSuspendModalOpen] = useState(false);
+ const [selectedUser, setSelectedUser] = useState(null);
+
+ // Filter users based on search query, role, and status
+ const filteredUsers = users.filter((user) => {
+ const matchesSearch =
+ user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ user.email.toLowerCase().includes(searchQuery.toLowerCase());
+
+ const matchesRole = roleFilter === "all" || user.role === roleFilter;
+ const matchesStatus = statusFilter === "all" || user.accountStatus === statusFilter;
+
+ return matchesSearch && matchesRole && matchesStatus;
+ });
+
+ // Handle viewing user details
+ const onViewDetails = (userId) => {
+ const user = users.find((u) => u.id === userId);
+ setSelectedUser(user);
+ setIsViewModalOpen(true);
+ };
+
+ // Handle editing user details
+ const onEditUser = (userId) => {
+ const user = users.find((u) => u.id === userId);
+ setSelectedUser(user);
+ setIsEditModalOpen(true);
+ };
+
+ // Handle suspending user
+ const onSuspendUser = (userId) => {
+ const user = users.find((u) => u.id === userId);
+ setSelectedUser(user);
+ setIsSuspendModalOpen(true);
+ };
+
+ // Confirm suspension of user
+ const confirmSuspendUser = () => {
+ if (selectedUser) {
+ setUsers((prevUsers) =>
+ prevUsers.map((user) =>
+ user.id === selectedUser.id
+ ? { ...user, accountStatus: "suspended" }
+ : user
+ )
+ );
+ setIsSuspendModalOpen(false);
+ }
+ };
+
+ const closeModals = () => {
+ setIsViewModalOpen(false);
+ setIsEditModalOpen(false);
+ setIsSuspendModalOpen(false);
+ setSelectedUser(null);
+ };
-
- {users.map((user) => (
-
+
+ User Management
+
+
+ {/* Search and Filter */}
+
+
setSearchQuery(e.target.value)}
+ />
+
+