This is the repository for the Online Shop Web Admin V2 project.
OnlineShopWebAdminV2 is a web-based admin interface for managing an online shop. It provides functionality for managing products, orders, customers, and more. An app has 3 roles which are:
- Admin that can manage all data in database
- Director that can only manage data within the organization
- Employee that can only view info about shop within the organization
- Add, edit, and delete products
- View and manage customer orders
- Monitor sales statistics
- User management and authentication
The user interface (UI) of the OnlineShopWebAdminV2 application is designed to be responsive, ensuring optimal usability across a variety of devices and screen sizes. Whether accessed on desktops, laptops, tablets, or mobile devices, the UI dynamically adjusts and adapts its layout and elements to provide a seamless and intuitive user experience. This responsiveness enhances accessibility and usability, allowing users to interact with the application comfortably and efficiently regardless of the device they are using. With fluid and flexible design principles, the UI ensures that users can access and utilize all features and functionalities of the application with ease, promoting engagement and satisfaction.
The OnlineShopWebAdminV2 application provides a user-friendly interface for managing various aspects of an online shop. Below is an overview of the main UI components and features:
After logging in with specific credentials the dashboard of logged in user is showed based on user role
Each role has it own side menu items that manage each role navigation. Also every side menu has a Logout button that clears local window storage and navigates back to login page.
- Dashboard: View and monitor various metrics and insights related to the online shop's data. Shows widgets representing total clothes divided bu categories, total users also divided by roles and total orders made that are divided by delivery types.
- Users: Manage user accounts associated with the online shop, including role-based access control, and profile management.
- Clothes: Manage the shop's inventory, including adding new products, updating existing ones, and categorizing items.
- Shops: Manage information related to shop locations, including addresses, contact details, and operating hours.
- Orders: Process and fulfill customer orders, track order statuses, manage shipping and delivery details, and generate invoices.
- Dashboard: View and monitor various metrics and insights related to the online shop's data from a director's perspective.
- Employees: Manage employee accounts and roles within the organization, including hiring, termination, and role assignment.
- Clothes: Manage the shop's inventory, including adding new products, updating existing ones, and categorizing items.
- My Shop: Access and manage information specific to the director's assigned shop location, including sales data, customer feedback, and inventory levels.
- Shop Orders: Monitor and manage orders placed through the director's assigned shop location, including processing, fulfillment, and tracking.
- Dashboard: View and monitor various metrics and insights related to the online shop's data from an employee's perspective.
- Clothes: Access and view the shop's inventory.
- Shop Orders: View and manage orders placed through the shop location where the employee is assigned, including processing, fulfillment, and tracking.
The dashboard serves as the main landing page and provides an overview of essential metrics and insights related to the online shop's performance. It includes charts that shows different widgets based on user's role.
Shows widgets representing total clothes divided by categories, total users also divided by roles and total orders made that are divided by delivery types.
Shows widgets representing total clothes items that are stored in specific store, quantity of items that were sold during each day of the current week, which are filtered by clothes gender (male and female) and orders that were made during each day of the current week
Has the same widgets as Director Dashboard
On the "Users/Employees" page, administrators and directors can manage the users and employees associated with the online shop system. This functionality encompasses tasks such as adding new users or employees, updating existing profiles, and maintaining access permissions and roles. Administrators can create accounts for new users, assign them roles and permissions within the system, and manage their personal information such as name, email, and contact details. Additionally, administrators and directors can view a list of all users and employees, filter and search for specific individuals based on criteria such as role or department, and access detailed profiles for each user/employee to review and update their information as needed. This page serves as a centralized hub for overseeing and managing the user and employee base of the online shop, ensuring efficient operation and accountability within the organization.
Shows a pie chart of all users divided by role
By pressing on arrow button, performs a navigation to all users table, that incudes such functions as adding new employee and searching users by username
By pressing on Add Button above the table the dialog opened where admin can add new employee
Firstly, admin chooses role and gender of future employee
Then fills up all additional info and chooses shop assossiated with employee
By pressing on Option Button in a table row performs navigation to show details of selected user on opened page Depending on a role, shows different info about user.
For example if the user role is buyer shows full info about buyer including buyer orders and delivery addresses
Can also view address info by pressing Option Button in addresses table which shows the exact location pinned on map
Show all employees assigned to specific shop
On the "Clothes" page, users can perform various functionalities related to managing the inventory of clothing items available for sale. This includes tasks such as adding new clothing items, updating existing item details, and categorizing items based on attributes such as type, size, color, and price. Users can input essential information such as the item's name, description, category, and stock availability. Additionally, they can view a list of all existing clothing items, filter and search for specific items based on various criteria, and navigate to individual item pages for more detailed management. This page serves as a centralized hub for overseeing and maintaining the inventory of clothing items associated with the online business, providing a seamless experience for administrators, directors, and employees alike.
Shows all info about clothes such as total quantity, quantity of female and male items filtered by type clothes in Pie Chart, total items that were sold, total colors and sizes
By pressing Arrow Button of total items that were sold during current week the Bar Chart is shown representing the quantity of items that were sold during each day of the current week.
It also includes info about which items were sold specifically by each date
By pressing Arrow Button of total clothes widget the table containing all items info is shown. This page includes such functionallity as adding new items, searching items by name and forming a PDF file that contains all info about clothes presented in a table
By pressing Options Button the details of specific clothes item are shown.
By pressing Add button the dialog for adding new item to database is shown.
To add new items it's required to choose item gender, type of future item, fill all additional info, choose sizes and colors of item and uploading URL of clothes image
Pressing generate pdf button is forming a PDF file that contains all info about clothes presented in a table
Shows all info about clothes in shop that director is assigned to such as total quantity, quantity of female and male items filtered by type clothes in Pie Chart and total items that were sold by current week.
Same as admin by pressing Arrow Button of total clothes widget the table containing all items info is shown. This page includes such functionallity as adding new items to shop, searching items by name and forming a PDF file that contains all info about clothes presented in a table
By pressing Add button the dialog for adding new item to shop is shown.
To add new items it's required to choose item from dropdwon, size and color of item and quantity of item with specific size and color
Employee clothes page has the same functionallity as Director clothes page excluding an abillity to add and delete clothes from the shop
On the "Shops" page, users can perform various functionalities related to managing information about shop locations. This includes tasks such as adding new shop locations, updating existing location details, and managing the availability status of each shop. Users can input essential information such as the shop's address, contact details, operating hours, and any additional notes. Additionally, they can view a list of all existing shop locations, filter and search for specific shops, and navigate to individual shop pages for more detailed management. This page serves as a centralized hub for overseeing and maintaining the network of shop locations associated with the online business, providing a seamless experience for administrators, directors, and employees alike.
Shows all info about shops in a table which includes searching shop by address.
By pressing Options Button the details of specific shop are shown.
By pressing Add button the dialog for adding new shop to database is shown.
To add new shop it is required to fill all info about shop such as shop address, shop subway/metro station and contact number
While filling the address of shop a marker is placed on map to show the location of shop
Shows brief info about shop that director is assinged to
On the "Orders" page, administrators, directors, and employees can view, manage, and track orders placed within the online shop system. This functionality enables users to monitor the status of orders, process new orders, update order details, and manage order fulfillment. Administrators and directors have access to a comprehensive overview of all orders within the system, including details such as order ID, customer information, order date, items purchased, payment status, and shipping details. They can filter and search for specific orders based on various criteria, such as order status, customer name, or order date, to quickly locate and manage orders as needed. Additionally, administrators and directors can take actions such as updating order statuses, managing inventory levels, and resolving any issues or discrepancies related to orders. Employees involved in order fulfillment can use this page to view assigned orders, update order statuses as they progress through the fulfillment process, and communicate with customers regarding order updates or inquiries. Overall, the Orders page serves as a central hub for monitoring and managing the entire order lifecycle, ensuring smooth and efficient order processing and customer satisfaction.
Shows info about total orders, including Pie Chart to represent orders by statuses and Line Chart that shows how much orders were made during each day of current week
By pressing Arrow Button of total orders widget the table containing all orders info is shown. This page includes such functionallity as searching orders by number and forming a PDF file that contains all info about orders presented in a table
By pressing Options Button the details of specific order are shown.
It includes full order info and the item composition of current order.
Each role has the abillity to only change status of order.
By pressing Arrow Button of total orders that were made during current week the Line Chart is shown representing the quantity of orders that were made during each day of the current week.
It also includes full info about which orders were made specifically by each date
This page has the same functionallity as Admin Orders Page but only shows orders for shop that director is assigned to.
Has the same functionallity as Director Orders