Final Term Project

Admin Website

Figure 1. Log in form

1. Email field - Input your email address for account identification and communication
purposes.
2. Password field - Enter your secure password to authenticate and access your account.
3. Login - Click the log in button to submit personal information and log in an account.
 Admin Website

Figure 2. Dashboard.

1. Dashboard - Central hub displaying an overview of key information and features.

2. Add Product - Quickly incorporate new items into catalog.
3. Settings - Customize and manage preferences, configurations, and account details.
4. Sign out - Securely end your session and log out of your account.
5. Help - Access resources, guides, or support to assist you with using the website effectively.
6. Search bar - Allows admin to input search queries and retrieve relevant results.
7. My Profile – To manage user profile data, including personal information, preferences, and
settings.
 Admin Website

Figure 2.1 My Profile.

1. Dashboard - Central hub displaying an overview of key information and features.

2. Add Product - Quickly incorporate new items into catalog.
3. Settings - Customize and manage preferences, configurations, and account details.
4. Sign out - Securely end your session and log out of your account.
5. Help - Access resources, guides, or support to assist you with using the website effectively.
6. Search bar - Allows admin to input search queries and retrieve relevant results.
7. My Profile – To manage user profile data, including personal information, preferences, and
settings.
8. Email/Name - Display email and name.
9. Activity - Click this button and directs you to the activity section where you can view,
track, and manage your recent activities and interactions.
 Admin Website

Figure 2.2 Notifications

1. Dashboard - Central hub displaying an overview of key information and features.

2. Add Product - Quickly incorporate new items into catalog.
3. Settings - Customize and manage preferences, configurations, and account details.
4. Sign out - Securely end your session and log out of your account.
5. Help - Access resources, guides, or support to assist you with using the website effectively.
6. Search bar - Allows admin to input search queries and retrieve relevant results.
7. My Profile – To manage user profile data, including personal information, preferences, and
settings.
8. Notifications - Provides users with alerts about recent activities and updates.
 Admin Website

Figure 2.3 Messages

1. Dashboard - Central hub displaying an overview of key information and features.

2. Add Product - Quickly incorporate new items into catalog.
3. Settings - Customize and manage preferences, configurations, and account details.
4. Sign out - Securely end your session and log out of your account.
5. Help - Access resources, guides, or support to assist you with using the website effectively.
6. Search bar - Allows admin to input search queries and retrieve relevant results.
7. My Profile – To manage user profile data, including personal information, preferences, and
settings.
8. Notifications - Provides users with alerts about recent activities and updates.

9. Messages – shows admin recent messages sent by employees, clients, customers etc.
 Admin Website

Figure 3. Products

1. Dashboard - Central hub displaying an overview of key information and features.

2. Product – Shows admins its current products and description currently available in their
market.
3. Product 1 - This button allows the user to view details about the first product. Including
description, brands and pricing.
4. Product 2 - This button allows the user to view details about the second product. Including
description, brands and pricing
5. Product 3 - This button allows the user to view details about the third product. Including
description, brands, and pricing.
6. Update - It allows users to modify existing information or content.
7. Delete - Enables users to remove information or content from the system.
 Admin Website

Figure 3.1 Products

1. Dashboard - Central hub displaying an overview of key information and features.

2. Product - Click this button and see other contents.
3. Product 4 - This button allows the user to view details about the first product. Including
description, brands and pricing.
4. Product 5 - This button allows the user to view details about the second product. Including
description, brands and pricing
5. Product 6 - This button allows the user to view details about the third product. Including
description, brands, and pricing.
6. Update - It allows users to modify existing information or content.
7. Delete - Enables users to remove information or content from the system.
 Admin Website

Figure 4. Products

1. Dashboard - Central hub displaying an overview of key information and features.

2. Forecast - Sales Forecasting initiates the process of predicting future sales based on
historical sales data. The data will be shown by clicking forecast. And then, It will display
data analysis from the month of May to month of August.
 Admin Website

Figure 5. Products

1. Dashboard - Central hub displaying an overview of key information and features.

2. Report - The sales report generates detailed reports on past and current sales performance.
When clicked, it compiles the total number of orders and the illustration of beverages from
highest to lowest sales percentage.
 Client Website

Figure 6. Homepage

1. Homepage - The main landing page of the website. It allows client users to explore
website's offerings, including featured products, and menus. It serves as the starting point
for the users.
 Client Website

Figure 7. Homepage

1. Home - The current page that typically provides an overview of the site, featured content,
and important announcements.
2. Collection - Navigates the user to browse all available products, usually organized into
categories or collections.
3. Next Button - Allow the user to scroll and browse all available products and proceed to
the next step in a multi-step process.
4. Add to cart - Adds a selected product to the user's shopping cart.
5. Log in - A form for the user to access their account and proceed to the next page where
user can finally submit the orders.
6. Shop now - Directs the user into shopping page where the user can browse all available
beverages.
 Client Website

Figure 8. Login

