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

Semua tooltips di admin sudah dihilangkan

Browse Source
This commit is contained in:
nico
2025-11-07 14:38:32 +08:00
parent db8909b9ed
commit 417a8937f5
195 changed files with 2479 additions and 3083 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx
View File

@@ -12,8 +12,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -107,11 +106,9 @@ export default function EditDataLingkunganDesa() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Data Lingkungan Desa
</Title>

48
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import {
IconArrowBack,
@@ -136,32 +136,28 @@ function DetailDataLingkunganDesa() {
{/* Action Buttons */}
<Group gap="sm" mt="sm">
<Tooltip label="Hapus Data Lingkungan Desa" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Data Lingkungan Desa" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>

21
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
View File

@@ -8,8 +8,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -41,16 +40,14 @@ function CreateDataLingkunganDesa() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={22} />
</Button>
</Tooltip>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={22} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Data Lingkungan Desa
</Title>

19
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
View File

@@ -5,8 +5,7 @@ import colors from '@/con/colors';
import {
Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack,
Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text,
Title,
Tooltip
Title
} from '@mantine/core';
import {
IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled,
@@ -83,11 +82,9 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
<Stack>
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Data Lingkungan Desa</Title>
<Tooltip label="Tambah Data Lingkungan Desa" withArrow>
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
Tambah Baru
</Button>
</Tooltip>
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
Tambah Baru
</Button>
</Group>
<Table highlightOnHover>
<TableThead>
@@ -114,11 +111,9 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
<Paper withBorder shadow="md" radius="md" bg={colors['white-1']} p="lg">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Data Lingkungan Desa</Title>
<Tooltip label="Tambah Data Lingkungan Desa" withArrow>
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
Tambah Baru
</Button>
</Tooltip>
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>

48
src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconBook, IconLeaf, IconSchool } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -15,21 +15,18 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
label: "Tujuan Edukasi Lingkungan",
value: "tujuanedukasilingkungan",
href: "/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan",
tooltip: "Lihat tujuan edukasi lingkungan",
icon: <IconLeaf size={18} stroke={1.8} />
},
{
label: "Materi Edukasi Yang Diberikan",
value: "materiedukasiyangdiberikan",
href: "/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan",
tooltip: "Kelola materi edukasi yang diberikan",
icon: <IconBook size={18} stroke={1.8} />
},
{
label: "Contoh Kegiatan Di Desa Darmasaba",
value: "contohkegiatan",
href: "/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba",
tooltip: "Lihat contoh kegiatan desa Darmasaba",
icon: <IconSchool size={18} stroke={1.8} />
},
];
@@ -76,27 +73,26 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
}}
>
{tabs.map((tab, i) => (
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
<TabsTab
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
whiteSpace: "nowrap",
transition: "all 0.2s ease",
}}
>
<span style={{
display: "inline-block",
maxWidth: "200px",
overflow: "hidden",
textOverflow: "ellipsis"
}}>
{tab.label}
</span>
</TabsTab>
</Tooltip>
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
whiteSpace: "nowrap",
transition: "all 0.2s ease",
}}
>
<span style={{
display: "inline-block",
maxWidth: "200px",
overflow: "hidden",
textOverflow: "ellipsis"
}}>
{tab.label}
</span>
</TabsTab>
))}
</TabsList>
</ScrollArea>
@@ -109,7 +105,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
</TabsPanel>
))}
</Tabs>
</Stack>
</Stack >
)
}

35
src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx
View File

