QC User & Admin Responsive : Menu Landing Page - Desa

This commit is contained in:
2025-10-02 00:10:33 +08:00
parent 63054cedf0
commit 8a6d8ed8db
70 changed files with 1839 additions and 1052 deletions

View File

@@ -166,13 +166,18 @@ function EditBerita() {
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
/>
<TextInput
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi singkat"
value={formData.deskripsi}
onChange={(e) => handleChange("deskripsi", e.target.value)}
required
/>
<Box>
<Text fz="sm" fw="bold">
Deskripsi Singkat
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) =>
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
}
/>
</Box>
{/* Upload Gambar */}
<Box>

View File

@@ -80,7 +80,7 @@ function DetailBerita() {
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
</Box>
<Box>

View File

@@ -131,13 +131,17 @@ export default function CreateBerita() {
required
/>
<TextInput
label="Deskripsi Singkat"
required
placeholder="Masukkan deskripsi berita"
defaultValue={beritaState.berita.create.form.deskripsi}
onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Deskripsi Singkat
</Text>
<CreateEditor
value={beritaState.berita.create.form.deskripsi}
onChange={(htmlContent) => {
beritaState.berita.create.form.deskripsi = htmlContent;
}}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>

View File

@@ -1,31 +1,11 @@
// export function convertYoutubeUrlToEmbed(url: string) {
// const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
// return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
// }
export function convertYoutubeUrlToEmbed(url: string) {
const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
const videoIdMatch = url.match(
/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
);
return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
}
// (url: string): string | null {
// const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
// const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
// const matchWatch = url.match(watchRegex);
// const matchShort = url.match(shortRegex);
// if (matchWatch) {
// return `https://www.youtube.com/embed/${matchWatch[1]}`;
// }
// if (matchShort) {
// return `https://www.youtube.com/embed/${matchShort[1]}`;
// }
// return null;
// }
}

View File

@@ -44,32 +44,40 @@ function EditSuratKeterangan() {
const [previewImage2, setPreviewImage2] = useState<string | null>(null);
// load data awal
useEffect(() => {
const loadSurat = async () => {
const id = params?.id as string;
if (!id) return;
useEffect(() => {
const loadSurat = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateSurat.edit.load(id);
if (data) {
setFormData({
name: data.name || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
image2Id: data.image2Id || '',
});
try {
const data = await stateSurat.edit.load(id);
if (data) {
// merge style -> isi hanya field kosong
setFormData((prev) => ({
...prev,
name: prev.name || data.name || '',
deskripsi: prev.deskripsi || data.deskripsi || '',
imageId: prev.imageId || data.imageId || '',
image2Id: prev.image2Id || data.image2Id || '',
}));
setPreviewImage(data.image?.link || null);
setPreviewImage2(data.image2?.link || null);
if (data.image?.link && !previewImage) {
setPreviewImage(data.image.link);
}
if (data.image2?.link && !previewImage2) {
setPreviewImage2(data.image2.link);
}
} catch (error) {
console.error('Error loading surat:', error);
toast.error('Gagal memuat data surat');
}
};
} catch (error) {
console.error("Error loading surat:", error);
toast.error("Gagal memuat data surat");
}
};
loadSurat();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [params?.id]);
loadSurat();
}, [params?.id, stateSurat.edit]);
// handler untuk submit
const handleSubmit = useCallback(async () => {

View File

@@ -47,11 +47,11 @@ function EditPotensi() {
useEffect(() => {
potensiDesaState.kategoriPotensi.findMany.load();
const loadPotensi = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await potensiState.edit.load(id);
if (data) {
@@ -62,7 +62,17 @@ function EditPotensi() {
content: data.content || "",
imageId: data.imageId || "",
});
// // merge, bukan replace
// setFormData((prev) => ({
// ...prev,
// name: data.name ?? prev.name,
// deskripsi: data.deskripsi ?? prev.deskripsi,
// kategoriId: data.kategoriId ?? prev.kategoriId,
// content: data.content ?? prev.content,
// imageId: data.imageId ?? prev.imageId,
// }));
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
@@ -72,9 +82,10 @@ function EditPotensi() {
toast.error("Gagal memuat data potensi");
}
};
loadPotensi();
}, [params?.id]);
const handleSubmit = async () => {
try {
@@ -143,13 +154,17 @@ function EditPotensi() {
required
/>
<TextInput
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi"
value={formData.deskripsi}
onChange={(e) => handleChange("deskripsi", e.target.value)}
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Deskripsi Singkat
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) =>
handleChange("deskripsi", htmlContent)
}
/>
</Box>
<Select
value={formData.kategoriId}

View File

@@ -25,7 +25,7 @@ export default function DetailPotensi() {
potensiState.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
router.push("/admin/desa/potensi");
router.push("/admin/desa/potensi/list-potensi");
}
};
@@ -77,7 +77,7 @@ export default function DetailPotensi() {
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
</Box>
<Box>

View File

@@ -101,13 +101,17 @@ function CreatePotensi() {
/>
{/* Deskripsi */}
<TextInput
defaultValue={potensiState.create.form.deskripsi}
onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
label="Deskripsi"
placeholder="Masukkan deskripsi singkat"
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Deskripsi Singkat
</Text>
<CreateEditor
value={potensiState.create.form.deskripsi}
onChange={(htmlContent) => {
potensiState.create.form.deskripsi = htmlContent;
}}
/>
</Box>
{/* Kategori */}
<Select

View File

@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
<Box w={200}>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
</Box>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
<Box w={200}>
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={300}>
<Text
lineClamp={1}
truncate
fz="sm"
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
</Box>
</TableTd>

View File

@@ -18,7 +18,9 @@ function Page() {
const router = useRouter();
const params = useParams();
const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
const [images, setImages] = useState<
Array<{ file: File | null; preview: string; label: string; imageId?: string }>
>([]);
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
@@ -55,6 +57,7 @@ function Page() {
file: null,
preview: img.image.link,
label: img.label,
imageId: img.image.id, // simpan id lama
})));
}
}
@@ -88,25 +91,24 @@ function Page() {
// Upload semua gambar baru
for (const img of images) {
if (!img.file) {
// Kalau gambar lama, skip upload
if (!img.preview) continue;
uploadedImages.push({ imageId: '', label: img.label });
if (!img.imageId) continue; // kalau benar2 kosong, skip
uploadedImages.push({ imageId: img.imageId, label: img.label });
continue;
}
// upload baru
const res = await ApiFetch.api.fileStorage.create.post({
file: img.file,
name: img.file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
toast.error("Gagal upload salah satu gambar");
return;
}
uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
}
// Update ke global state
maskotState.update.updateField("judul", formData.judul);

View File

@@ -162,7 +162,7 @@ function Page() {
style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
>
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
Lambang Desa
{lambang.judul}
</Text>
</Paper>
</Stack>
@@ -216,7 +216,7 @@ function Page() {
<Divider my="md" color={colors['blue-button']} />
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
<Stack mt="md" gap="sm">
<SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
<SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
{maskot.images.map((img, idx) => (
<Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
<Center>

View File

@@ -75,22 +75,28 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} lineClamp={1}>{item.nama}</Text>
<Box w={200}>
<Text fw={500} lineClamp={1}>{item.nama}</Text>
</Box>
</TableTd>
<TableTd>
<Text lineClamp={1}>{item.periode}</Text>
<Box w={200}>
<Text lineClamp={1}>{item.periode}</Text>
</Box>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
>
Detail
</Button>
<Box w={200}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
>
Detail
</Button>
</Box>
</TableTd>
</TableTr>
))