1. Getting Started: The Splash Screen and Login
When you first open the application, you will see a splash screen with a loading bar. This screen is used to initialize all the necessary modules and prepare the application for use. Once the loading is complete, you will be taken to the login page.
To log in to the application, use the following credentials:
Username: admin
Enter these credentials into the login form and click the "Login" button. Once logged in, you will be taken to the main dashboard, which provides a real-time overview of your business performance.
3. Dashboard and Analytics
The dashboard is the central hub of your application. It provides real-time business insights through a series of charts and metrics.
Sales Overview
See your total sales, number of items sold, and top-performing items at a glance.
Time Period Analysis
The charts can be configured to show performance over different time periods, allowing you to track trends and make informed decisions.
Inventory Insights
Get a quick view of your current stock levels, including low-stock alerts.
Expense Summary
Monitor your spending with a breakdown of your business expenses.
From here, you can navigate to different sections using the buttons or icons provided.
4. Stock Management
Managing your stock is a critical function of the app. It allows you to maintain accurate inventory levels, prevent stockouts, and track your most popular items.
Adding a New Stock Item
Click the button to "Add New Item". A pop-up form will appear.
Fill in the details for the new item. The required fields include the item's name, its price, and the quantity in stock.
You can also upload a product image. If an image is selected, it will appear in the preview area.
Click "Save" to add the item to your stock. The new item will now be available for sale.
Viewing and Editing Stock Items
Navigate to the main Stock view. All your items are displayed in a list.
To edit an item, click the edit button (often a pencil icon) next to its entry. A form will open with the item's current details pre-filled. You can change any of the information, including the name, price, or quantity.
To delete an item, click the delete button (trash can icon). The app will ask for confirmation before removing the item permanently.
Low Stock Alerts and Tracking
The app automatically monitors your inventory. You can set a low-stock threshold for each item. When an item's quantity falls below this level, a visual alert will be triggered on your dashboard and in the stock list. This helps you know when to reorder and prevents you from running out of popular products.
The system also provides real-time updates on stock levels as sales are made, ensuring your inventory count is always accurate.
Stock History
The application keeps a detailed record of all changes to your inventory.
Every time you add, edit, or remove an item, or when a sale is completed, the event is logged in the stock history.
You can view this history to see a full audit trail of inventory movements. This is a valuable tool for tracking shrinkage, identifying discrepancies, and reconciling physical inventory counts.
5. Sales and Transactions
The app simplifies the process of recording sales and generating receipts.
Recording a Sale
Click the "Record Sale" button.
A list of your stock items will appear. Select the items the customer is purchasing.
Specify the quantity for each item. The total price will be calculated automatically.
Click the "Complete Sale" button.
Generating Receipts
After a sale is completed, a receipt will be generated. You can print this receipt or save it as a PDF for your records. The receipt will include all transaction details and your business information.
The app also features a "Custom Receipt" option, allowing you to create and print a receipt for items not in your current stock.
Viewing Sales History
Navigate to the "Sales History" section to view all past transactions. You can filter this list by date, customer, or payment type to analyze your sales performance over time.
6. Managing Credit Sales and Payments
For transactions where the customer pays later, the app has a dedicated credit sales feature.
Recording a Credit Sale
When processing a sale, choose the "Credit" option as the payment method.
Fill in the customer's name and any other required details.
The sale will be recorded as a credit sale, and the amount will be added to the customer's outstanding balance.
Processing a Payment
Navigate to the "Credit Sales" section.
Find the customer's name and the outstanding sale.
Click the "Process Payment" button.
Enter the amount of the payment received. The app will update the customer's balance accordingly.
Customer Management
The "Credit Sales" section also serves as a basic customer management tool. You can see a list of all customers with outstanding credit and monitor their payment history.
7. Expenses and Reporting
The application provides robust tools for managing your business finances.
Handling Expenses
The "Expenses" section allows you to record and track all your business expenses. This is crucial for accurate financial reporting.
To add an expense, click the "Add Expense" button.
Fill in the details, including the expense amount, a brief description, the date, and the category (e.g., rent, utilities, supplies).
Click "Save". The expense is now logged in the system and will be factored into your financial reports.
Generating Reports
The app can generate comprehensive reports to help you analyze your business performance. All reports are created as downloadable PDF files.
Weekly/Monthly Sales Report
To generate a weekly or monthly sales report, navigate to the "Reports" section. Select the "Sales Report" option and then specify the date range for the week or month you want to review. The report will include details on total sales, number of transactions, and a breakdown of payment methods.
Stock Report
This report provides a complete overview of your current inventory. It includes a list of all items, their current stock levels, and their purchase price. This is useful for stocktaking and valuation.
Profit/Loss Statements
While there isn't a dedicated button for this, you can generate a Profit/Loss statement by combining the data from your Sales Reports and your Expenses log. The app calculates your total income from sales and subtracts your total expenses for a specified period, giving you a clear picture of your net profit or loss.
8. Phone Ad Generator
The Phone Ad Generator allows you to create professional, eye-catching advertisements for your mobile phone products with customizable templates, colors, and content.
Accessing the Ad Generator
To access the Ad Generator, navigate to the "Ad Maker" section from the main menu or directly open "ad makker.html" in your browser.
Understanding the Interface
The Ad Generator interface is divided into two main sections:
- Left Panel: Controls for customizing your ad
- Right Panel: Live preview of your ad
Pre-filled Information
If you're coming from the shop page, your product details may already be pre-filled from your inventory!
Step-by-Step Ad Creation
1Selecting a Template
Start by selecting a template from the dropdown menu. Choose from various designs like Cyberpunk Neon, Minimal White, Luxury Gold, and more.
2Adding Your Content
Fill in your shop name, phone brand, model, price, and discount information. Add product features using the "Add Features" section.
3Uploading Images
Upload your shop logo and a high-quality product image. Use the sliders to adjust the image size for perfect placement.
4Customizing Colors
Use the color pickers to change gradient colors and text color. Experiment with different gradient types (Linear, Radial, Conic, Diamond).
5Using AI Generator
Click the "I HUBS AI" button to automatically generate harmonious color combinations and decorative shapes.
6Adding Features
Type features in the input field and click "Add". Features will automatically get appropriate icons based on keywords.
Downloading Your Ad
When you're satisfied with your ad:
- Select your preferred download format (PNG or JPEG)
- Click the "Download Ad" button
- The image will be saved with a filename based on your brand and model
Taking a Screenshot
If you cannot download your ad, you can easily capture it using your device's built-in screenshot function:
- Windows: Press the `PrtScn` key to capture the entire screen. The image is copied to your clipboard. You can also use `Windows key + Shift + S` for more options.
- Mac: Press `Shift + Command + 3` to capture the entire screen, or `Shift + Command + 4` to capture a specific area.
- iPhone/iPad (iOS): Press the side button and the volume up button at the same time.
- Android: Press the power button and the volume down button at the same time.
Pro Tips for Best Results
Optimize Image Size: Adjust the image dimensions using the sliders to ensure your product fits perfectly.
Check Readability: Ensure there's enough contrast between your text and background colors.
Use Feature Icons: The system automatically assigns icons based on keywords like "camera", "battery", or "display".
Experiment with Templates: Try different templates to see which one best showcases your product.
9. Ad Generator: Automatic Icon System
One of the smartest features of this Ad Maker is its ability to automatically add professional-looking icons next to your product's features. You don't need to choose icons yourself; the tool does it for you by detecting keywords in your text.
How It Works (In Simple Terms)
- You Type a Feature: In the "Add Features" box, you type a description of a phone feature (e.g., "200MP Camera").
- The System Scans Your Text: As soon as you add the feature, a hidden function scans every word you typed.
- It Matches Keywords: It looks for specific trigger words like "camera," "battery," or "unlock."
- It Adds the Icon Automatically: If it finds a match, it places the correct icon right next to your text in the ad preview.
It's like having a designer read your mind and instantly illustrate your points.
Complete Keyword & Icon Cheat Sheet
Here is the full list of keywords the system recognizes and what icon it will show for each. Use these words in your feature descriptions to get the desired icon.
| If Your Feature Contains This Keyword... | You Will Get This Icon... | What It Represents |
|---|---|---|
| camera | A classic camera with a lens | Photography, cameras |
| battery | A standard battery symbol | Battery life, power |
| unlock or lock | A padlock | Security, face unlock, fingerprint unlock |
| core or processor | A computer chip | Processing power, CPU, performance |
| inch, display, or screen | A computer monitor | Screen size, display quality |
| scan or sensor | A radio wave symbol | Fingerprint sensor, NFC, scanning |
| storage, rom, tb, or gb | A hard drive | Internal storage, memory capacity |
| ram or memory | A memory stick | RAM, multitasking speed |
| charge or fast charge | A lightning bolt | Fast charging capability |
| dual sim or sim | A mobile phone | Dual SIM functionality |
| headset or headphone | A pair of over-ear headphones | Audio jack, headphone support |
| speaker | A speaker symbol | Speaker quality, stereo sound |
| wireless | A radiating signal | Wireless charging, WiFi, Bluetooth |
| wired or cable | A plug and cable | Wired charging, data transfer |
| earbud, earphone, or audio | A single earbud | Audio quality, included earbuds |
| warranty or guarantee | A shield | Warranty protection |
| waterproof or water resistant | A water droplet on a shield | Water resistance rating |
| gps or navigation | A satellite dish | GPS, location services |
| touch, touchscreen, multi-touch, or capacitive | A finger touching a screen | Touchscreen responsiveness |
Step-by-Step: How to Use This Feature
- Locate the "Add Features" Box: On the left control panel, find the input field labeled "Add Features."
- Type Your Feature: Think about what you want to say and try to include one of the keywords from the list above.
Example 1: Instead of just "5000mAh", type "5000mAh Battery" to get the battery icon.
Example 2: Instead of "Face recognition", type "Face Unlock" to get the lock icon.
Example 3: Type "108MP Triple Camera System" to get the camera icon.
- Add the Feature: Click the "Add" button or press the "Enter" key on your keyboard.
- See the Magic Happen: Immediately look at the ad preview on the right. Your text will now appear in the list with a beautiful icon next to it!
Pro Tips for Best Results
Be Natural: Write your features normally. You don't need to force the keyword to the beginning; the system will find it anywhere in the text. "Massive battery that lasts all day" will work just as well as "5000mAh battery."
Check the Cheat Sheet: If you're unsure what keyword to use, quickly refer to the list above.
No Icon? If you use a word that isn't in the system's list, the feature will still be added, but it just won't have an icon next to it. This is fine for more general descriptions.
This intelligent system ensures your ads look consistently professional and visually appealing, making your product's features instantly recognizable to customers.
9. Troubleshooting Common Issues
Here are some common issues you might face and how to resolve them quickly.
Image Not Appearing
If your uploaded product image or logo doesn't appear in the preview, try these solutions:
- Check that the image format is supported (JPG, PNG).
- Try a smaller image file size. Large files can take longer to load and may fail.
- Refresh the page and try uploading the image again.
Download Issues
If you're having trouble downloading your ad:
- Ensure pop-ups are allowed for the site. The download might be blocked by your browser's pop-up settings.
- Check that you have sufficient storage space on your device.
- Try using a different web browser if problems persist.
Text Not Visible
If your text is hard to read or seems to disappear:
- Change the text color using the color picker. Make sure it contrasts well with the background.
- Adjust the background colors or gradients to improve contrast.
- Try a different template with a built-in color scheme that offers better readability.
11. Advanced Features and Customization
Editing and Removing Product Images
When you are adding or editing a stock item, you have the option to upload a product image.
To remove an existing image, click the "Remove Image" button that appears below the image preview. This will clear the image and allow you to upload a new one.
Comprehensive Business Details
Beyond the basic information, you can also add more details to your business profile.
In the "Business Information" section, you can input a second phone number, your business email or website, social media handles, and a short description. This ensures your receipts and reports contain all the necessary contact information for your customers.
12. Handling Different Payment Types
The application is designed to handle cash, credit, and even mixed payments seamlessly. When you complete a sale, you will be prompted to select the payment method.
Cash Payments
This is the standard payment method for a completed sale. When the customer pays with cash, you select "Cash" as the payment type. The app will automatically calculate the change to be given back to the customer.
Credit Payments
If a customer wants to buy items on credit, you would select "Credit" as the payment type. The total amount of the sale will be recorded as an outstanding balance for that customer. This amount is automatically added to the Credit Sales section of your app, where you can easily track it.
Mixed Payments (Cash and Credit)
For situations where a customer pays a partial amount in cash and the rest on credit, the app can handle this as well.
Example: A customer is purchasing items for a total of $100. They want to pay $40 in cash and put the remaining $60 on credit.
When you are at the payment screen, you would first enter the $40 that the customer is paying in cash.
The app will then show the remaining balance, which is $60.
You would then select the "Credit" payment option. The app will record the $60 as an outstanding credit balance for that customer, and the entire sale will be finalized. The receipt will show both payment methods.
This feature ensures that all transactions are accurately recorded and that you have a clear record of both cash payments and outstanding credit.
13. The Role of the Admin
The Administrator (Admin) is the highest-level user in the system. They have full control over business operations, settings, and user management. Unlike a Sales Associate, who can mainly record sales and view their own activity, the Admin manages the entire platform.
Key Responsibilities of the Admin
User Management
Create new admins and sales associates. Change or reset passwords. Assign roles and remove inactive users.
Business Settings
Configure business information, upload logo, and add contact details that appear on receipts and reports.
Sales Oversight
Monitor all sales activity in real time. View sales history and track credit sales.
Stock Management
Add new products, update stock levels, review stock history, and get low stock alerts.
Reports & Analytics
Access weekly and monthly sales reports. Analyze sales by payment type and check sales target progress.
System Control
Use the Admin Panel to add admins, change passwords, open notes, reset system settings, and manage network configuration.
Difference Between Admin and Sales Associate
Admin: Business manager/owner - oversees users, stock, sales, reports, and system settings.
Sales Associate: Cashier/salesperson - only records sales and views their own work.
Sales, Credit, Mixed Payments & Profit/Loss
Normal Sales (Cash / Mobile Money)
When recording a sale, select a product and enter quantity. The system calculates the total. Choose payment method (Cash or Mobile Money).
Example: Product: Itel Phone 2160
Cost Price: 5,500
Selling Price: 10,500
Quantity Sold: 2
Payment Type: Cash
Total Sale = 2 × 10,500 = 21,000
The system deducts units from stock and logs the sale.
Credit Sales
Credit sales let customers take items now but pay later.
Example: Product: Itel Phone 5606
Cost Price: 7,000
Selling Price: 12,000
Quantity: 1
Customer: John Doe
Advance Payment: 5,000
Balance Due: 7,000
The sale goes into Credit Sales Section until the customer clears the balance.
Mixed (Hybrid) Payments
For split payments across different methods.
Example: Product: Itel Phone 2163
Selling Price: 10,000
Payment Breakdown:
- Cash: 4,000
- Mobile Money: 3,000
- Credit: 3,000
Total = 10,000
The system logs both immediate revenue and pending credit.
Profit/Loss Calculation
Profit/Loss = Revenue – Costs
The system uses Revenue = Total Sales Amount and COGS = Total cost price of items sold.
Formula: Net Profit = (Selling Price × Quantity Sold) – (Cost Price × Quantity Sold)
If expenses are recorded, the system can deduct them to show Net Profit after Expenses.
Reasons Why a Sale May Not Be Recorded
Product Not Found in Stock
If the product name doesn't exist in Current Stock, the system can't link it to cost/price.
Insufficient Stock Quantity
If requested quantity is greater than available stock, the system rejects the sale.
Missing or Invalid Input
Required fields not filled: product name, quantity, price, payment type.
Payment Type Errors
Hybrid payments that don't add up to total price, or credit sales without customer name.
Network or Offline Issues
If the server is unreachable, sales may fail to sync (though the app tries to save locally).
Duplicate Sale Attempt
The system might ignore duplicate "new-sale" events at the same timestamp.
Role Restrictions
Sales Associates have limited permissions and can't perform all actions.
Script or App Errors
JavaScript errors during recording might prevent the Record Sale button from working.
Stock Management in the System
Your app treats stock as the foundation of sales. Every product you sell is linked to a stock item, and every change is logged in Stock History.
Adding New Stock
Admins can add new products via the Stock Management menu with required details including product name, category, quantity, cost price, selling price, and type.
Updating Stock
Stock updates happen in two ways:
- Manual Update: Admin edits product details directly
- Automatic Update: System reduces stock after a sale is recorded
Low Stock Alerts
System monitors stock levels and shows a red dot (lowStockDot) when quantity drops below threshold.
Current Stock View
Shows all active items with search, edit, and delete functionality.
Stock History
Audit trail of every stock action with timestamps and action types. Can be filtered by date range or category.
Profit/Loss Link to Stock
System compares Cost Price (COGS) vs Selling Price of stock sold to calculate profit margins.
Security & Roles
Admins have full access while Sales Associates can only sell products (which auto-updates stock).
Offline Functionality and Data Syncing
The app is designed to work even when you don't have an internet connection. This is handled through a local storage mechanism that saves all your data directly on your device.
How it Works
When you lose your connection, a message will notify you. You can continue to use the app to record sales, manage stock, and add expenses. All these actions are saved locally. When your connection is restored, the app will automatically sync all the saved data to the server, ensuring your records are up-to-date across all devices.
Real-Time Notifications
The app also uses real-time notifications to alert you to new sales or important updates when you are online. This ensures you're always in the loop, especially in a multi-user environment.
10. Social Media
Stay connected with us on social media for updates, tips, and special offers. You can like and follow our pages or share our content with your network.