@@ -1,10 +1,10 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconClipboardList, IconTags } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { IconClipboardList, IconTags } from '@tabler/icons-react';
function LayoutTabs({ children }: { children: React.ReactNode }) {
const router = useRouter();
@@ -16,14 +16,12 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
value: "kegiatanDesa",
href: "/admin/lingkungan/gotong-royong/kegiatan-desa",
icon: <IconClipboardList size={18} stroke={1.8} />,
tooltip: "Lihat dan kelola kegiatan desa",
},
{
label: "Kategori Kegiatan",
value: "kategoriKegiatan",
href: "/admin/lingkungan/gotong-royong/kategori-kegiatan",
icon: <IconTags size={18} stroke={1.8} />,
tooltip: "Kelola kategori kegiatan desa",
},
];
@@ -75,25 +73,18 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
}}
>
{tabs.map((tab, i) => (
<Tooltip
key={i}
label={tab.tooltip}
position="bottom"
withArrow
transitionProps={{ transition: 'pop', duration: 200 }}
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
<TabsTab
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
</Tooltip>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>

10
src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx
View File

@@ -3,7 +3,7 @@
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
@@ -72,11 +72,9 @@ function EditKategoriKegiatan() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md" align="center">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Kategori Kegiatan
</Title>

10
src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
@@ -32,11 +32,9 @@ function CreateKategoriKegiatan() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md" align="center">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Kategori Kegiatan
</Title>

21
src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx
View File

@@ -16,8 +16,7 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
@@ -85,16 +84,14 @@ function ListKategoriKegiatan({ search }: { search: string }) {
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Kategori Kegiatan</Title>
<Tooltip label="Tambah Kategori Baru" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>

11
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx
View File

@@ -14,8 +14,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -124,11 +123,9 @@ export default function EditKegiatanDesa() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Kegiatan Desa
</Title>

54
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx
View File

@@ -1,14 +1,14 @@
'use client'
import { useProxy } from 'valtio/utils';
import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
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';
import colors from '@/con/colors';
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import colors from '@/con/colors';
function DetailKegiatanDesa() {
const kegiatanDesaState = useProxy(gotongRoyongState.kegiatanDesa);
@@ -132,32 +132,28 @@ function DetailKegiatanDesa() {
{/* Tombol Hapus & Edit */}
<Flex gap="sm" mt={10}>
<Tooltip label="Hapus Kegiatan Desa" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconX size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconX size={20} />
</Button>
<Tooltip label="Edit Kegiatan Desa" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Flex>
</Stack>
</Paper>

23
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx
View File

@@ -14,8 +14,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -78,16 +77,14 @@ function CreateKegiatanDesa() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Kegiatan Desa
</Title>
@@ -159,7 +156,7 @@ function CreateKegiatanDesa() {
onChange={(e) => (stateKegiatanDesa.create.form.judul = e.target.value)}
required
/>
<Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi Singkat
</Text>

46
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconBook, IconLeaf, IconSchool } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -15,21 +15,18 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
label: "Filosofi Tri Hita",
value: "filosofi-tri-hita",
href: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana",
tooltip: "Lihat filosofi Tri Hita Karana",
icon: <IconLeaf size={18} stroke={1.8} />
},
{
label: "Nilai Konservasi Adat",
value: "nilai-konservasi-adat",
href: "/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat",
tooltip: "Kelola nilai konservasi adat",
icon: <IconBook size={18} stroke={1.8} />
},
{
label: "Bentuk Konservasi Berdasarkan Adat",
value: "bentuk-konservasi-berdasarkan-adat",
href: "/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat",
tooltip: "Lihat bentuk konservasi berdasarkan adat",
icon: <IconSchool size={18} stroke={1.8} />
},
];
@@ -76,27 +73,26 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
}}
>
{tabs.map((tab, i) => (
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
<TabsTab
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
whiteSpace: "nowrap",
transition: "all 0.2s ease",
}}
>
<span style={{
display: "inline-block",
maxWidth: "200px",
overflow: "hidden",
textOverflow: "ellipsis"
}}>
{tab.label}
</span>
</TabsTab>
</Tooltip>
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
whiteSpace: "nowrap",
transition: "all 0.2s ease",
}}
>
<span style={{
display: "inline-block",
maxWidth: "200px",
overflow: "hidden",
textOverflow: "ellipsis"
}}>
{tab.label}
</span>
</TabsTab>
))}
</TabsList>
</ScrollArea>

10
src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx
View File

@@ -3,7 +3,7 @@
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import dynamic from 'next/dynamic';
import { useParams, useRouter } from 'next/navigation';
@@ -90,11 +90,9 @@ function EditKeteranganBankSampahTerdekat() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Bank Sampah Terdekat
</Title>

16
src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx
View File

@@ -2,12 +2,12 @@
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { toast } from 'react-toastify';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
const LeafletMap = dynamic(() => import('@/app/admin/(dashboard)/_com/leafletMapCreate'), { ssr: false });
@@ -33,14 +33,14 @@ function CreateKeteranganBankSampahTerdekat() {
if (!keteranganState.create.form.name) {
return toast.error('Nama bank sampah harus diisi');
}
if (markerPosition) {
keteranganState.create.form.lat = markerPosition.lat;
keteranganState.create.form.lng = markerPosition.lng;
} else {
return toast.error('Silakan pilih lokasi di peta');
}
await keteranganState.create.create();
toast.success('Data bank sampah berhasil ditambahkan');
resetForm();
@@ -54,11 +54,9 @@ function CreateKeteranganBankSampahTerdekat() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Bank Sampah Terdekat
</Title>

28
src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx
View File

@@ -1,11 +1,11 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import pengelolaanSampahState from '../../../_state/lingkungan/pengelolaan-sampah';
@@ -56,16 +56,14 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
<Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Bank Sampah Terdekat</Title>
<Tooltip label="Tambah Bank Sampah" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create')}
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create')}
>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
@@ -98,15 +96,13 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
</Text>
</TableTd>
<TableTd>
<Tooltip label="Lihat Detail" withArrow>
<Button
variant="light"
color="blue"
onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
>
<Button
variant="light"
color="blue"
onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
>
<IconDeviceImac size={20} />
</Button>
</Tooltip>
</TableTd>
</TableTr>
))

