API Profile Desa Menu Desa

Fix Eror gallery bagian tabs video
Next UI Profile Desa

src/app/admin/(dashboard)/desa/profile/_lib/layoutTabsDetail.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Profile Desa",
+            value: "profiledesa",
+            href: "/admin/desa/profile/profile-desa"
+        },
+        {
+            label: "Profile Perbekel",
+            value: "profileperbekel",
+            href: "/admin/desa/profile/profile-perbekel"
+        }
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Profile 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>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsDetail;

src/app/admin/(dashboard)/desa/profile/_lib/layoutTabsEdit.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsEdit({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Sejarah Desa",
+            value: "sejarahdesa",
+            href: "/admin/desa/profile/edit/sejarah_desa"
+        },
+        {
+            label: "Visi Misi Desa",
+            value: "visimisidesa",
+            href: "/admin/desa/profile/edit/visi_misi_desa"
+        },
+        {
+            label: "Lambang Desa",
+            value: "lambangdesa",
+            href: "/admin/desa/profile/edit/lambang_desa"
+        },
+        {
+            label: "Maskot Desa",
+            value: "maskotdesa",
+            href: "/admin/desa/profile/edit/maskot_desa"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+         <Tabs color={colors['blue-button']} variant='default' value={activeTab} onChange={handleTabChange}>
+                <TabsList>
+                    {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 */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsEdit;

src/app/admin/(dashboard)/desa/profile/edit/layout.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import LayoutTabsEdit from "../_lib/layoutTabsEdit"
+
+function Layout({children}: {children: React.ReactNode}) {
+  return (
+    <LayoutTabsEdit>
+        {children}
+    </LayoutTabsEdit>
+  );
+}
+
+export default Layout;

src/app/admin/(dashboard)/desa/profile/edit/sejarah_desa/create.tsx

@@ -0,0 +1,34 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+
+
+
+function SejarahDesa() {
+
+
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Sejarah Desa</Title>
+              <Text fw={"bold"}>Deskripsi Sejarah Desa</Text>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default SejarahDesa;

src/app/admin/(dashboard)/desa/profile/edit/sejarah_desa/page.tsx

@@ -0,0 +1,25 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack } from '@mantine/core';
+
+function Page() {
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              {/* <Box px={{ base: 0, md: 30 }}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} />
+              </Box> */}
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/profile/layout.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import LayoutTabsDetail from "./_lib/layoutTabsDetail"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+        <LayoutTabsDetail>
+            {children}
+        </LayoutTabsDetail>
+    )
+}

src/app/admin/(dashboard)/desa/profile/page.tsx

@@ -1,53 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Title, Tabs, TabsList, TabsTab, TabsPanel } from '@mantine/core';
-import React from 'react';
-import SejarahDesa from './ui/sejarah_desa/page';
-import VisiMisiDesa from './ui/visi_misi_desa/page';
-import LambangDesa from './ui/lambang_desa/page';
-import MaskotDesa from './ui/maskot_desa/page';
-import ProfilePerbekel from './ui/profile_perbekel/page';
-
-function Page() {
-  return (
-    <Stack >
-    <Title order={3}>Profile Desa</Title>
-    <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Sejarah Desa"}>
-      <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-        <TabsTab value="Sejarah Desa">
-          Sejarah Desa
-        </TabsTab>
-        <TabsTab value="Visi Misi Desa">
-          Visi Misi Desa
-        </TabsTab>
-        <TabsTab value="Lambang Desa">
-          Lambang Desa
-        </TabsTab>
-        <TabsTab value="Maskot Desa">
-          Maskot Desa
-        </TabsTab>
-        <TabsTab value="Profile Perbekel">
-          Profile Perbekel
-        </TabsTab>
-      </TabsList>
-
-      <TabsPanel value="Sejarah Desa">
-        <SejarahDesa/>
-      </TabsPanel>
-      <TabsPanel value="Visi Misi Desa">
-        <VisiMisiDesa/>
-      </TabsPanel>
-      <TabsPanel value="Lambang Desa">
-       <LambangDesa/>
-      </TabsPanel>
-      <TabsPanel value="Maskot Desa">
-       <MaskotDesa/>
-      </TabsPanel>
-      <TabsPanel value="Profile Perbekel">
-        <ProfilePerbekel/>
-      </TabsPanel>
-    </Tabs>
-  </Stack>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/desa/profile/profile-desa/page.tsx

@@ -0,0 +1,134 @@
+'use client'
+import colors from '@/con/colors';
+import { Paper, Stack, Grid, GridCol, Title, Button, Box, Text, Center, Image, SimpleGrid } from '@mantine/core';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+function Page() {
+  const router = useRouter()
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Profile Desa</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/profile/edit/sejarah_desa')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        {/* Sejarah Desa */}
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box pb={30}>
+                <Center>
+                  <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                </Center>
+                <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Sejarah Desa</Text>
+              </Box>
+              <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                  Test
+                </Text>
+              </Paper>
+            </Paper>
+          </Stack>
+        </Box>
+        {/* Visi Misi Desa */}
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box pb={30}>
+                <Center>
+                  <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                </Center>
+              </Box>
+              <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Visi Desa</Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                  Test
+                </Text>
+              </Paper>
+              <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Misi Desa</Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                  Test
+                </Text>
+              </Paper>
+            </Paper>
+          </Stack>
+        </Box>
+        {/* Lambang Desa */}
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box pb={30}>
+                <Center>
+                  <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                </Center>
+                <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
+              </Box>
+              <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                  Test
+                </Text>
+              </Paper>
+            </Paper>
+          </Stack>
+        </Box>
+        {/* Maskot Desa */}
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box pb={30}>
+                <Center>
+                  <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                </Center>
+                <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
+              </Box>
+              <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                  Test
+                </Text>
+              </Paper>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  md: 2,
+                }}
+              >
+                <Center>
+                  <Box>
+                    <Paper p={"lg"}>
+                      <Image src={"/api/img/pohonpudak.png"} alt="" w={{ base: 150, md: 250 }} />
+                      <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pohon Pudak</Text>
+                    </Paper>
+                  </Box>
+                </Center>
+                <Center>
+                  <Box>
+                    <Paper p={"lg"}>
+                      <Image src={"/api/img/bungapudak.png"} alt="" w={{ base: 150, md: 250 }} />
+                      <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Bunga Pudak</Text>
+                    </Paper>
+                  </Box>
+                </Center>
+              </SimpleGrid>
+              <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                  Test
+                </Text>
+              </Paper>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/profile/profile-perbekel/page.tsx

@@ -0,0 +1,12 @@
+import colors from '@/con/colors';
+import { Paper, Text } from '@mantine/core';
+
+function Page() {
+  return (
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Text>Test</Text>
+    </Paper>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/profile/ui/sejarah_desa/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListPage() {
-  return (
-    <Box>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <Title order={3}>List Sejarah Desa</Title>
-      </Stack>
-    </Paper>
-  </Box>
-  );
-}
-
-export default ListPage;

src/app/admin/(dashboard)/desa/profile/ui/sejarah_desa/page.tsx

@@ -1,65 +0,0 @@
-'use client'
-import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import DesaEditorText from '../../../_com/desaEditorText';
-import ListPage from './listPage';
-import { useShallowEffect } from '@mantine/hooks';
-
-
-function SejarahDesa() {
-  const stateSejarah = useProxy(stateProfileDesa.Sejarah)
-
-  useShallowEffect(() => {
-    if (!stateSejarah.findById.data) {
-      stateSejarah.findById.initialize()
-    }
-  }, [])
-
-  const submit = () => {
-    if (stateSejarah.findById.data?.id && stateSejarah.findById.data.sejarah) {
-      stateSejarah.update.save({
-        id: stateSejarah.findById.data.id,
-        sejarah: stateSejarah.findById.data.sejarah
-      })
-    }
-  }
-
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack>
-              <Title order={3}>Sejarah Desa</Title>
-              <Text fw={"bold"}>Deskripsi Sejarah Desa</Text>
-              <DesaEditorText
-                key={stateSejarah.findById.data?.id ?? 'new'}
-                showSubmit={false}
-                onChange={(val) => {
-                  if (stateSejarah.findById.data) {
-                    stateSejarah.findById.data.sejarah = val
-                  }
-                }}
-                initialContent={stateSejarah.findById.data?.sejarah ?? ""}
-              />
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListPage />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default SejarahDesa;