-
-
+
+
+
+
React.ReactNode;
+ sortable: boolean;
+}
+
+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 = ({ data, columns, itemsPerPage }) => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [sortColumn, setSortColumn] = useState(null);
+ const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+ const [searchTerm, setSearchTerm] = useState('');
+
+ const filteredData = useMemo(
+ () =>
+ data.filter(item =>
+ columns.some(column => String(item[column.key]).toLowerCase().includes(searchTerm.toLowerCase()))
+ ),
+ [data, columns, searchTerm]
+ );
+
+ const sortedData = useMemo(() => {
+ if (!sortColumn) return filteredData;
+ return [...filteredData].sort((a, b) => {
+ if (a[sortColumn] < b[sortColumn]) return sortDirection === 'asc' ? -1 : 1;
+ if (a[sortColumn] > b[sortColumn]) return sortDirection === 'asc' ? 1 : -1;
+ return 0;
+ });
+ }, [filteredData, sortColumn, sortDirection]);
+
+ const paginatedData = useMemo(() => {
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ return sortedData.slice(startIndex, startIndex + itemsPerPage);
+ }, [sortedData, currentPage, itemsPerPage]);
+
+ const totalPages = Math.ceil(sortedData.length / itemsPerPage);
+
+ const handleSort = (column: string) => {
+ if (column === sortColumn) {
+ setSortDirection(prev => (prev === 'asc' ? 'desc' : 'asc'));
+ } else {
+ setSortColumn(column);
+ setSortDirection('asc');
+ }
+ };
+
+ const handleSearch = (e: React.ChangeEvent) => {
+ setSearchTerm(e.target.value);
+ setCurrentPage(1);
+ };
+
+ const renderCell = (item: any, column: Column) => {
+ if (column.isImage) {
+ return item[column.key] ? (
+ 
+ ) : (
+ = ({ data, columns, itemsPerPage }) => {
return (
+ {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/UsersTable.tsx b/src/components/dashboard/UsersTable.tsx
index da4cd38..d79612f 100644
--- a/src/components/dashboard/UsersTable.tsx
+++ b/src/components/dashboard/UsersTable.tsx
@@ -94,7 +94,8 @@ const Table: React.FC
+
+ Buyers Page
+ +
+
+
+
+
+ | column.sortable && handleSort(column.key)} + className={`px-4 py-4 text-sm font-bold text-whiteColor uppercase tracking-wider ${ + column.sortable ? 'cursor-pointer' : '' + } ${column.isImage ? 'text-center' : 'text-left'}`} + > + {column.label} + {column.sortable && sortColumn === column.key && {sortDirection === 'asc' ? ' ▲' : ' ▼'}} + | + ))} +
|---|
| + {renderCell(item, column)} + | + ))} +
+
+
+ Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, sortedData.length)} of{' '}
+ {sortedData.length} buyers
+
+
+
+
+
+
-
+
+
Users Management
= ({ data, columns, itemsPerPage }) => { return (
-
+
-
+
+
Sellers Management
= ({ data, columns, itemsPerPage }) => { />| !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' : ''}`}
+ className={`pl-4 py-4 text-left text-sm font-bold text-whiteColor uppercase tracking-wider ${!column.isImage ? 'cursor-pointer' : ''}`}
>
{column.label}
{!column.isImage && sortColumn === column.key && {sortDirection === 'asc' ? ' ▲' : ' ▼'}}
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index b156c9f..a7d989d 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -13,7 +13,7 @@ function Footer() {
K309 St , Makuza plaza, Nyarugenge , Kigali, Rwanda andela.mavericks@gmail.com -+250 788888888 ++250 788 888 888 - © 2024 Mavericks Shop. All rights reserved. + © {new Date().getFullYear()} Mavericks Shop. All rights reserved. diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index c006e33..3636db0 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -114,7 +114,7 @@ const Navbar: React.FC = () => { )}Buyers ;
-}
+import React, { useEffect } from 'react';
+import Table from '../../components/dashboard/BuyersTable';
+import { BiLoader } from 'react-icons/bi';
+import { useGetBuyersQuery } from '../../services/userApi';
+import { User as Buyer } from '../../types/Types';
+
+const Buyers: React.FC = () => {
+ const {
+ data: buyersData,
+ isLoading: buyersLoading,
+ isError: buyersError,
+ refetch: refetchBuyers,
+ } = useGetBuyersQuery(undefined, {
+ pollingInterval: 30000,
+ });
+
+ const loading = buyersLoading;
+ const error = buyersError;
+
+ const buyers = buyersData?.message || [];
+
+ useEffect(() => {
+ refetchBuyers();
+ }, [refetchBuyers]);
+
+ const columns = [
+ { key: 'photoUrl', label: 'Photo', isImage: true, sortable: false },
+ { key: 'firstName', label: 'First Name', sortable: true },
+ { key: 'lastName', label: 'Last Name', sortable: true },
+ { key: 'email', label: 'Email', sortable: true },
+ { key: 'phoneNumber', label: 'Phone', sortable: true },
+ { key: 'gender', label: 'Gender', sortable: true },
+ {
+ key: 'Role.name',
+ label: 'Role',
+ render: (buyer: Buyer) => buyer.Role.name.toUpperCase(),
+ sortable: false,
+ },
+ ];
+
+ if (loading)
+ return (
+
+
+ );
+ if (error) {
+ return Error fetching data. Please try again. ;
+ }
+
+ return (
+
+
+ );
+};
+
+export default Buyers;
\ No newline at end of file
diff --git a/src/pages/admin/Messages.tsx b/src/pages/admin/Messages.tsx
deleted file mode 100644
index 365ea40..0000000
--- a/src/pages/admin/Messages.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Messages() {
- return Messages ;
-}
diff --git a/src/pages/admin/Sellers.tsx b/src/pages/admin/Sellers.tsx
index f8bee62..5bb9d02 100644
--- a/src/pages/admin/Sellers.tsx
+++ b/src/pages/admin/Sellers.tsx
@@ -66,7 +66,7 @@ const Sellers: React.FC = () => {
{
key: 'Role.name',
label: 'Role',
- render: (seller: Seller) => seller.Role.name,
+ render: (seller: Seller) => seller.Role.name.toUpperCase(),
sortable: false,
},
{
@@ -96,7 +96,6 @@ const Sellers: React.FC = () => {
return (
- ;
-}
+// src/pages/admin/Settings.tsx
+
+import React, { useState } from 'react';
+import { FiSave, FiUser, FiLock, FiBell, FiGlobe, FiShield, FiRefreshCcw } from 'react-icons/fi';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+const Settings: React.FC = () => {
+ const defaultGeneralSettings = {
+ siteName: 'Mavericks',
+ siteUrl: 'https://mavericks.nijohn.dev',
+ adminEmail: 'admin.mavericks@gmail.com',
+ dateFormat: 'MM/DD/YYYY',
+ timeFormat: '12-hour',
+ theme: 'light',
+ profilePicture: '',
+ };
+
+ const defaultSecuritySettings = {
+ twoFactorAuth: false,
+ passwordExpiration: 90,
+ loginAttempts: 5,
+ minPasswordLength: 8,
+ specialCharRequirement: true,
+ };
+
+ const defaultNotificationSettings = {
+ emailNotifications: true,
+ pushNotifications: false,
+ smsNotifications: false,
+ newsletterFrequency: 'weekly',
+ };
+
+ const [generalSettings, setGeneralSettings] = useState(defaultGeneralSettings);
+ const [securitySettings, setSecuritySettings] = useState(defaultSecuritySettings);
+ const [notificationSettings, setNotificationSettings] = useState(defaultNotificationSettings);
+
+ const handleGeneralSettingsChange = (e: React.ChangeEventSeller Management
+
+ );
+};
+
+export default Settings;
diff --git a/src/pages/admin/UserManagement.tsx b/src/pages/admin/UserManagement.tsx
index d3d022d..56485c8 100644
--- a/src/pages/admin/UserManagement.tsx
+++ b/src/pages/admin/UserManagement.tsx
@@ -68,7 +68,7 @@ const UserManagement: React.FC = () => {
{
key: 'role',
label: 'Role',
- render: (user: User) => user.Role.name
+ render: (user: User) => user.Role.name.toUpperCase(),
},
{
key: 'action',
@@ -96,7 +96,6 @@ const UserManagement: React.FC = () => {
return (
Admin Settings+ +
- User Management |
|---|