# Notification Templates Error Debugging Guide

## Issue Description

**Error:** `Cannot read properties of undefined (reading 'map')`
**Location:** `pages/notification/templates/index.vue` line 399
**Cause:** The frontend is trying to call `.map()` on `response.data.templates` but this property is undefined.

## Root Cause Analysis

The error occurs because the API response doesn't have the expected structure. The frontend expects:
```javascript
{
  success: true,
  data: {
    templates: [...], // Array of templates
    pagination: {...}
  }
}
```

But the API might be returning:
- An error response
- A response with missing `data` property
- A response with missing `data.templates` property
- An empty or malformed response

## Potential Causes

1. **Database Issues:**
   - Database connection failure
   - Missing `notification_templates` table
   - Table exists but has no data

2. **Authentication Issues:**
   - User not authenticated
   - Authentication middleware failing
   - Missing user context in API

3. **API Implementation Issues:**
   - Error in API endpoint logic
   - Prisma query failure
   - Unhandled exceptions

## Debugging Steps

### Step 1: Test Database Connection and Data

Run the database test script:
```bash
npm run test-api
```

This will:
- Test database connection
- Check if `notification_templates` table exists
- Show current data count
- Simulate the API logic
- Display the expected response structure

### Step 2: Add Sample Data

If the table is empty, seed it with sample data:
```bash
npm run seed-templates
```

This will add 4 sample notification templates for testing.

### Step 3: Run Both Tests

Run the combined debugging command:
```bash
npm run debug-templates
```

This runs both the test and seeding scripts.

### Step 4: Check Authentication

Ensure you are logged in when testing the frontend. The API requires authentication.

## Frontend Fixes Applied

The frontend code has been updated with better error handling:

1. **Defensive Programming:** Check if response structure exists before accessing
2. **Better Error Messages:** More specific error messages based on response type
3. **Empty State Handling:** Properly handle empty arrays
4. **Loading State Management:** Consistent loading state management

## API Response Structure

The API should return:
```javascript
{
  success: true,
  data: {
    templates: [
      {
        id: "uuid",
        title: "Template Name",
        value: "template_value",
        description: "Description",
        subject: "Email Subject",
        category: "category",
        channels: ["email", "push"],
        status: "Active",
        version: "1.0",
        // ... other fields
      }
    ],
    pagination: {
      page: 1,
      limit: 10,
      totalCount: 5,
      totalPages: 1,
      hasNextPage: false,
      hasPrevPage: false
    }
  }
}
```

## Quick Fix Summary

1. **Frontend:** Added robust error handling to prevent crashes
2. **Testing:** Created scripts to test database and API logic
3. **Sample Data:** Created seeding script for testing
4. **Debugging:** Added comprehensive logging and error reporting

## Next Steps

1. Run `npm run debug-templates` to diagnose the issue
2. Check the console output for specific errors
3. If database connection fails, check your `DATABASE_URL` environment variable
4. If authentication fails, ensure you're logged in
5. If the API works in testing but fails in the browser, check browser console for network errors

## Files Modified

- `pages/notification/templates/index.vue` - Added error handling
- `scripts/seed-templates.js` - Sample data seeding
- `scripts/test-api.js` - Database and API testing
- `package.json` - Added debugging scripts

## Environment Requirements

- Database server running
- Valid `DATABASE_URL` in environment
- Prisma client generated (`npx prisma generate`)
- Database migrations applied

## Support

If the issue persists after following these steps, check:
1. Database server status
2. Environment variables
3. Prisma schema sync with database
4. Network connectivity
5. Authentication middleware configuration