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

Fix Tampilan User & Admin Menu Inovasi & Lingkungan

Browse Source
This commit is contained in:
nico
2025-09-22 17:15:11 +08:00
parent 0fc47c28ff
commit b5c044df6e
40 changed files with 3114 additions and 1667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx
View File

@@ -1,67 +1,116 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { IconBook, IconLeaf, IconSchool } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabs({ children }: { children: React.ReactNode }) {
const router = useRouter()
const pathname = usePathname()
const tabs = [
{
label: "Filosofi Tri Hita",
value: "filosofi-tri-hita",
href: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
href: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana",
tooltip: "Lihat filosofi Tri Hita Karana",
icon: <IconLeaf size={18} stroke={1.8} />
},
{
label: "Nilai Konservasi Adat",
value: "nilai-konservasi-adat",
href: "/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat"
href: "/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat",
tooltip: "Kelola nilai konservasi adat",
icon: <IconBook size={18} stroke={1.8} />
},
{
label: "Bentuk Konservasi Berdasarkan Adat",
value: "bentuk-konservasi-berdasarkan-adat",
href: "/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat"
href: "/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat",
tooltip: "Lihat bentuk konservasi berdasarkan adat",
icon: <IconSchool size={18} stroke={1.8} />
},
];
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)
if (tab) {
router.push(tab.href)
}
if (tab) router.push(tab.href)
setActiveTab(value)
}
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
if (match) setActiveTab(match.value)
}, [pathname])
return (
<Stack>
<Title order={3}>Konservasi Adat Bali</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>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
<Stack gap="md">
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
Konservasi Adat Bali
</Title>
<Tabs
color={colors['blue-button']}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem",
}}
>
{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",
whiteSpace: "nowrap",
transition: "all 0.2s ease",
}}
>
<span style={{
display: "inline-block",
maxWidth: "200px",
overflow: "hidden",
textOverflow: "ellipsis"
}}>
{tab.label}
</span>
</TabsTab>
</Tooltip>
))}
</TabsList>
</ScrollArea>
{tabs.map((tab, i) => (
<TabsPanel key={i} value={tab.value}>
<Box p="md">
{children}
</Box>
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
}
export default LayoutTabs;
export default LayoutTabs;

130
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
View File

@@ -9,77 +9,105 @@ import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
ssr: false,
});
const KonservasiAdatBaliTextEditor = dynamic(
() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor),
{ ssr: false }
);
function EditBentukKonservasiBerdasarkanAdat() {
const router = useRouter()
const bentukKonservasiState = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat)
const router = useRouter();
const bentukKonservasiState = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
useShallowEffect(() => {
if (!bentukKonservasiState.findById.data) {
bentukKonservasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
bentukKonservasiState.findById.initialize();
}
}, []);
useEffect(() => {
if (bentukKonservasiState.findById.data) {
setJudul(bentukKonservasiState.findById.data.judul ?? '')
setContent(bentukKonservasiState.findById.data.deskripsi ?? '')
setJudul(bentukKonservasiState.findById.data.judul ?? '');
setContent(bentukKonservasiState.findById.data.deskripsi ?? '');
}
}, [bentukKonservasiState.findById.data])
}, [bentukKonservasiState.findById.data]);
const submit = () => {
if (bentukKonservasiState.findById.data) {
bentukKonservasiState.findById.data.judul = judul;
bentukKonservasiState.findById.data.deskripsi = content;
bentukKonservasiState.update.save(bentukKonservasiState.findById.data)
bentukKonservasiState.update.save(bentukKonservasiState.findById.data);
}
router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat')
}
router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat');
};
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 Bentuk Konservasi Berdasarkan Adat</Title>
<Text fw={"bold"}>Judul</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
<Text fw={"bold"}>Content</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={bentukKonservasiState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Bentuk Konservasi Berdasarkan Adat
</Title>
</Group>
{/* Form Paper */}
<Paper
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
w={{ base: '100%', md: '50%' }}
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<Box>
<Text fw="bold" mb={6}>
Judul
</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
</Box>
<Box>
<Text fw="bold" mb={6}>
Deskripsi
</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
</Box>
<Group justify="right" mt="md">
<Button
onClick={submit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
loading={bentukKonservasiState.update.loading}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}

91
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx
View File

@@ -8,47 +8,80 @@ import { useProxy } from 'valtio/utils';
import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
function Page() {
const router = useRouter()
const listBentukKonservasiBerdasarkanAdat = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat)
const router = useRouter();
const listBentukKonservasiBerdasarkanAdat = useProxy(
stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat
);
useShallowEffect(() => {
listBentukKonservasiBerdasarkanAdat.findById.load('edit')
}, [])
listBentukKonservasiBerdasarkanAdat.findById.load('edit');
}, []);
if (!listBentukKonservasiBerdasarkanAdat.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
<Stack py={20} align="center">
<Skeleton radius="md" height={600} width="100%" />
</Stack>
)
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Box p={{ base: 'md', md: 'xl' }}>
<Paper withBorder radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
{/* Header */}
<Grid align="center" mb="lg">
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Bentuk Konservasi Berdasarkan Adat</Title>
<Title order={3} fw={600} c="dark">
Preview Bentuk Konservasi Berdasarkan Adat
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit')}>
<IconEdit size={16} />
<GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
<Button
size="sm"
variant="light"
color="green"
radius="md"
leftSection={<IconEdit size={16} />}
onClick={() =>
router.push(
'/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit'
)
}
>
Edit
</Button>
</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: listBentukKonservasiBerdasarkanAdat.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listBentukKonservasiBerdasarkanAdat.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
</Stack>
</Paper>
)
{/* Konten */}
<Stack gap="md">
<Paper radius="md" p={{ base: 'md', md: 'xl' }} bg={colors['BG-trans']} shadow="sm">
<Box mb="md">
<Text
fz={{ base: 'xl', md: '2xl' }}
fw={600}
c="dark"
dangerouslySetInnerHTML={{
__html: listBentukKonservasiBerdasarkanAdat.findById.data.judul,
}}
/>
</Box>
<Box>
<Text
fz={{ base: 'md', md: 'lg' }}
ta="justify"
c="dimmed"
lineClamp={10}
dangerouslySetInnerHTML={{
__html: listBentukKonservasiBerdasarkanAdat.findById.data.deskripsi,
}}
/>
</Box>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default Page;

