ui-src

Smart Inventory Hub - UI

Modern, responsive web UI for the Smart Inventory Hub inventory management system.

Overview

This UI provides a complete frontend for managing product inventory with:

• ✅ Dashboard with real-time metrics
• ✅ Product CRUD operations
• ✅ Search and filter functionality
• ✅ Interactive charts and visualizations
• ✅ Low stock alerts with visual indicators
• ✅ Responsive design (mobile-first)
• ✅ Premium dark theme with glassmorphism
• ✅ Demo mode for local testing

Files

File	Description
index.html	Main HTML file with UI structure
app.js	JavaScript application logic
styles.css	Additional CSS styles

Tech Stack

• HTML5 - Semantic markup
• Tailwind CSS (CDN) - Modern styling
• Vanilla JavaScript - No framework dependencies
• Chart.js - Interactive data visualization
• Font Awesome - Rich iconography

Quick Start

Option 1: Local Development (Demo Mode)

1. Open the UI locally:

   # Navigate to UI directory
   cd ui-src
   
   # Open in browser (macOS)
   open index.html
   
   # Or use a simple HTTP server
   python3 -m http.server 8000
   # Then open: http://localhost:8000

2. The UI will start in Demo Mode with mock data

   • No backend required
   • Sample products pre-loaded
   • All CRUD operations work with local data

Option 2: Connect to Real API

1. Deploy the stack following the deployment guide
2. The UI sync job will automatically configure the API endpoint
3. Access via CloudFront at your subdomain

Configuration

Placeholder Variables

The UI uses placeholder variables that are replaced during deployment:

Placeholder	Description	Example
{{API_ENDPOINT}}	API Gateway endpoint	https://abc123.execute-api.us-east-2.amazonaws.com/dev
{{COGNITO_USER_POOL_ID}}	Cognito User Pool ID	us-east-2_ABC123
{{COGNITO_CLIENT_ID}}	Cognito App Client ID	abc123def456ghi789
{{COGNITO_DOMAIN}}	Cognito hosted UI domain	hkc-sample.auth.us-east-2.amazoncognito.com
{{COGNITO_REGION}}	Cognito region	us-east-2

These are replaced by the UI sync job when deploying instances.

Demo Mode vs Live Mode

Demo Mode (default):

• Uses mock data stored in app.js
• No API calls
• Perfect for UI development and testing
• Toggle with "Demo Mode" button

Live Mode:

• Connects to real API
• All operations persist to DynamoDB
• Requires deployed backend
• Toggle with "Live Mode" button

Features

Dashboard

Metrics Cards:

• Total Products
• Total Inventory Value
• Low Stock Items (with alerts)
• Number of Categories

Charts:

• Inventory by Category (Doughnut chart)
• Stock Status (Bar chart: Healthy, Low, Out of Stock)

Product Management

Add Product:

• Click "Add Product" button
• Fill in product details
• Save to create

Edit Product:

• Click edit icon on any product row
• Modify details
• Save to update

Delete Product:

• Click delete icon
• Confirm deletion

Search & Filter:

• Search by name, SKU, or brand
• Filter by category
• Real-time results

Customization

Colors

The UI uses Tailwind CSS. To customize colors, edit the Tailwind classes in index.html:

<!-- Primary color (orange) -->
<button class="bg-orange-500 hover:bg-orange-600">

<!-- Success color (green) -->
<span class="text-green-500">

<!-- Warning color (yellow) -->
<span class="text-yellow-500">

Charts

Charts are configured in app.js in the initializeCharts() function:

// Change chart type
categoryChart = new Chart(categoryCtx, {
    type: 'doughnut',  // Change to: 'pie', 'bar', 'line'
    // ...
});

Categories

Add/remove categories in index.html:

<select id="productCategory">
    <option value="">Select category</option>
    <option value="Electronics">Electronics</option>
    <option value="YourCategory">Your Category</option>
</select>

Deployment

The UI is automatically deployed by the RGD's UI sync job:

1. Source: UI files are stored in the platform assets bucket
2. Sync Job: Copies files to shared UI bucket with subdomain prefix
3. Configuration: Replaces placeholder variables with actual values
4. CloudFront: Serves the UI via the shared distribution

Manual Upload (for testing)

# Upload to platform assets bucket
aws s3 sync . s3://hkc-sample-assets/ui/inventory-app/v5/ \
  --exclude "README.md" \
  --exclude ".DS_Store" \
  --region us-east-2

Browser Compatibility

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

Troubleshooting

CORS Errors

If you see CORS errors in the browser console:

1. Check API Gateway CORS configuration in the RGD
2. Verify CORS allows your domain

API Connection Failed

1. Verify API is deployed: Check instance status
2. Test API directly: Use curl to test the endpoint
3. Check CloudWatch Logs: Review Lambda function logs

UI Not Loading

1. Check CloudFront propagation: Wait 15-20 minutes after deployment
2. Verify DNS record: Check Route 53 record exists
3. Check S3 sync job: Review job logs for errors

Next Steps

After deploying the UI:

1. Access via your subdomain (e.g., https://john-inventory-dev.example.com)
2. Toggle to "Live Mode" to connect to the API
3. Create, edit, and delete products
4. Monitor the dashboard metrics

See ../docs/DEPLOYMENT-GUIDE.md for complete deployment instructions.