SRT Form System Developer

This skill provides expert guidance for developing and maintaining the SRT (Serviços Residenciais Terapêuticos) form management system - a Brazilian Portuguese web application for managing Therapeutic Residential Services in Rio de Janeiro state.

Project Context

This is a pure vanilla JavaScript web application with no build process. It uses:

Architecture

Core Files Structure

Firestore Collections

Step-by-Step Instructions

When Adding New Form Fields

1. **Read the admin panel configuration code** in `admin.html` to understand the field configuration system

2. **Navigate to the dynamic field generation** logic in `js/app.js`

3. **Add new field definitions** to the Firestore `config` collection following this pattern:

- Supported types: text, number, date, select, multiselect, textarea, tel, email

- Include field name, label (in Portuguese), type, required status, and order

4. **Update validation logic** in `js/utils.js` if custom validation is needed

5. **Test the field** appears correctly in the multi-step form

6. **Verify data saves** to Firestore and appears in admin panel

7. **Update email template** in `js/email.js` if the field should appear in notifications

When Modifying the Admin Panel

1. **Read `admin.js`** to understand current data display logic

2. **Locate the card rendering function** that displays SRT entries

3. **Make changes** to the HTML structure or data mapping

4. **Test sorting and filtering** still work correctly

5. **Verify Excel export** includes your changes (check XLSX generation)

6. **Test Chart.js visualizations** if modifying occupancy-related fields

When Working with Authentication

1. **Check Firebase Auth configuration** in the relevant HTML file

2. **Verify role-based access** uses pattern: `userDoc.data().role === 'admin'`

3. **Ensure protected routes** redirect to login if not authenticated

4. **Test logout flow** clears session properly

5. **Verify user management** in `usuario.html` allows admin to manage roles

When Updating Email Notifications

1. **Read `js/email.js`** to understand EmailJS integration

2. **Locate template ID** `template_mc5kdip` - this must match EmailJS dashboard

3. **Format data into HTML tables** for email body following existing patterns

4. **Test email sending** with real form submission

5. **Verify all required fields** appear in the email

When Debugging

1. **Open browser DevTools** - this is a client-side only application

2. **Check Console** for Firebase errors or validation failures

3. **Inspect Network tab** for Firestore read/write operations

4. **Verify localStorage** for theme preferences and session data

5. **Check Firestore rules** if write operations fail

6. **Validate EmailJS service ID** and template ID match configuration

When Styling or Adding UI Features

1. **Use Tailwind CSS classes** via CDN - no custom CSS compilation needed

2. **Follow existing patterns** for:

- Toast notifications (temporary success/error messages)

- Loading overlays (animated dots during async operations)

- Form validation feedback (shake animation on errors)

- Dark mode toggle (stored in localStorage)

3. **Maintain responsive design** using Tailwind breakpoints (mobile-first)

4. **Test animations** using AOS (Animate On Scroll) library

When Setting Up Locally

1. **Serve static files** using any HTTP server:

```bash

python -m http.server 8000

# or

npx http-server

# or use VS Code Live Server extension

```

2. **No build process required** - all dependencies loaded via CDN

3. **Configure Firebase** credentials if deploying to new project

4. **Set up EmailJS** account and update service/template IDs

Important Constraints

Security Considerations

Common Patterns to Follow

1. **Form validation**: Always provide visual feedback with shake animations on errors

2. **Loading states**: Show overlay with animated dots during async operations

3. **Toast notifications**: Use temporary messages for user feedback

4. **Dark mode**: Respect user's theme preference stored in localStorage

5. **Excel export**: Use SheetJS to generate XLSX files with naming pattern `Relatorio_SRT_DD-MM-YYYY.xlsx`

6. **Field configuration**: Support drag-and-drop reordering via Sortable.js in admin panel