wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix UI Admin Menu Pendidikam, Add Menu User & Role

Browse Source
This commit is contained in:
nico
2025-09-02 18:08:53 +08:00
parent 7ae83788b4
commit fa9601e126
86 changed files with 5349 additions and 2649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx
View File

@@ -1,68 +1,118 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { IconSchool, IconCalendar, IconBuildingCommunity } from '@tabler/icons-react';
function LayoutTabs({ children }: { children: React.ReactNode }) {
const router = useRouter()
const pathname = usePathname()
const router = useRouter();
const pathname = usePathname();
const tabs = [
{
label: "Tujuan Program",
value: "tujuan-program",
href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program"
href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program",
icon: <IconSchool size={18} stroke={1.8} />,
tooltip: "Lihat tujuan utama program bimbingan belajar",
},
{
label: "Lokasi dan Jadwal",
value: "lokasi-dan-jadwal",
href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal"
href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal",
icon: <IconCalendar size={18} stroke={1.8} />,
tooltip: "Atur lokasi pelaksanaan dan jadwal bimbingan",
},
{
label: "Fasilitas yang disediakan",
label: "Fasilitas yang Disediakan",
value: "fasilitas-yang-disediakan",
href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan"
href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan",
icon: <IconBuildingCommunity size={18} stroke={1.8} />,
tooltip: "Kelola fasilitas yang tersedia untuk peserta",
},
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
const currentTab = tabs.find(tab => tab.href === pathname);
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
const tab = tabs.find(t => t.value === value);
if (tab) {
router.push(tab.href)
router.push(tab.href);
}
setActiveTab(value)
}
setActiveTab(value);
};
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
const match = tabs.find(tab => tab.href === pathname);
if (match) {
setActiveTab(match.value)
setActiveTab(match.value);
}
}, [pathname])
}, [pathname]);
return (
<Stack>
<Title order={3}>Bimbingan Belajar Desa</Title>
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
{tabs.map((e, i) => (
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
<Stack gap="lg">
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
Bimbingan Belajar Desa
</Title>
<Tabs
color={colors['blue-button']}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
}}
>
{tabs.map((tab, i) => (
<Tooltip
key={i}
label={tab.tooltip}
position="bottom"
withArrow
transitionProps={{ transition: 'pop', duration: 200 }}
>
<TabsTab
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
{children}
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
}
export default LayoutTabs;
export default LayoutTabs;

179
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
View File

@@ -1,86 +1,167 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import {
Box,
Button,
Center,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import { toast } from 'react-toastify';
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
ssr: false,
});
const BimbinganBelajarDesaTextEditor = dynamic(
() =>
import('../../_lib/bimbinganBelajarDesaTextEditor').then(
(mod) => mod.BimbinganBelajarDesaTextEditor
),
{ ssr: false }
);
function EditFasilitasYangDisediakan() {
const router = useRouter();
const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
function EditTujuanProgram() {
const router = useRouter()
const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
// Load data pertama kali
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
editState.findById.initialize();
}
}, []);
// Sinkronkan state dengan data yang sudah di-load
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '')
setContent(editState.findById.data.deskripsi ?? '')
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
}
}, [editState.findById.data])
}, [editState.findById.data]);
const submit = () => {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
editState.update.save(editState.findById.data)
const handleSubmit = async () => {
if (!judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan')
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan');
}
} catch (err) {
console.error('Error saving:', err);
toast.error('Gagal menyimpan data');
} finally {
setIsSubmitting(false);
}
};
const handleBack = () => router.back();
// Loading state
if (editState.findById.loading) {
return (
<Box>
<Center h={400}>
<Text>Memuat data fasilitas yang disediakan...</Text>
</Center>
</Box>
);
}
return (
<Box>
<Stack gap={'xs'}>
<Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Fasilitas Yang Disediakan</Title>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
value={judul}
onChange={(e) => setJudul(e.target.value)}
/>
<Text fw={"bold"}>Deskripsi</Text>
<Stack gap="xs">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={handleBack}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Fasilitas Yang Disediakan
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="md"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="xs">
<Title order={3}>Formulir Edit</Title>
{/* Judul */}
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul fasilitas"
value={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
/>
{/* Deskripsi */}
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<BimbinganBelajarDesaTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={editState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
{/* Tombol Aksi */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
>
Batal
</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Box>
);
}
export default EditTujuanProgram;
export default EditFasilitasYangDisediakan;

95
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
function Page() {
const router = useRouter()
const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
const router = useRouter();
const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
useShallowEffect(() => {
listPreview.findById.load('edit')
}, [])
listPreview.findById.load('edit');
}, []);
if (!listPreview.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
<Stack align="center" justify="center" py="xl">
<Skeleton radius="md" height={400} w="90%" />
</Stack>
)
);
}
const data = listPreview.findById.data;
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
<Stack gap="md">
{/* Header */}
<Grid align="center">
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Fasilitas Yang Disediakan</Title>
<Title order={3} c={colors['blue-button']}>
Pratinjau Fasilitas Yang Disediakan
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit')}>
<IconEdit size={16} />
</Button>
<Tooltip label="Edit Fasilitas" withArrow>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() =>
router.push(
'/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit'
)
}
>
Edit
</Button>
</Tooltip>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
{/* Konten Preview */}
<Paper
p="xl"
bg={colors['white-1']}
withBorder
radius="md"
shadow="xs"
>
<Box px={{ base: 'sm', md: 50 }}>
<Stack gap="lg">
{/* Judul */}
<Text
ta="center"
fz={{ base: '1.3rem', md: '1.8rem' }}
fw="bold"
c={colors['blue-button']}
dangerouslySetInnerHTML={{ __html: data.judul }}
/>
<Divider my="md" color={colors['blue-button']} />
{/* Deskripsi */}
<Text
fz={{ base: '1rem', md: '1.2rem' }}
lh={1.7}
ta="justify"
c="dimmed"
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
/>
</Stack>
</Box>
</Paper>
</Stack>
</Paper>
)
);
}
export default Page;

