UI & API Menu LandingPage, Submenu Profile

prisma/schema.prisma

@@ -125,6 +125,7 @@ model ProgramInovasi {
 
 model MediaSosial {
   id        String      @id @default(cuid())
+  name      String      
   image     FileStorage @relation(fields: [imageId], references: [id])
   imageId   String
   iconUrl   String?     @db.VarChar(255)

src/app/admin/(dashboard)/_state/landing-page/profile.ts

@@ -404,11 +404,13 @@ const pejabatDesa = proxy({
 });
 
 const templateMediaSosial = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
   imageId: z.string().min(1, "Gambar wajib dipilih"),
   iconUrl: z.string().min(3, "Icon URL minimal 3 karakter"),
 });
 
 type MediaSosialForm = {
+  name: string;
   imageId: string;
   iconUrl: string;
 };
@@ -420,6 +422,7 @@ const mediaSosial = proxy({
     async create() {
       // Ensure all required fields are non-null
       const formData = {
+        name: mediaSosial.create.form.name || "",
         imageId: mediaSosial.create.form.imageId || "",
         iconUrl: mediaSosial.create.form.iconUrl || "",
       };
@@ -467,6 +470,12 @@ const mediaSosial = proxy({
       };
     }> | null,
     async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+    
+      mediaSosial.update.loading = true;
       try {
         const res = await fetch(`/api/landingpage/mediasosial/${id}`);
         if (res.ok) {
@@ -524,6 +533,8 @@ const mediaSosial = proxy({
           return null;
         }
       
+        mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
+      
         try {
           const response = await fetch(`/api/landingpage/mediasosial/${id}`, {
             method: "GET",
@@ -531,6 +542,7 @@ const mediaSosial = proxy({
               "Content-Type": "application/json",
             },
           });
+      
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
           }
@@ -541,8 +553,9 @@ const mediaSosial = proxy({
             const data = result.data;
             this.id = data.id;
             this.form = {
-              imageId: data.imageId,
+              name: data.name || "",
-              iconUrl: data.iconUrl,
+              imageId: data.imageId || "",
+              iconUrl: data.iconUrl || "",
             };
             return data;
           } else {
@@ -552,7 +565,7 @@ const mediaSosial = proxy({
           console.error((error as Error).message);
           toast.error("Terjadi kesalahan saat mengambil data media sosial");
         } finally {
-          mediaSosial.update.loading = false;
+          mediaSosial.update.loading = false; // ✅ Supaya berhenti loading walau error
         }
       },
       
@@ -575,6 +588,7 @@ const mediaSosial = proxy({
               "Content-Type": "application/json",
             },
             body: JSON.stringify({
+              name: this.form.name,
               imageId: this.form.imageId,
               iconUrl: this.form.iconUrl,
             }),

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

@@ -1,11 +1,174 @@
-import React from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+'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 EditMediaSosial() {
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  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: stateMediaSosial.update.form.name || "",
+    iconUrl: stateMediaSosial.update.form.iconUrl || "",
+    imageId: stateMediaSosial.update.form.imageId || ""
+  })
+
+  useEffect(() => {
+    const id = params?.id as string;
+    if (!id) return;
+
+    const loadMediaSosial = async () => {
+      try {
+        const data = await stateMediaSosial.update.load(id);
+
+        if (data) {
+          setFormData({
+            name: data.name || "",
+            iconUrl: data.iconUrl || "",
+            imageId: data.imageId || "",
+          });
+          // 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"
+        );
+      }
+    }
+
+    loadMediaSosial();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateMediaSosial.update.form = {
+        ...stateMediaSosial.update.form,
+        name: formData.name,
+        iconUrl: formData.iconUrl,
+        imageId: formData.imageId ?? "",
+      }
+      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
+        stateMediaSosial.update.form.imageId = uploaded.id;
+      }
+
+      await stateMediaSosial.update.update();
+      toast.success("Media Sosial berhasil diperbarui!");
+      router.push("/admin/landing-page/profile/media-sosial");
+    } catch (error) {
+      console.error("Error updating media sosial:", error);
+      toast.error("Terjadi kesalahan saat memperbarui media sosial");
+    }
+  };
 
-function Page() {
   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 Media Sosial</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>
-      Page
+                    <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 Media Sosial / Nama Kontak</Text>}
+            placeholder='Masukkan nama media sosial'
+          />
+          <TextInput
+            value={formData.iconUrl}
+            onChange={(e) => setFormData({ ...formData, iconUrl: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Icon URL / No Telephone</Text>}
+            placeholder='Masukkan icon url'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 
-export default Page;
+export default EditMediaSosial;

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

@@ -1,11 +1,107 @@
-import React from 'react';
+'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 Page() {
+function DetailMediaSosial() {
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateMediaSosial.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateMediaSosial.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/profile/media-sosial")
+    }
+  }
+
+  if (!stateMediaSosial.findUnique.data) {
     return (
-    <div>
+      <Stack py={10}>
-      Page
+        <Skeleton h={500} />
-    </div>
+      </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 Media Sosial</Text>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Media Sosial / Nama Kontak</Text>
+                <Text fz={"lg"}>{stateMediaSosial.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Icon URL / No Telephone</Text>
+                <Text fz={"lg"}>{stateMediaSosial.findUnique.data?.iconUrl}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Box w={100} h={100}>
+                  <Image src={stateMediaSosial.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (stateMediaSosial.findUnique.data) {
+                        setSelectedId(stateMediaSosial.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!stateMediaSosial.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateMediaSosial.findUnique.data) {
+                        router.push(`/admin/landing-page/profile/media-sosial/${stateMediaSosial.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateMediaSosial.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 media sosial ini?"
+      />
+    </Box>
   );
 }
 
-export default Page;
+export default DetailMediaSosial;

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

@@ -1,11 +1,148 @@
-import React from 'react';
+/* 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 Page() {
+function CreateMediaSosial() {
+  const router = useRouter();
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    stateMediaSosial.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateMediaSosial.create.form = {
+      name: "",
+      imageId: "",
+      iconUrl: "",
+    };
+    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");
+    }
+
+    stateMediaSosial.create.form.imageId = uploaded.id;
+
+    await stateMediaSosial.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/profile/media-sosial")
+  }
   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 Media Sosial</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>
-      Page
+                    <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={stateMediaSosial.create.form.name || ''}
+            onChange={(val) => {
+              stateMediaSosial.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Media Sosial / Nama Kontak</Text>}
+            placeholder='Masukkan nama media sosial / nama kontak'
+          />
+          <TextInput
+            value={stateMediaSosial.create.form.iconUrl || ''}
+            onChange={(val) => {
+              stateMediaSosial.create.form.iconUrl = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Link Media Sosial / No Telephone</Text>}
+            placeholder='Masukkan link media sosial / no telephone'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 
-export default Page;
+export default CreateMediaSosial;

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

@@ -1,9 +1,93 @@
-import { Box, Title } from "@mantine/core";
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Image, 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';
 
-export default function MediaSosial() {
+function MediaSosial() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
-            <Title order={3}>Media Sosial</Title>
+      <HeaderSearch
+        title='Media Sosial'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListMediaSosial search={search} />
     </Box>
+  );
+}
+
+function ListMediaSosial({ search }: { search: string }) {
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    stateMediaSosial.findMany.load()
+  }, [])
+
+  const filteredData = (stateMediaSosial.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.iconUrl?.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateMediaSosial.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
     )
   }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Media Sosial'
+          href='/admin/landing-page/profile/media-sosial/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Media Sosial / Nama Kontak</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Icon URL / No Telephone</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Box w={50} h={50}>
+                    <Image src={item.image?.link} alt={item.name} />
+                  </Box>
+                </TableTd>
+                <TableTd>{item.iconUrl}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default MediaSosial;

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
@@ -52,7 +53,7 @@ function EditProgramInovasi() {
     }
 
     loadProgramInovasi();
-  }, [params?.id, stateProgramInovasi.update]);
+  }, [params?.id]);
 
   const handleSubmit = async () => {
     try {

src/app/api/[[...slugs]]/_lib/landing_page/profile/media-sosial/create.ts

@@ -2,6 +2,7 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type FormCreate = {
+  name: string;
   imageId: string;
   iconUrl: string;
 };
@@ -12,6 +13,7 @@ export default async function mediaSosialCreate(context: Context) {
   try {
     const result = await prisma.mediaSosial.create({
       data: {
+        name: body.name,
         imageId: body.imageId,
         iconUrl: body.iconUrl,
       },

src/app/api/[[...slugs]]/_lib/landing_page/profile/media-sosial/index.ts

@@ -19,6 +19,7 @@ const MediaSosial = new Elysia({
   // ✅ Create
   .post("/create", MediaSosialCreate, {
     body: t.Object({
+      name: t.String(),
       imageId: t.String(),
       iconUrl: t.String(),
     }),
@@ -27,6 +28,7 @@ const MediaSosial = new Elysia({
   // ✅ Update
   .put("/:id", MediaSosialUpdate, {
     body: t.Object({
+      name: t.String(),
       imageId: t.Optional(t.String()),
       iconUrl: t.Optional(t.String()),
     }),

src/app/api/[[...slugs]]/_lib/landing_page/profile/media-sosial/updt.ts

@@ -3,6 +3,7 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type FormUpdateMediaSosial = {
+  name?: string;
   imageId?: string;
   iconUrl?: string;
 };
@@ -23,6 +24,7 @@ export default async function mediaSosialUpdate(context: Context) {
     const updated = await prisma.mediaSosial.update({
       where: { id },
       data: {
+        name: body.name,
         imageId: body.imageId,
         iconUrl: body.iconUrl,
       },