1. Email field - Input email address for account identification and communication purposes.
2. Password field - Enter secure password to authenticate and to have access to the account.
3. Login - Click the log in button to submit personal information and log in to an account.
4. Continue with email - Allow users to log in using existing email.
5. Create account - An open registration form for the user to create a new account.
 Client Website

Figure 9. Sign up

1. Full name - Takes users to sign up by providing details such as entering full name.
2. Email - Takes users to sign up by providing details such as entering existing email.
3. Password - Takes users to sign up by providing details such as entering a secure
password.
4. Birthday - Takes users to sign up by providing details such as entering birth month, day
and year.
5. Sign-up - Submits the user's entered information to create a new account
 Client Website

Figure 10. Purchasing

1. Search bar - Allows users to input search queries and browse trends, and interesting
products.
2. Best Sellers - Navigates the user to a list of best-selling products. When clicked, it directs
the user to top-selling product section, including the following details: Price, total
number of sold products, and discount.
 Client Website

Figure 10.1 Purchasing

1. Search bar - Allows users to input search queries and browse trends, and interesting
products.
2. Best Sellers - Navigates the user to a list of best-selling products. When clicked, it directs
the user to top-selling product section, including the following details: Price, total
number of sold products, and discount.
3. 5-Star rated - Navigates the user to a list of five-star rating products. When clicked, it
directs the user to five star rated section, Including the following details: Price, total
number of sold products discount, and total of five star rated.
 Client Website

Figure 10.2 Purchasing

1. Search bar - Allows users to input search queries and browse trends, and interesting
products.
2. Best Sellers - Navigates the user to a list of best-selling products. When clicked, it directs
the user to top-selling product section, including the following details: Price, total
number of sold products, and discount.
3. 5-Star rated - Navigates the user to a list of five-star rating products. When clicked, it
directs the user to five star rated section, Including the following details: Price, total
number of sold products discount, and total of five star rated.
4. Topmost offer - Navigates the user to a list of topmost offer products. When clicked, it
directs the user to topmost offer section, Including the following details: Price, discount,
and total of rates stars.
 Client Website

Figure 10.3 Purchasing

1. Search bar - Allows users to input search queries and browse trends, and interesting
products.
2. Best Sellers - Navigates the user to a list of best-selling products. When clicked, it directs
the user to top-selling product section, including the following details: Price, total
number of sold products, and discount.
3. 5-Star rated - Navigates the user to a list of five-star rating products. When clicked, it
directs the user to five star rated section, Including the following details: Price, total
number of sold products discount, and total of five star rated.
4. Topmost offer - Navigates the user to a list of topmost offer products. When clicked, it
directs the user to topmost offer section, Including the following details: Price, discount,
and total of rates stars.
5. Categories - When clicked, it displays the product categories such as women's drink,
wine and hard liquor.
 Client Website

Figure 11. Orders & Account

1. Orders & Account - To manage user orders and personal data, including order process,
discount, and Coupons.
2. Message Button - Allows users to access their direct messages or chat functionalities
within the application. It's used to view, send, and manage private messages.
3. Notifications - Provides users with alerts about recent activities and updates.
4. All orders - Display all product orders.
5. Quantity - Display total piece of order.
 Client Website

Figure 12. Orders & Account

1. Orders & Account - To manage user orders and personal data, including order process,
discount, and Coupons.
2. Message Button - Allows users to access their direct messages or chat functionalities
within the application. It's used to view, send, and manage private messages.
3. Notifications - Provides users with alerts about recent activities and updates.
4. Delivered - Display all delivered products.
 Client Website

Figure 13. Orders & Account

1. Orders & Account - To manage user orders and personal data, including order process,
discount, and Coupons.
2. Message Button - Allows users to access their direct messages or chat functionalities
within the application. It's used to view, send, and manage private messages.
3. Notifications - Provides users with alerts about recent activities and updates.
4. Returns - Display returned products.
 Client Website

Figure 15. Orders & Account

1. Orders & Account - To manage user orders and personal data, including order process,
discount, and Coupons.
2. Message Button - Allows users to access their direct messages or chat functionalities
within the application. It's used to view, send, and manage private messages.
3. Notifications - Provides users with alerts about recent activities and updates.
4. Coupons - Allow users to browse and use existing coupons.
5. Discount - Allow users to browse and use existing discounts.
 Client Website

Figure 16. My Cart

1. My cart - Displays all items currently in the cart, including details like name, price, and
quantity.
2. Check out - To facilitate the process of finalizing a purchase such as order review, apply
coupons, and shipping options
 Client Website

Figure 17. My Cart

1. Address Entry - Allow users to Input and update shipping and billing address.
2. Payment Method - Provide options for payment methods (credit/debit card, PayPal,
Gcash, COD).
 Client Website

Figure 18. My Cart

1. Coupon Code - Allow users to search and enter coupons code.

2. Apply - Click this button and users can now apply coupons to orders to receive discounts
on the user's purchases.
3. Submit orders - Click this button to confirm the purchase, processes the payment, and
generates an order confirmation for the user.
 Client Website

Figure 19. Tracking order

1. Tacking order -Enables users to monitor Order ID, Order summary, and to monitor the
status and progress of their orders from placement to delivery.