181
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
View File

@@ -1,86 +1,169 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import {
Box,
Button,
Center,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import { toast } from 'react-toastify';
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
ssr: false,
});
const BimbinganBelajarDesaTextEditor = dynamic(
() =>
import('../../_lib/bimbinganBelajarDesaTextEditor').then(
(mod) => mod.BimbinganBelajarDesaTextEditor
),
{ ssr: false }
);
function EditLokasiDanJadwal() {
const router = useRouter();
const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
function EditTujuanProgram() {
const router = useRouter()
const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
// load data sekali
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
editState.findById.initialize();
}
}, []);
// isi state ketika data loaded
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '')
setContent(editState.findById.data.deskripsi ?? '')
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
}
}, [editState.findById.data])
}, [editState.findById.data]);
const submit = () => {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
editState.update.save(editState.findById.data)
const handleSubmit = async () => {
if (!judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal')
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal');
}
} catch (err) {
console.error('Error saving:', err);
toast.error('Gagal menyimpan data');
} finally {
setIsSubmitting(false);
}
};
const handleBack = () => router.back();
// loading state
if (editState.findById.loading) {
return (
<Box>
<Center h={400}>
<Text>Memuat data lokasi & jadwal...</Text>
</Center>
</Box>
);
}
return (
<Box>
<Stack gap={'xs'}>
<Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Lokasi Dan Jadwal</Title>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
value={judul}
onChange={(e) => setJudul(e.target.value)}
/>
<Text fw={"bold"}>Deskripsi</Text>
<Stack gap="xs">
{/* Header dengan tombol kembali */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={handleBack}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Lokasi & Jadwal
</Title>
</Group>
{/* Form Card */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="md"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="xs">
<Title order={3}>Form Lokasi & Jadwal</Title>
{/* Judul Field */}
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul lokasi/jadwal"
value={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
/>
{/* Deskripsi Field */}
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<BimbinganBelajarDesaTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={editState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
{/* Action Button */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
>
Batal
</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Box>
);
}
export default EditTujuanProgram;
export default EditLokasiDanJadwal;

95
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
function Page() {
const router = useRouter()
const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
const router = useRouter();
const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
useShallowEffect(() => {
listPreview.findById.load('edit')
}, [])
listPreview.findById.load('edit');
}, []);
if (!listPreview.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
<Stack align="center" justify="center" py="xl">
<Skeleton radius="md" height={400} w="90%" />
</Stack>
)
);
}
const data = listPreview.findById.data;
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
<Stack gap="md">
{/* Header */}
<Grid align="center">
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Lokasi Dan Jadwal</Title>
<Title order={3} c={colors['blue-button']}>
Pratinjau Lokasi & Jadwal
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit')}>
<IconEdit size={16} />
</Button>
<Tooltip label="Edit Lokasi & Jadwal" withArrow>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() =>
router.push(
'/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit'
)
}
>
Edit
</Button>
</Tooltip>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
{/* Konten Preview */}
<Paper
p="xl"
bg={colors['white-1']}
withBorder
radius="md"
shadow="xs"
>
<Box px={{ base: 'sm', md: 50 }}>
<Stack gap="lg">
{/* Judul */}
<Text
ta="center"
fz={{ base: '1.3rem', md: '1.8rem' }}
fw="bold"
c={colors['blue-button']}
dangerouslySetInnerHTML={{ __html: data.judul }}
/>
<Divider my="md" color={colors['blue-button']} />
{/* Deskripsi */}
<Text
fz={{ base: '1rem', md: '1.2rem' }}
lh={1.7}
ta="justify"
c="dimmed"
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
/>
</Stack>
</Box>
</Paper>
</Stack>
</Paper>
)
);
}
export default Page;

