# Portfolio Data Table Implementation

## Deskripsi
Implementasi menambahkan tabel ringkasan data pasien di bagian bawah setiap submenu portfolio (Kamar Operasi, Poliklinik, Rawat Inap/Bangsal) untuk menampilkan semua data kolom inputan pasien.

## Status Implementasi

### ✅ Selesai
1. **Semester I - Semua submenu:**
   - Kamar Operasi
   - Poliklinik
   - Rawat Inap / Bangsal

2. **Semester II - Kamar Operasi (DONE)**
   - Structure sudah sesuai dengan pattern baru

### ⏳ Dalam Progress
- **Semester II**: Poliklinik, Rawat Inap (needs final content replacement)
- **Semester III**: Kamar Operasi, Poliklinik, Rawat Inap
- **Semester IV**: Kamar Operasi, Poliklinik, Rawat Inap

## Struktur HTML Baru

Setiap section portfolio sekarang memiliki structure:

```html
<section id="fertilitas-sem{n}-portofolio-{type}" class="content-section">
    <div class="page-header">
        <h1>Portofolio - {Name} (Semester {n})</h1>
    </div>
    
    <!-- Container untuk form -->
    <div class="content-col" id="content-fertilitas-sem{n}-{type}">
        <!-- Form akan ditampilkan dari portfolio.js -->
    </div>
    
    <!-- Tabel ringkasan data pasien -->
    <div class="content-col" style="margin-top: 40px;">
        <h3 style="border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px;">
            📊 Ringkasan Data Pasien
        </h3>
        <div class="table-responsive">
            <table class="data-table portfolio-patients-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Tanggal</th>
                        <th>Nama Pasien</th>
                        <th>No. RM</th>
                        <th>Umur</th>
                        <th>Paritas</th>
                        <th>Diagnosis</th>
                        <th>Kompetensi</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="portfolio-data-fertilitas-sem{n}-{type}">
                    <tr>
                        <td colspan="9" style="text-align: center; padding: 20px; color: #999;">
                            Tidak ada data
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
```

## JavaScript Functions

### handlePortfolioSectionChange()
Dipanggil saat hash URL berubah untuk mendeteksi portfolio subsection mana yang sedang dibuka.

### loadPortfolioDataForTable(divisi, semester, settingType)
Melakukan fetch ke `php/portfolio.php` dengan query parameter:
- `action=list`
- `divisi` - Nama divisi (e.g., 'fertilitas')
- `semester` - Nomor semester (1-4)
- `setting_type` - 'OK', 'Poliklinik', atau 'Rawat_Inap'

### renderPortfolioDataInTable(items, tbody)
Mengisi tabel tbody dengan data pasien dari API sesuai format tabel.

## Mapping SettingType

| URL Parameter | Database Value |
|---------------|----------------|
| kamaroperasi | OK |
| poliklinik | Poliklinik |
| rawatinap | Rawat_Inap |

## Data yang Ditampilkan di Tabel

Tabel menampilkan kolom-kolom berikut dari data pasien:
- **No**: Nomor urut (1, 2, 3, ...)
- **Tanggal**: Format: DD MMM YYYY (e.g., '25 Feb 2026')
- **Nama Pasien**: Dari field `nama_pasien`
- **No. RM**: Dari field `nomor_rm`
- **Umur**: Dari field `umur`  
- **Paritas**: Dari field `paritas`
- **Diagnosis**: Substring pertama 35 karakter (jika > 35, tampilkan '...')
- **Kompetensi**: Dari field `kompetenszi`
- **Status**: Badge dengan status (Draft, Menunggu Verifikasi, Terverifikasi)

## CSS Classes

- `.portfolio-patients-table` - Main table styling
- `.portfolio-data-section` - Container styling dengan margin dan border-top
- `.data-table` - Generic table styling (dari existing CSS)
- `.status-badge` - Badge styling untuk status

## Cara Menyelesaikan Update Semester II, III, IV

Untuk setiap section yang belum diupdate, replace struktur form dengan struktur baru:

### Pattern Lama (HAPUS):
```html
<div class="content-col">
    <form class="portfolio-form">
        <!-- Input fields lama -->
    </form>
</div>
```

### Pattern Baru (GANTI DENGAN):
```html
<div class="content-col" id="content-{divisi}-sem{n}-{type}">
    <!-- Form akan ditampilkan dari portfolio.js -->
</div>
<!-- Data Table -->
<div class="content-col" style="margin-top: 40px;">
    <h3 style="border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px;">📊 Ringkasan Data Pasien</h3>
    <div class="table-responsive">
        <table class="data-table portfolio-patients-table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Tanggal</th>
                    <th>Nama Pasien</th>
                    <th>No. RM</th>
                    <th>Umur</th>
                    <th>Paritas</th>
                    <th>Diagnosis</th>
                    <th>Kompetensi</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody id="portfolio-data-{divisi}-sem{n}-{type}">
                <tr>
                    <td colspan="9" style="text-align: center; padding: 20px; color: #999;">
                        Tidak ada data
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
```

### Daftar Sections yang Perlu Diupdate:

#### Semester II
- [ ] `fertilitas-sem2-portofolio-poliklinik` → ID: `portfolio-data-fertilitas-sem2-poliklinik`
- [ ] `fertilitas-sem2-portofolio-rawatinap` → ID: `portfolio-data-fertilitas-sem2-rawatinap`

#### Semester III
- [ ] `fertilitas-sem3-portofolio-kamaroperasi` → ID: `portfolio-data-fertilitas-sem3-kamaroperasi`
- [ ] `fertilitas-sem3-portofolio-poliklinik` → ID: `portfolio-data-fertilitas-sem3-poliklinik`
- [ ] `fertilitas-sem3-portofolio-rawatinap` → ID: `portfolio-data-fertilitas-sem3-rawatinap`

#### Semester IV
- [ ] `fertilitas-sem4-portofolio-kamaroperasi` → ID: `portfolio-data-fertilitas-sem4-kamaroperasi`
- [ ] `fertilitas-sem4-portofolio-poliklinik` → ID: `portfolio-data-fertilitas-sem4-poliklinik`
- [ ] `fertilitas-sem4-portofolio-rawatinap` → ID: `portfolio-data-fertilitas-sem4-rawatinap`

Total: 8 sections yang masih perlu diupdate.

## Testing

1. Klik menu Divisi → Semester → Portofolio → Submenu (Kamar Operasi/Poliklinik/Rawat Inap)
2. Tabel harus muncul di bagian bawah dengan heading "📊 Ringkasan Data Pasien"
3. Data akan di-load dari API berdasarkan divisi, semester, dan setting_type
4. Jika tidak ada data, tabel menampilkan "Tidak ada data"
5. Format tabel harus responsive dan match dengan styling yang ada

## File yang Diubah

1. `/index.html` - Ditambahkan 4 section (Semester I penuh + awal Semester II)
2. `/js/portfolio.js` - Ditambahkan 4 fungsi baru
3. `/css/style.css` - Ditambahkan CSS styling untuk tabel

---

Created: February 25, 2026  
Status: Partially Complete  
Remaining: 8 sections to update
