Admin

name	type	size	perms	modified	actions
[parent directory]
atur-html.tsx	file	682 B	0664	2026-09-14 16:58:56	edit
auto-refresh.tsx	file	488 B	0664	2026-09-14 09:54:53	edit
bantuan-wa.tsx	file	5,626 B	0664	2026-09-15 11:04:26	edit
catat-kunjungan.tsx	file	1,135 B	0664	2026-09-14 22:43:26	edit
daftar-sw.tsx	file	755 B	0664	2026-09-14 09:54:53	edit
grafik.tsx	file	9,347 B	0664	2026-09-15 15:40:29	edit
ingat-verifikasi.tsx	file	1,541 B	0664	2026-09-15 03:45:44	edit
instagram.tsx	file	1,362 B	0664	2026-09-14 12:54:39	edit
lang-switch.tsx	file	3,243 B	0664	2026-09-15 04:42:58	edit
logo-paths.ts	file	7,779 B	0664	2026-09-14 10:04:38	edit
logo.tsx	file	3,155 B	0664	2026-09-14 10:04:38	edit
muncul.tsx	file	1,950 B	0664	2026-09-14 09:54:53	edit
page-header.tsx	file	2,337 B	0664	2026-09-15 03:06:01	edit
pilih-acara.tsx	file	1,888 B	0664	2026-09-14 16:58:56	edit
pilih-wilayah.tsx	file	8,792 B	0664	2026-09-15 10:10:07	edit
pilih.tsx	file	2,514 B	0664	2026-09-14 13:14:15	edit
pilihan.tsx	file	1,097 B	0664	2026-09-14 12:55:53	edit
salin-teks.tsx	file	1,021 B	0664	2026-09-14 16:58:56	edit
staff-nav.tsx	file	1,920 B	0664	2026-09-15 11:04:26	edit
tab-panel.tsx	file	1,208 B	0664	2026-09-14 22:43:26	edit
tata-tertib.tsx	file	4,633 B	0664	2026-09-14 15:56:48	edit
tombol-grup-wa.tsx	file	1,393 B	0664	2026-09-15 08:29:24	edit

editing: pilih-wilayah.tsx

"use client";

import { useMemo, useState } from "react";
import { JABODETABEK, PROVINSI, PULAU, type KodePulau } from "@/lib/wilayah/data";
import { t, type Lang } from "@/lib/i18n/dict";

/*
 * Where someone lives, or where they are from, picked step by step instead of typed.
 *
 * Typed answers came back as "Pasar Minggu", "pasar minggu", "Ps. Minggu" and
 * "Jaksel": four spellings of one place, and a dashboard that cannot count any of
 * them. The picker writes one official name per place into the same hidden field the
 * text box used, so the server, the CSV and the charts keep reading `domisili` and
 * `asal_daerah` exactly as before.
 *
 * Where you live — Jabodetabek first, because that is where most students are:
 *   Jabodetabek → city/regency → district (kecamatan)   "Pasar Minggu, Kota Jakarta Selatan"
 *   Elsewhere on Java → province                         "Jawa Tengah"
 *   Outside Java → island → province                     "Sulawesi Selatan"
 *   Other → typed                                        whatever they write
 *
 * Home region — island → province → city/regency         "Kab. Garut, Jawa Barat"
 *   Other → typed (abroad, or anything the list lacks)
 */

type Jenis = "domisili" | "asal";

const PEMISAH = ", ";

function provinsiDariSimpan(nama: string) {
  return PROVINSI.find((p) => p.simpan === nama);
}

/** Reads a stored answer back into the steps, so editing a profile starts where it was left. */
function uraikan(jenis: Jenis, awal: string | null | undefined) {
  const v = (awal ?? "").trim();
  const kosong = { langkah1: "", langkah2: "", langkah3: "", lain: "" };
  if (!v) return kosong;

if (jenis === "domisili") {
    const [kec, kota] = v.split(PEMISAH);
    const j = JABODETABEK.find((k) => k.simpan === kota);
    if (j && kec && j.kecamatan.includes(kec)) return { langkah1: "jabodetabek", langkah2: j.kode, langkah3: kec, lain: "" };
    const p = provinsiDariSimpan(v);
    if (p && p.pulau === "jawa") return { langkah1: "jawa", langkah2: p.kode, langkah3: "", lain: "" };
    if (p) return { langkah1: "luar", langkah2: p.pulau, langkah3: p.kode, lain: "" };
    return { ...kosong, langkah1: "lain", lain: v };
  }

const bagian = v.split(PEMISAH);
  const p = provinsiDariSimpan(bagian[bagian.length - 1] ?? "");
  const kab = bagian.slice(0, -1).join(PEMISAH);
  if (p && p.kabkota.includes(kab)) return { langkah1: p.pulau, langkah2: p.kode, langkah3: kab, lain: "" };
  return { ...kosong, langkah1: "lain", lain: v };
}

