Event Organizer Web App - 3 Tier

by oktaviardi pratama

HTML

<h1>Event Organizer Web App - 3 Tier Plan</h1>

<table>
  <thead>
    <tr>
      <th>Tier</th>
      <th>Target</th>
      <th>Fitur</th>
      <th>Estimasi Timeline</th>
      <th>Total Jam Kerja</th>
      <th>Estimasi Biaya</th>
      <th>Trade-off</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Tier">Lite (Minimal / Core)</td>
      <td data-label="Target">Organisasi kecil, fokus manajemen proyek & keuangan dasar</td>
      <td data-label="Fitur">
        <ul>
          <li>Dashboard sederhana (Ringkasan proyek & keuangan)</li>
          <li>Project Management CRUD dasar (status proyek upcoming/ongoing/completed)</li>
          <li>Financial Module sederhana (pendapatan & pengeluaran)</li>
          <li>Member/Staff CRUD dasar</li>
          <li>Asset Management hanya daftar & status, tanpa transaksi sewa/beli otomatis</li>
          <li>Reporting sederhana (export CSV, laporan per proyek)</li>
          <li>Notifikasi basic: proyek mendekati deadline</li>
        </ul>
      </td>
      <td data-label="Timeline">15–20 hari (~3–4 minggu)</td>
      <td data-label="Jam Kerja">~120 jam</td>
      <td data-label="Biaya">$3,600 (~Rp 61 juta)</td>
      <td data-label="Trade-off">
        <ul>
          <li>Fitur terbatas, sebagian manual (asset & transaksi)</li>
          <li>Reporting & analitik basic</li>
          <li>Tidak ada integrasi pembayaran / PDF otomatis</li>
        </ul>
      </td>
    </tr>

    <tr>
      <td data-label="Tier">Standard (Balanced)</td>
      <td data-label="Target">Organisasi menengah, workflow lengkap tapi sederhana</td>
      <td data-label="Fitur">
        <ul>
          <li>Semua fitur Lite +</li>
          <li>Asset Management lengkap: sewa & beli, riwayat penggunaan per proyek</li>
          <li>Financial Module lebih lengkap: laporan per bulan, ekspor PDF</li>
          <li>Member management dengan role & permission</li>
          <li>Reporting & Analytics...

CSS

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background: #f9f9f9;
  }

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  th, td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    vertical-align: top;
  }

  th {
    background-color: #4CAF50;
    color: white;
    text-align: left;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  td ul {
    padding-left: 20px;
    margin: 0;
  }

  td ul li {
    margin-bottom: 5px;
  }

  @media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    th {
      position: sticky;
      top: 0;
      background: #4CAF50;
      color: white;
      z-index: 2;
    }
    td {
      border: none;
      padding: 10px 0;
    }
    td::before {
      content: attr(data-label);
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }
  }