# Identifikasi Pasien Field Restructure

## Overview
The "Identifikasi Pasien" (Patient Identification) field has been restructured from a single textarea to a comprehensive 5-field form to capture patient information in a more organized manner.

## Changes Made

### 1. HTML Form Structure (index.html)
**Location:** Lines 1945-1975

Changed from:
```html
<textarea id="portfolio-identifikasi" name="identifikasi_pasien" required 
    placeholder="Nama, nomor rekam medis, usia, jenis kelamin, dll" rows="3"></textarea>
```

Changed to:
```html
<div class="form-group">
    <label>Identifikasi Pasien <span class="required">*</span></label>
    <div class="form-row">
        <div class="form-column">
            <label for="portfolio-nama">Nama Pasien</label>
            <input type="text" id="portfolio-nama" name="nama_pasien" required>
        </div>
        <div class="form-column">
            <label for="portfolio-nomor-rm">Nomor RM</label>
            <input type="text" id="portfolio-nomor-rm" name="nomor_rm" required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-column">
            <label for="portfolio-umur">Umur</label>
            <input type="number" id="portfolio-umur" name="umur" min="0" max="120">
        </div>
        <div class="form-column">
            <label for="portfolio-paritas">Paritas</label>
            <input type="text" id="portfolio-paritas" name="paritas">
        </div>
    </div>
    <div class="form-row">
        <div class="form-column">
            <label for="portfolio-alamat">Alamat</label>
            <textarea id="portfolio-alamat" name="alamat" rows="2"></textarea>
        </div>
    </div>
</div>
```

### 2. JavaScript Form Handler (js/portfolio.js)

#### Updated `loadPortfolioData()` Function
**Location:** Lines 96-124

**Changes:**
- Now attempts to load individual fields (nama_pasien, nomor_rm, umur, paritas, alamat) from API response
- Falls back to identifikasi_pasien field if individual fields aren't available (backward compatibility)
- Properly populates all 5 input fields when editing existing portfolios

#### Updated `savePortfolio()` Function
**Location:** Lines 523-575

**Changes:**
- Validates that required fields (Nama Pasien and Nomor RM) are filled
- Concatenates all 5 fields into a formatted string for database storage
- Format: `"Nama: {nama}, No. RM: {nomor_rm}, Umur: {umur}, Paritas: {paritas}, Alamat: {alamat}"`
- Sends both the concatenated string (for database) and individual fields to API
- Proper error handling with user feedback

#### Updated `renderPortfolioList()` Function
**Location:** Lines 410-443

**Changes:**
- Intelligently parses the concatenated identifikasi_pasien string
- Extracts Patient Name and Medical Record Number using regex patterns
- Displays formatted output: `"Nama (Nomor RM)"` in the portfolio list table
- Falls back to truncated text if parsing fails (backward compatibility for old entries)

### 3. Data Storage Strategy

**Database Format:**
The database field `identifikasi_pasien` stores a concatenated string:
```
Nama: John Doe, No. RM: 12345, Umur: 30, Paritas: G2P1, Alamat: Jakarta
```

**Processing:**
1. **Form Input**: User fills 5 separate fields
2. **Save**: JavaScript concatenates into single formatted string
3. **Database**: Stored as single LONGTEXT field (no schema changes needed)
4. **Retrieval**: JavaScript parses string to extract fields for display/editing

### 4. Field Specifications

| Field | Type | Required | Validation | Example |
|-------|------|----------|-----------|---------|
| Nama Pasien | Text | ✓ Yes | String | John Doe |
| Nomor RM | Text | ✓ Yes | String | RM-2024-001 |
| Umur | Number | ✗ No | 0-120 years | 35 |
| Paritas | Text | ✗ No | String (obstetric notation) | G2P1A0 |
| Alamat | Textarea | ✗ No | Text | Jl. Merdeka No. 1 |

### 5. Backward Compatibility

✓ **Old entries** with single-field identifikasi_pasien still load and display correctly
✓ **Parsing logic** uses regex to extract Available fields
✓ **Form defaults** gracefully handle missing fields when editing old entries

### 6. Benefits

1. **Better Data Organization**: Separates single field into 5 distinct, labeled inputs
2. **Improved Validation**: Can validate each field independently (e.g., age 0-120)
3. **Enhanced User Experience**: Clear, organized form layout with helpful placeholders
4. **Responsive Design**: 2-column grid layout adapts to mobile screens
5. **Easier Searching**: Future database queries can target specific fields
6. **Medical Context**: Paritas field specifically captures obstetric status for gynecology

### 7. Testing Checklist

- [ ] Form displays correctly on desktop (1920x1080)
- [ ] Form displays correctly on tablet (768x1024)
- [ ] Form displays correctly on mobile (375x667)
- [ ] New portfolios save with all 5 fields properly formatted
- [ ] Old portfolios load and display in list correctly
- [ ] Required field validation works (Nama and Nomor RM)
- [ ] Age field only accepts 0-120
- [ ] Form can be submitted successfully
- [ ] Submitted portfolios appear in list with patient name + RM displayed
- [ ] Portfolio can be edited and fields load correctly

### 8. Files Modified

1. **index.html** - HTML form structure updated
2. **js/portfolio.js** - JavaScript form handling updated:
   - loadPortfolioData() - Field population on edit
   - savePortfolio() - Field serialization on save
   - renderPortfolioList() - Display parsing

### 9. API Compatibility

- **No changes to php/portfolio.php** required
- PHP API continues to accept single `identifikasi_pasien` field
- Individual fields sent by JavaScript are gracefully ignored
- Database schema remains unchanged (using single LONGTEXT column)

### 10. Future Enhancements

Potential future improvements:
1. Extend database schema to store fields separately for better querying
2. Add field-level validation rules specific to medical context
3. Implement search/filter by patient name in portfolio list
4. Add patient history lookup if connected to patient management system
5. Generate PDF reports with properly formatted patient identification
