IATAMA Water Treatment Site Assistant

AI assistant for working with the IATAMA water treatment company website codebase.

What This Skill Does

This skill provides comprehensive guidance for developing and maintaining IATAMA's business website - a Bootstrap-based static site with an integrated quotation system for water treatment products. The assistant understands the product catalog structure, PDF generation workflow, and Spanish-language business requirements.

Project Context

IATAMA is a water treatment and environmental management company based in Mérida, Yucatán, Mexico. Their website features:

Instructions for AI Agent

1. Understanding the Technology Stack

When working with this codebase, recognize:

2. Core Architecture Components

#### Product Catalog System

```javascript

{

id: number, // Unique identifier

name: string, // Product name

description: string, // Detailed description

category: string, // Must match category filter keys

price: number, // Price in MXN

image: string // Path to product image

}

```

#### Quotation System

- Shopping cart state management (in-memory, no persistence)

- Category filtering and product display

- Quantity adjustment

- PDF generation with company branding

- Client-side download (no server required)

#### Product Categories

Nine hardcoded categories (must match between HTML and JavaScript):

3. Development Workflows

#### Local Development Server

To test the site locally:

```bash

Option 1: Python HTTP server

python3 -m http.server 8000

Option 2: Node.js HTTP server

npx http-server -p 8000

```

Access at `http://localhost:8000`

#### Adding New Products

1. Open `assets/js/products-data.js`

2. Add product object to `iatamaProducts` array:

```javascript

{

id: 71, // Increment from last ID

name: 'Nombre del Producto',

description: 'Descripción detallada',

category: 'quimicos', // Must match existing category

price: 500,

image: 'assets/img/products/71-nombre-producto.jpg'

}

```

3. Ensure product image exists at specified path

4. Image naming convention: `{id}-{slug}.jpg`

#### Modifying PDF Generation

PDF generation logic is in `presupuestar.js` (lines 300-550):

To modify PDF layout:

1. Locate `createPDFDocument()` function

2. Adjust jsPDF styling, autoTable configuration, or content sections

3. Test download functionality after changes

#### Toast Notification System

Bootstrap toast system for user feedback:

Creates toast container dynamically if not present. Maintain consistency when adding new user interactions.

4. Important Constraints

#### Language Requirements

- Presupuestar = Create quotation

- Cotización = Quote

- Carrito = Shopping cart

- Descargar = Download

- Enviar = Send

#### Static-Only Architecture

#### Category Synchronization

Product categories must match between:

1. HTML filter buttons (`index.html` lines 765-795)

2. Product data category values (`products-data.js`)

3. JavaScript filtering logic (`presupuestar.js`)

Breaking this synchronization will cause filtering to fail.

5. File Structure Reference

**Key Files**:

**Product Images**:

**Deployment**:

6. Common Tasks

#### Update Product Pricing

1. Open `assets/js/products-data.js`

2. Find product by ID

3. Update `price` field (values in MXN)

4. Changes reflect immediately (no build required)

#### Add New Product Category

1. Add category button in `index.html` (around line 765-795)

2. Use matching category key in product data

3. Ensure filtering logic handles new category

4. Update this documentation with new category

#### Customize PDF Branding

1. Open `assets/js/presupuestar.js`

2. Locate `createPDFDocument()` function

3. Modify colors, fonts, header/footer content

4. Test PDF download with sample products

#### Fix Broken Product Images

1. Check image path in `products-data.js` matches actual file location

2. Ensure image exists in `assets/img/products/`

3. Verify naming convention: `{id}-{slug}.jpg`

4. Check for typos in file extension or path

Examples

Example 1: Adding a New Chemical Product

```javascript

// In assets/js/products-data.js

{

id: 71,

name: 'Cloro Granular Premium 5kg',

description: 'Cloro granular de alta pureza para tratamiento de agua. Elimina bacterias y microorganismos. Ideal para sistemas residenciales y comerciales.',

category: 'quimicos',

price: 450,

image: 'assets/img/products/71-cloro-granular.jpg'

}

```

Example 2: Modifying PDF Header Color

```javascript

// In assets/js/presupuestar.js, within createPDFDocument()

doc.setFillColor(41, 128, 185); // Change from default IATAMA blue

doc.rect(0, 0, 210, 40, 'F'); // Header background

```

Example 3: Adding a Success Toast

```javascript

// In presupuestar.js

showToast('Producto agregado correctamente', 'success');

```

Notes