Fix Tampilan User & Admin Menu Inovasi & Lingkungan

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx

@@ -9,77 +9,103 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
-  ssr: false,
-});
+const EdukasiLingkunganTextEditor = dynamic(
+  () => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor),
+  { ssr: false }
+);
 
 function EditTujuanEdukasiLingkungan() {
-  const router = useRouter()
-  const tujuanEdukasiState = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  const router = useRouter();
+  const tujuanEdukasiState = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!tujuanEdukasiState.findById.data) {
-      tujuanEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      tujuanEdukasiState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (tujuanEdukasiState.findById.data) {
-      setJudul(tujuanEdukasiState.findById.data.judul ?? '')
-      setContent(tujuanEdukasiState.findById.data.deskripsi ?? '')
+      setJudul(tujuanEdukasiState.findById.data.judul ?? '');
+      setContent(tujuanEdukasiState.findById.data.deskripsi ?? '');
     }
-  }, [tujuanEdukasiState.findById.data])
+  }, [tujuanEdukasiState.findById.data]);
 
   const submit = () => {
     if (tujuanEdukasiState.findById.data) {
       tujuanEdukasiState.findById.data.judul = judul;
       tujuanEdukasiState.findById.data.deskripsi = content;
-      tujuanEdukasiState.update.save(tujuanEdukasiState.findById.data)
+      tujuanEdukasiState.update.save(tujuanEdukasiState.findById.data);
     }
-    router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan')
-  }
+    router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan');
+  };
+
   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 Edukasi Lingkungan</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Content</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={tujuanEdukasiState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <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 Tujuan Edukasi Lingkungan
+        </Title>
+      </Group>
+
+      <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>
+            <EdukasiLingkunganTextEditor
+              showSubmit={false}
+              onChange={setJudul}
+              initialContent={judul}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Konten
+            </Text>
+            <EdukasiLingkunganTextEditor
+              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={tujuanEdukasiState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx

@@ -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,68 @@ import { useProxy } from 'valtio/utils';
 import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
 
 function Page() {
-  const router = useRouter()
-  const listTujuanEdukasi = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  const router = useRouter();
+  const listTujuanEdukasi = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi);
+
   useShallowEffect(() => {
-    listTujuanEdukasi.findById.load('edit')
-  }, [])
+    listTujuanEdukasi.findById.load('edit');
+  }, []);
 
   if (!listTujuanEdukasi.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 Tujuan Edukasi Lingkungan</Title>
+            <Title order={3} fw={600}>Preview Tujuan Edukasi Lingkungan</Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/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/edukasi-lingkungan/tujuan-edukasi-lingkungan/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: listTujuanEdukasi.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.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: listTujuanEdukasi.findById.data.judul }}
+              />
+            </Box>
+            <Box>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.deskripsi }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default Page;