134
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx
View File

@@ -9,78 +9,108 @@ import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
ssr: false,
});
const KonservasiAdatBaliTextEditor = dynamic(
() =>
import('../../_lib/konservasiAdatBaliTextEditor').then(
(mod) => mod.KonservasiAdatBaliTextEditor
),
{ ssr: false }
);
function EditFilosofiTriHitaKarana() {
const router = useRouter()
const filosofiTriHitaState = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita)
const router = useRouter();
const filosofiTriHitaState = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
useShallowEffect(() => {
if (!filosofiTriHitaState.findById.data) {
filosofiTriHitaState.findById.initialize(); // biar masuk ke `findFirst` route kamu
filosofiTriHitaState.findById.initialize();
}
}, []);
useEffect(() => {
if (filosofiTriHitaState.findById.data) {
setJudul(filosofiTriHitaState.findById.data.judul ?? '')
setContent(filosofiTriHitaState.findById.data.deskripsi ?? '')
setJudul(filosofiTriHitaState.findById.data.judul ?? '');
setContent(filosofiTriHitaState.findById.data.deskripsi ?? '');
}
}, [filosofiTriHitaState.findById.data])
}, [filosofiTriHitaState.findById.data]);
const submit = () => {
if (filosofiTriHitaState.findById.data) {
filosofiTriHitaState.findById.data.judul = judul;
filosofiTriHitaState.findById.data.deskripsi = content;
filosofiTriHitaState.update.save(filosofiTriHitaState.findById.data)
filosofiTriHitaState.update.save(filosofiTriHitaState.findById.data);
}
router.push('/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana')
}
router.push('/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana');
};
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 Filosofi Tri Hita Karana</Title>
<Text fw={"bold"}>Judul</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
<Text fw={"bold"}>Content</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={filosofiTriHitaState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Filosofi Tri Hita Karana
</Title>
</Group>
{/* Form Paper */}
<Paper
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
w={{ base: '100%', md: '50%' }}
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<Box>
<Text fw="bold" mb={6}>
Judul
</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
</Box>
<Box>
<Text fw="bold" mb={6}>
Deskripsi
</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
</Box>
<Group justify="right" mt="md">
<Button
onClick={submit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
loading={filosofiTriHitaState.update.loading}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}

85
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/page.tsx
View File

@@ -1,5 +1,4 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
@@ -7,49 +6,73 @@ import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
function Page() {
const router = useRouter()
const listFilosofi = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita)
const router = useRouter();
const listFilosofi = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita);
useShallowEffect(() => {
listFilosofi.findById.load('edit')
}, [])
listFilosofi.findById.load('edit');
}, []);
if (!listFilosofi.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
<Stack py={20}>
<Skeleton radius="md" height={600} />
</Stack>
)
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Box p="md">
<Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
<Grid align="center" mb={{ base: 'md', md: 'lg' }}>
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Filosofi Tri Hita Karana</Title>
<Title order={3} fw={600}>
Preview Filosofi Tri Hita Karana
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit')}>
<IconEdit size={16} />
<GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
<Button
size="sm"
variant="light"
color="green"
radius="md"
leftSection={<IconEdit size={16} />}
onClick={() =>
router.push(
'/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit'
)
}
>
Edit
</Button>
</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: listFilosofi.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
</Stack>
</Paper>
)
<Stack gap="md">
<Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
<Box mb="md" px={{ base: 0, md: 20 }}>
<Text
fz={{ base: 'xl', md: '2xl' }}
fw={600}
c="black"
dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.judul }}
/>
</Box>
<Box px={{ base: 0, md: 20 }}>
<Text
fz={{ base: 'md', md: 'lg' }}
ta="justify"
c="dimmed"
lineClamp={10}
dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.deskripsi }}
/>
</Box>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default Page;

