System Infrastructure
System Overview
Page Access
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
Order Reception
Admin receives wholesale orders via email and creates picking lists in the system
Stock Verification
Warehouse staff verifies stock amounts and picks ordered items, recording carrier and box details
Invoice Processing
Invoice maker creates invoice from picking list and updates invoice number in system
Payment & Documentation
After payment, final invoice is printed and backup invoice with picking list goes to warehouse
Dispatch
Warehouse staff prints delivery labels and updates dispatch information in system
Inventory Management Flow
Freight Updates
Admin enters and updates latest freight information
Stock Monitoring
Sales/Staff check packing lists and current stock information
Status Updates
Admin updates freight info, release dates, and sale status
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.
- Login URL:
Code Update Process
-
Clone the repository (first time only):
git clone https://github.com/bohoaus/inventory.git
-
Navigate to the repository:
cd inventory
-
Pull latest changes:
git pull origin main
-
Create a new branch for changes:
git checkout -b feature/your-feature-name
- Make your changes and test locally
-
Stage changes:
git add .
-
Commit changes:
git commit -m "Description of changes"
-
Push to GitHub:
git push origin feature/your-feature-name
-
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"
- 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:
-
View commit history with details:
git log --oneline
- Find the desired commit hash (e.g., abc123)
-
To view files at that point:
git checkout abc123
-
To restore specific file to that version:
git checkout abc123 -- path/to/file
-
To completely revert to that version:
git reset --hard abc123
⚠️ Warning: This will permanently discard all changes after the selected commit -
Return to latest version:
git checkout main
-
View commit history with details:
GitHub Web UI Operations
Viewing Code:
-
Go to
https://github.com/bohoaus/inventory
- Navigate through folders by clicking on folder names
- Click on any file to view its contents
-
Use keyboard shortcuts in file view:
t
: Quick file searchl
: Jump to linew
: Switch branchb
: View blame
Editing Code:
- Navigate to the file you want to edit
- Click the pencil icon (✏️) in the top-right of the file view
- Make your changes in the web editor
-
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)
- Click "Commit changes" or "Propose changes"
Creating New Files:
- Navigate to the desired folder
- Click "Add file" > "Create new file"
- Enter the file name with extension (e.g., "newfile.js")
- Add your content
- Follow the same commit process as editing
Uploading Files:
- Navigate to the desired folder
- Click "Add file" > "Upload files"
- Drag and drop files or "choose your files"
- Add a commit message
- Choose commit destination (main or new branch)
- Click "Commit changes"
Review Changes:
-
View commit history:
- Click "commits" near the top of repository
- Click any commit to see detailed changes
-
Compare versions:
- Click "commits"
- Click the clipboard icon next to any commit
- Use "Browse files" to see repository at that point
Recovering Previous Versions (Web UI):
-
Find the Previous Version:
- Go to repository main page
- Click "commits" at the top
- Browse through commit history
-
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"
-
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
-
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
- Go to repository main page
- Click "commits" at the top
- Browse through commit history
- 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"
- 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
- 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
-
Direct Login:
-
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
-
Access Supabase Dashboard:
https://app.supabase.com
- Select Project: BohoInventory
- Navigate to Table Editor
-
For new tables:
- Click "New Table"
- Define columns and data types
- Set primary keys and foreign keys
- Enable Row Level Security (RLS)
-
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:
-
Access SQL Editor:
- Click "SQL Editor" in left sidebar
- Create "New Query" or select saved query
- Use split view to see results alongside query
-
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;
-
View Table Data:
-
Save Queries:
- Click "Save" button after writing query
- Name your query for future reference
- Access saved queries from left sidebar
Advanced Table Management:
-
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
-
Add/Remove Columns:
-
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
-
Import Data:
-
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
-
Create Foreign Keys:
Authentication Management
Initial Setup
-
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
-
Access User List:
- Go to Authentication > Users
- View all registered users
- Filter by status (active/inactive)
- Search by email or metadata
-
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
-
Method 1 - Authentication UI:
-
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)
-
Create New User (Multiple Methods):
-
Monitor Activity:
- View login history
- Track failed login attempts
- Monitor active sessions
- Review security logs
Role-Based Access Control (RBAC)
-
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
-
Admin Role:
-
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
-
Basic Policy Example:
- 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
- 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
System Access Credentials
Two types of accounts are available:
- Testing Accounts: Short credentials for development and testing
- Production Accounts: Standard credentials for normal system use (Normally within your name for identification) (Jimmy will create these)
Admin Role
Sales Role
Staff Role
Warehouse Role
- Testing accounts are for development purposes only
- Use production accounts for normal system operation
- For passwords or any changes, please contact Jimmy
- Keep credentials confidential and secure