# Invently Project README

## Directory Structure Overview

This directory contains all the components required to run, deploy, and understand the Invently project. Below is the breakdown of the directory structure and its contents:

### **CSS Folder**

Contains stylesheets that define the visual appearance of the application:

- `AboutUs.css`: Styling for the "About Us" page.
- `CustomerPage.css`: Styles for customer management and invoice tracking.
- `dashboard.css`: Visual layout for inventory analytics and order statuses.
- `Features.css`: Design for the "Features" section of the site.
- `InventlyHomepage.css`: Styling for the main landing page.
- `loginInvently.css`: Custom styles for login and registration forms.
- `ManageInventory.css`: Design for inventory management, including product listings and barcode scanning integration.
- `OrdersTab.css`: Styles for the orders tracking page.
- `Pricing.css`: Styling for pricing plans or cost-related sections.
- `settings.css`: Provides themes and user preferences customization styles.
- `setupInventory.css`: Visual layout for inventory setup workflows.
- `signinInvently.css`: Styling for the user sign-in process.

### **HTML Folder**

Contains all structural elements for the application:

- `AboutUs.html`: Information about the platform and its creators.
- `CustomerPage.html`: Page for managing customer profiles and invoices.
- `dashboard.html`: Main dashboard displaying analytics and status updates.
- `Features.html`: Highlights the features of the application.
- `InventlyHomepage.html`: The main landing page of the application.
- `loginInvently.html`: Page for user login and registration.
- `ManageInventory.html`: Dedicated to inventory tracking and barcode scanning.
- `OrdersTab.html`: Focused on tracking fulfilled and vendor orders.
- `Pricing.html`: Details on subscription plans or pricing.
- `settingsPage.html`: Page for user preferences, including themes and settings.
- `setupInventory.html`: Helps users set up their inventory system.
- `signinInvently.html`: Page for users to sign in to their accounts.

### **JS Folder**

Contains JavaScript files that add interactivity and functionality:

- `aboutUs.js`: Powers the interactivity on the "About Us" page.
- `barcodeScanner.js`: Implements the barcode scanning functionality for inventory management.
- `CompanyTab.js`: Handles functionality related to company-specific features (e.g., vendor details).
- `CustomerPage.js`: Manages customer profile interactions and invoice tracking.
- `darkMode.js`: Provides functionality for toggling between light and dark modes.
- `dashboardFirestore.js`: Handles integration with Firebase for real-time dashboard data.
- `dashboardHome.js`: Manages the interactive elements on the main dashboard.
- `InventlyHomepage.js`: Controls interactive elements on the homepage.
- `loginInvently.js`: Manages user authentication for login and sign-up.
- `ManageInventory.js`: Powers inventory management, including adding, removing, and editing products.
- `OrdersTab.js`: Handles tracking and updates for fulfilled and vendor orders.
- `selectInventory.js`: Allows users to switch between different inventory dashboards.
- `settings.js`: Manages user preferences, theme selection, and account updates.
- `setupInventory.js`: Guides users through setting up a new inventory.
- `signinInvently.js`: Controls the functionality for signing in existing users.

### **Images Folder**

Stores all image assets used across the website, including:

- Logos for branding.
- Icons for navigation and interactive buttons.
- Background images and other visual elements.

---

## Installation Guide

### **Access the Code Repository**

1. Visit the [Invently GitHub Repository](#).
2. Either fork the repository to your own GitHub account or download the code directly by clicking the **Code** button and selecting **Download ZIP**.

### **Set Up Your Development Environment**

1. Download and install [Visual Studio Code](https://code.visualstudio.com/).
2. Open Visual Studio Code and install the **Live Server Extension**:
   - Go to the **Extensions** view by clicking the square icon on the left-hand toolbar or pressing `Ctrl+Shift+X`.
   - Search for "Live Server" and click **Install** on the extension.

### **Open the Project**

1. Extract the downloaded ZIP file (if applicable) and open the project folder in Visual Studio Code.

### **Launch the Website**

1. In the file explorer on the left-hand side, locate the `InventlyHomepage.html`.
2. Right-click the file and select **Open with Live Server**.
3. Your default web browser will open, displaying the Invently website.

### **Database Setup**

The database used in this project is hosted on Firebase and contains unique collections and data created specifically for the Invently project. Firebase databases are cloud-hosted and can only be accessed by authorized accounts. If you need access to the current database:

1. **Request Access**:

   - Contact Emily Salgueiros - emilysalgueiros@gmail.com to have your email added as a viewer to the Firebase project.
   - Once added, you can log into the Firebase Console and view the existing collections and documents.

2. **Create Your Own Firebase Database**:

   - Navigate to [Firebase Console](https://console.firebase.google.com) and create a new Firebase project.
   - Set up Firestore Database and add collections similar to the ones used in this project.
   - Replace the Firebase configuration in `dashboardFirestore.js` with your own project credentials:
     ```javascript
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_PROJECT_ID.appspot.com",
       messagingSenderId: "YOUR_SENDER_ID",
       appId: "YOUR_APP_ID",
     };
     firebase.initializeApp(firebaseConfig);
     ```
   - This will allow you to replicate the same collections and functionality as the original database.

### **Configuration Files**

1. Open `settings.js` to adjust the configurations specific to your environment (e.g., API keys, database URLs).
2. Follow the comments in the file to ensure proper setup.

---

## User Manual

### **Overview**

Invently is a platform that allows users to manage their inventory, track orders, and generate customer invoices. Below are instructions on how to use the main features:

### **Key Features**

1. **Login/Sign-Up**:

   - Navigate to `loginInvently.html` to create an account or sign in.
   - Use valid credentials to access the platform.

2. **Dashboard**:

   - The dashboard (`dashboard.html`) displays analytics and order statuses.
   - Use the filters to customize the data view.

3. **Manage Inventory**:

   - Access `ManageInventory.html` to add, remove, or edit inventory items.
   - Use the barcode scanner for efficient inventory management.

4. **Customer Management**:

   - Navigate to `CustomerPage.html` to manage customer profiles and track invoices.

5. **Settings**:

   - Use `settingsPage.html` to customize themes and update user preferences.

6. **Features and Pricing**:

   - Check `Features.html` and `Pricing.html` for details on the platform's offerings.

### **Troubleshooting**

1. **Live Server Issues**:

   - Ensure the Live Server extension is installed and activated.
   - Restart Visual Studio Code if the browser does not open.

2. **Database Connectivity Issues**:

   - Verify that the Firebase credentials in `dashboardFirestore.js` are accurate.
   - Ensure that Firebase services (e.g., Firestore, Authentication) are properly configured in the Firebase Console.

---

