Fix All Text Input User & Admin, fix deskripsi detail break word

2025-09-29 14:06:04 +08:00
parent 2a26db6e17
commit dbd56a1493
319 changed files with 965 additions and 817 deletions
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx
@@ -67,7 +67,7 @@ function DetailBeasiswaPendaftar() {
            <Stack gap="sm">
              <Box>
                <Text fz="lg" fw="bold">Nama Lengkap</Text>
-                <Text fz="md" c="dimmed">{data.namaLengkap || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.namaLengkap || '-'}</Text>
              </Box>
              <Box>
                <Text fz="lg" fw="bold">NIK</Text>
@@ -75,7 +75,7 @@ function DetailBeasiswaPendaftar() {
              </Box>
              <Box>
                <Text fz="lg" fw="bold">Tempat Lahir</Text>
-                <Text fz="md" c="dimmed">{data.tempatLahir || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.tempatLahir || '-'}</Text>
              </Box>
              <Box>
                <Text fz="lg" fw="bold">Tanggal Lahir</Text>
@@ -97,11 +97,11 @@ function DetailBeasiswaPendaftar() {
              </Box>
              <Box>
                <Text fz="lg" fw="bold">Alamat KTP</Text>
-                <Text fz="md" c="dimmed">{data.alamatKTP || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamatKTP || '-'}</Text>
              </Box>
              <Box>
                <Text fz="lg" fw="bold">Alamat Domisili</Text>
-                <Text fz="md" c="dimmed">{data.alamatDomisili || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamatDomisili || '-'}</Text>
              </Box>
              <Box>
                <Text fz="lg" fw="bold">No HP</Text>
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
@@ -97,7 +97,7 @@ function EditProgramKreatifDesa() {
          <TextInput
            label="Judul"
            placeholder="Masukkan judul"
-            value={formData.judul}
+            defaultValue={formData.judul}
            onChange={(e) => {
              const value = e.target.value;
              setFormData(prev => ({
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
@@ -61,7 +61,7 @@ function CreateKeunggulanProgram() {
          <TextInput
            label="Judul"
            placeholder="Masukkan judul"
-            value={stateCreate.create.form.judul || ''}
+            defaultValue={stateCreate.create.form.judul || ''}
            onChange={(e) => (stateCreate.create.form.judul = e.target.value)}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
@@ -123,7 +123,7 @@ function EditFasilitasYangDisediakan() {
            <TextInput
              label={<Text fw="bold">Judul</Text>}
              placeholder="Masukkan judul fasilitas"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx
@@ -81,6 +81,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
@@ -125,7 +125,7 @@ function EditLokasiDanJadwal() {
            <TextInput
              label={<Text fw="bold">Judul</Text>}
              placeholder="Masukkan judul lokasi/jadwal"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx
@@ -71,6 +71,7 @@ function Page() {
                fw="bold"
                c={colors['blue-button']}
                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
              <Divider my="md" color={colors['blue-button']} />

@@ -81,6 +82,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
@@ -117,7 +117,7 @@ function EditTujuanProgram() {
            <TextInput
              label={<Text fw="bold">Judul</Text>}
              placeholder="Masukkan judul program"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx
@@ -93,6 +93,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
@@ -59,7 +59,7 @@ export default function EditDataPendidikan() {
          <TextInput
            label="Nama Pendidikan"
            placeholder="Contoh: SD, SMP, SMA"
-            value={stateDPM.update.form.name}
+            defaultValue={stateDPM.update.form.name}
            onChange={(e) => (stateDPM.update.form.name = e.currentTarget.value)}
            radius="md"
            required
@@ -68,7 +68,7 @@ export default function EditDataPendidikan() {
            label="Jumlah Peserta"
            type="number"
            placeholder="Masukkan jumlah peserta"
-            value={stateDPM.update.form.jumlah}
+            defaultValue={stateDPM.update.form.jumlah}
            onChange={(e) => (stateDPM.update.form.jumlah = e.currentTarget.value)}
            radius="md"
            required
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
@@ -51,7 +51,7 @@ export default function CreateDataPendidikan() {
          <TextInput
            label="Nama Pendidikan"
            placeholder="Contoh: SD, SMP, SMA"
-            value={stateDPM.create.form.name}
+            defaultValue={stateDPM.create.form.name}
            onChange={(e) => (stateDPM.create.form.name = e.currentTarget.value)}
            radius="md"
            required
@@ -59,7 +59,7 @@ export default function CreateDataPendidikan() {
          <TextInput
            label="Jumlah Peserta"
            placeholder="Masukkan jumlah peserta"
-            value={stateDPM.create.form.jumlah}
+            defaultValue={stateDPM.create.form.jumlah}
            onChange={(e) => (stateDPM.create.form.jumlah = e.currentTarget.value)}
            radius="md"
            type="number"
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
@@ -104,7 +104,7 @@ function EditJenjangPendidikan() {
          <TextInput
            label="Nama Jenjang Pendidikan"
            placeholder="Masukkan nama jenjang pendidikan"
-            value={formData.nama}
+            defaultValue={formData.nama}
            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
@@ -74,7 +74,7 @@ function CreateJenjangPendidikan() {
          <TextInput
            label="Nama Jenjang Pendidikan"
            placeholder="Masukkan nama jenjang pendidikan"
-            value={stateJenjang.create.form.nama || ''}
+            defaultValue={stateJenjang.create.form.nama || ''}
            onChange={(e) => (stateJenjang.create.form.nama = e.target.value)}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
@@ -95,7 +95,7 @@ export default function EditLembaga() {
          <TextInput
            label="Nama Lembaga"
            placeholder="Masukkan nama lembaga"
-            value={form.nama}
+            defaultValue={form.nama}
            onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
@@ -66,7 +66,7 @@ function CreateLembaga() {
      >
        <Stack gap="md">
          <TextInput
-            value={stateLembaga.create.form.nama}
+            defaultValue={stateLembaga.create.form.nama}
            onChange={(val) => {
              stateLembaga.create.form.nama = val.target.value;
            }}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
@@ -99,7 +99,7 @@ function EditPengajar() {
          <TextInput
            label="Nama Pengajar"
            placeholder="Masukkan nama pengajar"
-            value={formData.nama}
+            defaultValue={formData.nama}
            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx
@@ -73,7 +73,7 @@ function DetailPengajar() {

              <Box>
                <Text fz="lg" fw="bold">Lembaga</Text>
-                <Text fz="md" c="dimmed">{data.lembaga?.nama || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.lembaga?.nama || '-'}</Text>
              </Box>

              <Group gap="sm" mt="sm">
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
@@ -74,7 +74,7 @@ function CreatePengajar() {
          <TextInput
            label={<Text fw="bold" fz="sm">Nama</Text>}
            placeholder="Masukkan nama pengajar"
-            value={stateCreate.create.form.nama}
+            defaultValue={stateCreate.create.form.nama}
            onChange={(e) => (stateCreate.create.form.nama = e.target.value)}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
@@ -100,7 +100,7 @@ function EditSiswa() {
          <TextInput
            label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
            placeholder="Masukkan nama siswa"
-            value={formData.nama}
+            defaultValue={formData.nama}
            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx
@@ -75,7 +75,7 @@ function DetailSiswa() {

              <Box>
                <Text fz="lg" fw="bold">Lembaga</Text>
-                <Text fz="md" c="dimmed">{data?.lembaga?.nama || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data?.lembaga?.nama || '-'}</Text>
              </Box>

              <Group gap="sm">
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
@@ -67,7 +67,7 @@ function CreateSiswa() {
      >
        <Stack gap="md">
          <TextInput
-            value={stateCreate.create.form.nama}
+            defaultValue={stateCreate.create.form.nama}
            onChange={(val) => {
              stateCreate.create.form.nama = val.target.value;
            }}
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
@@ -117,7 +117,7 @@ function EditJenisProgramYangDiselenggarakan() {
            <TextInput
              label={<Text fz="sm" fw="bold">Judul</Text>}
              placeholder="Masukkan judul program"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx
@@ -83,6 +83,7 @@ function Page() {
                fw="bold"
                c={colors['blue-button']}
                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
              <Divider my="md" color={colors['blue-button']} />

@@ -93,6 +94,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
@@ -117,7 +117,7 @@ function EditTempatKegiatan() {
            <TextInput
              label={<Text fz="sm" fw="bold">Judul</Text>}
              placeholder="Masukkan judul tempat kegiatan"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx
@@ -71,6 +71,7 @@ function Page() {
                fw="bold"
                c={colors['blue-button']}
                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
              <Divider my="md" color={colors['blue-button']} />

@@ -81,6 +82,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
@@ -112,7 +112,7 @@ function EditTujuanProgram() {
            <TextInput
              label={<Text fz="sm" fw="bold">Judul</Text>}
              placeholder="Masukkan judul program"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx
@@ -85,6 +85,7 @@ function Page() {
                fw="bold"
                c={colors['blue-button']}
                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
              <Divider my="md" color={colors['blue-button']} />

@@ -95,6 +96,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
@@ -140,7 +140,7 @@ function EditPerpustakaanDigital() {
          <TextInput
            label="Judul"
            placeholder="Masukkan judul"
-            value={formData.judul}
+            defaultValue={formData.judul}
            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/page.tsx
@@ -72,7 +72,7 @@ function DetailDataPerpustakaan() {

              <Box>
                <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
+                <Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
              </Box>

              <Box>
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
@@ -80,7 +80,7 @@ function CreateDataPerpustakaan() {
          <TextInput
            label={<Text fw="bold" fz="sm">Judul</Text>}
            placeholder='Masukkan judul'
-            value={createState.create.form.judul}
+            defaultValue={createState.create.form.judul}
            onChange={(val) => {
              createState.create.form.judul = val.target.value;
            }}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
@@ -76,7 +76,7 @@ function EditKategoriBuku() {
          <TextInput
            label="Nama Kategori Buku"
            placeholder="Masukkan nama kategori buku"
-            value={formData.name}
+            defaultValue={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            required
          />
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
@@ -49,7 +49,7 @@ function CreateKategoriBuku() {
          <TextInput
            label={<Text fw="bold" fz="sm">Nama Kategori Buku</Text>}
            placeholder='Masukkan nama kategori buku'
-            value={createState.create.form.name}
+            defaultValue={createState.create.form.name}
            onChange={(val) => {
              createState.create.form.name = val.target.value;
            }}
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
@@ -122,7 +122,7 @@ function EditTujuanProgram() {
            <TextInput
              label={<Text fw="bold">Judul</Text>}
              placeholder="Masukkan judul program"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx
@@ -71,6 +71,7 @@ function Page() {
                fw="bold"
                c={colors['blue-button']}
                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
              <Divider my="md" color={colors['blue-button']} />

@@ -81,6 +82,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
@@ -112,7 +112,7 @@ function EditTujuanProgram() {
            <TextInput
              label={<Text fz="sm" fw="bold">Judul</Text>}
              placeholder="Masukkan judul program"
-              value={judul}
+              defaultValue={judul}
              onChange={(e) => setJudul(e.currentTarget.value)}
              error={!judul && 'Judul wajib diisi'}
            />
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx
@@ -71,6 +71,7 @@ function Page() {
                fw="bold"
                c={colors['blue-button']}
                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
              <Divider my="md" color={colors['blue-button']} />

@@ -81,6 +82,7 @@ function Page() {
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
              />
            </Stack>
          </Box>