implement stage 1 design of otp form (#58) (#94)

rebase from dev and fix eslint errors

implement nextSibling functiion

implement previousSibling while you delete

rebase from develop

resolve deployment errors

implement 2fa functionality

working on verify otp codes and redirect

rebasing from develop

resolve vendor token must be string

implement 2fa verfication

users can now signup with facebook (#74)

side bar implementation (#75)

implement stage 1 design of otp form (#58) (#61)

rebase from dev and fix eslint errors

implement nextSibling functiion

implement previousSibling while you delete

rebase from develop

resolve deployment errors

implement 2fa functionality

working on verify otp codes and redirect

rebasing from develop

resolve vendor token must be string

implement 2fa verfication

Co-authored-by: Rurangwa Leo <[email protected]>

implementation of dashboard nav bar (#79)

added Admin Dashboard Home (#85)

fix bannerSection (#87)

feat(dashboard-metrics): implement visitor insights chart and top categories (#84)

- implement visitor insights chart
- implement top categories section

[Delivers #73]

Fix image and routing (#92)

fix lint error

finall fix lint

finall fix lint

show message when product deleted

fix the commit

fix console lint error

Fix image and routing (#92)

finall fix lint

show message when product deleted

fix the commit

fix console lint error

fix the store

fix the husky

add created at column

Co-authored-by: Rurangwa Leo <[email protected]>

.eslintrc.cjs

@@ -38,5 +38,6 @@ module.exports = {
     'postcss.config.js',
     'tailwind.config.js',
     'vite.config.ts',
+    // 'EditProduct.tsx'
   ],
 };

src/__test__/dashBoard/ConfirmationCard.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest'; // Assuming 'vitest' is used for assertions
+import ConfirmationCard from '@/components/dashBoard/ConfirmationCard'; // Adjust path as needed
+
+describe('ConfirmationCard Component', () => {
+  it('does not render when isVisible is false', () => {
+    render(
+      <ConfirmationCard
+        isVisible={false}
+        onClose={() => {}}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const modal = screen.queryByText('Are you sure?');
+    expect(modal).not.toBeInTheDocument();
+  });
+
+  it('renders correctly when isVisible is true', () => {
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={() => {}}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const modal = screen.getByText('Are you sure?');
+    expect(modal).toBeInTheDocument();
+  });
+
+  it('calls onClose when the close button is clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={onClose}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when the "No, cancel" button is clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={onClose}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const cancelButton = screen.getByRole('button', { name: /no, cancel/i });
+    fireEvent.click(cancelButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onConfirm when the "Yes, I\'m sure" button is clicked', () => {
+    const onConfirm = vi.fn();
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={() => {}}
+        onConfirm={onConfirm}
+        message="Are you sure?"
+      />
+    );
+
+    const confirmButton = screen.getByRole('button', {
+      name: /yes, i'm sure/i,
+    });
+    fireEvent.click(confirmButton);
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays the correct message', () => {
+    const message = 'Are you absolutely sure?';
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={() => {}}
+        onConfirm={() => {}}
+        message={message}
+      />
+    );
+
+    const modalMessage = screen.getByText(message);
+    expect(modalMessage).toBeInTheDocument();
+  });
+});

src/__test__/dashBoard/NavigateonPage.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import CircularPagination from '@/components/dashBoard/NavigateonPage';
+
+describe('CircularPagination Component', () => {
+  const onPageChange = vi.fn();
+
+  it('renders the correct number of pages when totalPages <= 5', () => {
+    render(
+      <CircularPagination
+        totalPages={5}
+        currentPage={1}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(7);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('renders correctly when currentPage is at the beginning', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={1}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(9);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('renders correctly when currentPage is at the end', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={10}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(9);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('7')).toBeInTheDocument();
+    expect(screen.getByText('8')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('renders correctly when currentPage is in the middle', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(10);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('6')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('calls onPageChange with the correct page number when a page button is clicked', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(screen.getByText('6'));
+    expect(onPageChange).toHaveBeenCalledWith(6);
+  });
+
+  it('calls onPageChange with the correct page number when the next button is clicked', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('next page'));
+    expect(onPageChange).toHaveBeenCalledWith(6);
+  });
+
+  it('calls onPageChange with the correct page number when the previous button is clicked', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('Previous page'));
+    expect(onPageChange).toHaveBeenCalledWith(4);
+  });
+
+  it('disables the previous button when on the first page', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={1}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const prevButton = screen.getByLabelText('Previous page');
+    expect(prevButton).toBeDisabled();
+  });
+
+  it('disables the next button when on the last page', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={10}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const nextButton = screen.getByLabelText('next page');
+    expect(nextButton).toBeDisabled();
+  });
+});

src/__test__/dashBoard/dashboardProductSlice.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import DeshboardProductsSlice, {
+  initialState,
+  fetchDashboardProduct,
+} from '@/features/Dashboard/dashboardProductsSlice'; // Adjust path as needed
+
+describe('DeshboardProductsSlice reducer', () => {
+  it('should return the initial state', () => {
+    const action = { type: 'unknown/action' };
+    expect(DeshboardProductsSlice(undefined, action)).toEqual(initialState);
+  });
+
+  it('should handle fetchDashboardProduct.pending', () => {
+    expect(
+      DeshboardProductsSlice(initialState, {
+        type: fetchDashboardProduct.pending.type,
+      })
+    ).toEqual({
+      ...initialState,
+      status: 'loading',
+    });
+  });
+
+  it('should handle fetchDashboardProduct.fulfilled', () => {
+    const mockProducts = [
+      { id: 1, title: 'Product A' },
+      { id: 2, title: 'Product B' },
+    ];
+    expect(
+      DeshboardProductsSlice(initialState, {
+        type: fetchDashboardProduct.fulfilled.type,
+        payload: mockProducts,
+      })
+    ).toEqual({
+      ...initialState,
+      status: 'succeeded',
+      DashboardProduct: mockProducts,
+    });
+  });
+
+  it('should handle fetchDashboardProduct.rejected', () => {
+    expect(
+      DeshboardProductsSlice(initialState, {
+        type: fetchDashboardProduct.rejected.type,
+      })
+    ).toEqual({
+      ...initialState,
+      status: 'failed',
+    });
+  });
+});

src/app/store.ts

@@ -15,6 +15,7 @@ import buyerSlice from '@/app/Dashboard/buyerSlice';
 import orderSlice from './Dashboard/orderSlice';
 
 import ordersSliceReducer from '@/features/Orders/ordersSlice';
+import DeshboardProductsSlice from '@/features/Dashboard/dashboardProductsSlice';
 
 export const store = configureStore({
   reducer: {
@@ -31,6 +32,7 @@ export const store = configureStore({
     buyer: buyerSlice,
     order: orderSlice,
     orders: ordersSliceReducer,
+    DeshboardProducts: DeshboardProductsSlice,
   },
 });
 

src/components/Popular/MostSelling.tsx

@@ -40,7 +40,7 @@ function MostSelling() {
       />
 
       <div className=" grid gap-y-2">
-        {(status === 'failed' || status === 'loading') &&
+        {status === 'loading' &&
           Array(3)
             .fill(null)
             .map(() => (