BOHO INVENTORY SYSTEM DOCUMENTATION

System Infrastructure

System Overview

👑
Admin
Full Control admin.html
👁️
Sales
Read Only sales.html
👤
Staff
Limited View staff.html
🌐
BOHO Inventory Management - Web Frontend
Static Pages User Interface Real-time Note Board PDF Export System
📦
GitHub Pages
Static Hosting Version Control
⬆ Deploys Frontend
🗄️
Supabase Database
Database Tables Authentication Real-time Communication Data Export API
↔ API & Auth

Page Access

soldout.html All Users
history.html Auth Users
order.html Admin Only

Frontend

Core Technologies

  • HTML: For building the structural layout of the application
  • CSS: For styling and enhancing the visual presentation
  • JavaScript: For implementing interactive functionality and dynamic behavior

GitHub Integration

  • Free Hosting: GitHub Pages serves static frontend content
  • Version Control: Tracks all code changes and enables collaborative development
  • Safety Feature: Version control system prevents accidental code modifications by allowing rollback to any previous recorded version, ensuring code safety and recovery
  • Branch Management: Supports parallel development and feature isolation
  • Deployment: Automatic deployment through GitHub Actions

Backend & Database

Supabase Platform

  • PostgreSQL Database: A robust and scalable relational database
  • User-Friendly Interface: Combines intuitive graphical interface with SQL editing capabilities, making database table management accessible through both visual tools and direct SQL commands
  • Real-time Subscriptions: Enable live updates and seamless data syncing
  • Row Level Security: Enforces granular data access control
  • Free Tier: Offers essential features at no cost

Authentication & Security

Security Features

  • Supabase Auth: Provides authentication mechanisms for users
  • Role-Based Access Control: Ensures users only access features relevant to their roles
  • Secure API Endpoints: Protects the backend from unauthorized access
  • Data Encryption: Safeguards sensitive data during storage and transmission

User Roles & Access

Role-Based System Access

  • Admin: Full system access with management capabilities
  • Sales: Order creation and management, inventory viewing
  • Staff: Inventory management and stock updates

Communication & Data Features

Real-time Communication

  • Note Board: Real-time communication platform for all users
  • Interactive messaging with reply functionality
  • Customizable font sizes for better readability
  • Instant updates across all connected users

Data Management

  • Export Features:
    • PDF export for inventory lists
    • PDF export for order details
    • PDF export for sold-out items
    • PDF export for ODM dispatch information
  • Real-time data synchronization across all users
  • Automatic data backup and version control

System Workflow

Daily Operations

Dashboard & Communication

  • Real-time sharing communication board for all users
  • Admin/Sales: Access to inventory and order summaries
  • Sales/Staff: View packing lists, sold-out items, ODM order status
  • Staff: Access to inventory summary and stock updates

Access Levels

  • All roles: View inventory list
  • Admin/Sales: Order list access
  • Admin: Full edit rights for inventory and orders
  • Staff: Regular warehouse stock updates

Order Processing Workflow

1

Order Reception

Admin receives wholesale orders via email and creates picking lists in the system

2

Stock Verification

Warehouse staff verifies stock amounts and picks ordered items, recording carrier and box details

3

Invoice Processing

Invoice maker creates invoice from picking list and updates invoice number in system

4

Payment & Documentation

After payment, final invoice is printed and backup invoice with picking list goes to warehouse

5

Dispatch

Warehouse staff prints delivery labels and updates dispatch information in system

Inventory Management Flow

1

Freight Updates

Admin enters and updates latest freight information

2

Stock Monitoring

Sales/Staff check packing lists and current stock information

3

Status Updates

Admin updates freight info, release dates, and sale status

4

Stock Verification

Warehouse staff regularly verifies and updates physical stock quantities

Database Schema

