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

API & UI Menu Lingkungan, Submenu Program Penghijauan

Browse Source
This commit is contained in:
nico
2025-07-18 16:27:38 +08:00
parent 4025771a4d
commit cd343badb2
23 changed files with 985 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/admin/(dashboard)/_com/leafletMapEdit.tsx
View File

@@ -6,16 +6,6 @@ import { useState, useEffect } from 'react';
import 'leaflet/dist/leaflet.css';
import L, { LeafletMouseEvent } from 'leaflet';
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
iconUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
shadowUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
});
type Props = {
initialPosition: { lat: number; lng: number };
onChange: (pos: { lat: number; lng: number }) => void;
@@ -24,6 +14,21 @@ type Props = {
export default function LeafletMapEdit({ initialPosition, onChange }: Props) {
const [markerPos, setMarkerPos] = useState(initialPosition);
// ✅ Pastikan icon config cuma jalan di client
useEffect(() => {
if (typeof window !== 'undefined') {
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
iconUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
shadowUrl:
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
});
}
}, []);
useEffect(() => {
setMarkerPos(initialPosition);
}, [initialPosition]);

92
src/app/admin/(dashboard)/_com/selectIcon.tsx Normal file
View File

@@ -0,0 +1,92 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { Box, rem, Select } from '@mantine/core';
import {
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconHomeEco,
IconLeaf,
IconRecycle,
IconScale,
IconShieldFilled,
IconTent,
IconTrashFilled,
IconTrendingUp,
IconTrophy,
IconTruckFilled,
} from '@tabler/icons-react';
import { useEffect, useState } from 'react';
const iconMap = {
ekowisata: { label: 'Ekowisata', icon: IconLeaf },
kompetisi: { label: 'Kompetisi', icon: IconTrophy },
wisata: { label: 'Wisata', icon: IconTent },
ekonomi: { label: 'Ekonomi', icon: IconChartLine },
sampah: { label: 'Sampah', icon: IconRecycle },
truck: { label: 'Truck', icon: IconTruckFilled },
scale: { label: 'Scale', icon: IconScale },
clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
trash: { label: 'Trash', icon: IconTrashFilled },
lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
};
type IconKey = keyof typeof iconMap;
const iconList = Object.entries(iconMap).map(([value, data]) => ({
value,
label: data.label,
}));
export default function SelectIconProgram(
{ onChange }: { onChange: (value: IconKey) => void }) {
const [selectedIcon, setSelectedIcon] = useState<IconKey>('ekowisata');
const IconComponent = iconMap[selectedIcon]?.icon || null;
// Push default icon ke state saat render awal
useEffect(() => {
onChange(selectedIcon);
}, []);
return (
<Box maw={300}>
<Select
placeholder="Pilih ikon"
value={selectedIcon}
onChange={(value) => {
if (value) {
setSelectedIcon(value as IconKey);
onChange(value as IconKey);
}
}}
data={iconList}
leftSection={
IconComponent && (
<Box>
<IconComponent size={24} stroke={1.5} />
</Box>
)
}
withCheckIcon={false}
searchable={false}
rightSectionWidth={0}
styles={{
input: {
textAlign: 'left',
fontSize: rem(16),
paddingLeft: 40,
},
section: {
left: 10,
right: 'auto',
},
}}
/>
</Box>
);
}

86
src/app/admin/(dashboard)/_com/selectIconEdit.tsx Normal file
View File

@@ -0,0 +1,86 @@
'use client'
import { Box, rem, Select } from '@mantine/core';
import {
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconHomeEco,
IconLeaf,
IconRecycle,
IconScale,
IconShieldFilled,
IconTent,
IconTrashFilled,
IconTrendingUp,
IconTrophy,
IconTruckFilled,
} from '@tabler/icons-react';
const iconMap = {
ekowisata: { label: 'Ekowisata', icon: IconLeaf },
kompetisi: { label: 'Kompetisi', icon: IconTrophy },
wisata: { label: 'Wisata', icon: IconTent },
ekonomi: { label: 'Ekonomi', icon: IconChartLine },
sampah: { label: 'Sampah', icon: IconRecycle },
truck: { label: 'Truck', icon: IconTruckFilled },
scale: { label: 'Scale', icon: IconScale },
clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
trash: { label: 'Trash', icon: IconTrashFilled },
lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
};
type IconKey = keyof typeof iconMap;
const iconList = Object.entries(iconMap).map(([value, data]) => ({
value,
label: data.label,
}));
export default function SelectIconProgramEdit({
onChange,
value,
}: {
onChange: (value: IconKey) => void;
value: IconKey;
}) {
const IconComponent = iconMap[value]?.icon || null;
return (
<Box maw={300}>
<Select
placeholder="Pilih ikon"
value={value}
onChange={(value) => {
if (value) onChange(value as IconKey);
}}
data={iconList}
leftSection={
IconComponent && (
<Box>
<IconComponent size={24} stroke={1.5} />
</Box>
)
}
withCheckIcon={false}
searchable={false}
rightSectionWidth={0}
styles={{
input: {
textAlign: 'left',
fontSize: rem(16),
paddingLeft: 40,
},
section: {
left: 10,
right: 'auto',
},
}}
/>
</Box>
);
}