export function PilihWilayah({
  lang,
  gender,
  jenis,
  name,
  label,
  awal,
}: {
  lang: Lang;
  gender?: string | null;
  jenis: Jenis;
  /** The form field the answer is submitted as — the name the old text box had. */
  name: string;
  label: string;
  awal?: string | null;
}) {
  const d = t(lang, gender).form.wilayah;
  const mula = useMemo(() => uraikan(jenis, awal), [jenis, awal]);
  const [langkah1, setLangkah1] = useState(mula.langkah1);
  const [langkah2, setLangkah2] = useState(mula.langkah2);
  const [langkah3, setLangkah3] = useState(mula.langkah3);
  const [lain, setLain] = useState(mula.lain);

const nama = (x: { en: string; ar: string }) => (lang === "ar" ? x.ar : x.en);
  const id = `wilayah-${name}`;

// The answer, or "" until every step is chosen: half an address is not an answer.
  let nilai = "";
  if (jenis === "domisili") {
    if (langkah1 === "jabodetabek") {
      const kota = JABODETABEK.find((k) => k.kode === langkah2);
      if (kota && langkah3) nilai = `${langkah3}${PEMISAH}${kota.simpan}`;
    } else if (langkah1 === "jawa") {
      nilai = PROVINSI.find((p) => p.kode === langkah2)?.simpan ?? "";
    } else if (langkah1 === "luar") {
      nilai = PROVINSI.find((p) => p.kode === langkah3)?.simpan ?? "";
    } else if (langkah1 === "lain") {
      nilai = lain.trim();
    }
  } else if (langkah1 === "lain") {
    nilai = lain.trim();
  } else {
    const p = PROVINSI.find((x) => x.kode === langkah2);
    if (p && langkah3) nilai = `${langkah3}${PEMISAH}${p.simpan}`;
  }

const ganti1 = (v: string) => {
    setLangkah1(v);
    setLangkah2("");
    setLangkah3("");
  };
  const ganti2 = (v: string) => {
    setLangkah2(v);
    setLangkah3("");
  };

const pulauLuarJawa = PULAU.filter((p) => p.kode !== "jawa");
  const provinsiPulau = (kode: string) => PROVINSI.filter((p) => p.pulau === (kode as KodePulau));

return (
    <fieldset className="flex flex-col gap-2">
      <legend className="label">{label}</legend>
      <input type="hidden" name={name} value={nilai} />

{jenis === "domisili" ? (
        <>
          <Pilih idPilih={`${id}-1`} value={langkah1} onChange={ganti1} kosong={d.pilih}>
            <option value="jabodetabek">{d.jabodetabek}</option>
            <option value="jawa">{d.jawaLain}</option>
            <option value="luar">{d.luarJawa}</option>
            <option value="lain">{d.lainnya}</option>
          </Pilih>

{langkah1 === "jabodetabek" ? (
            <Pilih idPilih={`${id}-2`} value={langkah2} onChange={ganti2} kosong={d.pilihKota}>
              {JABODETABEK.map((k) => (
                <option key={k.kode} value={k.kode}>
                  {nama(k)}
                </option>
              ))}
            </Pilih>
          ) : null}
          {langkah1 === "jabodetabek" && langkah2 ? (
            <Pilih idPilih={`${id}-3`} value={langkah3} onChange={setLangkah3} kosong={d.pilihKecamatan}>
              {JABODETABEK.find((k) => k.kode === langkah2)?.kecamatan.map((kec) => (
                <option key={kec} value={kec}>
                  {kec}
                </option>
              ))}
            </Pilih>
          ) : null}

{langkah1 === "jawa" ? (
            <Pilih idPilih={`${id}-2`} value={langkah2} onChange={ganti2} kosong={d.pilihProvinsi}>
              {/* Jakarta is Jabodetabek in full, so it is the first option, not this one. */}
              {provinsiPulau("jawa")
                .filter((p) => p.kode !== "31")
                .map((p) => (
                  <option key={p.kode} value={p.kode}>
                    {nama(p)}
                  </option>
                ))}
            </Pilih>
          ) : null}

{langkah1 === "luar" ? (
            <Pilih idPilih={`${id}-2`} value={langkah2} onChange={ganti2} kosong={d.pilihPulau}>
              {pulauLuarJawa.map((p) => (
                <option key={p.kode} value={p.kode}>
                  {nama(p)}
                </option>
              ))}
            </Pilih>
          ) : null}
          {langkah1 === "luar" && langkah2 ? (
            <Pilih idPilih={`${id}-3`} value={langkah3} onChange={setLangkah3} kosong={d.pilihProvinsi}>
              {provinsiPulau(langkah2).map((p) => (
                <option key={p.kode} value={p.kode}>
                  {nama(p)}
                </option>
              ))}
            </Pilih>
          ) : null}
        </>
      ) : (
        <>
          <Pilih idPilih={`${id}-1`} value={langkah1} onChange={ganti1} kosong={d.pilihPulau}>
            {PULAU.map((p) => (
              <option key={p.kode} value={p.kode}>
                {nama(p)}
              </option>
            ))}
            <option value="lain">{d.lainnya}</option>
          </Pilih>
          {langkah1 && langkah1 !== "lain" ? (
            <Pilih idPilih={`${id}-2`} value={langkah2} onChange={ganti2} kosong={d.pilihProvinsi}>
              {provinsiPulau(langkah1).map((p) => (
                <option key={p.kode} value={p.kode}>
                  {nama(p)}
                </option>
              ))}
            </Pilih>
          ) : null}
          {langkah1 && langkah1 !== "lain" && langkah2 ? (
            <Pilih idPilih={`${id}-3`} value={langkah3} onChange={setLangkah3} kosong={d.pilihKabKota}>
              {PROVINSI.find((p) => p.kode === langkah2)?.kabkota.map((k) => (
                <option key={k} value={k}>
                  {k}
                </option>
              ))}
            </Pilih>
          ) : null}
        </>
      )}

{langkah1 === "lain" ? (
        <input
          id={`${id}-lain`}
          value={lain}
          onChange={(e) => setLain(e.target.value.slice(0, 120))}
          placeholder={d.lainnyaPlaceholder}
          aria-label={d.lainnya}
          className="field"
        />
      ) : null}
    </fieldset>
  );
}

cancel

Admin

editing: pilih-wilayah.tsx

Deskripsi Program

Informasi Donatur

Gerakan Sehat Bermanfaat

Terkumpul

Target

Tentukan Nominal Sedekahmu

Gerakan Sehat Bermanfaat

⁠Masukkan Nominal Sedekah *

Terkumpul

Target