Inventory Table

  • id: UUID (Primary Key)
  • code_colour: VARCHAR (Unique, Not Null)
  • item_name: VARCHAR
  • item_group: VARCHAR
  • item_location: VARCHAR
  • receive_qty: FLOAT
  • stock_qty: FLOAT
  • release_date: TIMESTAMPTZ
  • item_aging: INTEGER
  • item_status: VARCHAR
  • soldout_date: TIMESTAMPTZ
  • item_category: VARCHAR
  • pack_unit: INTEGER
  • pack_size: JSON
  • repeat_item: JSON
  • mfg_date: TIMESTAMPTZ
  • item_cargo: VARCHAR
  • est_date: TIMESTAMPTZ
  • arrive_date: TIMESTAMPTZ
  • delay_date: TIMESTAMPTZ
  • odm_ppo: VARCHAR
  • odm_customer: VARCHAR
  • item_note: TEXT
  • created_at: TIMESTAMPTZ
  • updated_at: TIMESTAMPTZ

Orders Table

  • id: UUID (Primary Key)
  • order_type: VARCHAR
  • status: VARCHAR
  • customer_name: VARCHAR
  • agent_state: VARCHAR
  • dispatched_state: VARCHAR
  • dispatched_carrier: VARCHAR
  • dispatched_box: VARCHAR
  • total_items: INTEGER
  • removed_items: INTEGER
  • invoice_no: VARCHAR
  • tracking_no: VARCHAR
  • order_note: TEXT
  • cancelled_at: TIMESTAMPTZ
  • dispatched_at: TIMESTAMPTZ
  • created_at: TIMESTAMPTZ
  • updated_at: TIMESTAMPTZ

Order Items Table

  • id: UUID (Primary Key)
  • order_id: UUID (Foreign Key to Orders)
  • item_name: VARCHAR (Foreign Key to Inventory)
  • order_qty: FLOAT
  • total_pieces: INTEGER
  • order_item_status: VARCHAR
  • created_at: TIMESTAMPTZ
  • updated_at: TIMESTAMPTZ

Notes Table

  • id: UUID (Primary Key)
  • user: EMAIL (Foreign Key to Users)
  • note_board: TEXT
  • reply_at: VARCHAR
  • font_size: VARCHAR
  • created_at: TIMESTAMPTZ
  • updated_at: TIMESTAMPTZ

Users Table

  • id: UUID (Primary Key)
  • auth_user_id: UUID (Foreign Key to Auth.Users)
  • email: VARCHAR (Unique, Not Null)
  • role: VARCHAR (admin, sales, staff)
  • username: VARCHAR
  • created_at: TIMESTAMPTZ
  • updated_at: TIMESTAMPTZ

GitHub Integration

GitHub Management Guide

Repository Setup Information

  • Repository URL: https://github.com/bohoaus/inventory
  • Repository Name: inventory
  • Branch: main (primary branch)
  • Access: Private repository
  • GitHub Pages URL: https://bohoaus.github.io/inventory/

Access & Authentication

  • GitHub Access:
    • Login URL: https://github.com
    • Account Credentials:
      • Username/Email: bohoaus2012@gmail.com
      • Use email/password login only
    • Access Steps:
      • Visit GitHub login page
      • Enter email: bohoaus2012@gmail.com
      • Enter associated password
      • Navigate to bohoaus organization
      • Access inventory repository
    • ⚠️ Note: Google account login is not available. Use direct email/password login only.

Code Update Process

  1. Clone the repository (first time only): git clone https://github.com/bohoaus/inventory.git
  2. Navigate to the repository: cd inventory
  3. Pull latest changes: git pull origin main
  4. Create a new branch for changes: git checkout -b feature/your-feature-name
  5. Make your changes and test locally
  6. Stage changes: git add .
  7. Commit changes: git commit -m "Description of changes"
  8. Push to GitHub: git push origin feature/your-feature-name
  9. Create Pull Request:
    • Go to https://github.com/bohoaus/inventory
    • Click "Pull requests" tab
    • Click "New pull request"
    • Select your feature branch to merge into main
    • Click "Create pull request"
  10. After review, merge the pull request into main

