This repository contains the frontend code for the System Admin application. The application is built using Next.js and React, and it includes various components and pages to manage stores, products, and orders.

• Installation
• Usage
• Project Structure
• Components
• Pages
• API Integration

To get started with the project, clone the repository and install the dependencies:

git clone https://github.com/BoDS-Group/admin-frontend.git
cd admin-frontend
npm install --legacy-peer-deps

Use the .env copy file in your project. You need to rename it to .env and ensure that the environment variables are correctly set.

To run the development server, use the following command:

npm run dev

Open http://localhost:3000 with your browser to see the application.

To build the project for production, use:

npm run build

To start the production server, use:

npm start

The project structure is as follows:

admin-frontend/
├── components/
│   ├── AxiosInstance.js
│   ├── Layout.js
│   ├── LoginForm.js
│   ├── Logo.js
│   ├── Nav.js
│   ├── ProductForm.js
│   ├── Spinner.js
│   ├── StoreForm.js
│   └── UserContext.js
├── pages/
│   ├── api/
│   │   ├── auth/
│   │   │   ├── google.js
│   │   │   └── google/callback.js
│   ├── products/
│   │   ├── delete/[...id].js
│   │   ├── edit/[...id].js
│   │   └── new.js
│   ├── stores/
│   │   ├── delete/[...id].js
│   ├── add-store.js
│   ├── index.js
│   ├── orders.js
│   └── _app.js
│   └── _document.js
├── public/
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── utils/
│   └── api.js
├── .env copy
├── .eslintrc.json
├── .gitignore
├── jsconfig.json
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── README.md

This component sets up an Axios instance with a base URL and default headers. It also includes an interceptor to add the authorization token to each request.

This component provides the layout for the application, including the navigation bar and user authentication handling.

This component renders the login form and handles user authentication.

This component renders the application logo.

This component renders the navigation bar with links to various pages.

This component renders the form for adding and editing products.

This component renders a loading spinner.

This component renders the form for adding a new store.

This component provides a context for managing user state across the application.

The main landing page of the application. It displays a welcome message to the logged-in user.

This page renders the form for adding a new store.

This page displays a list of orders.

Form to add a new product.

Form to edit an existing product.

Page to confirm the deletion of a product.

Page to confirm the deletion of a store.

API route to initiate Google OAuth authentication. (Currently not in use)

API route to handle the callback from Google OAuth authentication. (Currently not in use)

This file customizes the default App component to include the UserProvider for managing user state.

This file customizes the default Document component to include additional HTML and body tags.

The application uses Axios to fetch data from the backend API. The AxiosInstance.js component sets up the Axios instance with a base URL and default headers.

The utils/api.js file contains functions for making API requests:

• fetchStores(): Fetches all stores.
• fetchStoreById(id): Fetches a store by its ID.
• deleteStoreById(id): Deletes a store by its ID.
• fetchProducts(): Fetches all products.
• fetchProductById(id): Fetches a product by its ID.
• deleteProductById(id): Deletes a product by its ID.
• fetchCategories(): Fetches all categories.
• updateCategoryById(id, data): Updates a category by its ID.
• deleteCategoryById(id): Deletes a category by its ID.
• insertCategory(data): Inserts a new category.
• fetchCities(): Fetches all cities.