+
+# champs-ec-fe
+
+### Project Overview
+The Champs-EC-FE (Champs E-Commerce Frontend) project is designed to create a robust and user-friendly frontend application for an e-commerce platform. It will offer a rich shopping experience by integrating with the backend e-commerce (
+
+
+
+
+
+
+ Test Child
+ Mock DashNavbar
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock HeaderDash
+));
+jest.mock('@/components/Product/AddProducts', () => () => (
+ Mock AddProducts
+));
+
+const queryClient = new QueryClient();
+
+describe('Page Component', () => {
+ beforeEach(() => {
+ (request.get as jest.Mock).mockImplementation((url) => {
+ if (url.includes('/categories')) {
+ return Promise.resolve({
+ data: [
+ { id: 1, name: 'Category 1' },
+ { id: 2, name: 'Category 2' },
+ ],
+ });
+ }
+ return Promise.resolve({ data: [] });
+ });
+
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders data after loading', async () => {
+ render(
+ Mock buyer List
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock DashNavbar
+));
+describe('Page Component', () => {
+ beforeEach(() => {
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders loading state initially', () => {
+ render(
+ Mock DashNavbar
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock HeaderDash
+));
+jest.mock('@/components/Product/AddProducts', () => () => (
+ Mock AddProducts
+));
+const queryClient = new QueryClient();
+jest.mock('@/components/DashNavbar', () => () => (
+ Mock DashNavbar
+));
+
+describe('Page Component', () => {
+ beforeEach(() => {
+ (request.get as jest.Mock).mockImplementation((url) => {
+ if (url.includes('/categories')) {
+ return Promise.resolve({
+ data: [
+ { id: 1, name: 'Category 1' },
+ { id: 2, name: 'Category 2' },
+ ],
+ });
+ }
+ return Promise.resolve({ data: [] });
+ });
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders loading state initially', () => {
+ render(
+ Mock DashNavbar
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock HeaderDash
+));
+jest.mock('@/components/Product/AddProducts', () => () => (
+ Mock AddProducts
+));
+const queryClient = new QueryClient();
+jest.mock('@/components/DashNavbar', () => () => (
+ Mock DashNavbar
+));
+
+describe('Page Component', () => {
+ beforeEach(() => {
+ (request.get as jest.Mock).mockImplementation((url) => {
+ if (url.includes('/categories')) {
+ return Promise.resolve({
+ data: [
+ { id: 1, name: 'Category 1' },
+ { id: 2, name: 'Category 2' },
+ ],
+ });
+ }
+ return Promise.resolve({ data: [] });
+ });
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders loading state initially', () => {
+ render(
+ Mock DashNavbar
+));
+
+jest.mock('@/components/headerDash', () => () => (
+ Mock DashNavbar
+));
+describe('render user page on dashboard', () => {
+ beforeAll(() => {
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('render the user page', () => {
+ render(
+ Test Component
;
+ const { getByText } = render(
+ Mock DashNavbar
+));
+jest.mock('@/components/Footer', () => () => (
+ Mock DashNavbar
+));
+
+const mockedAxios = new MockAdapter(axios);
+const queryClient = new QueryClient();
+
+describe("recover Tests", () => {
+ beforeEach(() => {
+ mockedAxios.reset();
+ });
+
+ it("Test should view the input button", async () => {
+ const { getByText, getByPlaceholderText } = render(
+ Mock DashNavbar
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock DashNavbar
+));
+describe('Page Component', () => {
+ beforeEach(() => {
+ (request.get as jest.Mock).mockImplementation((url) => {
+ if (url.includes('/stats')) {
+ return Promise.resolve({
+ data: {
+ stats: {},
+ },
+ });
+ }
+ if (url.includes('/categories')) {
+ return Promise.resolve({
+ categories: [
+ { id: 1, name: 'Category 1' },
+ { id: 2, name: 'Category 2' },
+ ],
+ });
+ }
+ if (url.includes('/users')) {
+ return Promise.resolve({
+ users: [
+ { id: 1, name: 'User 1', role: 'admin' },
+ { id: 2, name: 'User 2', role: 'seller' },
+ ],
+ });
+ }
+ return Promise.resolve({ data: [] });
+ });
+
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders loading state initially', () => {
+ render(
+ Side Component
);
+jest.mock('@/components/Header', () => () => Header Component
);
+jest.mock('@/components/Footer', () => () => Footer Component
);
+jest.mock('@/components/ProductList', () => ({ searchResults }: { searchResults: any[] }) => (
+ Product List with {searchResults.length} results
+));
+
+describe('Page Component', () => {
+ it('renders without crashing and fetches search results', async () => {
+ const mockSearchParams = {
+ toString: jest.fn().mockReturnValue(''),
+ };
+ const mockResponse = [{ id: 1, name: 'Product 1' }, { id: 2, name: 'Product 2' }];
+
+ (nextNavigation.useSearchParams as jest.Mock).mockReturnValue(mockSearchParams);
+ (request.get as jest.Mock).mockResolvedValue(mockResponse);
+
+ render({children}
+));
+jest.mock('../app/providers', () => ({ children }: { children: React.ReactNode }) => (
+ {children}
+));
+describe('RootLayout', () => {
+ it('renders children and includes Providers and ClientProvider', () => {
+ const { getByText, getByTestId } = render(
+ Test Child
+ Mocked BuyerOrdersList
;
+});
+
+jest.mock('next/router', () => ({
+ useRouter: jest.fn(),
+}));
+
+describe('View Component', () => {
+ it('renders the component', () => {
+ render(Mock DashNavbar
+));
+jest.mock('@/components/Table', () => () => (
+ Mock Product Table
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock DashNavbar
+));
+describe('Page Component', () => {
+ beforeEach(() => {
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders loading state initially', () => {
+ render(
+ {data}
;
+};
+
+jest.mock('next/navigation', () => ({
+ useRouter: jest.fn(),
+}));
+
+describe('ProductList', () => {
+ beforeEach(() => {
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+ it('renders without crashing', async () => {
+ const { findByText } = render(
+ {JSON.stringify(state)}
;
+};
+
+describe('the store redux test', () => {
+ it('connected succefull', () => {
+ const stor = store.getState();
+ expect(stor).toBeDefined();
+ });
+});
+
+describe('testing useAppSelector', () => {
+ const { getByTestId } = render(
+ Mock DashNavbar
+));
+jest.mock('@/components/Footer', () => () => (
+ Mock DashNavbar
+));
+
+const mockedAxios = new MockAdapter(axios);
+
+// Create a new QueryClient instance
+const queryClient = new QueryClient();
+
+describe('ResetPassword component', () => {
+ beforeEach(() => {
+ // Clear mock function calls before each test
+ mockedAxios.reset();
+ });
+
+ it('displays success message on reset password', async () => {
+ const token = 'reset-token';
+
+ // Mocking Axios response for successful reset
+ mockedAxios.onPatch(`${process.env.URL}/users/reset-password/${token}`).reply(200);
+
+ render(
+ SellerOrderList Component
);
+
+
+
+// Mock the SellerOrderList component
+jest.mock("@/components/sellerOrder", () => () => SellerOrderList Component
);
+jest.mock('next/navigation', () => ({
+ useRouter() {
+ return {
+ prefetch: () => null,
+ };
+ },
+ useSearchParams: () => ({
+ get: () => { }
+ })
+ }));
+// Create a QueryClient instance for testing
+
+const Test = () => {
+ const { data } = useQuery{data}
;
+ };
+
+ it('renders children', async () => {
+ const { findByText } = render(
+ Mock DashNavbar
+));
+jest.mock('@/components/singleproduct', () => () => (
+ Product Page
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock DashNavbar
+));
+describe('Page Component', () => {
+ beforeEach(() => {
+ (request.get as jest.Mock).mockImplementation((url) => {
+ if (url.includes('/stats')) {
+ return Promise.resolve({
+ data: {
+ stats: {},
+ },
+ });
+ }
+ if (url.includes('/categories')) {
+ return Promise.resolve({
+ categories: [
+ { id: 1, name: 'Category 1' },
+ { id: 2, name: 'Category 2' },
+ ],
+ });
+ }
+ if (url.includes('/users')) {
+ return Promise.resolve({
+ users: [
+ { id: 1, name: 'User 1', role: 'admin' },
+ { id: 2, name: 'User 2', role: 'seller' },
+ ],
+ });
+ }
+ return Promise.resolve({ data: [] });
+ });
+
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders loading state initially', () => {
+ render(
+ Mock DashNavbar
+));
+jest.mock('@/components/headerDash', () => () => (
+ Mock HeaderDash
+));
+jest.mock('@/components/Product/AddProducts', () => () => (
+ Mock AddProducts
+));
+
+const mockProduct = {
+ productCategory: 'Electronics',
+ productCurrency: 'USD',
+ productDescription: 'A sample product',
+ productDiscount: 10,
+};
+const queryClient = new QueryClient();
+
+describe('Page Component', () => {
+ beforeEach(() => {
+ (request.get as jest.Mock).mockImplementation((url) => {
+ if (url.includes('/categories')) {
+ return Promise.resolve({
+ data: [
+ { id: 1, name: 'Category 1' },
+ { id: 2, name: 'Category 2' },
+ ],
+ });
+ }
+ return Promise.resolve({ data: [] });
+ });
+
+ Storage.prototype.getItem = jest.fn(() =>
+ JSON.stringify({
+ User: {
+ Role: {
+ name: 'admin',
+ },
+ name: 'Test User',
+ },
+ }),
+ );
+ const { useParams } = jest.requireMock('next/navigation');
+ useParams.mockReturnValue({ id: '123' });
+
+ (useRouter as jest.Mock).mockReturnValue({
+ push: jest.fn(),
+ });
+ });
+
+ test('renders data after loading', async () => {
+ render(
+
+
+
+ );
+ }
+ const getCurrentDate = () => {
+ const today = new Date();
+ const year = today.getFullYear() - 10;
+ const month = String(today.getMonth() + 1).padStart(2, '0');
+ const day = String(today.getDate()).padStart(2, '0');
+ return `${year}-${month}-${day}`;
+ };
+ function convertToNormalDate(isoTimestamp: any) {
+ const date = new Date(isoTimestamp);
+ const options: any = { year: 'numeric', month: 'long', day: 'numeric' };
+ return date.toLocaleDateString('en-US', options);
+ }
+ function formatDate(dateString: string) {
+ // Parse the date string into a Date object
+ const date = new Date(dateString);
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const day = date.getDate().toString().padStart(2, '0');
+ const formattedDate = `${day}-${month}-${year}`;
+ return formattedDate;
+ }
+ return (
+
+
+
+
+ );
+};
+export default UserProfileForm;
diff --git a/src/app/(profile)/profile/page.tsx b/src/app/(profile)/profile/page.tsx
new file mode 100644
index 0000000..a7e77e9
--- /dev/null
+++ b/src/app/(profile)/profile/page.tsx
@@ -0,0 +1,33 @@
+'use client';
+// pages/profile.tsx
+import About from '@/components/profile/About';
+import Order from '@/components/profile/Order';
+import ProfileHeader from '@/components/profile/ProfileHeader';
+import Wishlist from '@/components/profile/wishlist';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import React from 'react';
+const ProfilePage = () => {
+ return (
+
+
+
+
+
+ );
+};
+export default ProfilePage;
diff --git a/src/app/ProductView.tsx b/src/app/ProductView.tsx
new file mode 100644
index 0000000..142b073
--- /dev/null
+++ b/src/app/ProductView.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+interface Product {
+ id: number;
+ productCategory: string;
+ productName: string;
+ stockLevel: number;
+ productPrice: number;
+ productCurrency: string;
+ productImage: Array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/app/auth/forgotpassword/page.tsx b/src/app/auth/forgotpassword/page.tsx
new file mode 100644
index 0000000..5528115
--- /dev/null
+++ b/src/app/auth/forgotpassword/page.tsx
@@ -0,0 +1,90 @@
+'use client'
+import { Button, GreenButton } from '@/components/Button'
+import InputBox from '@/components/InputBox'
+import React from 'react'
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { z } from 'zod';
+import resetValidation from '@/validations/RecoverValidation';
+import { zodResolver } from '@hookform/resolvers/zod';
+import recover from '@/hooks/recover';
+import PopUpModels from '@/components/PopUpModels';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+
+type FormField = z.infer
+
+
+ )
+}
+
+
+export default ForgotPassword
+
+
diff --git a/src/app/auth/google/page.tsx b/src/app/auth/google/page.tsx
new file mode 100644
index 0000000..cae0ded
--- /dev/null
+++ b/src/app/auth/google/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import React, { useEffect } from 'react';
+import request from '@/utils/axios';
+
+const GoogleAuthPage: React.FC = () => {
+ const searchParams = useSearchParams();
+ const router = useRouter();
+ const token = searchParams?.get('token') || null;
+
+ useEffect(() => {
+ if (token != null) {
+ localStorage.setItem('token', `Bearer ${token}`);
+ const profileCheck = async () => {
+ const profile: any = await request.get(`/users/profile`);
+ const userData = JSON.stringify(profile);
+
+ localStorage.setItem('profile', userData);
+ if (profile?.User?.Role.name !== 'buyer') {
+ router.push('/dashboard');
+ } else {
+ router.push('/');
+ }
+
+ }
+ profileCheck();
+ } else {
+ router.push('/auth/login');
+ }
+
+ }, [token, router]);
+
+ return (
+
+
+ {success && (
+
+
+
+
+
+ + Account Recovery +
++ Please enter your email related to your champs bay account +
+
+
+
+
+
+
+ );
+};
+
+const SuspendedGoogleAuthPage: React.FC = () => (
+
+
+ + Welcome! +
++ Use these awesome forms to login or create new account in your + project for free. +
+
+
+
+
+ Log In with
+OR
+
+
+
+
+
+
+
+ Forgot Password?
+
+
+
+
+ Do you have an account?
+ + Sign Up + +
+
+
+ )
+}
+export default resetpassword
+
+
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
new file mode 100644
index 0000000..26fee13
--- /dev/null
+++ b/src/app/auth/signup/page.tsx
@@ -0,0 +1,155 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import InputBox from '@/components/InputBox';
+import { Button } from '@/components/Button';
+import PopUpModels from '@/components/PopUpModels';
+import useSignup from '@/hooks/useSignup';
+import { signUpVAlidation } from '@/validations/validationSchema';
+import GoogleButton from '@/components/GoogleButton';
+
+const Signup = () => {
+ const {
+ submit,
+ handleShowModal,
+ handlemoduleButton,
+ error,
+ showModal,
+ setError,
+ loading,
+ } = useSignup();
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ reset,
+ } = useForm
+
+ {success && (
+
+
+
+
+ + Reset Your Password +
++ Please insert your new password you'd like to use +
+
+
+
+
+
+
+ + Welcome! +
++ Use these awesome forms to login or create new account in your + project for free. +
+
+ {/* Top section of name and google */}
+
+ {/* THE MODELS POP-UP FOR THE REMIENDER */}
+ {/*
+
+ {/* Form section */}
+ Sign Up with
+Or
+
+
+
+
+
+
+
+
+ Already have an account?
+ + Sign in + +But before continuing to log in, make sure you verify your email through the link we sent you !
*/} + {showModal && ( +
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ return (
+
+
+ );
+}
diff --git a/src/app/payments/success/page.tsx b/src/app/payments/success/page.tsx
new file mode 100644
index 0000000..74ca1ef
--- /dev/null
+++ b/src/app/payments/success/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import BuyerOrdersList from '@/components/BuyerOrdersList';
+
+
+const View: React.FC = () => {
+
+ return (
+ <>
+
+
+
+ {/* Startttttttt */}
+
+
+ + Get 25% off with our sponsor promo code +
+ + + +
+ {checkUserLoggedIn() && (
+
+ {/* Enddddddddd */}
+ {/* Footer Sections */}
+
+
+
+ )}
+
+ {isChatPopUpOpen && (
+ //
+
+
+
+ + Thanks for your order! +
++ You successfully purchased products at champs bay. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* // */}
+ */}
+
+ );
+}
+export default Page;
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..ba14ff6
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,112 @@
+'use client'
+import React, { useState, useEffect, Suspense } from 'react';
+import { AiOutlineSearch } from 'react-icons/ai';
+import Side from '../../components/Side';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ProductList from '@/components/ProductList';
+import { useSearchParams } from 'next/navigation';
+import request from '@/utils/axios';
+
+function SuspenseWrapper() {
+ const searchParams = useSearchParams();
+ const [Value, setValue] = useState('');
+ const [searchResults, setSearchResults] = useState([]);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searched, setSearched] = useState(false); // New state for tracking if a search has been performed
+
+ useEffect(() => {
+ const fetchSearchResults = async () => {
+ const queryParams = new URLSearchParams(searchParams.toString());
+ if (searchQuery) {
+ queryParams.set('query', searchQuery);
+ }
+ try {
+ const response: any = await request.get(`/search?${queryParams.toString()}`);
+ setSearchResults(response);
+ setSearched(true);
+ } catch (error) {
+ console.error('Error fetching search results:', error);
+ }
+ };
+
+ fetchSearchResults();
+ }, [searchParams, searchQuery]);
+
+ const handleSearch = async (e: { preventDefault: () => void }) => {
+ e.preventDefault();
+ console.log("Search query:", Value);
+
+ try {
+ let queryParams: any = {};
+ const trimmedValue = Value.trim();
+ const numericValue = parseFloat(trimmedValue);
+
+ if (!isNaN(numericValue)) {
+ queryParams.minPrice = numericValue;
+ } else if (!isNaN(numericValue)) {
+ queryParams.maxPrice = numericValue;
+ } else if (!isNaN(numericValue)) {
+ queryParams.minPrice = numericValue;
+ queryParams.maxPrice = numericValue;
+ } else if (trimmedValue.length > 0) {
+ queryParams.name = Value;
+ } else if (trimmedValue.length > 0) {
+ queryParams.category = Value;
+ }
+
+ const queryString = new URLSearchParams(queryParams).toString();
+ console.log(queryString);
+ const url = `/search?${new URLSearchParams(queryParams).toString()}`;
+ const response: any = await request.get(url);
+
+ setSearchResults(response);
+ setSearched(true);
+ } catch (error) {
+ console.error('Error fetching search results:', error);
+ }
+ };
+
+ return (
+ <>
+
+
+
+ ) : (
+
+
+ )}
+
+
+ {/*
+
+
+
+
+
+
+
+ {[
+ ...(!productPictures?.length
+ ? [
+ {
+ imgId: 'fail Image',
+ url: '/product.png',
+ },
+ ]
+ : productPictures),
+ ].map((image: imageType) => (
+
+ 
+ (e.currentTarget.src = '/product.png')
+ }
+ />
+
+ ))}
+
+
+
+ {productPictures && productPictures.length > 0 ? (
+
+
+
+ {productPictures.map((image: imageType) => (
+
+
+
+ ))}
+
+
+ ) : (
+ no image found!
+ )} +
+
+
+
+ + {productName} +
+
+
+
+
+
+
+ {productPrice.toLocaleString()}
+ {' '}
+ RWF
+
+
+
+ item.product === data.product.id) ? ' bg-red-500 pointer-events-none' : 'pointer-events-auto bg-gray-200'}`}
+ >
+ {
+ handleNewItem();
+ }}
+ />
+
+
+
+
+
+ Description:
+{productDescription}
+
+
+ Related products:
+
+ {relatedProducts && relatedProducts.length > 0 ? (
+ relatedProducts.map((product: ProductType) => (
+
+ + No related products available. +
+ )} +
+
+
+
+
+
+ );
+}
+
+export default function Page() {
+ return (
+
+
+ All Products
+
+
+
+
+
+
+ {searched && searchResults.length === 0 ? (
+
+ No product found
+ ) : ( +Welcome to the seller dashboard
); + break; + } + }, [header]); + + return ( +
+
+ );
+}
+
+function Page() {
+ return (
+
+ 
setOpen(!open)}
+ />
+
+
+ setOpen(!open)}
+ />
+
+ 
+
+
+ + Champs Bay +
+-
+ {menu.map((Menu, index) => (
+
- handleItemClick(index)} + > + {React.createElement(Menu.src)} + + {Menu.title} + + + ))} +
+
+
+
+ {display}
+
+
+ {Confirm
+ ?
+
+
+
+
+
+ {productThumbnail && productThumbnail.length > 0 ? (
+ 
+ ) : (
+ 
+ )}
+
+
+ )}
+
+ {productPictures && productPictures.length > 0 ? (
+ productPictures.map((picture: imageType) => (
+
+ 
+
+ ))
+ ) : (
+
+ no image found!
+ )} +
+
+
+
+ {productName}
+
+
+
+
+
+ ${productPrice}
+
+
+
+
+
+
+
+
+
+ Description:
+{productDescription}
+
+ handleUpdate(_id)} />
+ toggleConfirmPopup()} />
+
+ {PopupOpen &&
+
+ Reviews:
+
+ {reviews && reviews.length > 0 ? (
+ reviews.map((review: ReviewType) => (
+
+ No ratings yet.
+ )} +
+
+ {isPopupOpen &&
+
+
+
+ Seller products view
+
+
+
+
+
+ 
+ + Two Step Verification +
+
+
+ + We have sent a verification code via your email please enter here +
+
+ {input.map((value, index) => (
+ HandleInput(index, e)}
+ ref={(el: any) => (itemsRef.current[index] = el)}
+ />
+ ))}
+
+
+
+ + {error} +
+
+ {newOtp ? (
+
+ Wait for new OTP code ........
+ ) : ( + <> +Didn't get the code?
+ + Resend code + + + )} +
+ {loading ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default Page;
diff --git a/src/components/AssigningRoles.tsx b/src/components/AssigningRoles.tsx
new file mode 100644
index 0000000..6d36602
--- /dev/null
+++ b/src/components/AssigningRoles.tsx
@@ -0,0 +1,83 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import request from '@/utils/axios';
+import {
+ useQuery,
+ useMutation,
+ RefetchOptions,
+ QueryObserverResult,
+ useQueryClient,
+} from '@tanstack/react-query';
+import Swal from 'sweetalert2';
+
+interface AssignRoleInterface {
+ id: string;
+ currentRole: string;
+ refetch: (
+ options?: RefetchOptions,
+ ) => Promise
+
+
+
+
+ {productThumbnail && productThumbnail.length > 0 ? (
+
+ ) : (
+
+ no image found
+ )} +
+ {productPictures && productPictures.length > 0 ? (
+ productPictures.map((picture: imageType) => (
+
+
+
+ ))
+ ) : (
+
+ no image found!
+ )} +
+
+
+
+ {productName}
+
+
+
+
+
+ ${productPrice}
+
+
+
+
+
+
+
+ Description:
+{productDescription}
+
+
+
+
+ Reviewsbbbbbbb:
+
+ {reviews && reviews.length > 0 ? (
+ reviews.map((review: ReviewType) => (
+
+ No ratings yet.
+ )} +
+
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default AssigningRole;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..54d7ea0
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,178 @@
+'use client';
+import React from 'react';
+import { IoChevronBack } from 'react-icons/io5';
+import { IoMdClose } from 'react-icons/io';
+import { MdClose } from "react-icons/md";
+
+interface Properties {
+ name?: string;
+ handle?: () => void;
+ loading?: boolean;
+ isDisabled?: boolean;
+ rotate?: boolean;
+ background?: string;
+ border?: string;
+ btnColor?: string;
+ className?: string;
+}
+
+export const Button: React.FC
+
+
+ );
+};
+
+export const BackButton: React.FC
+
+
+ );
+};
+export const ReviewButton: React.FC
+
+
+ );
+};
+export const BlueBorderButton: React.FC
+
+
+ );
+};
+export const DeleteButton: React.FC
+
+
+ );
+};
+
+export const GreenButton: React.FC
+
+
+ );
+};
+export default Button;
diff --git a/src/components/Buttonbook.tsx b/src/components/Buttonbook.tsx
new file mode 100644
index 0000000..cbeb221
--- /dev/null
+++ b/src/components/Buttonbook.tsx
@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react'
+
+interface ButtonProps {
+ children: ReactNode
+}
+const Button = ({ children }: ButtonProps) => {
+ return (
+
+ )
+}
+
+export default Button
diff --git a/src/components/BuyerOrdersList.tsx b/src/components/BuyerOrdersList.tsx
new file mode 100644
index 0000000..ae98bac
--- /dev/null
+++ b/src/components/BuyerOrdersList.tsx
@@ -0,0 +1,187 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import ReviewProduct from './ReviewProductPopup';
+import { useQuery } from "@tanstack/react-query";
+import request from '@/utils/axios';
+import {
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ getPaginationRowModel,
+ useReactTable,
+} from '@tanstack/react-table'
+import { BackButton, ReviewButton } from './Button';
+import TruckOrder from './TruckOrder';
+
+type ordersTable = {
+ No: number;
+ id: string;
+ productName: string;
+ stockLevel: string;
+ price: string;
+ Product:{
+ productName:string;
+ stockLevel?:string;
+ productPrice:number;
+ productCurrency:string;
+ }
+}
+type PaginationState = {
+ pageIndex: number
+ pageSize: number
+}
+const BuyerOrdersList = () => {
+ const [isReviewProductModalOpen, setIsReviewProductModalOpen] = useState(false);
+ const [isTruckOrderStatusModalOpen, setIsTruckOrderStatusModalOpen] = useState(false);
+ const [productId, setProductId] = useStateAction
,
+ accessorFn: row => row.id,
+ cell: (row: any) => (
+
+ {row.row.original.isPaid ?
+ handleOpenReviewPopup(row.row.original.Product.id)}
+ className="btn-border-blue px-4 py-1 text-[13px]"
+ />
+ :
+ handleOpenTruckOrdePopup(row.row.original.id)}
+ className="btn-bg-blue px-4 py-1.5 text-[13px]"
+ />
+
+ )
+ },
+ ]
+ const table = useReactTable({
+ data: ordersData,
+ columns,
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ getCoreRowModel: getCoreRowModel(),
+ state: {
+ pagination
+ }
+ })
+ const handleOpenTruckOrdePopup = (orderId: string) => {
+ setOrderId(orderId);
+ setIsTruckOrderStatusModalOpen(true);
+ };
+
+ const handleOpenReviewPopup = (productId: string) => {
+ setProductId(productId);
+ setIsReviewProductModalOpen(true);
+ };
+
+
+ const handleClosePopup = () => {
+ setIsReviewProductModalOpen(false);
+ setProductId(null);
+ };
+
+ const handleCloseTruckOrderPopup=()=>{
+ setOrderId(null);
+ setIsTruckOrderStatusModalOpen(false);
+ }
+ return (
+ <>
+
+ Orders
+
+
+ {isReviewProductModalOpen &&
+
+ <>
+
+
+ {table.getHeaderGroups().map(headerGroup =>
+ (
+ {ordersData.length > 6 ?
+
+ :""}
+
+ | + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + | + ) + } +
|---|
| + {flexRender(cell.column.columnDef.cell, cell.getContext())} + | + ))} +
+ < div className='flex gap-3' >
+ table.previousPage()} isDisabled={!table.getCanPreviousPage()} />
+ {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+ < BackButton handle={() => table.nextPage()} isDisabled={!table.getCanNextPage()} rotate />
+
+ Action
,
+ accessorFn: (row) => row.id,
+ cell: (row: any) => (
+
+
+ handleOpenWishlistPopup(row.row.original.product.id, 'product')
+ }
+ />
+
+ ),
+ },
+ ];
+ const table = useReactTable({
+ data: wishesData,
+ columns,
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ getCoreRowModel: getCoreRowModel(),
+ state: {
+ pagination,
+ },
+ });
+ const handleOpenWishlistPopup = (productId: string, deleting: string) => {
+ setProductId(productId);
+ setIsDeleteWishlistModalOpen(true);
+ setDeleting(deleting);
+ };
+ const handleClosePopup = () => {
+ setIsDeleteWishlistModalOpen(false);
+ setProductId('');
+ };
+ const mutation = useMutation({
+ mutationFn: () => {
+ return request.delete('/wishes');
+ },
+ onError: (error) => console.log(error),
+ onSuccess: async () => {
+ dispatch(handleWishlistCount((await wishNumber) - (await wishNumber)));
+ showToast('successfully cleared your wish list', 'success');
+ await refetch();
+ handleClosePopup();
+ },
+ });
+ const handleClearAll = () => {
+ mutation.mutate();
+ };
+ return (
+ <>
+
+ Wishlist
+
+ {isDeleteWishlistModalOpen && (
+
+ <>
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+ {wishesData.length > 5 ? (
+ | + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + | + ))} +
|---|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + | + ))} +
+
+ ) : (
+ ''
+ )}
+
+ table.previousPage()}
+ isDisabled={!table.getCanPreviousPage()}
+ />
+ {table.getState().pagination.pageIndex + 1} of{' '}
+ {table.getPageCount()}
+ table.nextPage()}
+ isDisabled={!table.getCanNextPage()}
+ rotate
+ />
+
+
+ handleOpenWishlistPopup(productId, 'wishlist')}
+ />
+
+
+
+
+
+ );
+}
+
+export default Card;
diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx
new file mode 100644
index 0000000..bf7d726
--- /dev/null
+++ b/src/components/CartContainer.tsx
@@ -0,0 +1,281 @@
+'use client';
+
+import React, { useState } from 'react';
+import type { RootState } from '@/redux/store';
+import {
+ IUSERCART,
+ handleCartCount,
+ handleChangeCartQuantity,
+ handleRemoveAllCart,
+ handleRemoveItemInCart,
+} from '@/redux/slices/userCartSlice';
+import trashImage from '../../public/delete.png';
+import upAllow from '../../public/upperArrow.png';
+import downAllow from '../../public/lowerArrow.png';
+import backAllow from '../../public/cartAllow.png';
+import shooes from '../../public/force.png';
+import { useAppDispatch, useAppSelector } from '../redux/store';
+import { useMutation } from '@tanstack/react-query';
+import { showToast } from '@/helpers/toast';
+import Image from 'next/image';
+import { handleCartInfoManipulation } from '@/hooks/userCart';
+import { usePayments } from '@/hooks/payment';
+import PopUpModels from './PopUpModels';
+
+const URL = process.env.URL;
+
+const CartContainer = (hideOverLay: any) => {
+ const [itemNumber, setItemNumber] = useState(0);
+ const [isChanging, setIsChanging] = useState(false);
+ const [currentCartItem, setCurrentCartItem] = useState('');
+
+ const { cart, error, loading, deleteCartLoading } = useAppSelector(
+ (state: RootState) => state.userCartData,
+ );
+
+ const handleshow = hideOverLay;
+
+
+ const dispatch = useAppDispatch();
+ const allProduct = JSON.parse(localStorage.getItem('productItem') || '');
+ const carts = handleCartInfoManipulation(cart as IUSERCART, allProduct);
+
+ const deletesingleCartItem = (id: string) => {
+ setCurrentCartItem(id);
+ dispatch(handleRemoveItemInCart(id));
+ };
+ const { handlePayment, paymentLoading } = usePayments();
+
+ const handleIncreaseCartItem = async (id: string) => {
+ const updatedItems = carts;
+ updatedItems.forEach((item: { product: string; quantity: number }) => {
+ if (item.product === id) {
+ const quantity = item.quantity + 1;
+ const productId = item.product;
+ dispatch(handleChangeCartQuantity({ quantity, productId }));
+ }
+ });
+ };
+
+ const handleDecreaseCartItem = async (id: string) => {
+ const updatedItems = carts;
+ updatedItems.forEach((item: { product: string; quantity: number }) => {
+ if (item.product === id) {
+ if (item.quantity > 1) {
+ const quantity = item.quantity - 1;
+ const productId = item.product;
+ dispatch(handleChangeCartQuantity({ quantity, productId }));
+ } else {
+ showToast(
+ "You are trying to make your Item quantity to be 0 ! if you don't want this product in cart please delete it it",
+ 'warning',
+ );
+ }
+ }
+ });
+ };
+
+ const decreaseCartMutation = useMutation({
+ mutationFn: handleDecreaseCartItem,
+ onSuccess: () => {},
+ });
+
+ const handleNumberChange = (
+ e: React.ChangeEvent
+ 
+
+
+
+
+ + {productName.length < 30 + ? productName + : `${productName.substring(0, 30)}...`} +
++ {productDescription.length < 50 + ? productDescription + : `${productDescription.substring(0, 50)}...`} +
+
+
+ {productPrice.toLocaleString()} RWF
+
+
+
+
+
+ item.product === id)
+ ? 'text-red-600 pointer-events-none'
+ : 'text-gray-600'
+ }`}
+ size={20}
+ onClick={handleNewItem}
+ />
+
+
+
+
+ );
+};
+
+export default CartContainer;
diff --git a/src/components/ChatConversation.tsx b/src/components/ChatConversation.tsx
new file mode 100644
index 0000000..11ff278
--- /dev/null
+++ b/src/components/ChatConversation.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import ChatMessage from './ChatMessage';
+import ChatInput from './ChatInput';
+import ChatHeader from './ChatHeader';
+import { Message } from '@/types/message';
+import { Seller } from '@/types/Product';
+import { msgObject } from './chatWrapper';
+import { handleCartCount } from '@/redux/slices/userCartSlice';
+
+interface chatConversation {
+ messages: Array
+
+ + {' '} + Shopping Cart +
++
+ {error && !cart ? (
+
+ {carts && carts.length > 0 ? (
+
+ {`${error}`}
+
+ ) : (
+ <>
+ + {`You have ${carts.length} item in your cart `}{' '} +
+ {carts.map((prod, index: number) => ( +
+
+ ))}
+
+ )}
+
+ 
(e.currentTarget.src = '/product.png')}
+ />
+
+
+
+ {prod.name}
+
+
+
+ {/*
+ {prod.quantity}
*/} + + SetInputState(prod.quantity, prod.product) + } + onMouseLeave={() => { + UnsetInputState(prod.quantity, prod.product); + }} + > + handleNumberChange(e, prod.product)} + className={`w-full p-1 ${isChanging && currentCartItem === prod.product ? 'border border-slate-700' : 'bg-white'}`} + disabled={ + isChanging && currentCartItem === prod.product + ? false + : true + } + /> + +
+ handleIncreaseCartItem(prod.product)}
+ />
+
+ decreaseCartMutation.mutate(prod.product)}
+ />
+
+
+
+ {formatNumber(prod.totalPrice as number)} RWF
+ deletesingleCartItem(prod.product)}
+ >
+ {deleteCartLoading && currentCartItem === prod.product ? (
+
+ ) : (
+
+ )}
+
+
+
+ ) : (
+ ''
+ )}
+
+
+
+ Total Price
+ {formatNumber(cart?.totalPrice as number)} RWF
+
+
+
+ {loading ? (
+
+ ) : (
+
+ )}
+
+ {paymentLoading ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+};
+
+export default ChatConversation;
diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx
new file mode 100644
index 0000000..b67e8cb
--- /dev/null
+++ b/src/components/ChatHeader.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Image from 'next/image';
+import { Seller } from '@/types/Product';
+import { IoIosArrowBack } from 'react-icons/io';
+
+interface chatHeader {
+ firstName: string;
+ lastName: string;
+ profileImage: string;
+ toogleDislay: () => void;
+}
+
+const ChatHeader: React.FC
+
+
+ {allMessagesList}
+
+
+
+
+
+
+ );
+};
+
+export default ChatHeader;
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
new file mode 100644
index 0000000..f63eb22
--- /dev/null
+++ b/src/components/ChatInput.tsx
@@ -0,0 +1,51 @@
+// import React, { useState, useEffect } from 'react';
+import io, { Socket } from 'socket.io-client';
+import { msgObject } from './chatWrapper';
+import { FaRegPaperPlane } from "react-icons/fa6";
+
+interface ChatInputProps {
+ handleMessage: (event: any) => void;
+ handleSendMessage: (msgObject: msgObject) => void;
+ message : string;
+ currentUser: string;
+ receiver: string;
+
+}
+
+const ChatInput: React.FC
+
+
+
+
+ + {fullName.length > 30 + ? fullName.substring(0, 30) + '...' + : fullName} +
+last Active
+
+
+
+ );
+};
+
+export default ChatMessage;
diff --git a/src/components/ChatRoom.tsx b/src/components/ChatRoom.tsx
new file mode 100644
index 0000000..5210a96
--- /dev/null
+++ b/src/components/ChatRoom.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import Image from 'next/image';
+import profile from "../../public/brice.jpg"
+import { Seller } from '@/types/Product'
+import { Message } from "@/types/message"
+
+interface chatroomIn {
+ id?: string,
+ users: Seller[]
+ lastMessage? : Message
+ messages? : Message[]
+ currentUser? : string
+ initiator: string
+ isPrivate: boolean
+ toogleDislay? : ()=> void;
+ handleSelectChatroom : (chatroomId:string)=> void;
+}
+
+const ChatRoom:React.FC
+ {currentUser !== senderId && (
+ {names}
+ )}
+ {message}
+
+ {dateStr as ReactNode}
+
+
+
+
+
+ )
+}
+
+export default ChatRoom;
diff --git a/src/components/ChatRoomsList.tsx b/src/components/ChatRoomsList.tsx
new file mode 100644
index 0000000..01db01b
--- /dev/null
+++ b/src/components/ChatRoomsList.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import ChatRoom from './ChatRoom';
+
+interface chatroomsLists {
+ chatrooms: any
+ currentUser: string
+ toogleDislay: ()=> void;
+ handleSelectChatroom: (chatroomId:string)=> void;
+}
+const ChatRoomsList:React.FC
+
+
+
+ {fullName.length>30? fullName.substring(0,30)+"...": fullName}
++ {message? message.length > 20 ? message.substring(0,20) + "...": message: "No message yet"} +
++ Messages +
++
+ {ListOfChatRooms}
+
+
+ );
+}
+
+export default ChatRoomsList;
diff --git a/src/components/ContDown.tsx b/src/components/ContDown.tsx
new file mode 100644
index 0000000..0a110b5
--- /dev/null
+++ b/src/components/ContDown.tsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+interface TypesNumber {
+ initialSeconds: number;
+}
+const CountdownTimer = ({ initialSeconds }: TypesNumber) => {
+ const [secondsRemaining, setSecondsRemaining] = useState(initialSeconds);
+
+ useEffect(() => {
+ if (secondsRemaining > 0) {
+ const intervalId = setInterval(() => {
+ setSecondsRemaining((prevSeconds: number) => prevSeconds - 1);
+ }, 1000);
+
+ return () => clearInterval(intervalId);
+ }
+ }, [secondsRemaining]);
+
+ const formatTime = (seconds: number) => {
+ const days = Math.floor(seconds / (24 * 60 * 60));
+ const hours = Math.floor((seconds % (24 * 60 * 60)) / (60 * 60));
+ const minutes = Math.floor((seconds % (60 * 60)) / 60);
+ const secs = seconds % 60;
+ return `${days} : ${hours} : ${minutes} : ${secs < 10 ? `${secs}` : secs}`;
+ };
+
+ return (
+
+
+ );
+};
+
+export default CountdownTimer;
diff --git a/src/components/DashNavbar.tsx b/src/components/DashNavbar.tsx
new file mode 100644
index 0000000..aae0e42
--- /dev/null
+++ b/src/components/DashNavbar.tsx
@@ -0,0 +1,274 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { FaUsersGear } from 'react-icons/fa6';
+import { FaUserShield } from 'react-icons/fa';
+import { FaHome } from 'react-icons/fa';
+import { AiFillProduct } from 'react-icons/ai';
+import { BsBorderStyle } from 'react-icons/bs';
+import { useRouter } from 'next/navigation';
+import { MdOutlineLogout } from 'react-icons/md';
+import { GiHamburgerMenu } from 'react-icons/gi';
+import Link from 'next/link';
+
+import { MdCreateNewFolder } from 'react-icons/md';
+import Logout from '@/hooks/logout';
+
+interface NewType {
+ role?: string;
+}
+
+const DashNavbar: React.FC
+ {formatTime(secondsRemaining)}
+
+
+
+
+ );
+};
+
+export default DashNavbar;
diff --git a/src/components/DashboardHeader.tsx b/src/components/DashboardHeader.tsx
new file mode 100644
index 0000000..66ea892
--- /dev/null
+++ b/src/components/DashboardHeader.tsx
@@ -0,0 +1,82 @@
+'use client';
+import React, { useState } from 'react';
+import { CiBellOn } from 'react-icons/ci';
+import { GiHamburgerMenu } from 'react-icons/gi';
+import { useQuery } from '@tanstack/react-query';
+import request from '@/utils/axios';
+import NotificationIcon from './ui-components/NotificationIcon';
+import Notification from './ui-components/Notification';
+import SideBarOverlay from './UsableSideOvelay';
+
+interface HeaderInterface {
+ pageName: string;
+}
+
+interface userData {
+ firstName: string;
+ profileImage: string;
+ Role: {
+ name: string;
+ };
+}
+
+const DashboardHeader: React.FC
+ setOpen(!open)}
+ />
+
+ setOpen(!open)}
+ />
+
+ handleClick('/')}
+ />
+
+
+ handleClick('/')}
+ />
+ + Champs Bay +
+-
+
- + {React.createElement(FaHome)} + + Home + + + + {role === 'admin' && ( + +
- + {React.createElement(FaUsersGear)} + + Users + + + + )} + + +
- + {React.createElement(FaUserShield)} + + Profile + + + + +
- + {React.createElement(AiFillProduct)} + + Product + + + + {role === 'seller' && ( + <> + +
- + {React.createElement(BsBorderStyle)} + + Orders + + + + {/* +
- + {React.createElement(MdCreateNewFolder)} + + Create Product + + + */} + + )} +
- mutate()} + className={`flex bg-primary/80 ${activelink === '' ? 'text-yellow-400' : 'text-white'} text-sm hover:text-yellow-400 duration-200 bg-transparent rounded-md hover:bg-primary p-2 cursor-pointer hover:bg-light-white items-center gap-x-4 bg-light-white`} + > + {React.createElement(MdOutlineLogout)} + + Logout + + +
+
+
+
+
+ {' '}
+ {React.createElement(GiHamburgerMenu)}
+
+ {openMenu && (
+
+
+ )}
+ -
+
- + Home + + {role === 'admin' && ( +
- + Users + + )} + +
- + Profile + +
- + Product + + {role === 'seller' && ( + <> +
- + Orders + +
- + + Create Product + + + + )} + +
- mutate()} + className={` hover:bg-yellow-400 px-2 hover:text-white font-semibold`} + > + Logout + +
+
+
+ {overlayComponent && (
+ + {pageName} +
+
+
+
+
+
+
+
+ 
{
+ e.currentTarget.src = '/unknown.jpg';
+ }}
+ className="cursor-pointer rounded-[10px] w-[40px] sm:w-[60px] h-[40px] sm:h-[60px]"
+ />
+
+
+
+ + {user?.firstName || 'username'} +
++ {user?.Role?.name || 'Role'} +
+
+
+
+ );
+ }
+ const getCurrentDate = () => {
+ const today = new Date();
+ const year = today.getFullYear() - 10;
+ const month = String(today.getMonth() + 1).padStart(2, '0');
+ const day = String(today.getDate()).padStart(2, '0');
+ return `${year}-${month}-${day}`;
+ };
+ function convertToNormalDate(isoTimestamp: any) {
+ const date = new Date(isoTimestamp);
+ const options: any = { year: 'numeric', month: 'long', day: 'numeric' };
+ return date.toLocaleDateString('en-US', options);
+ }
+ function formatDate(dateString: string) {
+ // Parse the date string into a Date object
+ const date = new Date(dateString);
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const day = date.getDate().toString().padStart(2, '0');
+ const formattedDate = `${day}-${month}-${year}`;
+ return formattedDate;
+ }
+ return (
+
+
+
+
+ );
+};
+export default UserProfileForm;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..81bd41b
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+const data = [
+ {
+ title: 'Navigate',
+ links: [
+ { name: 'About', link: '#' },
+ { name: 'Messages', link: '#' },
+ { name: 'Order', link: '#' },
+ { name: 'Contact Us', link: '#' },
+ { name: 'Join Us', link: '#' },
+ ],
+ },
+ {
+ title: 'Categories',
+ links: [
+ { name: 'Home appliances', link: '#' },
+ { name: 'Groceries', link: '#' },
+ { name: 'Fashion', link: '#' },
+ { name: 'Electronics', link: '#' },
+ ],
+ },
+ {
+ links: [
+ { name: 'KG 000 street ', link: '#' },
+ { name: 'Kigali, Rwanda', link: '#' },
+ { name: '(250) 788 100 000', link: '#' },
+ { name: 'champsbay@gmail.com', link: '#' },
+ ],
+ },
+];
+const Icons = [
+ { Icon: './instagram.svg', link: '#' },
+ { Icon: './fb.png', link: '#' },
+ { Icon: './X.png', link: '#' },
+];
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/GoogleButton.tsx b/src/components/GoogleButton.tsx
new file mode 100644
index 0000000..3841ff5
--- /dev/null
+++ b/src/components/GoogleButton.tsx
@@ -0,0 +1,17 @@
+import { api_base_url } from '@/utils/axios';
+import React from 'react';
+
+const GoogleButton: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+ Update Profile
+ +
+
+ 
(window.location.href = `${api_base_url}/users/google`)}
+ />
+ );
+};
+
+export default GoogleButton;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..eb8493e
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,375 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import {
+ MdDashboard,
+ MdOutlineLogout,
+ MdOutlineShoppingCart,
+} from 'react-icons/md';
+import { CgProfile } from 'react-icons/cg';
+import { FaRegHeart, FaRegBell } from 'react-icons/fa6';
+import { IoIosArrowDropdown, IoMdMenu } from 'react-icons/io';
+import { VscAccount } from 'react-icons/vsc';
+import logo from '../../public/logo.svg';
+import Image from 'next/image';
+import Link from 'next/link';
+import OrdersContainer from './OrdersContainer';
+import OrdersOverlay from '@/hooks/ordersOverlay';
+import SideBarOverlay from './UsableSideOvelay';
+import CartContainer from './CartContainer';
+import { RootState } from '@/redux/store';
+import { useAppSelector } from '../redux/store';
+import { handleFetchUserCart } from '@/hooks/userCart';
+import Logout from '@/hooks/logout';
+import NotificationIcon from './ui-components/NotificationIcon';
+import Notification from './ui-components/Notification';
+import WishlistOverlay from '@/hooks/wishlistOverlay';
+import WishlistContainer from './wishlistContainer';
+
+import {
+ Dropdown,
+ DropdownTrigger,
+ DropdownMenu,
+ DropdownSection,
+ DropdownItem,
+ Button,
+} from '@nextui-org/react';
+import { useRouter } from 'next/navigation';
+const Header = () => {
+ const { wishNumber } = useAppSelector((state: RootState) => state.wishlist);
+
+ const { isOrdersOverlayOpen, setIsOrdersOverlayOpen, toggleOrdersSlider } =
+ OrdersOverlay();
+ const [activelink, setActivelink] = useState('home');
+
+ const {
+ isWishlistOverlayOpen,
+ setIsWishlistOverlayOpen,
+ toggleWishlistSlider,
+ } = WishlistOverlay();
+ const [showlModal, setShowmodal] = useState(false);
+
+ const [showCart, setShowCart] = useState(false);
+
+ const [showNotification, setShowNotification] = useState(false);
+
+ const [overlayComponent, setOverlayComponent] = useState<
+ 'cart' | 'notification' | null
+ >(null);
+
+ const handleShowWishlist = () => {
+ setIsOrdersOverlayOpen(false);
+ setOverlayComponent(null);
+ toggleWishlistSlider();
+ };
+ const handleShowOrders = () => {
+ setIsWishlistOverlayOpen(false);
+ setOverlayComponent(null);
+ toggleOrdersSlider();
+ };
+ const handleShowCart = () => {
+ setIsWishlistOverlayOpen(false);
+ setIsOrdersOverlayOpen(false);
+ setOverlayComponent('cart');
+ };
+
+ const handleShowNotification = () => {
+ setIsWishlistOverlayOpen(false);
+ setIsOrdersOverlayOpen(false);
+ setOverlayComponent('notification');
+ };
+
+ const handleCloseOverlay = () => {
+ setOverlayComponent(null);
+ };
+
+ const { allProduct, cart } = useAppSelector(
+ (state: RootState) => state.userCartData,
+ );
+ const [dropdownShow, setDropDownShow] = useState(false);
+ const { mutate, pending } = Logout();
+ handleFetchUserCart();
+ const router = useRouter();
+ const handleshow = () => {
+ setShowmodal(!showlModal);
+ };
+
+ const [viewMenu, setViewmenu] = useState(false);
+ const [userdata, setUserdata] = useState
+
+
+ {overlayComponent && (
+
+
+
+
+ {userdata && userdata.User.Role.name === 'buyer' && (
+ <>
+
+
+ {cart?.product.length}
+
+
+ {viewMenu && (
+
+
+ )}
+ -
+
- + Home + +
- + + Products + + + {userdata?.User.Role.name === 'seller' || + userdata?.User.Role.name === 'admin' ? ( + <> +
- + + Dashboard + + + + ) : ( + <> +
- + Order + +
- + + Profile + + + + )} + {userdata ? ( +
- + LogOut + + ) : ( +
- + + Login + + + )} +
+
+
+ {isOrdersOverlayOpen ? (
+
+ {!userdata && (
+ <>
+
+
+ 
{
+ e.currentTarget.src = '/unknown.jpg';
+ }}
+ className="w-[40px] h-[40px] rounded-full bg-gray-700 object-cover"
+ />
+
+
+
+ )}
+
+ {pending ? (
+
+ dropDownShowEvent(isOpen)
+ }
+ >
+
+
+
+
+
+
+ {userdata.User.Role.name == 'buyer' ? (
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ ) : (
+ <>
+
+
+
+ {' '}
+
+
+ );
+};
+
+export default HeroSection;
diff --git a/src/components/HomeAds.tsx b/src/components/HomeAds.tsx
new file mode 100644
index 0000000..e7ef8c8
--- /dev/null
+++ b/src/components/HomeAds.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import CountdownTimer from '@/components/ContDown';
+
+export const HomeAds = () => {
+ return (
+
+
+
+
+ {sliderData.map((items) => (
+
+
+
+
+ ))}
+
+
+
+
+ + {items.title} +
+{items.description}
+
+
+
+
+ →
+
+
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/components/InputBox.tsx b/src/components/InputBox.tsx
new file mode 100644
index 0000000..83ae73c
--- /dev/null
+++ b/src/components/InputBox.tsx
@@ -0,0 +1,35 @@
+import React, { forwardRef, ChangeEvent } from 'react';
+
+interface Properties {
+ nameuse?: string;
+ type: string;
+ value?:string;
+ placeholder?: string;
+ error?: string;
+ name?: string;
+ max?: any; // Now optional
+
+ onChange?: (e: ChangeEvent
+
+
+
+
+
+ + Special Offer +
++ BLACK FRIDAY +
+
+
+ + Time Remain 🕝 +
+
+
+ );
+ },
+);
+
+InputBox.displayName = 'InputBox';
+
+export default InputBox;
\ No newline at end of file
diff --git a/src/components/LatestCard.tsx b/src/components/LatestCard.tsx
new file mode 100644
index 0000000..d5e69df
--- /dev/null
+++ b/src/components/LatestCard.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+interface Properties {
+ imagelink: string;
+ name: string;
+ price: string;
+ sellername: string;
+ color?: string;
+}
+const LatestCard: React.FC{nameuse}
+ + {error &&{error}
} +
+
+ );
+};
+
+export default LatestCard;
diff --git a/src/components/LatestSection.tsx b/src/components/LatestSection.tsx
new file mode 100644
index 0000000..938ad64
--- /dev/null
+++ b/src/components/LatestSection.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect, useRef } from 'react';
+import LatestCard from '@/components/LatestCard';
+import Link from 'next/link';
+import request from '@/utils/axios';
+import { useQuery } from '@tanstack/react-query';
+import { unstable_noStore as noStore } from 'next/cache';
+
+export const LatestSection = () => {
+ const { data, isLoading, error } = useQuery
+
+
+
+
+
+
+ + {name} +
+
+
+ Price:{price.toLocaleString()} RWF
+
+
+ );
+};
diff --git a/src/components/LayoutDashboard.tsx b/src/components/LayoutDashboard.tsx
new file mode 100644
index 0000000..7b540cb
--- /dev/null
+++ b/src/components/LayoutDashboard.tsx
@@ -0,0 +1,82 @@
+'use client';
+import React, { FC, useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import { useRouter } from 'next/navigation';
+import ChatWrapper from './chatWrapper';
+import { MdOutlineChat } from 'react-icons/md';
+import ChatPopUp from '@/hooks/ChatPopUp';
+interface Properties {
+ children: React.ReactNode;
+ pageName: string;
+ isLoading?: boolean;
+}
+const LayoutDashboard: React.FC
+
+ + Latest Product +
+ {isLoading ? ( +Loading ...
+ ) : (
+
+ {data &&
+ data.map((el: any, i: number) => (
+
+
+ )}
+
+
+
+ ⮜
+
+
+ ⮞
+
+
+
+ {/* Startttttttt */}
+
+
+
+
+
+
+
+ {/* Statistic section */}
+
+
+ {!isLoading ? (
+ children
+ ) : (
+
+
+
+
+ )}
+
+
+ {/* Enddddddddd */}
+
+ );
+};
+
+export default LayoutDashboard;
diff --git a/src/components/OrdersContainer.tsx b/src/components/OrdersContainer.tsx
new file mode 100644
index 0000000..dec9cf2
--- /dev/null
+++ b/src/components/OrdersContainer.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import BuyerOrdersList from './BuyerOrdersList';
+
+interface OrdersContainerInterface{
+ toggleOrdersSlider?:()=>void;
+ isOrdersOverlayOpen?:boolean;
+}
+const OrdersContainer:React.FC
+
+
+ {isChatPopUpOpen && (
+ //
+
+
+
+
+ );
+};
+export default OrdersContainer;
\ No newline at end of file
diff --git a/src/components/PopUpModel.tsx b/src/components/PopUpModel.tsx
new file mode 100644
index 0000000..05b70d8
--- /dev/null
+++ b/src/components/PopUpModel.tsx
@@ -0,0 +1,33 @@
+'use client';
+import React, { useEffect } from 'react';
+
+interface Properties {
+ handleShowModal: () => void;
+ bodyContent: React.ReactNode;
+}
+const PopUpModel: React.FC
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PopUpModel;
diff --git a/src/components/PopUpModels.tsx b/src/components/PopUpModels.tsx
new file mode 100644
index 0000000..c253832
--- /dev/null
+++ b/src/components/PopUpModels.tsx
@@ -0,0 +1,61 @@
+'use client';
+import React, { useEffect } from 'react';
+import Image from 'next/image';
+import { Button } from './Button';
+
+interface Properties {
+ topText: string;
+ bodyText: string;
+ testid?: string;
+ iconImagelink: string;
+ handleShowModal?: () => void;
+ handleButton?: () => void;
+}
+const PopUpModels: React.FC e.stopPropagation()}
+ >
+
+
+ {bodyContent}
+
+
+
+ );
+};
+export default PopUpModels;
diff --git a/src/components/Product/AddProducts.tsx b/src/components/Product/AddProducts.tsx
new file mode 100644
index 0000000..a95d268
--- /dev/null
+++ b/src/components/Product/AddProducts.tsx
@@ -0,0 +1,396 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useDispatch, useSelector } from 'react-redux';
+import { createProduct, fetchCategories } from '../../redux/slices/productSlice';
+import { unwrapResult } from '@reduxjs/toolkit';
+import type { AppDispatch, RootState } from '../../redux/store';
+import { productSchema } from "../../validations/productValidation";
+import { showToast } from '@/helpers/toast';
+import InputBox from '../InputBox';
+import { Router } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+interface IProduct {
+ id: string;
+ productName: string;
+ productCategory: string;
+ productPrice: number;
+ discount: number;
+ currency: string;
+ expireDate: string;
+ stockLevel: number;
+ description: string;
+ productPictures: File[];
+}
+
+interface IFormInput extends Partial e.stopPropagation()}
+ >
+
+
+ 
+
+
+
+ {topText}
++ {bodyText} +
+ +
+
+ );
+};
+
+export default ProductPopup;
\ No newline at end of file
diff --git a/src/components/Product/editProduct.tsx b/src/components/Product/editProduct.tsx
new file mode 100644
index 0000000..142511d
--- /dev/null
+++ b/src/components/Product/editProduct.tsx
@@ -0,0 +1,496 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'next/navigation';
+import { unwrapResult } from '@reduxjs/toolkit';
+import type { AppDispatch, RootState } from '../../redux/store';
+import { productSchema } from '../../validations/productValidation';
+import { showToast } from '@/helpers/toast';
+import InputBox from '../InputBox';
+import {
+ fetchCategories,
+ IUpdateProductInput,
+} from '@/redux/slices/UpdateProductSlice';
+import { useRouter, useSearchParams } from 'next/navigation';
+import request from '@/utils/axios';
+import { handleUpdateProduct } from '@/hooks/update';
+//import router from 'next/router';
+
+interface IProduct {
+ id: string;
+ productName: string;
+ productCategory: string;
+ productPrice: number;
+ discount: number;
+ currency: string;
+ expireDate: string;
+ stockLevel: number;
+ description: string;
+ productPictures: File[];
+}
+
+export interface IFormInput extends Partial e.stopPropagation()}
+ >
+
+
+ Add New Product
+ +
+
+ );
+};
+
+export default ProductPopup;
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
new file mode 100644
index 0000000..a54da95
--- /dev/null
+++ b/src/components/ProductList.tsx
@@ -0,0 +1,184 @@
+'use client';
+import request from '@/utils/axios'; // Assuming request uses axios for HTTP requests
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ProductObj, ProductType, ReviewType } from '@/types/Product';
+import Card from '@/components/Card';
+// import { SkeletonProduct } from '@/components/Skeleton';
+import { unstable_noStore as noStore } from 'next/cache';
+import { SkeletonProduct } from '@/components/Skeleton';
+import { storeAllProduct } from '@/redux/slices/userCartSlice';
+import { useAppDispatch, useAppSelector } from '../redux/store';
+import defaultProductImage from '../../public/product-default.png';
+
+interface ProdductProps {
+ activeNav?: String;
+ searchResults: ProductObj[];
+}
+const ProductList: React.FC e.stopPropagation()}
+ >
+
+ update Product
+ +
+
+ );
+ }
+ const buttonClass = (buttonName: number) =>
+ `px-4 py-2 ${
+ activeButton === buttonName
+ ? 'flex bg-gray-400 text-blue-600 items-center justify-center px-3 h-8 leading-tight border border-gray-300 hover:bg-gray-100 hover:text-gray-700'
+ : 'flex bg-white text-blue-600 items-center justify-center px-3 h-8 leading-tight border border-gray-300 hover:bg-gray-100 hover:text-gray-700'
+ } focus:outline-none `;
+
+ //button Next
+ const setButoon = (event: number) => {
+ setActiveButton(event);
+ };
+
+ //next Button
+ const NextPage = () => {
+ setActiveButton((prev) => (prev === 5 ? prev : prev + 1));
+ };
+ const PreviewPage = () => {
+ setActiveButton((prev) => (prev === 1 ? prev : prev - 1));
+ };
+ if (isLoading) {
+ return
+
;
+ }
+
+ if (!data && !searchResults.length) {
+ return No products found.
;
+ }
+ const productsToDisplay = searchResults.length ? searchResults : data;
+ console.log(searchResults)
+
+ return (
+
+ {data && (
+ <>
+
+ );
+};
+
+export default ProductList;
diff --git a/src/components/ReviewCard.tsx b/src/components/ReviewCard.tsx
new file mode 100644
index 0000000..bd30078
--- /dev/null
+++ b/src/components/ReviewCard.tsx
@@ -0,0 +1,51 @@
+import React from 'react'; //@ts-ignore
+import ReactStars from 'react-rating-stars-component';
+
+interface ReviewInterface {
+ rating: number;
+ feedback: string;
+ image: string;
+ firstName: string;
+ lastName: string;
+ buyerId?: string;
+}
+
+const ReviewCard: React.FC-
+ {productsToDisplay.map(
+ (
+ product: {
+ id: string;
+ productPrice: number;
+ productThumbnail: string;
+ productDescription: string;
+ productName: string;
+ reviews: ReviewType[];
+ },
+ i: number,
+ ) => (
+
+
+ );
+};
+export default ReviewCard;
diff --git a/src/components/ReviewProduct.tsx b/src/components/ReviewProduct.tsx
new file mode 100644
index 0000000..0235a3a
--- /dev/null
+++ b/src/components/ReviewProduct.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ReviewType } from '@/types/Product';
+
+const ReviewProduct = ({rating, feedback}:ReviewType) => {
+ return (
+ <>
+
+
+
+ 
+
+
+
+ {firstName} {lastName}
+
+
+
+
+
+ );
+};
+
+export default ReviewProduct;
diff --git a/src/components/ReviewProductPopup.tsx b/src/components/ReviewProductPopup.tsx
new file mode 100644
index 0000000..d3d07bb
--- /dev/null
+++ b/src/components/ReviewProductPopup.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Button, { BackButton, CloseButton } from './Button';
+import request from '@/utils/axios';
+import { useQuery, useMutation, useQueryClient, RefetchOptions, QueryObserverResult } from "@tanstack/react-query";
+import { toast } from 'react-toastify';//@ts-ignore
+import ReactStars from "react-rating-stars-component";
+import { showToast } from '@/helpers/toast';
+interface ReviewProductInterface {
+ isOpen: boolean,
+ id: string | null;
+ handleClose: () => void
+ refetch: (options?: RefetchOptions | undefined) => Promise
+ {rating}
+
+ {feedback}
+
+
+ {isReviewPopupOpen && (
+
+
+ Reviews:
+ {canUserAddReview.length ? ( + + ) : ( + '' + )} +
+ {reviews && reviews.length > 0 ? (
+ reviews.map((review: ReviewType) => (
+
+ No ratings yet.
+ )} +
+
+ );
+};
+
+export default SellerSummary;
\ No newline at end of file
diff --git a/src/components/Side.tsx b/src/components/Side.tsx
new file mode 100644
index 0000000..455acd9
--- /dev/null
+++ b/src/components/Side.tsx
@@ -0,0 +1,129 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import sideImage from "../../public/Rectangle 1403.png";
+import request from '@/utils/axios';
+import { CategoryResponse, ProductObj } from '@/types/Product';
+import { useRouter } from 'next/navigation';
+
+function Side() {
+ const [categories, setCategories] = useState
+
+
+
+
+
+
+ Today Summary
+seller summary
+
+ {user && user.Role.name === 'seller' ? (
+ <>
+
+
+
+ );
+}
+
+export default Side;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..34c1557
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { MdDashboard } from "react-icons/md";
+import { IoBag, IoLogOutOutline, IoPersonOutline } from "react-icons/io5";
+import { IconType } from "react-icons";
+interface menuInterface {
+ title: string,
+ src: IconType,
+ gap?: boolean,
+ clicked: boolean
+}
+const Menus: menuInterface[] = [
+ { title: "Dashboard", src: MdDashboard, clicked: false },
+ { title: "Users", src: IoPersonOutline, clicked: false },
+ { title: "Logout", src: IoLogOutOutline, gap: true, clicked: false },
+];
+function Dashboard() {
+ const [open, setOpen] = useState(true);
+ const [display, setDisplay] = useState();
+ const [menu, setMenus] = useState(Menus);
+ // const handleItemClick = (index: any) => {
+ // const clickedItem = Menus[index];
+ // const updatedMenus = Menus.map((menu, i) => {
+ // if (i === index) {
+ // return { ...menu, clicked: true };
+ // } else {
+ // return { ...menu, clicked: false };
+ // }
+ // });
+ // setMenus(updatedMenus);
+ // // switch (clickedItem.title) {
+ // // case "Users":
+ // // setDisplay();
+ // // break;
+ // // default:
+ // // setDisplay();
+ // // break;
+ // // }
+ // };
+ return (
+
+
+ Filter Product
+
+
+ Categories
+ {categories.length > 0 ? ( +
+ {categories.map((category: any) => (
+
+ ) : (
+ handleCategoryClick(category.id)} + > + {category.categoryName} +
+ ))} +No categories available
+ )} +Price
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Dashboard;
\ No newline at end of file
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
new file mode 100644
index 0000000..9533a40
--- /dev/null
+++ b/src/components/Skeleton.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+
+export const Skeleton = () => {
+ return (
+ <>
+
+ setOpen(!open)}
+ />
+
+ setOpen(!open)}
+ />
+
+
+
+
+ + Champs Bay +
+-
+ {menu.map((Menu, index) => (
+
- + {React.createElement(Menu.src)} + + {Menu.title} + + + ))} +
{display}
+
+
+
+
+
+
+
+ Loading...
+
+
+ );
+};
+
+export const SkeletonProduct = () => {
+ const productCards = Array(20).fill(null);
+
+ return (
+
+
+ );
+};
+
+export const SideSkeleton = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Slides.tsx b/src/components/Slides.tsx
new file mode 100644
index 0000000..70a62a8
--- /dev/null
+++ b/src/components/Slides.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+
+const Slides = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Slides;
\ No newline at end of file
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
new file mode 100644
index 0000000..9412018
--- /dev/null
+++ b/src/components/Table.tsx
@@ -0,0 +1,224 @@
+'use client';
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import Link from 'next/link';
+import request from '@/utils/axios';
+import { ProductType, ProductObj } from '@/types/Product';
+import { Button, GreenButton } from './Button';
+import ConfirmDelete from './confirmDeletePopup';
+interface Properties {
+ Role: string;
+}
+const updateStatus = async ({
+ id,
+ status,
+}: {
+ id: string;
+ status: boolean;
+}) => {
+ const newStatus = !status;
+ await request.patch(`/products/${id}/status`, {
+ isAvailable: newStatus,
+ });
+};
+
+const ProductsTable: React.FC
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ );
+ if (error)
+ return (
+
+ {Role === 'seller' && (
+
+ );
+ return (
+ <>
+
+ {' '}
+
+
+
+
+ )}
+
+ 
+ No Product Available
+
+
+ No Product Available
+
+ {Role === 'seller' && (
+
+
+
+
+ {Confirm ? (
+
+ {' '}
+
+
+
+
+ )}
+ | + No + | ++ Product name + | ++ Stock Level + | ++ Price + | ++ Discount + | ++ View + | + {Role === 'seller' && ( + <> + {' '} ++ Delete + | ++ Update + | ++ Status + | + + )} +
|---|---|---|---|---|---|---|---|---|
| + {index + 1} + | +{product.productName} | +{product.stockLevel} | ++ {product.productPrice?.toLocaleString()}{' '} + {product.productCurrency} + | +{product.productDiscount} | ++ + + + | + {Role === 'seller' && ( + <> ++ + | ++ + + + | ++ + | + + )} +
+
+ );
+};
+
+export default GlobarPopUp;
diff --git a/src/components/UsableSideOvelay.tsx b/src/components/UsableSideOvelay.tsx
new file mode 100644
index 0000000..47f8eff
--- /dev/null
+++ b/src/components/UsableSideOvelay.tsx
@@ -0,0 +1,45 @@
+'use client';
+import React, { useEffect } from 'react';
+interface Properties {
+ handleOpenOverlay?: () => void;
+ children: React.ReactNode;
+ width?: string;
+}
+const SideBarOverlay: React.FC e.stopPropagation()}
+ >
+ {children}
+
+
+
+
+
+ );
+};
+
+export default SideBarOverlay;
diff --git a/src/components/UsersAdmin.tsx b/src/components/UsersAdmin.tsx
new file mode 100644
index 0000000..2a956eb
--- /dev/null
+++ b/src/components/UsersAdmin.tsx
@@ -0,0 +1,205 @@
+'use client';
+import React, { useState } from 'react';
+import { BackButton, DisableButton } from '@/components/Button';
+import AssigningRole from '@/components/AssigningRoles';
+import requestAxios from '@/utils/axios';
+import { useQuery } from '@tanstack/react-query';
+import {
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ getPaginationRowModel,
+ useReactTable,
+} from '@tanstack/react-table';
+import DeactivateUser from './DeactivateUser';
+
+type usersTable = {
+ No: number;
+ id: string;
+ firstName: string;
+ email: string;
+ roleId: string;
+ phone: string;
+ isActive: boolean;
+};
+
+type PaginationState = {
+ pageIndex: number;
+ pageSize: number;
+};
+
+const UsersPageAdmin = () => {
+ const [isUserActive, setIsUserActive] = useState(false);
+ const [userId, setUserId] = useState {
+ e.stopPropagation();
+ }}
+ id="slideover"
+ className={`w-full md:w-3/4 lg:w-3/5 xl:w-2/5 bg-[#F6F6F6] h-full absolute mt-[00px] right-0 py-10 duration-300 ease-out transition-all overflow-y-auto`}
+ >
+
+
+ {children}
+
+ Action
,
+ accessorFn: (row) => row.id,
+ cell: (row: any) => (
+
+
+ handleOpenDeactivatePopup(
+ row.row.original.id,
+ row.row.original.isActive,
+ )
+ }
+ border={row.row.original.isActive ? 'red' : 'green'}
+ />
+
+ ),
+ },
+ ];
+
+ const table = useReactTable({
+ data: usersData,
+ columns,
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ getCoreRowModel: getCoreRowModel(),
+ state: {
+ pagination,
+ },
+ });
+ const handleOpenDeactivatePopup = (id: string, isActive: boolean) => {
+ setIsUserActive(isActive);
+ setUserId(id);
+ setIsDeactivateUserModalOpen(true);
+ };
+
+ const handleClosePopup = () => {
+ setIsDeactivateUserModalOpen(false);
+ setUserId(null);
+ };
+ return (
+ <>
+
+ {isLoading ? (
+
+ {isDeactivateUserModalOpen && (
+
+
+
+ ) : (
+
+ {!data ? (
+
+ )}
+
+
+ Users not found
+
+ ) : (
+ <>
+
+ Users not found
+ + Users: + + {Object.keys(usersData).length} + +
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+
+ )}
+ | + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + | + ))} +
|---|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + | + ))} +
+
+
+ table.previousPage()}
+ isDisabled={!table.getCanPreviousPage()}
+ />
+ {table.getState().pagination.pageIndex + 1} of{' '}
+ {table.getPageCount()}
+ table.nextPage()}
+ isDisabled={!table.getCanNextPage()}
+ rotate
+ />
+
+
+
+ );
+};
diff --git a/src/components/chartssection.tsx b/src/components/chartssection.tsx
new file mode 100644
index 0000000..746fab9
--- /dev/null
+++ b/src/components/chartssection.tsx
@@ -0,0 +1,160 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import { Chart } from 'react-google-charts';
+import { unstable_noStore as noStore } from 'next/cache';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import request from '@/utils/axios';
+
+import { toast } from 'react-toastify';
+import { showToast } from '@/helpers/toast';
+
+interface Params {
+ user: any;
+ data: any;
+ categories: any;
+ users: any;
+}
+export const options = {
+ title: '',
+};
+const Chartssection: React.FC
+ {/* Filter with search */}
+
+
+ {locarstorage === 'buyer' && (
+ <>
+ {/* */}
+
+ {/* */}
+
+ )}
+
+
+
+ {locarstorage === 'buyer' && (
+ <>
+
+ {/* Product Section */}
+
+
+
+
+
+ )}
+ {/* Search */}
+
+
+ {searched && searchResults.length === 0 ? (
+
+ No product found
+ ) : ( +
+ {user && user?.Role?.name === 'seller' ? (
+
+ );
+};
+
+export default Chartssection;
diff --git a/src/components/chatWrapper.tsx b/src/components/chatWrapper.tsx
new file mode 100644
index 0000000..bec8109
--- /dev/null
+++ b/src/components/chatWrapper.tsx
@@ -0,0 +1,156 @@
+'use client'
+
+import React,{useState, useEffect} from 'react'
+import ChatConversation from './ChatConversation'
+import ChatRoomsList from './ChatRoomsList'
+import { createUser } from '@/utils/requests'
+import { Seller } from '@/types/Product'
+import { Message } from '@/types/message'
+import { getCurrentUser } from '@/utils/getCurrentUser';
+import { io } from 'socket.io-client';
+import { Socket } from 'socket.io-client';
+import { chatroomInterface } from "@/types/chatRoom"
+
+export interface msgObject {
+ senderId: string;
+ receiver: string;
+ message: string;
+}
+
+let socket: Socket;
+const ChatWrapper= () => {
+ const chatUrl = process.env.NEXT_PUBLIC_URL_CHAT as string;
+ //socket connect
+
+ const [chatrooms, setChatrooms] = useState([]);
+ const [currentUser, setCurrentUser] = useState(getCurrentUser() as string);
+ const [currentUserToken, setCurrentUserToken] = useState('');
+ const [message, setMessage] = useState
+
+ ) : (
+ Seller statistics
+
+
+ )}
+ + All Markert Users +
+
+
+ -
+ {users &&
+ users?.map((el: any) => (
+ <>
+
-
+ ++++++
+ Names : +
+{el.firstName}
++++ email : +
+{el.email}
++++
+
+ ))}
+
+
+
+
+ + All Categolie On Market +
+ {user && user?.Role?.name === 'admin' && ( +
+
+
+
+ )}
+
+
+
+ -
+ {categories &&
+ categories?.map((el: any) => (
+ <>
+
-
+ ++
+ Names : +
+{el.categoryName}
+
+
+ ))}
+
+
+
+ )
+}
+
+export default ChatWrapper
\ No newline at end of file
diff --git a/src/components/confirmDeletePopup.tsx b/src/components/confirmDeletePopup.tsx
new file mode 100644
index 0000000..a712b6b
--- /dev/null
+++ b/src/components/confirmDeletePopup.tsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { Button, CloseButton, DeleteButton } from './Button';
+import request from '@/utils/axios';
+import {
+ useMutation,
+ useQueryClient,
+ RefetchOptions,
+ QueryObserverResult,
+} from '@tanstack/react-query';
+
+import { showToast } from '@/helpers/toast';
+import { useRouter } from 'next/navigation';
+
+interface DeleteProductInterface {
+ isOpen: boolean;
+ productId: string;
+ toggleConfirmPopup: () => void;
+ refetch?: (
+ options?: RefetchOptions | undefined,
+ ) => Promise
+ {!display?
+
+
+
+ {overlayComponent && (
+
+
+ + {pageName} +
+
+ 
{
+ e.currentTarget.src = '/unknown.jpg';
+ }}
+ className=" object-cover border border-black rounded-full w-[30px] sm:w-[40px] h-[30px] sm:h-[40px]"
+ />
+
+
+
+
+
+ + {userdata?.firstName ? userdata?.firstName : ''} +
++ {userdata?.Role?.name} +
+
+
+ )
+};
+
+export default ProductWrapper
\ No newline at end of file
diff --git a/src/components/profile/About.tsx b/src/components/profile/About.tsx
new file mode 100644
index 0000000..8a3da4f
--- /dev/null
+++ b/src/components/profile/About.tsx
@@ -0,0 +1,85 @@
+'use client';
+import React, { useEffect } from 'react';
+import { User, Cake, Award } from 'lucide-react';
+import { FaUser, FaEnvelope } from 'react-icons/fa';
+import { FaLocationDot, FaPhone } from 'react-icons/fa6';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/redux/store';
+import { getUserProfile } from '@/redux/slices/profileSlice';
+import request from '@/utils/axios';
+function About() {
+ const dispatch = useDispatch
+
+
+
+
+
+
+ {productPictures && productPictures.length > 0 ? (
+
+ {productPictures.map((image: imageType) => {
+ return (
+
+
+
+ );
+ })}
+
+ ) : (
+
+
+ {productPictures && productPictures.length > 0 ? (
+
+
+
+ {productPictures.map((image: imageType) => {
+ return (
+
+
+
+ );
+ })}
+
+
+ ) : (
+ no image found!
+ )} +
+
+
+
+ {productName}
+
+
+
+
+
+ RWF {productPrice.toLocaleString()}
+
+
+
+
+
+ {
+ handleNewItem();
+ }}
+ />
+
+
+
+
+
+ Description:
+{productDescription}
+
+
+ Related products:
+
+
+
+ {relatedProducts && relatedProducts.length > 0 ? (
+ relatedProducts.map((product: ProductType) => (
+
+ + No related products available. +
+ )} +Error: {error}
;
+ if (!user) {
+ return (
+
+ {' '}
+
+ );
+ }
+ function convertToNormalDate(isoTimestamp: any) {
+ const date = new Date(isoTimestamp);
+ const options: any = { year: 'numeric', month: 'long', day: 'numeric' };
+ return date.toLocaleDateString('en-US', options);
+ }
+ const items: any = [
+ {
+ icon:
+ {[...Array(3)].map((_, index) => (
+
+
+
+
+
+ ))}
+
+
+ );
+}
+export default About;
diff --git a/src/components/profile/Order.tsx b/src/components/profile/Order.tsx
new file mode 100644
index 0000000..3ba4e8b
--- /dev/null
+++ b/src/components/profile/Order.tsx
@@ -0,0 +1,84 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import request from '@/utils/axios';
+interface Product {
+ productName: string;
+ productPrice: number;
+ productCurrency: string;
+}
+interface Order {
+ id: string;
+ Product: Product;
+ quantity: number;
+ totalAmount: number;
+ deliveryStatus: string;
+}
+function Order() {
+ const [orders, setOrders] = useState+ About +
+
+ {items?.map((item: any, index: number) => (
+
+
+
+ ))}
+
+ {item.icon}
+
+ {item.details}
+
+
+
+
+ );
+ }
+ if (error) {
+ return
+
+
+
+ {[...Array(3)].map((_, index) => (
+
+
+
+
+
+ ))}
+ No orders
;
+ }
+ return (
+
+
+ );
+}
+export default Order;
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
new file mode 100644
index 0000000..089892e
--- /dev/null
+++ b/src/components/profile/ProfileHeader.tsx
@@ -0,0 +1,81 @@
+'use client';
+import React, { useEffect } from 'react';
+import { GreenButton } from '../Button';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/redux/store';
+import { getUserProfile } from '@/redux/slices/profileSlice';
+import { useRouter } from 'next/navigation';
+function ProfileHeaderSkeleton() {
+ return (
+
+
+ Orders
+
+ {orders.length === 0 ? (
+
+
+ Your orders will appear here
+
+ ) : (
+ orders.map((order) => (
+
+
+ {order.Product.productName}
+
+
+ {`${order.quantity} x ${order.Product.productPrice} ${order.Product.productCurrency} - ${order.deliveryStatus}`}
+
+
+ ))
+ )}
+
+
+
+ );
+}
+function ProfileHeader() {
+ const dispatch = useDispatch
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default ProfileHeader;
diff --git a/src/components/profile/wishlist.tsx b/src/components/profile/wishlist.tsx
new file mode 100644
index 0000000..559d774
--- /dev/null
+++ b/src/components/profile/wishlist.tsx
@@ -0,0 +1,160 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { VscTag } from 'react-icons/vsc';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/redux/store';
+import { getUserProfile } from '@/redux/slices/profileSlice';
+import request from '@/utils/axios';
+import { Cylinder, Trash, Loader } from 'lucide-react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Link from 'next/link';
+interface Product {
+ id: string;
+ productThumbnail: string;
+ stockLevel: number;
+ productName: string;
+ productPrice: number;
+ productCurrency: string;
+}
+interface Wish {
+ id: string;
+ userId: string;
+ productId: string;
+ createdAt: string;
+ updatedAt: string;
+ product: Product;
+}
+const WishlistSkeleton = () => (
+
+ 
{
+ e.currentTarget.src = '/unknown.jpg';
+ }}
+ />
+
+
+
+ + {user.User?.firstName} {user.User?.lastName} +
+{user.User?.Role.name}
+
+
+
+
+);
+const Wishlist: React.FC = () => {
+ const dispatch = useDispatch
+
+
+
+ {[...Array(3)].map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ Error: {error}
;
+ if (!user || loading) return
+
+ );
+};
+export default Wishlist;
diff --git a/src/components/sellerOrder.tsx b/src/components/sellerOrder.tsx
new file mode 100644
index 0000000..b0d2b2e
--- /dev/null
+++ b/src/components/sellerOrder.tsx
@@ -0,0 +1,213 @@
+'use client';
+import React, { useState } from 'react';
+import { BackButton, DisableButton, ReviewButton } from '@/components/Button';
+import requestAxios from '@/utils/axios';
+import { useQuery } from '@tanstack/react-query';
+import {
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ getPaginationRowModel,
+ useReactTable,
+} from '@tanstack/react-table';
+import { ProductType } from '@/types/Product';
+import SellerOrderDetail from './SellerOrderDetail';
+
+type usersTable = {
+ No: number;
+ id: string;
+ Product: ProductType;
+ buyer: { firstName: string; lastName: string };
+ quantity: string;
+ totalAmount: string;
+ deliveryDate: string;
+ deliveryStatus: string;
+};
+
+type PaginationState = {
+ pageIndex: number;
+ pageSize: number;
+};
+
+const SellerOrderList = () => {
+ const [isUserActive, setIsUserActive] = useState(false);
+ const [userId, setUserId] = useState
+
+ Wished Products
+
+ {wishlist?.length === 0 ? (
+
+
+ Your wishlist will appear here
+
+ ) : (
+ wishlist?.map((wish) => (
+
+
+ ))
+ )}
+
+
+
+
+
+ 
+
+
+
+
+ {wish.product.productName}
+
+
+
+
+
+
+
+
+ Action
,
+ accessorFn: (row) => row.id,
+ cell: (row: any) => (
+
+ handleOpenOrderDetailPopup(row.row.original.id)}
+ className="btn-bg-blue px-4 py-1.5 text-[13px]"
+ />
+
+ ),
+ },
+ ];
+
+ const table = useReactTable({
+ data: usersData,
+ columns,
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ getCoreRowModel: getCoreRowModel(),
+ state: {
+ pagination,
+ },
+ });
+
+ const handleOpenOrderDetailPopup = (orderId: string) => {
+ setOrderId(orderId);
+ setIsOrderDetailModalOpen(true);
+ };
+
+ const handleClosePopup = () => {
+ refetch();
+ setOrderId(null);
+ setIsOrderDetailModalOpen(false);
+ };
+ return (
+ <>
+
+ {isLoading ? (
+
+ {isOrderDetailModalOpen && (
+
+
+
+ ) : (
+
+ {!data ? (
+
+ )}
+
+
+ Clients Orders not found
+
+ ) : (
+ <>
+
+ Clients Orders not found
+ + Clients Orders: + + {Object.keys(usersData).length} + +
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+
+ )}
+ | + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + | + ))} +
|---|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + | + ))} +
+
+
+ table.previousPage()}
+ isDisabled={!table.getCanPreviousPage()}
+ />
+ {table.getState().pagination.pageIndex + 1} of{' '}
+ {table.getPageCount()}
+ table.nextPage()}
+ isDisabled={!table.getCanNextPage()}
+ rotate
+ />
+
+
+ 
+
+ );
+};
+
+export default ShortCard;
diff --git a/src/components/singleproduct.tsx b/src/components/singleproduct.tsx
new file mode 100644
index 0000000..351e3a9
--- /dev/null
+++ b/src/components/singleproduct.tsx
@@ -0,0 +1,235 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/free-mode';
+import 'swiper/css/navigation';
+import 'swiper/css/thumbs';
+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
+import { MdOutlineShoppingCart } from 'react-icons/md';
+import { FaRegHeart } from 'react-icons/fa6';
+import { useParams, useRouter } from 'next/navigation';
+import { Product } from '@/utils/requests';
+import { useQuery } from '@tanstack/react-query';
+import { ProductType, imageType } from '@/types/Product';
+//@ts-ignore
+import ReactStars from 'react-rating-stars-component';
+import { BlueBorderButton, DeleteButton } from '@/components/Button';
+import { averageReviews } from '@/utils/averageReviews';
+import request from '@/utils/axios';
+import ConfirmDelete from './confirmDeletePopup';
+import Link from 'next/link';
+import ReviewCard from './ReviewCard';
+interface Properties {
+ role: any;
+}
+const Singleproduct: React.FC+ {number} +
++ {name} +
+
+
+ Error Happening 💀
+
+ );
+ const handleSwiper = (swiper: any) => {
+ setThumbsSwiper(swiper);
+ };
+ const {
+ productPictures,
+ productName,
+ productPrice,
+ productDescription,
+ reviews,
+ } = data?.product || {};
+ if (isLoading)
+ return (
+
+ Error Happening 💀
+
+
+
+ );
+ return (
+ <>
+
+
+ {Confirm ? (
+
+
+
+
+
+
+
+
+ {[
+ ...(!productPictures?.length
+ ? [
+ {
+ imgId: 'fail Image',
+ url: '/product.png',
+ },
+ ]
+ : productPictures),
+ ].map((image: imageType) => (
+
+ (e.currentTarget.src = '/product.png')}
+ />
+
+ ))}
+
+
+
+ {productPictures && productPictures.length > 0 ? (
+
+
+
+ {productPictures.map((image: imageType) => (
+
+
+
+ ))}
+
+
+ ) : (
+ no image found!
+ )} +
+
+
+
+ + {productName} +
+
+ {role === 'buyer' && (
+
+
+
+ )}
+
+
+ {productPrice?.toLocaleString()}
+ {' '}
+ RWF
+
+
+
+
+
+
+
+
+
+ {role === 'seller' && (
+ Description:
+{productDescription}
+
+
+
+ )}
+
+
{' '}
+
+ );
+};
+export default Singleproduct;
diff --git a/src/components/ui-components/Notification.tsx b/src/components/ui-components/Notification.tsx
new file mode 100644
index 0000000..61bd433
--- /dev/null
+++ b/src/components/ui-components/Notification.tsx
@@ -0,0 +1,136 @@
+import { NotificationItemType } from '@/types/notification';
+import {
+ getNotificationsAsync,
+ readAllNotificationsAsync,
+ readSingleNotificationAsync,
+} from '@/redux/slices/notificationSlice';
+import { AppDispatch } from '@/redux/store';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { MdAccessTime, MdOutlineArrowBackIosNew } from 'react-icons/md';
+
+const Notification = ({
+ toggleNotification,
+}: {
+ toggleNotification: () => void;
+}) => {
+ const dispatch = useDispatchReviews:
+
+ {reviews && reviews.length > 0 ? (
+ reviews.map((review: any) => (
+
+ No ratings yet.
+ )} +
+
+ {notifications.length <= 0 && ( +
+ );
+};
+
+export default Notification;
diff --git a/src/components/ui-components/NotificationIcon.tsx b/src/components/ui-components/NotificationIcon.tsx
new file mode 100644
index 0000000..33c0f1f
--- /dev/null
+++ b/src/components/ui-components/NotificationIcon.tsx
@@ -0,0 +1,66 @@
+'use client';
+import React, { useEffect } from 'react';
+import { FaRegBell } from 'react-icons/fa6';
+import PingCounter from './PingCounter';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch } from '@/redux/store';
+import { getNotificationsAsync } from '@/redux/slices/notificationSlice';
+import { NotificationItemType } from '@/types/notification';
+import { io } from 'socket.io-client';
+import { decodeToken } from '@/utils/socket';
+import { showToast } from '@/helpers/toast';
+
+const NotificationIcon = ({
+ toggleNotification,
+}: {
+ toggleNotification: () => void;
+}) => {
+ const dispatch = useDispatch
+
+ {notifications.length <= 0 && ( +
+
+ )}
+
+ {notifications.length > 0 && (
+ No new notification
+
+
+ )}
+
+ {unreadNotifications.length > 0 && (
+
+ updateallNotifications()} + > + Mark all as Read +
+ )} +
+ {sortedNotifications.map(
+ (notification: NotificationItemType, index: number) =>
+ index < notificationCounter && (
+
+
+ {notifications.length > notificationCounter && (
+ updateNotification(notification)}
+ >
+
+ ),
+ )}
+ + {notification.message} +
+
+
setNotificationCounter(notificationCounter + 5)} + > + Load More +
+ )} +
+
+ );
+};
+
+export default NotificationIcon;
diff --git a/src/components/ui-components/PingCounter.tsx b/src/components/ui-components/PingCounter.tsx
new file mode 100644
index 0000000..b7dea4b
--- /dev/null
+++ b/src/components/ui-components/PingCounter.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface PingCounterProps {
+ count: number;
+ color: string;
+}
+
+const PingCounter: React.FC9 ? 'right-[5px] top-[1px]' : 'right-[9px] top-[3px]'}`} + > + {count > 9 ? `9+` : count} +
+ + +); + +export default PingCounter; diff --git a/src/components/updatepassword.tsx b/src/components/updatepassword.tsx new file mode 100644 index 0000000..81b48a0 --- /dev/null +++ b/src/components/updatepassword.tsx @@ -0,0 +1,95 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; + +import { useDispatch, useSelector } from 'react-redux'; +import { AppDispatch, RootState } from '@/redux/store'; +import { getUserProfile } from '@/redux/slices/profileSlice'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { useRouter } from 'next/navigation'; +import GlobarPopUp from '@/components/UsablePopUp'; +import { Button } from '@/components/Button'; +import InputBox from '@/components/InputBox'; +import PopUpModels from '@/components/PopUpModels'; +import { Updatepassword } from '@/validations/Updatepassword'; +import UpdatePassword from '@/hooks/updatepassword'; + +import { useForm } from 'react-hook-form'; +export interface FormDataType { + confirmPassword: string; + newPassword: string; + oldPassword: string; +} + +interface Properities { + handleshow: () => void; + showlModal: boolean; +} + +const UpdatePasswords: React.FC
+ {showlModal && (
+
+
+ )}
+ {success && (
+
+ );
+};
+
+export default UpdatePasswords;
diff --git a/src/components/wishlistContainer.tsx b/src/components/wishlistContainer.tsx
new file mode 100644
index 0000000..7c77edb
--- /dev/null
+++ b/src/components/wishlistContainer.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import BuyerWishList from './BuyerWishlist';
+
+interface WishlistContainerInterface{
+ toggleWishlistSlider?:()=>void;
+ isWishlistOverlayOpen?:boolean;
+}
+const WishlistContainer:React.FC
+
+
+
+
+
+
+ );
+};
+export default WishlistContainer;
\ No newline at end of file
diff --git a/src/helpers/toast.tsx b/src/helpers/toast.tsx
new file mode 100644
index 0000000..ddbd891
--- /dev/null
+++ b/src/helpers/toast.tsx
@@ -0,0 +1,18 @@
+
+import { toast, ToastPosition } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+type ToastType = 'default' | 'success' | 'error' | 'info' | 'warning';
+
+export const showToast = (message: string, type: ToastType = 'default') => {
+ toast(message, {
+ type,
+ position: 'top-right' as ToastPosition,
+ autoClose: 2000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ });
+};
\ No newline at end of file
diff --git a/src/hooks/ChatPopUp.tsx b/src/hooks/ChatPopUp.tsx
new file mode 100644
index 0000000..03b1ce4
--- /dev/null
+++ b/src/hooks/ChatPopUp.tsx
@@ -0,0 +1,18 @@
+
+import React, { useState } from 'react';
+
+function ChatPopUp() {
+ const [isChatPopUpOpen, setIsChatPopUpOpen] = useState(false)
+ const toggleChatPopUp = () => {
+ setIsChatPopUpOpen(!isChatPopUpOpen);
+ };
+
+ return{
+ isChatPopUpOpen,
+ setIsChatPopUpOpen,
+ toggleChatPopUp
+ }
+};
+
+export default ChatPopUp
+
\ No newline at end of file
diff --git a/src/hooks/logout.tsx b/src/hooks/logout.tsx
new file mode 100644
index 0000000..67b06b6
--- /dev/null
+++ b/src/hooks/logout.tsx
@@ -0,0 +1,25 @@
+import { showToast } from '@/helpers/toast';
+import request from '@/utils/axios';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+const Logout = () => {
+ const router = useRouter();
+ const mutation = useMutation({
+ mutationFn: () => {
+ return request.post('/users/logout', {});
+ },
+ onError: (error) => console.log(error),
+ onSuccess: () => {
+ localStorage.clear();
+ showToast('Successfully Logged out', 'success');
+ router.push('/auth/login');
+ },
+ });
+ const mutate = mutation.mutate;
+ const pending = mutation.isPending;
+ return {
+ mutate,
+ pending,
+ };
+};
+export default Logout;
diff --git a/src/hooks/ordersOverlay.tsx b/src/hooks/ordersOverlay.tsx
new file mode 100644
index 0000000..b39f774
--- /dev/null
+++ b/src/hooks/ordersOverlay.tsx
@@ -0,0 +1,18 @@
+
+import React, { useState } from 'react';
+
+function OrdersOverlay() {
+ const [isOrdersOverlayOpen, setIsOrdersOverlayOpen] = useState(false)
+ const toggleOrdersSlider = () => {
+ setIsOrdersOverlayOpen(!isOrdersOverlayOpen);
+ };
+
+ return{
+ isOrdersOverlayOpen,
+ setIsOrdersOverlayOpen,
+ toggleOrdersSlider
+ }
+};
+
+export default OrdersOverlay
+
\ No newline at end of file
diff --git a/src/hooks/payment.ts b/src/hooks/payment.ts
new file mode 100644
index 0000000..de99997
--- /dev/null
+++ b/src/hooks/payment.ts
@@ -0,0 +1,38 @@
+// src/hooks/usePayments.ts
+import { useState } from 'react';
+
+import request from '@/utils/axios';
+import { useRouter } from 'next/navigation';
+export const usePayments = () => {
+ const [error, setError] = useState(false);
+ const [success, setSuccess] = useState(false);
+ const [paymentLoading, setPaymentLoading] = useState(false);
+
+ const router = useRouter();
+
+ const handlePayment = async () => {
+
+ try {
+ setPaymentLoading(true)
+ const res: any = await request.post(`/payments`, {});
+
+ if(res){
+
+ router.push(`${res.paymenturl}`);
+ }
+
+ } catch (error: any) {
+
+ console.log('error', error);
+ setPaymentLoading(false)
+ setError(error.response.data.error);
+ }
+ };
+
+ return {
+ handlePayment,
+ success,
+ paymentLoading,
+ error,
+ };
+};
diff --git a/src/hooks/recover.ts b/src/hooks/recover.ts
new file mode 100644
index 0000000..ecfd6d8
--- /dev/null
+++ b/src/hooks/recover.ts
@@ -0,0 +1,61 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import axios from 'axios';
+import { useState } from 'react';
+import resetValidation from '@/validations/RecoverValidation';
+import { z } from 'zod';
+
+type FormField = z.infer
+
+
+
+
+
+
+