GitHub Pages Deployment

  • Navigate to repository Settings > Pages
  • Source: Deploy from a branch
  • Branch: main, folder: / (root)
  • Save to trigger deployment
  • Access the deployed site at: https://bohoaus.github.io/inventory/

Common Git Commands

  • Check status of changes: git status
  • View commit history: git log
  • Switch to main branch: git checkout main
  • Create and switch to new branch: git checkout -b branch-name
  • Discard local changes: git checkout -- filename
  • Update from remote: git fetch origin
  • Recover Previous Versions:
    1. View commit history with details: git log --oneline
    2. Find the desired commit hash (e.g., abc123)
    3. To view files at that point: git checkout abc123
    4. To restore specific file to that version: git checkout abc123 -- path/to/file
    5. To completely revert to that version: git reset --hard abc123
      ⚠️ Warning: This will permanently discard all changes after the selected commit
    6. Return to latest version: git checkout main

GitHub Web UI Operations

Viewing Code:
  1. Go to https://github.com/bohoaus/inventory
  2. Navigate through folders by clicking on folder names
  3. Click on any file to view its contents
  4. Use keyboard shortcuts in file view:
    • t: Quick file search
    • l: Jump to line
    • w: Switch branch
    • b: View blame
Editing Code:
  1. Navigate to the file you want to edit
  2. Click the pencil icon (✏️) in the top-right of the file view
  3. Make your changes in the web editor
  4. At the bottom of the page:
    • Add a commit message describing your changes
    • Choose either:
      • "Commit directly to the main branch" (for minor changes)
      • "Create a new branch and start a pull request" (for significant changes)
  5. Click "Commit changes" or "Propose changes"
Creating New Files:
  1. Navigate to the desired folder
  2. Click "Add file" > "Create new file"
  3. Enter the file name with extension (e.g., "newfile.js")
  4. Add your content
  5. Follow the same commit process as editing
Uploading Files:
  1. Navigate to the desired folder
  2. Click "Add file" > "Upload files"
  3. Drag and drop files or "choose your files"
  4. Add a commit message
  5. Choose commit destination (main or new branch)
  6. Click "Commit changes"
Review Changes:
  • View commit history:
    1. Click "commits" near the top of repository
    2. Click any commit to see detailed changes
  • Compare versions:
    1. Click "commits"
    2. Click the clipboard icon next to any commit
    3. Use "Browse files" to see repository at that point
Recovering Previous Versions (Web UI):
  1. Find the Previous Version:
    • Go to repository main page
    • Click "commits" at the top
    • Browse through commit history
  2. Restore Single File:
    • Click on the desired commit
    • Find the file you want to restore
    • Click the file to view its contents
    • Click the "..." button at the top right of file view
    • Select "Edit file"
    • Commit the changes with a message like "Restore file to previous version"
  3. Restore Entire Repository:
    • Click on the desired commit
    • Click "Browse files" button to view repository at that point
    • Click "..." button at the top of file list
    • Select "Restore repository to this commit"
    • ⚠️ Warning: This will create a new commit that matches the state of the selected commit
  4. Compare Changes:
    • Click "commits" on repository main page
    • Select a commit to view its changes
    • Use the split view to compare old and new versions
    • Green highlights show additions, red shows deletions
Best Practices:
  • Use meaningful commit messages
  • Create branches for significant changes
  • Review changes before committing
  • Use pull requests for collaborative review
  • Keep commits focused and atomic

Supabase Management

Supabase Management Guide

Project Information

  • Project Name: Boho Aus
  • Organization: bohoaus
  • GitHub Login:
    • Username/Email: bohoaus2012@gmail.com
    • Authentication: Email/Password only
    • ⚠️ Note: Google account login is not available
  • Repository URL: https://github.com/bohoaus/inventory
  • Access the deployed site at: https://bohoaus.github.io/inventory/