12
src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx
View File

@@ -1,9 +1,9 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
@@ -71,11 +71,9 @@ function EditProgramKreatifDesa() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Pengelolaan Sampah Bank Sampah
</Title>

6
src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
@@ -34,7 +34,6 @@ function CreatePengelolaanSampahBankSampah() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" position="bottom">
<Button
variant="subtle"
onClick={() => router.back()}
@@ -43,7 +42,6 @@ function CreatePengelolaanSampahBankSampah() {
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Tambah Pengelolaan Sampah Bank Sampah
</Title>

79
src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx
View File

@@ -1,15 +1,14 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconChartLine, IconClipboardTextFilled, IconEdit, IconLeaf, IconPlus, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import React, { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import pengelolaanSampahState from '../../../_state/lingkungan/pengelolaan-sampah';
import React from 'react';
function PengelolaanSampahBankSampah() {
@@ -82,16 +81,14 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
<Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pengelolaan Sampah Bank Sampah</Title>
<Tooltip label="Tambah Pengelolaan Sampah" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>
@@ -113,44 +110,38 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
</TableTd>
<TableTd>
{iconMap[item.icon] ? (
<Tooltip label={item.icon} withArrow>
<Box>
{React.createElement(iconMap[item.icon], {
size: 24,
style: { color: colors['blue-button'] }
})}
</Box>
</Tooltip>
<Box>
{React.createElement(iconMap[item.icon], {
size: 24,
style: { color: colors['blue-button'] }
})}
</Box>
) : (
<Text c="dimmed" fz="sm">-</Text>
)}
</TableTd>
<TableTd>
<Tooltip label="Edit" withArrow>
<Button
variant="light"
color="green"
size="sm"
onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}
>
<IconEdit size={18} />
</Button>
</Tooltip>
<Button
variant="light"
color="green"
size="sm"
onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}
>
<IconEdit size={18} />
</Button>
</TableTd>
<TableTd>
<Tooltip label="Hapus" withArrow>
<Button
variant="light"
color="red"
size="sm"
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrashFilled size={18} />
</Button>
</Tooltip>
<Button
variant="light"
color="red"
size="sm"
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrashFilled size={18} />
</Button>
</TableTd>
</TableTr>
))

21
src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx
View File

@@ -13,8 +13,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -105,16 +104,14 @@ function EditProgramPenghijauan() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Program Penghijauan
</Title>

50
src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { Box, Button, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import {
IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard,
@@ -117,32 +117,28 @@ function DetailProgramPenghijauan() {
{/* Tombol aksi */}
<Group gap="sm" mt="md">
<Tooltip label="Hapus Program" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
<Tooltip label="Edit Program" withArrow position="top">
<Button
color="green"
onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Tooltip>
<Button
color="green"
onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${data.id}/edit`)}
variant="light"
radius="md"
size="md"
>
<IconEdit size={20} />
</Button>
</Group>
</Stack>
</Paper>
@@ -155,7 +151,7 @@ function DetailProgramPenghijauan() {
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text="Apakah Anda yakin ingin menghapus program penghijauan ini?"
/>
/>
</Box>
);
}

21
src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx
View File

@@ -8,8 +8,7 @@ import {
Stack,
Text,
TextInput,
Title,
Tooltip,
Title
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -41,16 +40,14 @@ function CreateProgramPenghijauan() {
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Tombol back + title */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Tambah Program Penghijauan
</Title>

23
src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
View File

@@ -17,8 +17,7 @@ import {
TableThead,
TableTr,
Text,
Title,
Tooltip
Title
} from '@mantine/core';
import {
IconChartLine,
@@ -27,6 +26,7 @@ import {
IconDeviceImac,
IconHomeEco,
IconLeaf,
IconPlus,
IconRecycle,
IconScale,
IconSearch,
@@ -36,7 +36,6 @@ import {
IconTrendingUp,
IconTrophy,
IconTruckFilled,
IconPlus,
} from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -101,16 +100,14 @@ function ListProgramPenghijauan({ search }: { search: string }) {
{/* Header Section */}
<Box mb="md" display="flex" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Title order={4}>Daftar Program Penghijauan</Title>
<Tooltip label="Tambah Program Penghijauan" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/program-penghijauan/create')}
>
Tambah Baru
</Button>
</Tooltip>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/lingkungan/program-penghijauan/create')}
>
Tambah Baru
</Button>
</Box>
{/* Table Section */}