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

UI & API Menu LandingPage, Submenu Profile

Browse Source
This commit is contained in:
nico
2025-07-23 12:19:10 +08:00
parent 88a10538a7
commit 1bc6dd8dbf
11 changed files with 534 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
prisma/schema.prisma
View File

@@ -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)

BIN
public/assets/images/sosmed/telephone-call.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

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

@@ -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) {
@@ -523,7 +532,9 @@ const mediaSosial = proxy({
toast.warn("ID tidak valid");
return null;
}
mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
try {
const response = await fetch(`/api/landingpage/mediasosial/${id}`, {
method: "GET",
@@ -531,18 +542,20 @@ const mediaSosial = proxy({
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
imageId: data.imageId,
iconUrl: data.iconUrl,
name: data.name || "",
imageId: data.imageId || "",
iconUrl: data.iconUrl || "",
};
return data;
} else {
@@ -552,10 +565,10 @@ 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
}
},
async update() {
const cek = templateMediaSosial.safeParse(mediaSosial.update.form);
if (!cek.success) {
@@ -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,
}),

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

@@ -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 (
<div>
Page
</div>
<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>
<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;

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

@@ -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 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 (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
function Page() {
return (
<div>
Page
</div>
<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;

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

@@ -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 (
<div>
Page
</div>
<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>
<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;

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

@@ -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>
<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 (
<Box>
<Title order={3}>Media Sosial</Title>
</Box>
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;

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

@@ -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 {

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

@@ -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,
},

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

@@ -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()),
}),

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

@@ -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,
},