Access & Authentication

  • Login Methods:
    • Direct Login: https://app.supabase.com
    • GitHub Login: Use GitHub account for seamless authentication
  • Account Requirements:
    • GitHub account with access to bohoaus organization
    • Supabase account linked to GitHub
    • Project access permission from organization admin
  • First-time Access:
    • Click "Continue with GitHub" on Supabase login page
    • Authorize Supabase access to GitHub account
    • Select bohoaus organization
    • Access Boho Aus project from dashboard

Table Update Process

  1. Access Supabase Dashboard: https://app.supabase.com
  2. Select Project: BohoInventory
  3. Navigate to Table Editor
  4. For new tables:
    • Click "New Table"
    • Define columns and data types
    • Set primary keys and foreign keys
    • Enable Row Level Security (RLS)
  5. For existing tables:
    • Click on table name
    • "Edit Table" for structure changes
    • "Insert/Edit Row" for data changes
    • Use SQL Editor for complex updates

SQL and Table Management Guide

Using SQL Editor:
  1. Access SQL Editor:
    • Click "SQL Editor" in left sidebar
    • Create "New Query" or select saved query
    • Use split view to see results alongside query
  2. Common SQL Operations:
    • View Table Data: SELECT * FROM table_name;
    • Filter Records: SELECT * FROM table_name WHERE condition;
    • Update Records: UPDATE table_name SET column = value WHERE condition;
    • Delete Records: DELETE FROM table_name WHERE condition;
  3. Save Queries:
    • Click "Save" button after writing query
    • Name your query for future reference
    • Access saved queries from left sidebar
Advanced Table Management:
  1. Table Structure:
    • Add/Remove Columns:
      • Use Table Editor: Click "Edit Table"
      • Or SQL: ALTER TABLE table_name ADD COLUMN column_name data_type;
    • Modify Columns:
      • Change data types
      • Add constraints (unique, not null, etc.)
      • Set default values
  2. Bulk Operations:
    • Import Data:
      • Click "Insert" > "Import Data"
      • Support CSV, JSON formats
      • Map columns automatically or manually
    • Export Data:
      • Select rows to export
      • Choose format (CSV, JSON)
      • Download or copy to clipboard
  3. Table Relationships:
    • Create Foreign Keys:
      • Link tables through relationships
      • Set referential actions (CASCADE, SET NULL)
    • View Relationships:
      • Use "Database" > "Relationships" view
      • Visual diagram of table connections
💡 Pro Tip: Use the visual query builder for simple queries, then switch to SQL view to learn the corresponding SQL syntax.

Authentication Management

Initial Setup
  1. Configure Authentication Provider:
    • Navigate to Authentication > Providers
    • Enable Email/Password authentication
    • Configure password requirements:
      • Minimum length: 8 characters
      • Require special characters
      • Require numbers
    • Set up email templates for:
      • Welcome emails
      • Password reset
      • Email confirmation
User Management
  1. Access User List:
    • Go to Authentication > Users
    • View all registered users
    • Filter by status (active/inactive)
    • Search by email or metadata
  2. User Operations:
    • Create New User (Multiple Methods):
      • Method 1 - Authentication UI:
        • Go to Authentication > Users
        • Click "New User"
        • Enter email and password
        • Optional: Check "Auto-confirm user"
        • Click "Create User"
      • Method 2 - Direct Table Edit:
        • Go to Table Editor > auth.users
        • Click "Insert Row"
        • Fill required fields:
          • email: user's email
          • encrypted_password: use bcrypt hash
          • role: 'admin', 'viewer', or 'guest'
          • email_confirmed_at: current timestamp (for auto-confirm)
        • ⚠️ Warning: This method bypasses email verification
      • Method 3 - SQL Insert:
        • Go to SQL Editor
        • Use this template: INSERT INTO auth.users (email, encrypted_password, role, email_confirmed_at)
          VALUES (
          'user@example.com',
          crypt('password', gen_salt('bf')),
          'admin',
          now()
          );
        • Modify values as needed
        • Execute query to create user
    • Important Notes:
      • Direct table editing bypasses email verification
      • Use with caution in production environment
      • Always set proper role permissions
      • Document any manual user creations
    • Modify existing user:
      • Reset password
      • Change role
      • Disable/Enable account
      • Delete account (with caution)
  3. Monitor Activity:
    • View login history
    • Track failed login attempts
    • Monitor active sessions
    • Review security logs
