# Lindsay Leather Order Management System

A complete web application for custom leather product ordering at college campus events. Students can place orders for personalized bracelets, bookmarks, and keychains with custom text and decorative stamps.

## Features

### Student Portal (Mobile-First)
- **Product Selection**: Choose from bracelets (S/M/L), keychains, and bookmarks
- **8-Character Input System**: Real-time validation with auto-advance between fields
- **Stamp Gallery**: Visual selection from 30 small + 30 large decorative stamps
- **Live Canvas Preview**: Real-time product preview with drag-and-drop stamp positioning
- **Order Confirmation**: Complete order submission with confirmation screen

### Admin Dashboard (Tablet-Optimized)
- **Real-time Order Queue**: Manual refresh + FCM push notifications
- **Order Management**: View details, mark as completed
- **Touch-friendly Interface**: Optimized for iPad/tablet use
- **Order Tracking**: Complete order timeline and status management

### Technical Features
- **Laravel Backend**: RESTful API with MySQL database
- **Tailwind CSS**: Responsive design with Lindsay Leather brand guidelines
- **HTML5 Canvas**: Fabric.js integration for product preview
- **Firebase FCM**: Push notifications for admin alerts
- **Mobile-First Design**: Optimized for smartphones and tablets

## Installation

### Prerequisites
- PHP 8.2+
- Composer
- Node.js & NPM
- MySQL 5.7+
- XAMPP (recommended for local development)

### Setup Instructions

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd lindsey-leather-order-management-system
   ```

2. **Install PHP dependencies**
   ```bash
   composer install
   ```

3. **Install Node.js dependencies**
   ```bash
   npm install
   ```

4. **Environment Configuration**
   ```bash
   cp .env.example .env
   php artisan key:generate
   ```

5. **Database Configuration**
   Update `.env` file with your database credentials:
   ```env
   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=lindsay_leather
   DB_USERNAME=root
   DB_PASSWORD=
   ```

6. **Run Migrations and Seeders**
   ```bash
   php artisan migrate
   php artisan db:seed
   ```

7. **Build Assets**
   ```bash
   npm run build
   ```

8. **Start Development Server**
   ```bash
   php artisan serve
   ```

## Firebase FCM Setup (Optional)

1. **Create Firebase Project**
   - Go to [Firebase Console](https://console.firebase.google.com/)
   - Create a new project
   - Enable Cloud Messaging

2. **Download Service Account Key**
   - Go to Project Settings > Service Accounts
   - Generate new private key
   - Save as `storage/app/firebase-service-account.json`

3. **Configure FCM**
   - The system will automatically use FCM for admin notifications
   - Admin devices need to subscribe to 'admin_orders' topic

## Usage

### Student Ordering Process

1. **Access the System**
   - Students scan QR code to access the ordering system
   - Mobile-optimized interface loads automatically

2. **Select Product**
   - Choose from bracelets (3 sizes), keychains, or bookmarks
   - View product information and dimensions

3. **Enter Customization**
   - Enter student name
   - Type up to 8 characters (A-Z, 0-9 only)
   - Select size (for bracelets)

4. **Choose Stamps**
   - Browse visual gallery of 60 decorative stamps
   - Tap to select stamps
   - Mix small and large stamps as desired

5. **Preview Design**
   - Real-time canvas preview updates
   - Drag and drop stamp positioning
   - Review final design

6. **Submit Order**
   - Confirm order details
   - Submit for processing
   - Receive confirmation with order ID

### Admin Management

1. **Access Admin Dashboard**
   - Navigate to `/admin/dashboard`
   - Login with admin credentials

2. **Monitor Orders**
   - View pending orders in real-time
   - Auto-refresh every 30 seconds
   - FCM push notifications for new orders

3. **Process Orders**
   - Click "View Details" for order information
   - Review customization and preview
   - Mark as completed when ready

4. **Order Management**
   - Track order timeline
   - Print order details
   - Monitor completion status

## Brand Guidelines

### Colors
- **Primary Brown**: #371C16
- **Accent Brown**: #B5702F
- **Pure Black**: #0B0B0B
- **Pure White**: #FFFFFF

### Typography
- **Headings**: Lato (700 weight)
- **Body Text**: Montserrat (400 weight)

### Design Elements
- Leather gradient backgrounds
- Golden accent highlights
- Minimalist flat design
- Touch-friendly mobile interface

## Database Schema

### Products Table
- `id`: Primary key
- `name`: Product type (bracelet, keychain, bookmark)
- `dimensions`: JSON with canvas coordinates and sizing

### Stamps Table
- `id`: Primary key
- `name`: Stamp display name
- `image_path`: Path to stamp image
- `type`: Size category (small, large)

### Orders Table
- `id`: Primary key
- `student_name`: Customer name
- `product_id`: Foreign key to products
- `size`: Product size (for bracelets)
- `text_characters`: JSON array of 8 characters
- `selected_stamps`: JSON array of stamp data
- `preview_image_url`: Generated preview image
- `status`: Order status (pending, completed)

## API Endpoints

### Student Routes
- `GET /` - Product selection page
- `GET /order/{product}` - Order form for specific product
- `POST /order/submit` - Submit new order
- `GET /order/confirmation/{order}` - Order confirmation page

### Admin Routes
- `GET /admin/dashboard` - Admin dashboard
- `GET /admin/orders` - All orders list
- `GET /admin/orders/{order}` - Order details
- `POST /admin/orders/{order}/complete` - Mark order complete

### API Routes
- `GET /api/orders` - Get pending orders (JSON)
- `GET /api/stamps` - Get all stamps (JSON)
- `GET /api/products` - Get all products (JSON)
- `POST /api/preview` - Generate preview image

## Mobile Optimization

### Touch Interactions
- 44px minimum touch targets
- Swipe gestures for navigation
- Touch-friendly form controls
- Optimized canvas interactions

### Responsive Design
- Mobile-first approach
- 4x2 grid for character inputs
- Collapsible stamp galleries
- Adaptive canvas sizing

### Performance
- Debounced canvas updates
- Image compression for previews
- Efficient database queries
- Optimized asset loading

## Security Features

- CSRF protection on all forms
- Input validation and sanitization
- Rate limiting on order submissions
- Admin authentication required
- 24-hour duplicate prevention

## Development

### Running Tests
```bash
php artisan test
```

### Code Style
```bash
php artisan pint
```

### Asset Compilation
```bash
# Development
npm run dev

# Production
npm run build
```

## Deployment

### Production Requirements
- PHP 8.2+
- MySQL 5.7+
- Web server (Apache/Nginx)
- SSL certificate
- Firebase project (for notifications)

### Environment Variables
```env
APP_ENV=production
APP_DEBUG=false
DB_CONNECTION=mysql
FIREBASE_CREDENTIALS_PATH=storage/app/firebase-service-account.json
```

## Support

For technical support or questions about the system, please contact the development team.

## License

This project is proprietary software developed for Lindsay Leather. All rights reserved.