130
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
View File

@@ -9,77 +9,105 @@ import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
ssr: false,
});
const KonservasiAdatBaliTextEditor = dynamic(
() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor),
{ ssr: false }
);
function EditNilaiKonservasiAdat() {
const router = useRouter()
const nilaiKonservasiState = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat)
const router = useRouter();
const nilaiKonservasiState = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
useShallowEffect(() => {
if (!nilaiKonservasiState.findById.data) {
nilaiKonservasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
nilaiKonservasiState.findById.initialize();
}
}, []);
useEffect(() => {
if (nilaiKonservasiState.findById.data) {
setJudul(nilaiKonservasiState.findById.data.judul ?? '')
setContent(nilaiKonservasiState.findById.data.deskripsi ?? '')
setJudul(nilaiKonservasiState.findById.data.judul ?? '');
setContent(nilaiKonservasiState.findById.data.deskripsi ?? '');
}
}, [nilaiKonservasiState.findById.data])
}, [nilaiKonservasiState.findById.data]);
const submit = () => {
if (nilaiKonservasiState.findById.data) {
nilaiKonservasiState.findById.data.judul = judul;
nilaiKonservasiState.findById.data.deskripsi = content;
nilaiKonservasiState.update.save(nilaiKonservasiState.findById.data)
nilaiKonservasiState.update.save(nilaiKonservasiState.findById.data);
}
router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat')
}
router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat');
};
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 Nilai Konservasi Adat</Title>
<Text fw={"bold"}>Judul</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
<Text fw={"bold"}>Content</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={nilaiKonservasiState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Nilai Konservasi Adat
</Title>
</Group>
{/* Form Paper */}
<Paper
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
w={{ base: '100%', md: '50%' }}
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<Box>
<Text fw="bold" mb={6}>
Judul
</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
</Box>
<Box>
<Text fw="bold" mb={6}>
Deskripsi
</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
</Box>
<Group justify="right" mt="md">
<Button
onClick={submit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
loading={nilaiKonservasiState.update.loading}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}

82
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx
View File

@@ -1,5 +1,4 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
@@ -8,47 +7,70 @@ import { useProxy } from 'valtio/utils';
import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
function Page() {
const router = useRouter()
const listNilaiKonservasiAdat = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat)
const router = useRouter();
const listNilaiKonservasiAdat = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat);
useShallowEffect(() => {
listNilaiKonservasiAdat.findById.load('edit')
}, [])
listNilaiKonservasiAdat.findById.load('edit');
}, []);
if (!listNilaiKonservasiAdat.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
<Stack py={20}>
<Skeleton radius="md" height={600} />
</Stack>
)
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Box p="md">
<Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
<Grid align="center" mb={{ base: 'md', md: 'lg' }}>
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Nilai Konservasi Adat</Title>
<Title order={3} fw={600}>
Preview Nilai Konservasi Adat
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')}>
<IconEdit size={16} />
<GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
<Button
size="sm"
variant="light"
color="green"
radius="md"
leftSection={<IconEdit size={16} />}
onClick={() =>
router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')
}
>
Edit
</Button>
</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: listNilaiKonservasiAdat.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
</Stack>
</Paper>
)
<Stack gap="md">
<Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
<Box mb="md">
<Text
fz={{ base: 'xl', md: '2xl' }}
fw={600}
c="black"
dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.judul }}
/>
</Box>
<Box>
<Text
fz={{ base: 'md', md: 'lg' }}
ta="justify"
c="dimmed"
lineClamp={10}
dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.deskripsi }}
/>
</Box>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default Page;