# Adding New Fields to Registered Members

This guide walks through every layer you need to touch when adding a new field
to `RegisteredMember` — from the database all the way through CSV import and
export.

---

## Example: adding a field called `phone_number`

### 1. Backend — Model (`backend/apps/attendance/models.py`)

Add the field to the `RegisteredMember` class:

```python
phone_number = models.CharField(max_length=30, blank=True)
```

Then run migrations:

```bash
cd backend
source venv/bin/activate
python manage.py makemigrations attendance
python manage.py migrate
```

---

### 2. Backend — Serializer (`backend/apps/attendance/serializers.py`)

Add the field name to the `fields` list inside `RegisteredMemberSerializer`:

```python
fields = [
    'id', 'registration_code', 'email', 'full_name',
    'event_category', 'event_category_name', 'status', 'payment_status',
    'package_name', 'package_description', 'activity_price',
    'phone_number',                         # ← add here
    'has_attended', 'has_attended_event', 'is_paid', 'created_at', 'updated_at',
]
```

---

### 3. Backend — CSV Import via Django Admin (`backend/apps/attendance/admin.py`)

Inside `RegisteredMemberAdmin.import_csv`, add the field to the `defaults`
dictionary. The key is the column header in the CSV file:

```python
defaults = {
    ...
    'phone_number': row.get('Phone Number', '').strip(),   # ← add here
}
```

Also update the `export_as_csv` action in the same file:

```python
writer.writerow([..., 'Phone Number'])          # header
writer.writerow([..., obj.phone_number])        # value
```

---

### 4. Backend — CSV Import via API (`backend/apps/attendance/views.py`)

Inside `UploadCSVView.post`, the `defaults` dictionary is built the same way:

```python
defaults = {
    ...
    'phone_number': row.get('Phone Number', '').strip(),   # ← add here
}
```

---

### 5. Frontend — Attendance List interface (`frontend/app/(admin)/attendance/page.tsx`)

Add the field to the `Member` TypeScript interface:

```typescript
interface Member {
  ...
  phone_number: string;   // ← add here
}
```

---

### 6. Frontend — Export CSV (`frontend/app/(admin)/attendance/page.tsx`)

Inside `handleExport`, add to **both** `headers` and `rows` in the same
position:

```typescript
const headers = [
  ...
  'Phone Number',          // ← add column header
];

const rows = members.map(m => [
  ...
  m.phone_number,          // ← add matching value
]);
```

---

### 7. (Optional) Frontend — Display in table

Add a `<th>` and `<td>` to the members table in the same file if you want to
see the field on screen.

---

## Current field inventory

| CSV Column           | Model field          | Serializer field       |
|----------------------|----------------------|------------------------|
| Registration Code    | `registration_code`  | `registration_code`    |
| Full Name            | `full_name`          | `full_name`            |
| Email                | `email`              | `email`                |
| Status               | `status`             | `status`               |
| Payment Status       | `payment_status`     | `payment_status`       |
| Package Name         | `package_name`       | `package_name`         |
| Package Description  | `package_description`| `package_description`  |
| Activity Price       | `activity_price`     | `activity_price`       |
| *(auto from FK)*     | `event_category`     | `event_category_name`  |

---

## CSV import column header format

Column headers in the CSV file are **title-cased with spaces** (e.g.
`Phone Number`, `Full Name`).  
They are read with `row.get('Column Header', '').strip()` — case-sensitive.  
Make sure the header in the CSV matches exactly what is in `row.get(...)`.