169
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
View File

@@ -1,83 +1,158 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import {
Box,
Button,
Center,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import { toast } from 'react-toastify';
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
ssr: false,
});
const BimbinganBelajarDesaTextEditor = dynamic(
() =>
import('../../_lib/bimbinganBelajarDesaTextEditor').then(
(mod) => mod.BimbinganBelajarDesaTextEditor
),
{ ssr: false }
);
function EditTujuanProgram() {
const router = useRouter()
const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
const router = useRouter();
const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
// load data once
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
editState.findById.initialize();
}
}, []);
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '')
setContent(editState.findById.data.deskripsi ?? '')
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
}
}, [editState.findById.data])
}, [editState.findById.data]);
const submit = () => {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
editState.update.save(editState.findById.data)
const handleSubmit = async () => {
if (!judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program')
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program');
}
} catch (err) {
console.error('Error saving:', err);
toast.error('Gagal menyimpan data');
} finally {
setIsSubmitting(false);
}
};
const handleBack = () => router.back();
// loading state
if (editState.findById.loading) {
return (
<Box>
<Center h={400}>
<Text>Memuat data tujuan program...</Text>
</Center>
</Box>
);
}
return (
<Box>
<Stack gap={'xs'}>
<Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Tujuan Program</Title>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
value={judul}
onChange={(e) => setJudul(e.target.value)}
/>
<Text fw={"bold"}>Deskripsi</Text>
<Stack gap="xs">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Tujuan Program
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="md"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="xs">
<Title order={3}>Form Edit Tujuan Program</Title>
{/* Judul Field */}
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
value={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
/>
{/* Deskripsi Field */}
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<BimbinganBelajarDesaTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={editState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
{/* Submit & Cancel */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
>
Batal
</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Box>
);

107
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx
View File

@@ -1,6 +1,18 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import {
Box,
Button,
Divider,
Grid,
GridCol,
Paper,
Skeleton,
Stack,
Text,
Title,
Tooltip,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
function Page() {
const router = useRouter()
const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
const router = useRouter();
const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
useShallowEffect(() => {
listPreview.findById.load('edit')
}, [])
listPreview.findById.load('edit');
}, []);
if (!listPreview.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
<Stack align="center" justify="center" py="xl">
<Skeleton radius="md" height={400} w="90%" />
</Stack>
)
);
}
const data = listPreview.findById.data;
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
<Stack gap="md">
{/* Header */}
<Grid align="center">
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Tujuan Program</Title>
<Title order={3} c={colors['blue-button']}>
Pratinjau Tujuan Program
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit')}>
<IconEdit size={16} />
</Button>
<Tooltip label="Edit Tujuan Program" withArrow>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() =>
router.push(
'/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit'
)
}
>
Edit
</Button>
</Tooltip>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
{/* Konten Preview */}
<Paper
p="xl"
bg={colors['white-1']}
withBorder
radius="md"
shadow="xs"
>
<Box px={{ base: 'sm', md: 50 }}>
<Stack gap="lg">
{/* Judul */}
<Text
ta="center"
fz={{ base: '1.3rem', md: '1.8rem' }}
fw="bold"
c={colors['blue-button']}
dangerouslySetInnerHTML={{ __html: data.judul }}
/>
<Divider my="md" color={colors['blue-button']} />
{/* Deskripsi */}
<Text
fz={{ base: '1rem', md: '1.2rem' }}
lh={1.7}
ta="justify"
c="dimmed"
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
/>
</Stack>
</Box>
</Paper>
</Stack>
</Paper>
)
);
}
export default Page;