Fix QC Kak Inno 21 Oktober, QC Kak Ayu 21 Oktober, QC Keano, && QC Pak Jun 21 Oktober

2025-10-22 17:00:12 +08:00
parent 827c1c191a
commit 0ff0d5234a
15 changed files with 333 additions and 189 deletions
--- a/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx
@@ -74,7 +74,7 @@ function Page() {
            <Title fz={55} fw={900} c={colors['blue-button']}>
              Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
            </Title>
-            <Text fz="lg" mt="md" c="dimmed">
+            <Text fz="lg" mt="md" fw={"bold"}>
              Program beasiswa untuk mendukung pendidikan berkualitas bagi generasi muda Desa Darmasaba.
            </Text>
            <Group mt="xl">
--- a/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx
@@ -15,7 +15,7 @@ import {
  Timeline,
  Title
 } from '@mantine/core';
-import { IconArrowLeft } from '@tabler/icons-react';
+import { IconArrowLeft, IconChecklist, IconInfoCircle, IconQuote, IconSchool, IconTimeline, IconUserPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
@@ -69,10 +69,11 @@ export default function BeasiswaPage() {
      {/* Hero Section */}
      <Container size="lg" py="xl">
        <Stack gap="md" maw={600}>
-          <Title order={2} c="blue.9">
-            Program Beasiswa Pendidikan Desa Darmasaba
-          </Title>
-          <Text c="dimmed">
+          <Group>
+            <IconSchool size={30} color={colors["blue-button"]} />
+            <Title order={2}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
+          </Group>
+          <Text>
            Program ini bertujuan untuk mendukung pendidikan generasi muda di Desa Darmasaba
            agar dapat melanjutkan studi ke jenjang lebih tinggi dengan dukungan finansial dan pendampingan.
          </Text>
@@ -81,21 +82,35 @@ export default function BeasiswaPage() {

      {/* Tentang Program */}
      <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Tentang Program
-        </Title>
+        <Group mb="sm">
+          <IconInfoCircle size={24} color={colors["blue-button"]} />
+          <Title order={3}>Tentang Program</Title>
+        </Group>
        <Text>
          Program Beasiswa Desa Darmasaba adalah inisiatif pemerintah desa untuk meningkatkan akses
          pendidikan bagi siswa berprestasi dan kurang mampu. Melalui program ini, desa memberikan bantuan
          biaya sekolah, bimbingan akademik, serta pelatihan soft skill bagi peserta terpilih.
        </Text>
+
+        {/* Tambahkan info tahun berjalan di sini */}
+        <Paper mt="md" p="md" radius="lg" shadow="xs" bg="#f8fbff" withBorder>
+          <Text fw={500} c={colors["blue-button"]}>
+            📅 Periode Beasiswa Tahun 2025
+          </Text>
+          <Text fz="sm" c="dimmed">
+            Pendaftaran beasiswa dibuka mulai <strong>1 Januari 2025</strong> dan ditutup pada
+            <strong>31 Mei 2025</strong>.
+            Pengumuman hasil seleksi akan diumumkan pada pertengahan Juni 2025 melalui website resmi Desa Darmasaba.
+          </Text>
+        </Paper>
      </Container>

      {/* Syarat dan Ketentuan */}
      <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Syarat Pendaftaran
-        </Title>
+        <Group mb="sm">
+          <IconChecklist size={24} color={colors["blue-button"]} />
+          <Title order={3}>Syarat Pendaftaran</Title>
+        </Group>

        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
          <Paper shadow="sm" p="md" radius="lg" withBorder>
@@ -123,42 +138,61 @@ export default function BeasiswaPage() {

      {/* Proses Seleksi */}
      <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Proses Seleksi
-        </Title>
+        <Group mb="sm">
+          <IconTimeline size={24} color={colors["blue-button"]} />
+          <Title order={3}>Proses Seleksi</Title>
+        </Group>

        <Timeline active={4} bulletSize={24} lineWidth={2}>
          <Timeline.Item title="Pendaftaran Online">
            <Text c="dimmed" size="sm">
              Calon peserta mengisi formulir pendaftaran dan mengunggah dokumen pendukung.
            </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 1 Februari – 31 Mei 2025
+            </Text>
          </Timeline.Item>

          <Timeline.Item title="Seleksi Administrasi">
            <Text c="dimmed" size="sm">
              Panitia memverifikasi kelengkapan dan validitas berkas.
            </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
+            </Text>
          </Timeline.Item>

          <Timeline.Item title="Wawancara dan Penilaian">
            <Text c="dimmed" size="sm">
              Peserta yang lolos administrasi akan diundang untuk wawancara langsung dengan tim seleksi.
            </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
+            </Text>
          </Timeline.Item>

          <Timeline.Item title="Pengumuman Penerima">
            <Text c="dimmed" size="sm">
              Daftar penerima beasiswa diumumkan melalui website resmi Desa Darmasaba.
            </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5 hari kerja setelah tahap wawancara selesai
+            </Text>
          </Timeline.Item>
        </Timeline>
+
+        <Text c="dimmed" size="sm" mt="lg" ta="center">
+          🗓️ Total estimasi keseluruhan proses: sekitar 3–4 minggu setelah penutupan pendaftaran
+        </Text>
      </Container>

+
      {/* Testimoni */}
      <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Cerita Sukses Penerima Beasiswa
-        </Title>
+        <Group mb="sm">
+          <IconQuote size={24} color={colors["blue-button"]} />
+          <Title order={3}>Cerita Sukses Penerima Beasiswa</Title>
+        </Group>

        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
          <Paper shadow="md" p="lg" radius="lg">
@@ -183,7 +217,10 @@ export default function BeasiswaPage() {

      {/* CTA Akhir */}
      <Container size="lg" py="xl" ta="center">
-        <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+        <Group justify="center" mb="sm">
+          <IconUserPlus size={28} color={colors["blue-button"]} />
+          <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+        </Group>
        <Text c="dimmed" mb="md">
          Segera daftar dan wujudkan mimpimu bersama Desa Darmasaba.
        </Text>
--- a/src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx
@@ -43,7 +43,7 @@ function Page() {
            Pendidikan Non Formal
          </Title>
          <Text ta="center" fz="lg" lh={1.6} c="black" maw={800} mx="auto">
-            Bentuk pendidikan di luar sekolah yang terstruktur, bertujuan memberikan keterampilan, pengetahuan, dan pengembangan karakter masyarakat dari berbagai usia serta latar belakang.
+          Pendidikan non formal merupakan bentuk pendidikan di luar sekolah yang terstruktur, bertujuan untuk memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
          </Text>
        </Box>
        <SimpleGrid
--- a/src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx
@@ -16,16 +16,11 @@ import {
  TextInput,
 } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
-import {
-  IconArrowRight,
-  IconBook2,
-  IconUser
-} from '@tabler/icons-react';
+import { IconArrowRight, IconBook2, IconUser } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { useSnapshot } from 'valtio';

-
 export interface ModalPeminjamanProps {
  opened: boolean;
  onClose: () => void;
@@ -45,11 +40,12 @@ export default function ModalPeminjaman({
 }: ModalPeminjamanProps) {
  const snap = useSnapshot(perpustakaanDigitalState.peminjamanBuku);

-  // reset form setiap modal dibuka
+  const BATAS_HARI_PINJAM = 4;
+
+  // Reset form setiap modal dibuka
  useEffect(() => {
    if (opened && buku) {
      perpustakaanDigitalState.peminjamanBuku.create.form = {
-        ...perpustakaanDigitalState.peminjamanBuku.create.form,
        bukuId: buku.id,
        nama: '',
        noTelp: '',
@@ -99,7 +95,14 @@ export default function ModalPeminjaman({
                </Badge>
              )}

-              <Text fz="sm" c="dimmed" lineClamp={3} dangerouslySetInnerHTML={{ __html: buku.deskripsi || 'Tidak ada deskripsi' }} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                lineClamp={3}
+                dangerouslySetInnerHTML={{
+                  __html: buku.deskripsi || 'Tidak ada deskripsi',
+                }}
+              />
            </Stack>
          </Group>

@@ -112,7 +115,8 @@ export default function ModalPeminjaman({
            leftSection={<IconUser size={16} />}
            value={snap.create.form.nama}
            onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.nama = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.nama =
+                e.currentTarget.value)
            }
            required
          />
@@ -123,7 +127,8 @@ export default function ModalPeminjaman({
            leftSection={<IconUser size={16} />}
            value={snap.create.form.noTelp}
            onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp =
+                e.currentTarget.value)
            }
            required
          />
@@ -134,11 +139,13 @@ export default function ModalPeminjaman({
            leftSection={<IconUser size={16} />}
            value={snap.create.form.alamat}
            onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat =
+                e.currentTarget.value)
            }
            required
          />

+          {/* === OTOMATIS SET BATAS DAN TANGGAL KEMBALI === */}
          <DateInput
            label="Tanggal Pinjam"
            placeholder="Pilih tanggal pinjam"
@@ -148,64 +155,83 @@ export default function ModalPeminjaman({
                : null
            }
            onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = 
-                date ? new Date(date).toISOString() : '';
+              if (date) {
+                const tanggalPinjam = new Date(date);
+
+                // simpan tanggal pinjam
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam =
+                  tanggalPinjam.toISOString();
+
+                // hitung batas +4 hari
+                const batasKembali = new Date(tanggalPinjam);
+                batasKembali.setDate(batasKembali.getDate() + BATAS_HARI_PINJAM);
+
+                // set batas & tanggal kembali otomatis
+                perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali =
+                  batasKembali.toISOString();
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali =
+                  batasKembali.toISOString();
+
+                toast.info(
+                  `Batas pengembalian otomatis diset ke ${batasKembali.toLocaleDateString('id-ID')} (+${BATAS_HARI_PINJAM} hari).`
+                );
+              } else {
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = '';
+                perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = '';
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = '';
+              }
            }}
            required
          />

          <Box>
-            <Text>Catatan</Text>
+            <Text fw={500}>Catatan</Text>
            <CreateEditor
              value={snap.create.form.catatan}
-              onChange={(e) =>
-                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan = e)
+              onChange={(val) =>
+                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan =
+                  val)
              }
            />
          </Box>

-          <DateInput
-            label="Tanggal Kembali"
-            placeholder="Pilih tanggal kembali"
-            value={
-              snap.create.form.tanggalKembali
-                ? new Date(snap.create.form.tanggalKembali)
-                : null
-            }
-            onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = 
-                date ? new Date(date).toISOString() : '';
-            }}
-            required
-          />
-          
          <DateInput
            label="Batas Pengembalian"
-            placeholder="Pilih tanggal kembali"
+            placeholder="Otomatis diatur +4 hari dari tanggal pinjam"
            value={
              snap.create.form.batasKembali
                ? new Date(snap.create.form.batasKembali)
                : null
            }
-            onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = 
-                date ? new Date(date).toISOString() : '';
-            }}
-            required
+            disabled
+            readOnly
          />

+          <DateInput
+            label="Tanggal Kembali"
+            placeholder="Otomatis sama dengan batas pengembalian"
+            value={
+              snap.create.form.tanggalKembali
+                ? new Date(snap.create.form.tanggalKembali)
+                : null
+            }
+            disabled
+            readOnly
+          />

          <Button
            onClick={handleSubmit}
            loading={snap.create.loading}
            disabled={
-              !snap.create.form.nama || 
-              !snap.create.form.tanggalPinjam || 
-              !snap.create.form.batasKembali ||
-              !snap.create.form.tanggalKembali
+              !snap.create.form.nama || !snap.create.form.tanggalPinjam
            }
            rightSection={<IconArrowRight size={16} />}
            radius="xl"
+            style={{
+              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+              color: '#fff',
+              boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+            }}
          >
            Pinjam Buku
          </Button>