QC Kak Inno 27 Oct

QC Kak Ayu 27 Oct
QC Keano 27 Oct
QC Pak Jun 27 Oct

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx

@@ -1,13 +1,13 @@
 'use client'
 import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Image, Modal, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Stepper, StepperStep, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Center, Group, Image, Modal, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Stepper, Text, TextInput, Title } from '@mantine/core';
 import { useDisclosure, useShallowEffect } from '@mantine/hooks';
 import { IconArrowRight, IconCoin, IconInfoCircle, IconSchool, IconUsers } from '@tabler/icons-react';
+import { useTransitionRouter } from 'next-view-transitions';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { useTransitionRouter } from 'next-view-transitions';
 
 const dataBeasiswa = [
   { id: 1, nama: 'Penerima Beasiswa', jumlah: '250+', icon: IconUsers },
@@ -27,7 +27,7 @@ function Page() {
       tempatLahir: "",
       tanggalLahir: "",
       jenisKelamin: "",
-      kewarganegaraan: "",
+      kewarganegaraan: "WNI",
       agama: "",
       alamatKTP: "",
       alamatDomisili: "",
@@ -50,9 +50,21 @@ function Page() {
     close();
   };
 
+  const timeline = [
+    { label: "1 Maret 2025", desc: "Pembukaan Pendaftaran", date: new Date("2025-03-01") },
+    { label: "15 Maret 2025", desc: "Seleksi Administrasi", date: new Date("2025-03-15") },
+    { label: "1 April 2025", desc: "Tes Potensi Akademik", date: new Date("2025-04-01") },
+    { label: "15 April 2025", desc: "Wawancara", date: new Date("2025-04-15") },
+    { label: "1 Mei 2025", desc: "Pengumuman Hasil", date: new Date("2025-05-01") },
+  ];
+
   const [active, setActive] = useState(1);
-  const nextStep = () => setActive((current) => (current < 5 ? current + 1 : current));
-  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+  useShallowEffect(() => {
+    const today = new Date();
+    // cari berapa banyak tanggal yang sudah lewat
+    const doneSteps = timeline.filter(item => today >= item.date).length;
+    setActive(doneSteps); // active step diset sesuai tanggal
+  }, []);
 
   if (loading || !data) {
     return (
@@ -115,7 +127,7 @@ function Page() {
           {data.map((v, k) => (
             <Paper key={k} p="xl" radius="xl" shadow="sm" bg={colors['white-trans-1']}>
               <Title order={3} fw={700} c={colors['blue-button']} mb="xs">{v.judul}</Title>
-              <Text fz="sm" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }}/>
+              <Text fz="sm" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
             </Paper>
           ))}
         </SimpleGrid>
@@ -139,19 +151,22 @@ function Page() {
           Timeline Pendaftaran
         </Title>
         <Center>
-          <Stepper mt={20} active={active} onStepClick={setActive} orientation="vertical" allowNextStepsSelect={false}>
-            <StepperStep label="1 Maret 2025" description="Pembukaan Pendaftaran" />
-            <StepperStep label="15 Maret 2025" description="Seleksi Administrasi" />
-            <StepperStep label="1 April 2025" description="Tes Potensi Akademik" />
-            <StepperStep label="15 April 2025" description="Wawancara" />
-            <StepperStep label="1 Mei 2025" description="Pengumuman Hasil" />
+          <Stepper
+            mt={20}
+            active={active}
+            onStepClick={setActive}
+            orientation="vertical"
+            allowNextStepsSelect={false}
+          >
+            {timeline.map((item, index) => (
+              <Stepper.Step
+                key={index}
+                label={item.label}
+                description={item.desc}
+              />
+            ))}
           </Stepper>
         </Center>
-
-        <Group justify="center" mt="xl">
-          <Button variant="default" radius="xl" onClick={prevStep}>Kembali</Button>
-          <Button radius="xl" bg={colors['blue-button']} onClick={nextStep}>Lanjut</Button>
-        </Group>
       </Box>
 
       <Modal
@@ -194,7 +209,11 @@ function Page() {
             <TextInput
               label="Kewarganegaraan"
               placeholder="Masukkan kewarganegaraan"
-              onChange={(val) => { beasiswaDesa.create.form.kewarganegaraan = val.target.value }} />
+              value={beasiswaDesa.create.form.kewarganegaraan || "WNI"} // tampilkan WNI kalau kosong
+              onChange={(e) => {
+                beasiswaDesa.create.form.kewarganegaraan = e.target.value;
+              }}
+            />
             <Select
               label="Agama"
               placeholder="Pilih agama"

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx

@@ -34,7 +34,7 @@ export default function BeasiswaPage() {
       tempatLahir: "",
       tanggalLahir: "",
       jenisKelamin: "",
-      kewarganegaraan: "",
+      kewarganegaraan: "WNI",
       agama: "",
       alamatKTP: "",
       alamatDomisili: "",
@@ -71,7 +71,7 @@ export default function BeasiswaPage() {
         <Stack gap="md" maw={600}>
           <Group>
             <IconSchool size={30} color={colors["blue-button"]} />
-            <Title order={2}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
+            <Title order={2} c={colors["blue-button"]}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
           </Group>
           <Text>
             Program ini bertujuan untuk mendukung pendidikan generasi muda di Desa Darmasaba
@@ -84,7 +84,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconInfoCircle size={24} color={colors["blue-button"]} />
-          <Title order={3}>Tentang Program</Title>
+          <Title order={3} c={colors["blue-button"]}>Tentang Program</Title>
         </Group>
         <Text>
           Program Beasiswa Desa Darmasaba adalah inisiatif pemerintah desa untuk meningkatkan akses
@@ -94,12 +94,11 @@ export default function BeasiswaPage() {
 
         {/* 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 fw={500}>
+            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>.
+            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>
@@ -109,7 +108,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconChecklist size={24} color={colors["blue-button"]} />
-          <Title order={3}>Syarat Pendaftaran</Title>
+          <Title order={3} c={colors["blue-button"]}>Syarat Pendaftaran</Title>
         </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
@@ -140,7 +139,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconTimeline size={24} color={colors["blue-button"]} />
-          <Title order={3}>Proses Seleksi</Title>
+          <Title order={3} c={colors["blue-button"]}>Proses Seleksi</Title>
         </Group>
 
         <Timeline active={4} bulletSize={24} lineWidth={2}>
@@ -148,8 +147,8 @@ export default function BeasiswaPage() {
             <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 size="sm" fw={500} mt={4}>
+              Estimasi waktu: 1 Februari – 31 Mei 2025
             </Text>
           </Timeline.Item>
 
@@ -157,8 +156,8 @@ export default function BeasiswaPage() {
             <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 size="sm" fw={500} mt={4}>
+              Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
             </Text>
           </Timeline.Item>
 
@@ -166,8 +165,8 @@ export default function BeasiswaPage() {
             <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 size="sm" fw={500} mt={4}>
+              Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
             </Text>
           </Timeline.Item>
 
@@ -175,14 +174,14 @@ export default function BeasiswaPage() {
             <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 size="sm" fw={500} 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
+          Total estimasi keseluruhan proses: sekitar 3–4 minggu setelah penutupan pendaftaran
         </Text>
       </Container>
 
@@ -191,7 +190,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconQuote size={24} color={colors["blue-button"]} />
-          <Title order={3}>Cerita Sukses Penerima Beasiswa</Title>
+          <Title order={3} c={colors["blue-button"]}>Cerita Sukses Penerima Beasiswa</Title>
         </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
@@ -219,12 +218,12 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl" ta="center">
         <Group justify="center" mb="sm">
           <IconUserPlus size={28} color={colors["blue-button"]} />
-          <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+          <Title order={3} c={colors["blue-button"]}>Siap Bergabung dengan Program Ini?</Title>
         </Group>
         <Text c="dimmed" mb="md">
           Segera daftar dan wujudkan mimpimu bersama Desa Darmasaba.
         </Text>
-        <Button onClick={open} size="lg" radius="xl" color="blue">
+        <Button onClick={open} size="lg" radius="xl" bg={colors["blue-button"]}>
           Daftar Sekarang
         </Button>
       </Container>
@@ -269,7 +268,11 @@ export default function BeasiswaPage() {
             <TextInput
               label="Kewarganegaraan"
               placeholder="Masukkan kewarganegaraan"
-              onChange={(val) => { beasiswaDesa.create.form.kewarganegaraan = val.target.value }} />
+              value={beasiswaDesa.create.form.kewarganegaraan || "WNI"} // tampilkan WNI kalau kosong
+              onChange={(e) => {
+                beasiswaDesa.create.form.kewarganegaraan = e.target.value;
+              }}
+            />
             <Select
               label="Agama"
               placeholder="Pilih agama"