AZ Team Order Tracker

A client-side web application for tracking custom apparel orders. Built with modern JavaScript and IndexedDB for local storage.

Features

• Create, edit, and delete orders and items
• Mark orders as priority with visual indicators
• Bulk update multiple items' status at once
• Quick status navigation with previous/next buttons
• Filter orders by client name, month, and status
• Sort orders by various attributes including priority
• View order statistics
• Export data to CSV
• Fully client-side (works offline)
• No database setup required
• Dark mode support

Project Structure

The application has been refactored from a single HTML file into a modular structure:

/
├── index.html               # Main HTML file
├── css/                     # CSS styles
│   ├── consolidated.css     # Main stylesheet with all styles
│   └── components/          # Individual component-specific styles
├── js/                      # JavaScript modules
│   ├── app.js               # Main application logic
│   ├── db/                  # Database operations
│   ├── models/              # Data models
│   ├── components/          # UI components
│   └── utils/               # Utility functions
└── server.js                # Simple HTTP server for local development

Technologies Used

• HTML5
• CSS3 with CSS variables
• JavaScript (ES6+)
• IndexedDB for client-side storage
• Modular design pattern
• Event-driven architecture

Order Status Flow

1. AGUARDANDO - Waiting for order to be placed
2. PEDIDO_FEITO - Order has been placed
3. BLUSAS_CHEGARAM - Items have arrived
4. ENTREGUE - Delivered to customer

Browser Compatibility

This application requires a modern browser that supports:

• IndexedDB
• ES6 Modules
• CSS Variables
• Template element

Getting Started

Important: Running with a Local Server

Due to security restrictions in modern browsers, ES6 modules cannot be loaded directly from the filesystem. You must use a local server to run this application correctly.

To run the application with the included Node.js server:

1. Make sure you have Node.js installed
2. Open a terminal in the project directory
3. Run the command: node server.js
4. Open your browser to http://localhost:8080

If you don't have Node.js, you can use any other local server like:

• Python: python -m http.server 8080
• PHP: php -S localhost:8080
• VS Code's Live Server extension
• Any other local development server

Using the Application

1. Once the application is loaded, the IndexedDB database will initialize automatically
2. Click "New Order" to create your first order
3. Fill in the client details and add items
4. View statistics and filter orders using the control panel

Development

To modify or extend this application:

1. Edit the HTML in index.html
2. Modify styles in the CSS files
3. Update JavaScript components in the js directory

Remember to always run the application through a web server for ES6 modules to work correctly.