Role-Based Access Control (RBAC)
  1. Role Configuration:
    • Admin Role:
      • Full system access
      • Manage users and roles
      • Modify database structure
    • Viewer Role:
      • Read-only access
      • View inventory and orders
      • No modification rights
    • Guest Role:
      • Limited access
      • View basic information only
      • No sensitive data access
  2. Row Level Security (RLS):
    • Basic Policy Example: CREATE POLICY "Viewers can read inventory" ON inventory
      FOR SELECT TO authenticated
      USING (auth.role() = 'viewer');
    • Advanced Policies:
      • Restrict sensitive data access
      • Limit modification capabilities
      • Control data visibility by role
🔒 Security Best Practices:
  • Regularly review user access and permissions
  • Monitor and log authentication attempts
  • Implement strong password policies
  • Keep authentication settings up to date
  • Document all role changes and policy updates

Database Backup

  • Regular backups: Daily automated backups
  • Manual backup:
    • Navigate to Database > Backups
    • Click "Create Backup"
    • Download backup file for local storage
  • Restore process available through support

System Pages & Navigation

Authentication

Login Page (index.html)

  • User Authentication
  • Role Verification (Admin/Viewer/Guest)
  • Session Management
  • Access Control

Test Authentication System (/test_signup_login/)

  • Components:
    • signup.html - User interface for authentication
    • signup.css - Styling for authentication forms
    • signup.js - Supabase authentication integration
  • Features:
    • Email-based signup with real email verification
    • Secure login system with password protection
    • Tab-based interface switching between login/signup
    • User dashboard after successful authentication
  • Supabase Integration:
    • Real email verification process
    • Configurable auto-confirmation settings
    • Secure password handling and storage
    • Session management and persistence
  • Testing Purpose:
    • Demonstrates complete authentication flow
    • Shows Supabase authentication implementation
    • Provides template for future authentication needs
    • Tests email verification functionality
📝 Note: This is a testing implementation that showcases how to:
  • Implement full authentication flow with Supabase
  • Handle email verification process
  • Manage user sessions and states
  • Create user-friendly authentication interface

Admin Section

Admin Dashboard (admin.html)

  • Edit Item List
  • View Item List
  • Full System Access

Order Management (order.html)

  • Create New Orders
  • Manage Existing Orders
  • Process Orders

Additional Access

  • Sold Out Items (soldout.html)
  • Order History (history.html)
  • System Summary (summary.html)

Sales Section

Sales Dashboard (sales.html)

  • View Item List
  • Create Orders
  • Manage Orders

Accessible Pages

  • Sold Out Items (soldout.html)
  • Order History (history.html)
  • System Summary (summary.html)

Staff Section

Staff Dashboard (staff.html)

  • View Item List
  • Update Stock
  • Manage Inventory

Limited Access

  • Sold Out Items (soldout.html)
  • Inventory Summary

Admin Section

Admin Dashboard (admin.html)

  • Edit Item List
  • View Item List
  • Full System Access

Order Management (order.html)

  • Create New Orders
  • Manage Existing Orders
  • Process Orders

Additional Access

  • Sold Out Items (soldout.html)
  • Order History (history.html)
  • System Summary (summary.html)

Default Login Information