+
+ );
+};
+
+export default ConfirmDisableModal;
\ No newline at end of file
diff --git a/src/components/dashboard/RoleChangeModal.tsx b/src/components/dashboard/RoleChangeModal.tsx
new file mode 100644
index 0000000..6c98b65
--- /dev/null
+++ b/src/components/dashboard/RoleChangeModal.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+interface Role {
+ id: string;
+ name: string;
+}
+
+interface RoleChangeModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onConfirm: (roleId: string) => void;
+ user: any;
+ roles: Role[];
+}
+
+const RoleChangeModal: React.FC
+
+ Confirm Disable
+
+ Are you sure you want to disable the seller account for {sellerName}?
+
+ This action will change their role to buyer.
+
+
+
+
+
+
+ );
+};
+
+export default RoleChangeModal;
diff --git a/src/components/dashboard/Sidebar.tsx b/src/components/dashboard/Sidebar.tsx
index 786aba3..3f36707 100644
--- a/src/components/dashboard/Sidebar.tsx
+++ b/src/components/dashboard/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { FaRegListAlt, FaUserFriends, FaUserTie, FaRegEnvelope, FaCog } from 'react-icons/fa';
+import { FaRegListAlt, FaUserFriends, FaUserTie, FaRegEnvelope, FaCog, FaUsers } from 'react-icons/fa';
import { FiLogOut } from 'react-icons/fi';
import { RxDashboard } from 'react-icons/rx';
import logo from '../../assets/Rectangle 2487.png';
@@ -97,6 +97,19 @@ export default function Sidebar({ isOpen, toggleSidebar }: { isOpen: boolean; to
Messages
+
+
+ + Change Role for{' '} + + {user.firstName} {user.lastName} + +
+Current Role: {user.Role.name}
+
+
+
+
+
+
+
+
+
+ {getInitials(item.firstName, item.lastName)}
+
+ );
+ }
+ if (column.render) return column.render(item);
+ return column.key.includes('.')
+ ? column.key.split('.').reduce((obj, key) => obj && obj[key], item)
+ : item[column.key];
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default Table;
diff --git a/src/components/dashboard/VendorsTable.tsx b/src/components/dashboard/VendorsTable.tsx
new file mode 100644
index 0000000..39b6398
--- /dev/null
+++ b/src/components/dashboard/VendorsTable.tsx
@@ -0,0 +1,159 @@
+import React, { useState, useMemo } from 'react';
+
+interface Column {
+ key: string;
+ label: string;
+ isImage?: boolean;
+ render?: (item: any) => React.ReactNode;
+}
+
+interface TableProps {
+ data: any[];
+ columns: Column[];
+ itemsPerPage: number;
+}
+
+const getInitials = (firstName: string, lastName: string) =>
+ `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+
+const getRandomColor = () => {
+ const letters = '0123456789ABCDEF';
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+};
+
+const Table: React.FC
+
+
+ | !column.isImage && handleSort(column.key)} + className={`pl-4 py-4 text-left text-sm font-bold text-[#6B7280] uppercase tracking-wider ${!column.isImage ? 'cursor-pointer' : ''}`} + > + {column.label} + {!column.isImage && sortColumn === column.key && {sortDirection === 'asc' ? ' ▲' : ' ▼'}} + | + ))} +
|---|
| + {renderCell(item, column)} + | + ))} +
+
+
+ Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, sortedData.length)} of{' '}
+ {sortedData.length} entries
+
+
+
+
+
+
+ {getInitials(item.firstName, item.lastName)}
+
+ );
+ }
+ if (column.render) return column.render(item);
+ return column.key.includes('.')
+ ? column.key.split('.').reduce((obj, key) => obj && obj[key], item)
+ : item[column.key];
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default Table;
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..47ea344
--- /dev/null
+++ b/src/pages/NotFoundPage.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import photo404 from '../assets/404_page.png';
+import { FaHome, FaArrowLeft } from 'react-icons/fa';
+
+const NotFoundPage: React.FC = () => {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+ | !column.isImage && handleSort(column.key)} + className={`pl-4 py-4 text-left text-sm font-bold text-[#6B7280] uppercase tracking-wider ${!column.isImage ? 'cursor-pointer' : ''}`} + > + {column.label} + {!column.isImage && sortColumn === column.key && {sortDirection === 'asc' ? ' ▲' : ' ▼'}} + | + ))} +
|---|
| + {renderCell(item, column)} + | + ))} +
+
+
+ Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, sortedData.length)} of{' '}
+ {sortedData.length} entries
+
+
+
+
+
+
+
+ 
+
+
+ );
+};
+
+export default NotFoundPage;
diff --git a/src/pages/admin/Sellers.tsx b/src/pages/admin/Sellers.tsx
index 3651d71..f8bee62 100644
--- a/src/pages/admin/Sellers.tsx
+++ b/src/pages/admin/Sellers.tsx
@@ -1,3 +1,112 @@
-export default function Sellers() {
- return Not Found
++ Oops! ... Looks like this page does not exist in MAVERICKS +
+
+
+
+ Sellers
;
-}
+// src/pages/admin/Sellers.tsx
+import React, { useState, useEffect } from 'react';
+import Table from '../../components/dashboard/VendorsTable';
+import { BiLoader } from 'react-icons/bi';
+import { useGetRolesQuery } from '../../services/roleApi';
+import { useGetSellersQuery, useUpdateUserRoleMutation } from '../../services/userApi';
+import ConfirmDisableModal from '../../components/dashboard/ConfirmDisableModal';
+import { User as Seller } from '../../types/Types';
+
+const Sellers: React.FC = () => {
+ const {
+ data: sellersData,
+ isLoading: sellersLoading,
+ isError: sellersError,
+ refetch: refetchSellers,
+ } = useGetSellersQuery(undefined, {
+ pollingInterval: 30000,
+ });
+ const { data: rolesData, isLoading: rolesLoading, isError: rolesError } = useGetRolesQuery();
+ const [updateUserRole] = useUpdateUserRoleMutation();
+
+ const [selectedSeller, setSelectedSeller] = useState
+
+ );
+ if (error) {
+ return Error fetching data. Please try again.
;
+ }
+
+ return (
+
+
+ {selectedSeller && (
+
+ );
+};
+
+export default Sellers;
diff --git a/src/pages/admin/UserManagement.tsx b/src/pages/admin/UserManagement.tsx
new file mode 100644
index 0000000..d3d022d
--- /dev/null
+++ b/src/pages/admin/UserManagement.tsx
@@ -0,0 +1,112 @@
+// src/pages/admin/UserManagement.tsx
+import React, { useState, useEffect } from 'react';
+import Table from '../../components/dashboard/UsersTable';
+import { BiLoader } from 'react-icons/bi';
+import { useGetRolesQuery } from '../../services/roleApi';
+import { useGetUsersQuery, useUpdateUserRoleMutation } from '../../services/userApi';
+import RoleChangeModal from '../../components/dashboard/RoleChangeModal';
+import { User } from '../../types/Types';
+
+const UserManagement: React.FC = () => {
+ const { data: usersData, isLoading: usersLoading, isError: usersError } = useGetUsersQuery();
+ const { data: rolesData, isLoading: rolesLoading, isError: rolesError } = useGetRolesQuery();
+ const [updateUserRole] = useUpdateUserRoleMutation();
+
+ const [users, setUsers] = useStateSeller Management
+
+
+ );
+ if (error) {
+ return Error fetching data. Please try again.
;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default UserManagement;
diff --git a/src/services/roleApi.ts b/src/services/roleApi.ts
new file mode 100644
index 0000000..21c4f52
--- /dev/null
+++ b/src/services/roleApi.ts
@@ -0,0 +1,18 @@
+import { mavericksApi } from '.';
+import { Role } from '../types/Types';
+
+export const roleApi = mavericksApi.injectEndpoints({
+ endpoints: builder => ({
+ getRoles: builder.query<{ data: Role[] }, void>({
+ query: () => ({
+ url: 'roles',
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`,
+ },
+ }),
+ }),
+ }),
+ overrideExisting: false,
+});
+
+export const { useGetRolesQuery } = roleApi;
diff --git a/src/services/userApi.ts b/src/services/userApi.ts
index 7072975..b6b8c74 100644
--- a/src/services/userApi.ts
+++ b/src/services/userApi.ts
@@ -1,4 +1,5 @@
import { mavericksApi } from '.';
+import { User } from '../types/Types';
export const userApi = mavericksApi.injectEndpoints({
endpoints: builder => ({
@@ -7,8 +8,35 @@ export const userApi = mavericksApi.injectEndpoints({
url: `users/user/${id}`,
}),
}),
+ getUsers: builder.query<{ message: User[] }, void>({
+ query: () => ({
+ url: 'users',
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`,
+ },
+ }),
+ }),
+ getSellers: builder.query({
+ query: () => ({
+ url: 'users/role/seller',
+ headers: {
+ Authorization: localStorage.getItem('token') || '',
+ },
+ }),
+ }),
+ updateUserRole: builder.mutation