API & UI Menu Landing Page, Submenu Profile

src/app/admin/(dashboard)/landing-page/layanan/page.tsx

@@ -1,23 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Stack, Text, Textarea, Title } from '@mantine/core';
-
-function Page() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={2}>Layanan</Title>
-        <Textarea
-          label={<Text>Deskripsi</Text>}
-          placeholder='tambah deskripsi'
-        />
-        <Group>
-          <Button
-            bg={colors['blue-button']} fz={'md'}>Submit</Button>
-        </Group>
-      </Stack>
-    </Box>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/landing-page/profile/_lib/layoutTabs.tsx

@@ -0,0 +1,67 @@
+/* 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 LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Program Inovasi",
+      value: "program-inovasi",
+      href: "/admin/landing-page/profile/program-inovasi"
+    },
+    {
+      label: "Pejabat Desa",
+      value: "pejabat-desa",
+      href: "/admin/landing-page/profile/pejabat-desa"
+    },
+    {
+      label: "Media Sosial",
+      value: "media-sosial",
+      href: "/admin/landing-page/profile/media-sosial"
+    },
+  ];
+  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</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 LayoutTabs;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import LayoutTabs from './_lib/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  );
+}
+export default Layout;

src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/edit/page.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 function Page() {
   return (
     <div>
-      Potensi
+      Page
     </div>
   );
 }

src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/page.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 function Page() {
   return (
     <div>
-      Profile
+      Page
     </div>
   );
 }

src/app/admin/(dashboard)/landing-page/profile/media-sosial/create/page.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 function Page() {
   return (
     <div>
-      Penghargaan
+      Page
     </div>
   );
 }

src/app/admin/(dashboard)/landing-page/profile/media-sosial/page.tsx

@@ -0,0 +1,9 @@
+import { Box, Title } from "@mantine/core";
+
+export default function MediaSosial() {
+    return (
+        <Box>
+            <Title order={3}>Media Sosial</Title>
+        </Box>
+    )
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/edit/page.tsx

@@ -0,0 +1,181 @@
+'use client'
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditProgramInovasi() {
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: stateProgramInovasi.update.form.name || "",
+    description: stateProgramInovasi.update.form.description || "",
+    imageId: stateProgramInovasi.update.form.imageId || "",
+    link: stateProgramInovasi.update.form.link || "",
+  })
+
+  useEffect(() => {
+    const id = params?.id as string;
+    if (!id) return;
+
+    const loadProgramInovasi = async () => {
+      try {
+        const data = await stateProgramInovasi.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || "",
+            description: data.description || "",
+            imageId: data.imageId || "",
+            link: data.link || ""
+          });
+          // Tampilkan preview gambar
+          if (data.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program inovasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengambil data program inovasi"
+        );
+      }
+    }
+
+    loadProgramInovasi();
+  }, [params?.id, stateProgramInovasi.update]);
+
+  const handleSubmit = async () => {
+    try {
+      stateProgramInovasi.update.form = {
+        ...stateProgramInovasi.update.form,
+        name: formData.name,
+        description: formData.description,
+        imageId: formData.imageId,
+        link: formData.link,
+      }
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        stateProgramInovasi.update.form.imageId = uploaded.id;
+      }
+
+      await stateProgramInovasi.update.update();
+      toast.success("Program Inovasi berhasil diperbarui!");
+      router.push("/admin/landing-page/profile/program-inovasi");
+    } catch (error) {
+      console.error("Error updating program inovasi:", error);
+      toast.error("Terjadi kesalahan saat memperbarui program inovasi");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Program Inovasi</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
+            placeholder='Masukkan nama produk'
+          />
+          <TextInput
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
+            placeholder='Masukkan deskripsi'
+          />
+          <TextInput
+            value={formData.link}
+            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Link</Text>}
+            placeholder='Masukkan link'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditProgramInovasi;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailProgramInovasi() {
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateProgramInovasi.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateProgramInovasi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/profile/program-inovasi")
+    }
+  }
+
+  if (!stateProgramInovasi.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Inovasi</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Program Inovasi</Text>
+                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.description}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Link</Text>
+                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.link}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={stateProgramInovasi.findUnique.data?.image?.link} alt="gambar" />
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramInovasi.findUnique.data) {
+                        setSelectedId(stateProgramInovasi.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!stateProgramInovasi.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramInovasi.findUnique.data) {
+                        router.push(`/admin/landing-page/profile/program-inovasi/${stateProgramInovasi.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateProgramInovasi.findUnique.data}
+                    color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus program inovasi ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailProgramInovasi;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/create/page.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import profileLandingPageState from '../../../../_state/landing-page/profile';
+
+function CreateProgramInovasi() {
+  const router = useRouter();
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    stateProgramInovasi.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateProgramInovasi.create.form = {
+      name: "",
+      description: "",
+      imageId: "",
+      link: "",
+    };
+    setPreviewImage(null);
+    setFile(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateProgramInovasi.create.form.imageId = uploaded.id;
+
+    await stateProgramInovasi.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/profile/program-inovasi")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Program Inovasi</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <TextInput
+            value={stateProgramInovasi.create.form.name || ''}
+            onChange={(val) => {
+              stateProgramInovasi.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Program Inovasi</Text>}
+            placeholder='Masukkan nama program inovasi'
+          />
+          <TextInput
+            value={stateProgramInovasi.create.form.description || ''}
+            onChange={(val) => {
+              stateProgramInovasi.create.form.description = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
+            placeholder='Masukkan deskripsi'
+          />
+
+          <TextInput
+            value={stateProgramInovasi.create.form.link || ''}
+            onChange={(val) => {
+              stateProgramInovasi.create.form.link = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Link</Text>}
+            placeholder='Masukkan link'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateProgramInovasi;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/page.tsx

@@ -0,0 +1,90 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import profileLandingPageState from '../../../_state/landing-page/profile';
+
+function ProgramInovasi() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Program Inovasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListProgramInovasi search={search} />
+    </Box>
+  );
+}
+
+function ListProgramInovasi({ search }: { search: string }) {
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateProgramInovasi.findMany.load()
+  }, [])
+
+  const filteredData = (stateProgramInovasi.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.description?.toLowerCase().includes(keyword) ||
+      item.link?.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateProgramInovasi.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Program Inovasi'
+          href='/admin/landing-page/profile/program-inovasi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Program</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Link</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.description}</TableTd>
+                <TableTd>{item.link}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/landing-page/profile/program-inovasi/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ProgramInovasi;