upd: form surat
Deskripsi: - api detail categori list - form awal buat surat No Issues
This commit is contained in:
@@ -1,98 +1,101 @@
|
||||
import apiFetch from "@/lib/apiFetch";
|
||||
import { Card, Flex, Grid, Group, Stack, Text } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconFileCertificate, IconMessageReport, IconUsers } from "@tabler/icons-react";
|
||||
import {
|
||||
IconFileCertificate,
|
||||
IconMessageReport,
|
||||
IconUsers,
|
||||
} from "@tabler/icons-react";
|
||||
import useSWR from "swr";
|
||||
|
||||
export default function DashboardCountData() {
|
||||
const { data, mutate, isLoading } = useSWR("/", () =>
|
||||
apiFetch.api.dashboard.count.get()
|
||||
);
|
||||
const { data, mutate, isLoading } = useSWR("/", () =>
|
||||
apiFetch.api.dashboard.count.get(),
|
||||
);
|
||||
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
||||
<MetricCard
|
||||
icon={<IconMessageReport size={28} />}
|
||||
label="Pengaduan Hari Ini"
|
||||
value={String(data?.data?.pengaduan?.today)}
|
||||
change={String(data?.data?.pengaduan?.kenaikan) + "%"}
|
||||
color={"gray"}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
||||
<MetricCard
|
||||
icon={<IconFileCertificate size={28} />}
|
||||
label="Pengajuan Surat Hari Ini"
|
||||
value={String(data?.data?.pelayanan?.today)}
|
||||
change={String(data?.data?.pelayanan?.kenaikan) + "%"}
|
||||
color="gray"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
||||
<MetricCard
|
||||
icon={<IconUsers size={28} />}
|
||||
label="Warga"
|
||||
value={String(data?.data?.warga)}
|
||||
color="blue"
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
);
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
||||
<MetricCard
|
||||
icon={<IconMessageReport size={28} />}
|
||||
label="Pengaduan Hari Ini"
|
||||
value={String(data?.data?.pengaduan?.today)}
|
||||
change={String(data?.data?.pengaduan?.kenaikan) + "%"}
|
||||
color={"gray"}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
||||
<MetricCard
|
||||
icon={<IconFileCertificate size={28} />}
|
||||
label="Pengajuan Surat Hari Ini"
|
||||
value={String(data?.data?.pelayanan?.today)}
|
||||
change={String(data?.data?.pelayanan?.kenaikan) + "%"}
|
||||
color="gray"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
|
||||
<MetricCard
|
||||
icon={<IconUsers size={28} />}
|
||||
label="Warga"
|
||||
value={String(data?.data?.warga)}
|
||||
color="blue"
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function MetricCard({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
change,
|
||||
color,
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
change,
|
||||
color,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
change?: string;
|
||||
color: string;
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
change?: string;
|
||||
color: string;
|
||||
}) {
|
||||
return (
|
||||
<Card
|
||||
radius="lg"
|
||||
p="md"
|
||||
withBorder
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<Stack gap={6}>
|
||||
<Group gap={6}>
|
||||
{icon}
|
||||
<Text size="sm" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
</Group>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fw={600} size="xl" c="gray.0">
|
||||
{value}
|
||||
</Text>
|
||||
{change && (
|
||||
<Text size="sm" c={color}>
|
||||
{change}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Card
|
||||
radius="lg"
|
||||
p="md"
|
||||
withBorder
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<Stack gap={6}>
|
||||
<Group gap={6}>
|
||||
{icon}
|
||||
<Text size="sm" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
</Group>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fw={600} size="xl" c="gray.0">
|
||||
{value}
|
||||
</Text>
|
||||
{change && (
|
||||
<Text size="sm" c={color}>
|
||||
{change}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,77 +7,71 @@ import { useEffect, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
export default function DashboardGrafik() {
|
||||
const [options, setOptions] = useState<EChartsOption>({});
|
||||
const { data, mutate, isLoading } = useSWR(
|
||||
"grafik-dashboard",
|
||||
async () => {
|
||||
return apiFetch.api.dashboard.grafik.get().then(res => res.data);
|
||||
}
|
||||
);
|
||||
const [options, setOptions] = useState<EChartsOption>({});
|
||||
const { data, mutate, isLoading } = useSWR("grafik-dashboard", async () => {
|
||||
return apiFetch.api.dashboard.grafik.get().then((res) => res.data);
|
||||
});
|
||||
|
||||
const loadData = () => {
|
||||
if (!data) return;
|
||||
const option: EChartsOption = {
|
||||
darkMode: true,
|
||||
animation: true,
|
||||
legend: {
|
||||
textStyle: { color: "#fff" }
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
dimensions: data.dimensions,
|
||||
source: data.source
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: { color: "#fff" }
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
minInterval: 1,
|
||||
axisLabel: { color: "#fff" }
|
||||
},
|
||||
color: ["#1abc9c", "#10816aff"],
|
||||
series: [
|
||||
{ type: "bar" },
|
||||
{ type: "bar" }
|
||||
]
|
||||
};
|
||||
const loadData = () => {
|
||||
if (!data) return;
|
||||
const option: EChartsOption = {
|
||||
darkMode: true,
|
||||
animation: true,
|
||||
legend: {
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
dimensions: data.dimensions,
|
||||
source: data.source,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: { color: "#fff" },
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
minInterval: 1,
|
||||
axisLabel: { color: "#fff" },
|
||||
},
|
||||
color: ["#1abc9c", "#10816aff"],
|
||||
series: [{ type: "bar" }, { type: "bar" }],
|
||||
};
|
||||
|
||||
setOptions(option);
|
||||
};
|
||||
setOptions(option);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) loadData();
|
||||
}, [data]);
|
||||
useEffect(() => {
|
||||
if (data) loadData();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Card
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex align="center" justify="space-between">
|
||||
<Flex direction={"column"}>
|
||||
<Title order={4} c="gray.0">
|
||||
Grafik Pengaduan dan Pelayanan Surat
|
||||
</Title>
|
||||
<Text size="sm">7 Hari Terakhir</Text>
|
||||
</Flex>
|
||||
<IconChartBar size={20} color="gray" />
|
||||
</Flex>
|
||||
<Divider my="xs" />
|
||||
<Stack gap="sm">
|
||||
<EChartsReact style={{ height: 400 }} option={options} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Card
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex align="center" justify="space-between">
|
||||
<Flex direction={"column"}>
|
||||
<Title order={4} c="gray.0">
|
||||
Grafik Pengaduan dan Pelayanan Surat
|
||||
</Title>
|
||||
<Text size="sm">7 Hari Terakhir</Text>
|
||||
</Flex>
|
||||
<IconChartBar size={20} color="gray" />
|
||||
</Flex>
|
||||
<Divider my="xs" />
|
||||
<Stack gap="sm">
|
||||
<EChartsReact style={{ height: 400 }} option={options} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,133 +1,210 @@
|
||||
import apiFetch from "@/lib/apiFetch";
|
||||
import { Badge, Button, Card, Flex, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import useSWR from "swr";
|
||||
|
||||
export default function DashboardLastData() {
|
||||
const navigate = useNavigate();
|
||||
const { data, mutate, isLoading } = useSWR("last-update", async () => {
|
||||
const res = await apiFetch.api.dashboard["last-update"].get();
|
||||
return res.data
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
const { data, mutate, isLoading } = useSWR("last-update", async () => {
|
||||
const res = await apiFetch.api.dashboard["last-update"].get();
|
||||
return res.data;
|
||||
});
|
||||
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Flex justify="flex-start" gap="md">
|
||||
<Card
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
w={"50%"}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex
|
||||
align="center"
|
||||
pb={"sm"}
|
||||
justify="space-between"
|
||||
style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
|
||||
>
|
||||
<Title order={4} c="gray.0">
|
||||
Last update pengaduan
|
||||
</Title>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
radius="md"
|
||||
onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Flex>
|
||||
<Stack gap="sm" mt="md" align="stretch" justify="center">
|
||||
{data &&
|
||||
Array.isArray(data.pengaduan) &&
|
||||
data.pengaduan.length > 0 ? (
|
||||
data.pengaduan.map((item: any, index: number) => (
|
||||
<PengaduanSection
|
||||
key={index}
|
||||
id={item.id}
|
||||
nomer={item.noPengaduan}
|
||||
judul={item.title}
|
||||
status={item.status}
|
||||
updated={item.updatedAt}
|
||||
kategori="pengaduan"
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Text c="dimmed" ta={"center"}>
|
||||
Tidak ada data
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
return (
|
||||
<Flex justify="flex-start" gap="md">
|
||||
<Card
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
w={"50%"}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
<Title order={4} c="gray.0">
|
||||
Last update pengaduan
|
||||
</Title>
|
||||
<Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}>View All</Button>
|
||||
</Flex>
|
||||
<Stack gap="sm" mt="md" align="stretch" justify="center">
|
||||
{
|
||||
data && Array.isArray(data.pengaduan) && data.pengaduan.length > 0 ? data.pengaduan.map((item: any, index: number) => (
|
||||
<PengaduanSection
|
||||
key={index}
|
||||
id={item.id}
|
||||
nomer={item.noPengaduan}
|
||||
judul={item.title}
|
||||
status={item.status}
|
||||
updated={item.updatedAt}
|
||||
kategori="pengaduan"
|
||||
/>
|
||||
)) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
|
||||
}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
w={"50%"}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
<Title order={4} c="gray.0">
|
||||
Last update pelayanan surat
|
||||
</Title>
|
||||
<Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)}>View All</Button>
|
||||
</Flex>
|
||||
<Stack gap="sm" mt="md" align="stretch" justify="center">
|
||||
{
|
||||
data && Array.isArray(data.pelayanan) && data.pelayanan.length > 0 ? data.pelayanan.map((item: any, index: number) => (
|
||||
<PengaduanSection
|
||||
key={index}
|
||||
id={item.id}
|
||||
nomer={item.noPengajuan}
|
||||
judul={item.title}
|
||||
status={item.status}
|
||||
updated={item.updatedAt}
|
||||
kategori="pelayanan"
|
||||
/>
|
||||
)) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
|
||||
}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
<Card
|
||||
radius="lg"
|
||||
p="xl"
|
||||
withBorder
|
||||
w={"50%"}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
|
||||
borderColor: "rgba(100,100,100,0.2)",
|
||||
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex
|
||||
align="center"
|
||||
pb={"sm"}
|
||||
justify="space-between"
|
||||
style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
|
||||
>
|
||||
<Title order={4} c="gray.0">
|
||||
Last update pelayanan surat
|
||||
</Title>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)
|
||||
}
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Flex>
|
||||
<Stack gap="sm" mt="md" align="stretch" justify="center">
|
||||
{data &&
|
||||
Array.isArray(data.pelayanan) &&
|
||||
data.pelayanan.length > 0 ? (
|
||||
data.pelayanan.map((item: any, index: number) => (
|
||||
<PengaduanSection
|
||||
key={index}
|
||||
id={item.id}
|
||||
nomer={item.noPengajuan}
|
||||
judul={item.title}
|
||||
status={item.status}
|
||||
updated={item.updatedAt}
|
||||
kategori="pelayanan"
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Text c="dimmed" ta={"center"}>
|
||||
Tidak ada data
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
function PengaduanSection({ id, nomer, judul, status, updated, kategori }: { id: string, nomer: string, judul: string, status: string, updated: string, kategori: 'pengaduan' | 'pelayanan' }) {
|
||||
const navigate = useNavigate();
|
||||
function PengaduanSection({
|
||||
id,
|
||||
nomer,
|
||||
judul,
|
||||
status,
|
||||
updated,
|
||||
kategori,
|
||||
}: {
|
||||
id: string;
|
||||
nomer: string;
|
||||
judul: string;
|
||||
status: string;
|
||||
updated: string;
|
||||
kategori: "pengaduan" | "pelayanan";
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Stack
|
||||
gap="xs"
|
||||
onClick={() => navigate(kategori == "pelayanan" ? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}` : `/scr/dashboard/pengaduan/detail?id=${id}`)}
|
||||
return (
|
||||
<Stack
|
||||
gap="xs"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
kategori == "pelayanan"
|
||||
? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}`
|
||||
: `/scr/dashboard/pengaduan/detail?id=${id}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
pb={"sm"}
|
||||
justify="space-between"
|
||||
gap="md"
|
||||
style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
|
||||
>
|
||||
<Flex align="center" pb={"sm"} justify="space-between" gap="md" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
||||
<Flex direction={"column"}>
|
||||
<Text size="md" c="gray.2" lineClamp={1}>
|
||||
{judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Text size="sm" c="dimmed">
|
||||
#{nomer} ∙ {updated}
|
||||
</Text>
|
||||
</Group>
|
||||
</Flex>
|
||||
<Tooltip label={status}>
|
||||
<Badge size="xs" circle color={
|
||||
status === "diterima"
|
||||
? "green"
|
||||
: status === "ditolak"
|
||||
? "red"
|
||||
: status === "selesai"
|
||||
? "blue"
|
||||
: status === "dikerjakan"
|
||||
? "gray"
|
||||
: "yellow"
|
||||
} />
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
<Flex direction={"column"}>
|
||||
<Text size="md" c="gray.2" lineClamp={1}>
|
||||
{judul}
|
||||
</Text>
|
||||
<Group>
|
||||
<Text size="sm" c="dimmed">
|
||||
#{nomer} ∙ {updated}
|
||||
</Text>
|
||||
</Group>
|
||||
</Flex>
|
||||
<Tooltip label={status}>
|
||||
<Badge
|
||||
size="xs"
|
||||
circle
|
||||
color={
|
||||
status === "diterima"
|
||||
? "green"
|
||||
: status === "ditolak"
|
||||
? "red"
|
||||
: status === "selesai"
|
||||
? "blue"
|
||||
: status === "dikerjakan"
|
||||
? "gray"
|
||||
: "yellow"
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
Stack,
|
||||
Table,
|
||||
Title,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { IconEdit } from "@tabler/icons-react";
|
||||
@@ -23,11 +23,15 @@ import useSWR from "swr";
|
||||
import ModalFile from "./ModalFile";
|
||||
import notification from "./notificationGlobal";
|
||||
|
||||
export default function DesaSetting({ permissions }: { permissions: JsonValue[] }) {
|
||||
export default function DesaSetting({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: JsonValue[];
|
||||
}) {
|
||||
const [btnDisable, setBtnDisable] = useState(false);
|
||||
const [btnLoading, setBtnLoading] = useState(false);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [img, setImg] = useState<any>()
|
||||
const [img, setImg] = useState<any>();
|
||||
const [openedPreview, setOpenedPreview] = useState(false);
|
||||
const [viewImg, setViewImg] = useState("");
|
||||
const { data, mutate, isLoading } = useSWR("/", () =>
|
||||
@@ -51,13 +55,19 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
|
||||
let finalData = { ...dataEdit }; // ← buffer data terbaru
|
||||
|
||||
if (dataEdit.name === "TTD") {
|
||||
const oldImg = await apiFetch.api.pengaduan["delete-image"].post({ file: dataEdit.value, folder: "lainnya" });
|
||||
const resImg = await apiFetch.api.pengaduan.upload.post({ file: img, folder: "lainnya" });
|
||||
const oldImg = await apiFetch.api.pengaduan["delete-image"].post({
|
||||
file: dataEdit.value,
|
||||
folder: "lainnya",
|
||||
});
|
||||
const resImg = await apiFetch.api.pengaduan.upload.post({
|
||||
file: img,
|
||||
folder: "lainnya",
|
||||
});
|
||||
|
||||
if (resImg.status === 200) {
|
||||
finalData = {
|
||||
...finalData,
|
||||
value: resImg.data?.filename || ""
|
||||
value: resImg.data?.filename || "",
|
||||
};
|
||||
|
||||
setDataEdit(finalData); // update state
|
||||
@@ -70,7 +80,6 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const res = await apiFetch.api["configuration-desa"].edit.post(finalData);
|
||||
|
||||
if (res.status === 200) {
|
||||
@@ -100,8 +109,11 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function chooseEdit({ data }: { data: { id: string; value: string; name: string }; }) {
|
||||
function chooseEdit({
|
||||
data,
|
||||
}: {
|
||||
data: { id: string; value: string; name: string };
|
||||
}) {
|
||||
setDataEdit(data);
|
||||
open();
|
||||
}
|
||||
@@ -133,31 +145,27 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="ld">
|
||||
{
|
||||
dataEdit.name == "TTD"
|
||||
?
|
||||
(
|
||||
<Input.Wrapper label={dataEdit.name}>
|
||||
<FileInput
|
||||
clearable
|
||||
placeholder="Upload TTD"
|
||||
accept="image/*"
|
||||
onChange={(e) => { setImg(e) }}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
)
|
||||
:
|
||||
(
|
||||
<Input.Wrapper label={dataEdit.name}>
|
||||
<Input
|
||||
value={dataEdit.value}
|
||||
onChange={(e) =>
|
||||
onValidation({ kat: "value", value: e.target.value })
|
||||
}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
)
|
||||
}
|
||||
{dataEdit.name == "TTD" ? (
|
||||
<Input.Wrapper label={dataEdit.name}>
|
||||
<FileInput
|
||||
clearable
|
||||
placeholder="Upload TTD"
|
||||
accept="image/*"
|
||||
onChange={(e) => {
|
||||
setImg(e);
|
||||
}}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
) : (
|
||||
<Input.Wrapper label={dataEdit.name}>
|
||||
<Input
|
||||
value={dataEdit.value}
|
||||
onChange={(e) =>
|
||||
onValidation({ kat: "value", value: e.target.value })
|
||||
}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
)}
|
||||
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={close}>
|
||||
@@ -203,21 +211,33 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
|
||||
<Table.Tr key={v.id}>
|
||||
<Table.Td>{v.name}</Table.Td>
|
||||
<Table.Td>
|
||||
{
|
||||
v.name == "TTD"
|
||||
?
|
||||
v.value ?
|
||||
<Anchor href="#" onClick={() => { setViewImg(v.value); setOpenedPreview(true); }} underline="always">
|
||||
Lihat
|
||||
</Anchor>
|
||||
:
|
||||
"-"
|
||||
:
|
||||
v.value
|
||||
}
|
||||
{v.name == "TTD" ? (
|
||||
v.value ? (
|
||||
<Anchor
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setViewImg(v.value);
|
||||
setOpenedPreview(true);
|
||||
}}
|
||||
underline="always"
|
||||
>
|
||||
Lihat
|
||||
</Anchor>
|
||||
) : (
|
||||
"-"
|
||||
)
|
||||
) : (
|
||||
v.value
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Tooltip label={permissions.includes("setting.desa.edit") ? "Edit Setting" : "Edit Setting - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes("setting.desa.edit")
|
||||
? "Edit Setting"
|
||||
: "Edit Setting - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
|
||||
@@ -23,7 +23,11 @@ import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import notification from "./notificationGlobal";
|
||||
|
||||
export default function KategoriPelayananSurat({ permissions }: { permissions: JsonValue[] }) {
|
||||
export default function KategoriPelayananSurat({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: JsonValue[];
|
||||
}) {
|
||||
const [openedDelete, { open: openDelete, close: closeDelete }] =
|
||||
useDisclosure(false);
|
||||
const [openedDetail, { open: openDetail, close: closeDetail }] =
|
||||
@@ -53,7 +57,6 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
|
||||
async function handleCreate() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
@@ -535,19 +538,17 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
|
||||
<Title order={4} c="gray.2">
|
||||
Kategori Pelayanan Surat
|
||||
</Title>
|
||||
{
|
||||
permissions.includes("setting.kategori_pelayanan.tambah") && (
|
||||
<Tooltip label="Tambah Kategori Pelayanan Surat">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
{permissions.includes("setting.kategori_pelayanan.tambah") && (
|
||||
<Tooltip label="Tambah Kategori Pelayanan Surat">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Flex>
|
||||
<Divider my={0} />
|
||||
<Stack gap={"md"}>
|
||||
@@ -578,7 +579,15 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
|
||||
<IconEye size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={permissions.includes("setting.kategori_pelayanan.edit") ? "Edit Kategori" : "Edit Kategori - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes(
|
||||
"setting.kategori_pelayanan.edit",
|
||||
)
|
||||
? "Edit Kategori"
|
||||
: "Edit Kategori - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
@@ -587,12 +596,24 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
|
||||
setDataChoose(v);
|
||||
open();
|
||||
}}
|
||||
disabled={!permissions.includes("setting.kategori_pelayanan.edit")}
|
||||
disabled={
|
||||
!permissions.includes(
|
||||
"setting.kategori_pelayanan.edit",
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={permissions.includes("setting.kategori_pelayanan.delete") ? "Hapus Kategori" : "Hapus Kategori - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes(
|
||||
"setting.kategori_pelayanan.delete",
|
||||
)
|
||||
? "Hapus Kategori"
|
||||
: "Hapus Kategori - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
@@ -602,7 +623,11 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
|
||||
setDataDelete(v.id);
|
||||
openDelete();
|
||||
}}
|
||||
disabled={!permissions.includes("setting.kategori_pelayanan.delete")}
|
||||
disabled={
|
||||
!permissions.includes(
|
||||
"setting.kategori_pelayanan.delete",
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</ActionIcon>
|
||||
|
||||
@@ -20,7 +20,11 @@ import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import notification from "./notificationGlobal";
|
||||
|
||||
export default function KategoriPengaduan({ permissions }: { permissions: JsonValue[] }) {
|
||||
export default function KategoriPengaduan({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: JsonValue[];
|
||||
}) {
|
||||
const [openedDelete, { open: openDelete, close: closeDelete }] =
|
||||
useDisclosure(false);
|
||||
const [btnDisable, setBtnDisable] = useState(true);
|
||||
@@ -294,19 +298,17 @@ export default function KategoriPengaduan({ permissions }: { permissions: JsonVa
|
||||
<Title order={4} c="gray.2">
|
||||
Kategori Pengaduan
|
||||
</Title>
|
||||
{
|
||||
permissions.includes("setting.kategori_pengaduan.tambah") && (
|
||||
<Tooltip label="Tambah Kategori Pengaduan">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
{permissions.includes("setting.kategori_pengaduan.tambah") && (
|
||||
<Tooltip label="Tambah Kategori Pengaduan">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Flex>
|
||||
<Divider my={0} />
|
||||
<Stack gap={"md"}>
|
||||
@@ -323,18 +325,38 @@ export default function KategoriPengaduan({ permissions }: { permissions: JsonVa
|
||||
<Table.Td>{v.name}</Table.Td>
|
||||
<Table.Td>
|
||||
<Group>
|
||||
<Tooltip label={permissions.includes("setting.kategori_pengaduan.edit") ? "Edit Kategori" : "Edit Kategori - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes(
|
||||
"setting.kategori_pengaduan.edit",
|
||||
)
|
||||
? "Edit Kategori"
|
||||
: "Edit Kategori - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
|
||||
onClick={() => chooseEdit({ data: v })}
|
||||
disabled={!permissions.includes("setting.kategori_pengaduan.edit") || v.id == "lainnya"}
|
||||
disabled={
|
||||
!permissions.includes(
|
||||
"setting.kategori_pengaduan.edit",
|
||||
) || v.id == "lainnya"
|
||||
}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={permissions.includes("setting.kategori_pengaduan.delete") ? "Hapus Kategori" : "Hapus Kategori - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes(
|
||||
"setting.kategori_pengaduan.delete",
|
||||
)
|
||||
? "Hapus Kategori"
|
||||
: "Hapus Kategori - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
@@ -344,7 +366,11 @@ export default function KategoriPengaduan({ permissions }: { permissions: JsonVa
|
||||
setDataDelete(v.id);
|
||||
openDelete();
|
||||
}}
|
||||
disabled={!permissions.includes("setting.kategori_pengaduan.delete") || v.id == "lainnya"}
|
||||
disabled={
|
||||
!permissions.includes(
|
||||
"setting.kategori_pengaduan.delete",
|
||||
) || v.id == "lainnya"
|
||||
}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</ActionIcon>
|
||||
|
||||
@@ -3,92 +3,100 @@ import { Flex, Image, Loader, Modal } from "@mantine/core";
|
||||
import { useEffect, useState } from "react";
|
||||
import notification from "./notificationGlobal";
|
||||
|
||||
export default function ModalFile({ open, onClose, folder, fileName }: { open: boolean, onClose: () => void, folder: string, fileName: string }) {
|
||||
const [viewFile, setViewFile] = useState<string>("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [typeFile, setTypeFile] = useState<string>("");
|
||||
const [error, setError] = useState<boolean>(false);
|
||||
export default function ModalFile({
|
||||
open,
|
||||
onClose,
|
||||
folder,
|
||||
fileName,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
folder: string;
|
||||
fileName: string;
|
||||
}) {
|
||||
const [viewFile, setViewFile] = useState<string>("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [typeFile, setTypeFile] = useState<string>("");
|
||||
const [error, setError] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && fileName) {
|
||||
loadImage();
|
||||
useEffect(() => {
|
||||
if (open && fileName) {
|
||||
loadImage();
|
||||
}
|
||||
}, [open, fileName]);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewFile("");
|
||||
setLoading(true);
|
||||
|
||||
// detect type of file
|
||||
const { ext, type } = detectFileType(fileName);
|
||||
setTypeFile(type || "");
|
||||
|
||||
// load file
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=" + folder + "&fileName=" + fileName;
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok) {
|
||||
setError(true);
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
}, [open, fileName]);
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewFile(url);
|
||||
} catch (err) {
|
||||
setError(true);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewFile("");
|
||||
setLoading(true);
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
onClose();
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
// detect type of file
|
||||
const { ext, type } = detectFileType(fileName);
|
||||
setTypeFile(type || "");
|
||||
|
||||
// load file
|
||||
const urlApi = '/api/pengaduan/image?folder=' + folder + '&fileName=' + fileName;
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok) {
|
||||
setError(true);
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewFile(url);
|
||||
} catch (err) {
|
||||
setError(true);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
onClose();
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={open}
|
||||
onClose={onClose}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size="xl"
|
||||
withCloseButton
|
||||
removeScrollProps={{ allowPinchZoom: true }}
|
||||
title="File"
|
||||
>
|
||||
{loading && (
|
||||
<Flex justify="center" align="center" h={200}>
|
||||
<Loader />
|
||||
</Flex>
|
||||
)}
|
||||
{viewFile && (
|
||||
<>
|
||||
{typeFile == "pdf" ? (
|
||||
<embed src={viewFile} type="application/pdf" width="100%" height="950" />
|
||||
) : (
|
||||
<Image
|
||||
radius="md"
|
||||
h={300}
|
||||
fit="contain"
|
||||
src={viewFile}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
return (
|
||||
<Modal
|
||||
opened={open}
|
||||
onClose={onClose}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size="xl"
|
||||
withCloseButton
|
||||
removeScrollProps={{ allowPinchZoom: true }}
|
||||
title="File"
|
||||
>
|
||||
{loading && (
|
||||
<Flex justify="center" align="center" h={200}>
|
||||
<Loader />
|
||||
</Flex>
|
||||
)}
|
||||
{viewFile && (
|
||||
<>
|
||||
{typeFile == "pdf" ? (
|
||||
<embed
|
||||
src={viewFile}
|
||||
type="application/pdf"
|
||||
width="100%"
|
||||
height="950"
|
||||
/>
|
||||
) : (
|
||||
<Image radius="md" h={300} fit="contain" src={viewFile} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,122 +18,129 @@ import SKTidakMampu from "./surat/SKTidakMampu";
|
||||
import SKUsaha from "./surat/SKUsaha";
|
||||
import SKYatim from "./surat/SKYatimPiatu";
|
||||
|
||||
export default function ModalSurat({ open, onClose, surat }: { open: boolean, onClose: () => void, surat: string }) {
|
||||
const A4Style = {
|
||||
width: "210mm",
|
||||
height: "297mm",
|
||||
padding: "20mm",
|
||||
background: "#fff",
|
||||
color: "#000",
|
||||
fontSize: "14px",
|
||||
fontFamily: "Times New Roman",
|
||||
};
|
||||
const hiddenRef = useRef<any>(null);
|
||||
const { data, mutate, isLoading } = useSWR("surat", () =>
|
||||
apiFetch.api.surat.detail.get({
|
||||
query: {
|
||||
id: surat,
|
||||
},
|
||||
}),
|
||||
);
|
||||
export default function ModalSurat({
|
||||
open,
|
||||
onClose,
|
||||
surat,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
surat: string;
|
||||
}) {
|
||||
const A4Style = {
|
||||
width: "210mm",
|
||||
height: "297mm",
|
||||
padding: "20mm",
|
||||
background: "#fff",
|
||||
color: "#000",
|
||||
fontSize: "14px",
|
||||
fontFamily: "Times New Roman",
|
||||
};
|
||||
const hiddenRef = useRef<any>(null);
|
||||
const { data, mutate, isLoading } = useSWR("surat", () =>
|
||||
apiFetch.api.surat.detail.get({
|
||||
query: {
|
||||
id: surat,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
const downloadPDF = async () => {
|
||||
const element = hiddenRef.current;
|
||||
const canvas = await html2canvas(element, {
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
});
|
||||
|
||||
const downloadPDF = async () => {
|
||||
const element = hiddenRef.current;
|
||||
const canvas = await html2canvas(element, {
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight,
|
||||
});
|
||||
const imgData = canvas.toDataURL("image/jpeg", 1.0);
|
||||
|
||||
const imgData = canvas.toDataURL("image/jpeg", 1.0);
|
||||
const pdf = new jsPDF("p", "mm", "a4");
|
||||
const pageWidth = 210; // A4 width mm
|
||||
const pageHeight = 297; // A4 height mm
|
||||
|
||||
const pdf = new jsPDF("p", "mm", "a4");
|
||||
const pageWidth = 210; // A4 width mm
|
||||
const pageHeight = 297; // A4 height mm
|
||||
const imgWidth = pageWidth;
|
||||
const imgHeight = (canvas.height * pageWidth) / canvas.width;
|
||||
|
||||
const imgWidth = pageWidth;
|
||||
const imgHeight = (canvas.height * pageWidth) / canvas.width;
|
||||
pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
|
||||
|
||||
pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
|
||||
pdf.save(`${data?.data?.surat?.nameCategory}.pdf`);
|
||||
};
|
||||
|
||||
pdf.save(`${data?.data?.surat?.nameCategory}.pdf`);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={open}
|
||||
onClose={() => onClose()}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size="auto"
|
||||
withCloseButton={false}
|
||||
removeScrollProps={{ allowPinchZoom: true }}
|
||||
styles={{
|
||||
header: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "12px 16px",
|
||||
},
|
||||
title: {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
title={
|
||||
<Flex justify="space-between" align="center" w="100%">
|
||||
<div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={open}
|
||||
onClose={() => onClose()}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size="auto"
|
||||
withCloseButton={false}
|
||||
removeScrollProps={{ allowPinchZoom: true }}
|
||||
styles={{
|
||||
header: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "12px 16px",
|
||||
},
|
||||
title: {
|
||||
width: "100%",
|
||||
}
|
||||
}}
|
||||
title={
|
||||
<Flex justify="space-between" align="center" w="100%">
|
||||
<div style={{ fontSize: 18, fontWeight: 600 }}>
|
||||
Preview Surat
|
||||
</div>
|
||||
<Flex gap={8}>
|
||||
<ActionIcon size={32} variant="default">
|
||||
<IconDownload size={20} onClick={downloadPDF} />
|
||||
</ActionIcon>
|
||||
|
||||
<Flex gap={8}>
|
||||
<ActionIcon size={32} variant="default">
|
||||
<IconDownload size={20} onClick={downloadPDF} />
|
||||
</ActionIcon>
|
||||
|
||||
<ActionIcon size={32} variant="default" onClick={onClose}>
|
||||
<IconX size={20} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
<div ref={hiddenRef} style={A4Style}>
|
||||
{
|
||||
data && data.data
|
||||
? data.data.surat.idCategory == "skusaha"
|
||||
? <SKUsaha data={data.data} />
|
||||
: data.data.surat.idCategory == "skkelahiran"
|
||||
? <SKKelahiran data={data.data} />
|
||||
: data.data.surat.idCategory == "skkelakuanbaik"
|
||||
? <SKKelakuanBaik data={data.data} />
|
||||
: data.data.surat.idCategory == "skpenghasilan"
|
||||
? <SKPenghasilan data={data.data} />
|
||||
: data.data.surat.idCategory == "sktidakmampu"
|
||||
? <SKTidakMampu data={data.data} />
|
||||
: data.data.surat.idCategory == "skyatimpiatu"
|
||||
? <SKYatim data={data.data} />
|
||||
: data.data.surat.idCategory == "skdomisiliorganisasi"
|
||||
? <SKDomisiliOrganisasi data={data.data} />
|
||||
: data.data.surat.idCategory == "skbedabiodata"
|
||||
? <SKBedaBiodataDiri data={data.data} />
|
||||
: data.data.surat.idCategory == "sktempatusaha"
|
||||
? <SKTempatUsaha data={data.data} />
|
||||
: data.data.surat.idCategory == "skbelumkawin"
|
||||
? <SKBelumKawin data={data.data} />
|
||||
: data.data.surat.idCategory == "skkematian"
|
||||
? <SKKematian data={data.data} />
|
||||
: <></>
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<ActionIcon size={32} variant="default" onClick={onClose}>
|
||||
<IconX size={20} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
<div ref={hiddenRef} style={A4Style}>
|
||||
{data && data.data ? (
|
||||
data.data.surat.idCategory == "skusaha" ? (
|
||||
<SKUsaha data={data.data} />
|
||||
) : data.data.surat.idCategory == "skkelahiran" ? (
|
||||
<SKKelahiran data={data.data} />
|
||||
) : data.data.surat.idCategory == "skkelakuanbaik" ? (
|
||||
<SKKelakuanBaik data={data.data} />
|
||||
) : data.data.surat.idCategory == "skpenghasilan" ? (
|
||||
<SKPenghasilan data={data.data} />
|
||||
) : data.data.surat.idCategory == "sktidakmampu" ? (
|
||||
<SKTidakMampu data={data.data} />
|
||||
) : data.data.surat.idCategory == "skyatimpiatu" ? (
|
||||
<SKYatim data={data.data} />
|
||||
) : data.data.surat.idCategory == "skdomisiliorganisasi" ? (
|
||||
<SKDomisiliOrganisasi data={data.data} />
|
||||
) : data.data.surat.idCategory == "skbedabiodata" ? (
|
||||
<SKBedaBiodataDiri data={data.data} />
|
||||
) : data.data.surat.idCategory == "sktempatusaha" ? (
|
||||
<SKTempatUsaha data={data.data} />
|
||||
) : data.data.surat.idCategory == "skbelumkawin" ? (
|
||||
<SKBelumKawin data={data.data} />
|
||||
) : data.data.surat.idCategory == "skkematian" ? (
|
||||
<SKKematian data={data.data} />
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,65 +3,66 @@ import { Anchor, Flex, Stack, Text } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Node {
|
||||
label: string;
|
||||
children: any;
|
||||
actions: string[];
|
||||
label: string;
|
||||
children: any;
|
||||
actions: string[];
|
||||
}
|
||||
|
||||
function RenderNode({ node }: { node: Node }) {
|
||||
const sub = Object.values(node.children || {});
|
||||
const sub = Object.values(node.children || {});
|
||||
|
||||
return (
|
||||
<Stack pl="md" gap={6}>
|
||||
{/* Title */}
|
||||
<Text size="sm">- {node.label}</Text>
|
||||
return (
|
||||
<Stack pl="md" gap={6}>
|
||||
{/* Title */}
|
||||
<Text size="sm">- {node.label}</Text>
|
||||
|
||||
{/* Children */}
|
||||
{sub.map((child: any, i) => (
|
||||
<RenderNode key={i} node={child} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
{/* Children */}
|
||||
{sub.map((child: any, i) => (
|
||||
<RenderNode key={i} node={child} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function RenderNode2({ node }: { node: Node }) {
|
||||
const sub = Object.values(node.children || {});
|
||||
const sub = Object.values(node.children || {});
|
||||
|
||||
return (
|
||||
<Flex direction={"row"} wrap={'wrap'} gap={6}>
|
||||
{/* Title */}
|
||||
<Text size="sm">{node.label},</Text>
|
||||
return (
|
||||
<Flex direction={"row"} wrap={"wrap"} gap={6}>
|
||||
{/* Title */}
|
||||
<Text size="sm">{node.label},</Text>
|
||||
|
||||
{/* Children */}
|
||||
{sub.map((child: any, i) => (
|
||||
<RenderNode2 key={i} node={child} />
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
{/* Children */}
|
||||
{sub.map((child: any, i) => (
|
||||
<RenderNode2 key={i} node={child} />
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PermissionRole({ permissions }: { permissions: string[] }) {
|
||||
const [showAll, setShowAll] = useState(false);
|
||||
if (!permissions?.length) return <Text c="dimmed">-</Text>;
|
||||
export default function PermissionRole({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: string[];
|
||||
}) {
|
||||
const [showAll, setShowAll] = useState(false);
|
||||
if (!permissions?.length) return <Text c="dimmed">-</Text>;
|
||||
|
||||
const groups = groupPermissions(permissions);
|
||||
const rootNodes = Object.values(groups);
|
||||
const groups = groupPermissions(permissions);
|
||||
const rootNodes = Object.values(groups);
|
||||
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
{
|
||||
showAll ?
|
||||
rootNodes.map((node: any, idx) => (
|
||||
<RenderNode key={idx} node={node} />
|
||||
))
|
||||
:
|
||||
rootNodes.slice(0, 2).map((node: any, idx) => (
|
||||
<RenderNode2 key={idx} node={node} />
|
||||
))
|
||||
}
|
||||
<Anchor size="xs" onClick={() => setShowAll(!showAll)} >
|
||||
{showAll ? "View less" : "View more"}
|
||||
</Anchor>
|
||||
</Stack>
|
||||
);
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
{showAll
|
||||
? rootNodes.map((node: any, idx) => (
|
||||
<RenderNode key={idx} node={node} />
|
||||
))
|
||||
: rootNodes
|
||||
.slice(0, 2)
|
||||
.map((node: any, idx) => <RenderNode2 key={idx} node={node} />)}
|
||||
<Anchor size="xs" onClick={() => setShowAll(!showAll)}>
|
||||
{showAll ? "View less" : "View more"}
|
||||
</Anchor>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,177 +1,183 @@
|
||||
import permissionConfig from "@/lib/listPermission.json";
|
||||
import { ActionIcon, Checkbox, Collapse, Group, Stack, Text } from "@mantine/core";
|
||||
import {
|
||||
ActionIcon,
|
||||
Checkbox,
|
||||
Collapse,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Node {
|
||||
label: string;
|
||||
key: string;
|
||||
children?: Node[];
|
||||
label: string;
|
||||
key: string;
|
||||
children?: Node[];
|
||||
}
|
||||
|
||||
export default function PermissionTree({
|
||||
selected,
|
||||
onChange,
|
||||
selected,
|
||||
onChange,
|
||||
}: {
|
||||
selected: string[];
|
||||
onChange: (val: string[]) => void;
|
||||
selected: string[];
|
||||
onChange: (val: string[]) => void;
|
||||
}) {
|
||||
// Ambil semua child dari node
|
||||
const [openNodes, setOpenNodes] = useState<Record<string, boolean>>({});
|
||||
// Ambil semua child dari node
|
||||
const [openNodes, setOpenNodes] = useState<Record<string, boolean>>({});
|
||||
|
||||
function toggleNode(label: string) {
|
||||
setOpenNodes(prev => ({ ...prev, [label]: !prev[label] }));
|
||||
}
|
||||
function toggleNode(label: string) {
|
||||
setOpenNodes((prev) => ({ ...prev, [label]: !prev[label] }));
|
||||
}
|
||||
|
||||
function getAllChildKeys(node: Node): string[] {
|
||||
let result: string[] = [];
|
||||
if (node.children) {
|
||||
node.children.forEach((c) => {
|
||||
result.push(c.key);
|
||||
result = [...result, ...getAllChildKeys(c)];
|
||||
});
|
||||
function getAllChildKeys(node: Node): string[] {
|
||||
let result: string[] = [];
|
||||
if (node.children) {
|
||||
node.children.forEach((c) => {
|
||||
result.push(c.key);
|
||||
result = [...result, ...getAllChildKeys(c)];
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// Dapatkan parentKey, jika ada
|
||||
function getParentKey(key: string) {
|
||||
const split = key.split(".");
|
||||
if (split.length <= 1) return null;
|
||||
split.pop();
|
||||
return split.join(".");
|
||||
}
|
||||
|
||||
// Update parent ke atas secara rekursif
|
||||
function updateParent(next: string[], parentKey: string | null): string[] {
|
||||
if (!parentKey) return next;
|
||||
|
||||
const allChildKeys = findAllChildKeysFromKey(parentKey);
|
||||
|
||||
const selectedChild = allChildKeys.filter((c) => next.includes(c));
|
||||
|
||||
if (selectedChild.length === 0) {
|
||||
// Semua child uncheck → parent uncheck
|
||||
next = next.filter((x) => x !== parentKey);
|
||||
} else if (selectedChild.length === allChildKeys.length) {
|
||||
// Semua child check → parent check
|
||||
if (!next.includes(parentKey)) {
|
||||
next.push(parentKey);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// Dapatkan parentKey, jika ada
|
||||
function getParentKey(key: string) {
|
||||
const split = key.split(".");
|
||||
if (split.length <= 1) return null;
|
||||
split.pop();
|
||||
return split.join(".");
|
||||
}
|
||||
|
||||
|
||||
// Update parent ke atas secara rekursif
|
||||
function updateParent(next: string[], parentKey: string | null): string[] {
|
||||
if (!parentKey) return next;
|
||||
|
||||
const allChildKeys = findAllChildKeysFromKey(parentKey);
|
||||
|
||||
const selectedChild = allChildKeys.filter((c) => next.includes(c));
|
||||
|
||||
if (selectedChild.length === 0) {
|
||||
// Semua child uncheck → parent uncheck
|
||||
next = next.filter((x) => x !== parentKey);
|
||||
} else if (selectedChild.length === allChildKeys.length) {
|
||||
// Semua child check → parent check
|
||||
if (!next.includes(parentKey)) {
|
||||
next.push(parentKey);
|
||||
}
|
||||
} else {
|
||||
// Sebagian child check → parent intermediate (checked = true, rendered sebagai indeterminate)
|
||||
if (!next.includes(parentKey)) {
|
||||
next.push(parentKey);
|
||||
}
|
||||
} else {
|
||||
// Sebagian child check → parent intermediate (checked = true, rendered sebagai indeterminate)
|
||||
if (!next.includes(parentKey)) {
|
||||
next.push(parentKey);
|
||||
}
|
||||
}
|
||||
|
||||
// Rekursif naik ke atas
|
||||
return updateParent(next, getParentKey(parentKey));
|
||||
}
|
||||
// Rekursif naik ke atas
|
||||
return updateParent(next, getParentKey(parentKey));
|
||||
}
|
||||
|
||||
// dapatkan child dari string key
|
||||
function findAllChildKeysFromKey(parentKey: string) {
|
||||
const list: string[] = [];
|
||||
// dapatkan child dari string key
|
||||
function findAllChildKeysFromKey(parentKey: string) {
|
||||
const list: string[] = [];
|
||||
|
||||
function traverse(nodes: Node[]) {
|
||||
nodes.forEach((n) => {
|
||||
if (n.key.startsWith(parentKey + ".") && n.key !== parentKey) {
|
||||
list.push(n.key);
|
||||
}
|
||||
if (n.children) traverse(n.children);
|
||||
});
|
||||
}
|
||||
function traverse(nodes: Node[]) {
|
||||
nodes.forEach((n) => {
|
||||
if (n.key.startsWith(parentKey + ".") && n.key !== parentKey) {
|
||||
list.push(n.key);
|
||||
}
|
||||
if (n.children) traverse(n.children);
|
||||
});
|
||||
}
|
||||
|
||||
traverse(permissionConfig.menus);
|
||||
return list;
|
||||
}
|
||||
traverse(permissionConfig.menus);
|
||||
return list;
|
||||
}
|
||||
|
||||
const RenderMenu = ({ menu }: { menu: Node }) => {
|
||||
const hasChild = menu.children && menu.children.length > 0;
|
||||
const open = openNodes[menu.label] ?? false;
|
||||
const childKeys = getAllChildKeys(menu);
|
||||
const isChecked = selected.includes(menu.key);
|
||||
const isIndeterminate =
|
||||
!isChecked &&
|
||||
selected.some(
|
||||
(x) =>
|
||||
typeof x === "string" &&
|
||||
x.startsWith(menu.key + ".")
|
||||
);
|
||||
|
||||
function handleCheck() {
|
||||
let next = [...selected];
|
||||
|
||||
if (childKeys.length > 0) {
|
||||
// klik parent
|
||||
if (!isChecked) {
|
||||
next = [...new Set([...next, menu.key, ...childKeys])];
|
||||
} else {
|
||||
next = next.filter((x) => x !== menu.key && !childKeys.includes(x));
|
||||
}
|
||||
|
||||
next = updateParent(next, getParentKey(menu.key));
|
||||
onChange(next);
|
||||
return;
|
||||
}
|
||||
|
||||
// klik child
|
||||
if (isChecked) {
|
||||
next = next.filter((x) => x !== menu.key);
|
||||
} else {
|
||||
next.push(menu.key);
|
||||
}
|
||||
|
||||
next = updateParent(next, getParentKey(menu.key));
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
{menu.children && menu.children.length > 0 ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
onClick={() => toggleNode(menu.label)}
|
||||
>
|
||||
{openNodes[menu.label] ? (
|
||||
<IconChevronDown size={16} />
|
||||
) : (
|
||||
<IconChevronRight size={16} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
) : (
|
||||
<div style={{ width: 28 }} />
|
||||
)}
|
||||
|
||||
<Checkbox
|
||||
label={menu.label}
|
||||
checked={isChecked}
|
||||
indeterminate={isIndeterminate}
|
||||
onChange={handleCheck}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{menu.children && (
|
||||
<Collapse in={open}>
|
||||
<Stack gap={4} pl="md">
|
||||
{menu.children.map((child) => (
|
||||
<RenderMenu key={child.key} menu={child} />
|
||||
))}
|
||||
</Stack>
|
||||
</Collapse>
|
||||
)}
|
||||
</Stack>
|
||||
const RenderMenu = ({ menu }: { menu: Node }) => {
|
||||
const hasChild = menu.children && menu.children.length > 0;
|
||||
const open = openNodes[menu.label] ?? false;
|
||||
const childKeys = getAllChildKeys(menu);
|
||||
const isChecked = selected.includes(menu.key);
|
||||
const isIndeterminate =
|
||||
!isChecked &&
|
||||
selected.some(
|
||||
(x) => typeof x === "string" && x.startsWith(menu.key + "."),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text size="sm">Hak Akses</Text>
|
||||
{permissionConfig.menus.filter((menu: Node) => !menu.key.startsWith("api") && !menu.key.startsWith("credential")).map((menu: Node) => (
|
||||
<RenderMenu key={menu.key} menu={menu} />
|
||||
))}
|
||||
function handleCheck() {
|
||||
let next = [...selected];
|
||||
|
||||
if (childKeys.length > 0) {
|
||||
// klik parent
|
||||
if (!isChecked) {
|
||||
next = [...new Set([...next, menu.key, ...childKeys])];
|
||||
} else {
|
||||
next = next.filter((x) => x !== menu.key && !childKeys.includes(x));
|
||||
}
|
||||
|
||||
next = updateParent(next, getParentKey(menu.key));
|
||||
onChange(next);
|
||||
return;
|
||||
}
|
||||
|
||||
// klik child
|
||||
if (isChecked) {
|
||||
next = next.filter((x) => x !== menu.key);
|
||||
} else {
|
||||
next.push(menu.key);
|
||||
}
|
||||
|
||||
next = updateParent(next, getParentKey(menu.key));
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
{menu.children && menu.children.length > 0 ? (
|
||||
<ActionIcon variant="subtle" onClick={() => toggleNode(menu.label)}>
|
||||
{openNodes[menu.label] ? (
|
||||
<IconChevronDown size={16} />
|
||||
) : (
|
||||
<IconChevronRight size={16} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
) : (
|
||||
<div style={{ width: 28 }} />
|
||||
)}
|
||||
|
||||
<Checkbox
|
||||
label={menu.label}
|
||||
checked={isChecked}
|
||||
indeterminate={isIndeterminate}
|
||||
onChange={handleCheck}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{menu.children && (
|
||||
<Collapse in={open}>
|
||||
<Stack gap={4} pl="md">
|
||||
{menu.children.map((child) => (
|
||||
<RenderMenu key={child.key} menu={child} />
|
||||
))}
|
||||
</Stack>
|
||||
</Collapse>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text size="sm">Hak Akses</Text>
|
||||
{permissionConfig.menus
|
||||
.filter(
|
||||
(menu: Node) =>
|
||||
!menu.key.startsWith("api") && !menu.key.startsWith("credential"),
|
||||
)
|
||||
.map((menu: Node) => (
|
||||
<RenderMenu key={menu.key} menu={menu} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,11 @@ import type { JsonValue } from "generated/prisma/runtime/library";
|
||||
import { useEffect, useState } from "react";
|
||||
import notification from "./notificationGlobal";
|
||||
|
||||
export default function ProfileUser({ permissions }: { permissions: JsonValue[] }) {
|
||||
export default function ProfileUser({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: JsonValue[];
|
||||
}) {
|
||||
const [opened, setOpened] = useState(false);
|
||||
const [openedPassword, setOpenedPassword] = useState(false);
|
||||
const [pwdBaru, setPwdBaru] = useState("");
|
||||
@@ -127,21 +131,17 @@ export default function ProfileUser({ permissions }: { permissions: JsonValue[]
|
||||
Profile Pengguna
|
||||
</Title>
|
||||
<Group gap="md">
|
||||
{
|
||||
permissions.includes("setting.profile.edit") && (
|
||||
<Button variant="light" onClick={() => setOpened(true)}>
|
||||
Edit
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
{permissions.includes("setting.profile.edit") && (
|
||||
<Button variant="light" onClick={() => setOpened(true)}>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{
|
||||
permissions.includes("setting.profile.password") && (
|
||||
<Button variant="light" onClick={() => setOpenedPassword(true)}>
|
||||
Ubah Password
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
{permissions.includes("setting.profile.password") && (
|
||||
<Button variant="light" onClick={() => setOpenedPassword(true)}>
|
||||
Ubah Password
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Flex>
|
||||
<Divider my={0} />
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import apiFetch from "@/lib/apiFetch";
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Divider,
|
||||
Flex,
|
||||
Group,
|
||||
Input,
|
||||
Modal,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip
|
||||
ActionIcon,
|
||||
Button,
|
||||
Divider,
|
||||
Flex,
|
||||
Group,
|
||||
Input,
|
||||
Modal,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
||||
import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
|
||||
@@ -24,404 +24,449 @@ import PermissionRole from "./PermissionRole";
|
||||
import PermissionTree from "./PermissionTree";
|
||||
|
||||
interface MenuNode {
|
||||
key: string;
|
||||
label: string;
|
||||
default: boolean;
|
||||
children?: MenuNode[];
|
||||
key: string;
|
||||
label: string;
|
||||
default: boolean;
|
||||
children?: MenuNode[];
|
||||
}
|
||||
|
||||
export default function UserRoleSetting({ permissions }: { permissions: JsonValue[] }) {
|
||||
const [btnDisable, setBtnDisable] = useState(true);
|
||||
const [btnLoading, setBtnLoading] = useState(false);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [openedDelete, { open: openDelete, close: closeDelete }] =
|
||||
useDisclosure(false);
|
||||
const [dataDelete, setDataDelete] = useState("");
|
||||
const {
|
||||
data: dataRole,
|
||||
mutate: mutateRole,
|
||||
isLoading: isLoadingRole,
|
||||
} = useSWR("user-role", () => apiFetch.api.user.role.get());
|
||||
const [openedTambah, { open: openTambah, close: closeTambah }] =
|
||||
useDisclosure(false);
|
||||
const { data, mutate, isLoading } = useSWR("role-list", () =>
|
||||
apiFetch.api.user.role.get(),
|
||||
);
|
||||
const list = data?.data || [];
|
||||
const listRole = dataRole?.data || [];
|
||||
const [dataEdit, setDataEdit] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
permissions: [],
|
||||
});
|
||||
const [dataTambah, setDataTambah] = useState({
|
||||
name: "",
|
||||
permissions: [],
|
||||
});
|
||||
const [error, setError] = useState({
|
||||
name: false,
|
||||
permissions: false,
|
||||
});
|
||||
export default function UserRoleSetting({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: JsonValue[];
|
||||
}) {
|
||||
const [btnDisable, setBtnDisable] = useState(true);
|
||||
const [btnLoading, setBtnLoading] = useState(false);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [openedDelete, { open: openDelete, close: closeDelete }] =
|
||||
useDisclosure(false);
|
||||
const [dataDelete, setDataDelete] = useState("");
|
||||
const {
|
||||
data: dataRole,
|
||||
mutate: mutateRole,
|
||||
isLoading: isLoadingRole,
|
||||
} = useSWR("user-role", () => apiFetch.api.user.role.get());
|
||||
const [openedTambah, { open: openTambah, close: closeTambah }] =
|
||||
useDisclosure(false);
|
||||
const { data, mutate, isLoading } = useSWR("role-list", () =>
|
||||
apiFetch.api.user.role.get(),
|
||||
);
|
||||
const list = data?.data || [];
|
||||
const listRole = dataRole?.data || [];
|
||||
const [dataEdit, setDataEdit] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
permissions: [],
|
||||
});
|
||||
const [dataTambah, setDataTambah] = useState({
|
||||
name: "",
|
||||
permissions: [],
|
||||
});
|
||||
const [error, setError] = useState({
|
||||
name: false,
|
||||
permissions: false,
|
||||
});
|
||||
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
useShallowEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
async function handleCreate() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
const res = await apiFetch.api.user["role-create"].post(dataTambah as any);
|
||||
if (res.status === 200) {
|
||||
mutate();
|
||||
closeTambah();
|
||||
setDataTambah({
|
||||
name: "",
|
||||
permissions: [],
|
||||
});
|
||||
notification({
|
||||
title: "Success",
|
||||
message: "Your role have been saved",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to create role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to create role",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setBtnLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEdit() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
const res = await apiFetch.api.user["role-update"].post(dataEdit as any);
|
||||
if (res.status === 200) {
|
||||
mutate();
|
||||
close();
|
||||
notification({
|
||||
title: "Success",
|
||||
message: "Your role have been saved",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to edit role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to edit role",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setBtnLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
const res = await apiFetch.api.user["role-delete"].post({ id: dataDelete });
|
||||
if (res.status === 200) {
|
||||
mutate();
|
||||
closeDelete();
|
||||
notification({
|
||||
title: "Success",
|
||||
message: "Your role have been deleted",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to delete role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to delete role",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setBtnLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function chooseEdit({ data }: { data: { id: string; name: string; permissions: []; }; }) {
|
||||
setDataEdit({
|
||||
id: data.id, name: data.name, permissions: data.permissions ? data.permissions : []
|
||||
});
|
||||
open();
|
||||
}
|
||||
|
||||
function onValidation({ kat, value, aksi, }: { kat: "name" | "permission"; value: string | null; aksi: "edit" | "tambah"; }) {
|
||||
if (value == null || value.length < 1) {
|
||||
setBtnDisable(true);
|
||||
setError({ ...error, [kat]: true });
|
||||
async function handleCreate() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
const res = await apiFetch.api.user["role-create"].post(
|
||||
dataTambah as any,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
mutate();
|
||||
closeTambah();
|
||||
setDataTambah({
|
||||
name: "",
|
||||
permissions: [],
|
||||
});
|
||||
notification({
|
||||
title: "Success",
|
||||
message: "Your role have been saved",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
setBtnDisable(false);
|
||||
setError({ ...error, [kat]: false });
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to create role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
|
||||
if (aksi === "edit") {
|
||||
setDataEdit({ ...dataEdit, [kat]: value });
|
||||
} else {
|
||||
setDataTambah({ ...dataTambah, [kat]: value });
|
||||
}
|
||||
}
|
||||
|
||||
function buildOrderList(menus: MenuNode[]): string[] {
|
||||
const list: string[] = [];
|
||||
|
||||
const traverse = (nodes: MenuNode[]) => {
|
||||
nodes.forEach((node) => {
|
||||
list.push(node.key);
|
||||
if (node.children) traverse(node.children);
|
||||
});
|
||||
};
|
||||
|
||||
traverse(menus);
|
||||
return list;
|
||||
}
|
||||
|
||||
function sortByJsonOrder(arrayData: string[]): string[] {
|
||||
const orderList = buildOrderList(listMenu.menus);
|
||||
|
||||
return arrayData.sort((a, b) => {
|
||||
return orderList.indexOf(a) - orderList.indexOf(b);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to create role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setBtnLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (dataEdit.name.length > 0) {
|
||||
setBtnDisable(false);
|
||||
async function handleEdit() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
const res = await apiFetch.api.user["role-update"].post(dataEdit as any);
|
||||
if (res.status === 200) {
|
||||
mutate();
|
||||
close();
|
||||
notification({
|
||||
title: "Success",
|
||||
message: "Your role have been saved",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to edit role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
}, [dataEdit.id]);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to edit role",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setBtnLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal Edit */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={"Edit"}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size={"lg"}
|
||||
>
|
||||
<Stack gap="ld">
|
||||
<Input.Wrapper label="Nama Role">
|
||||
<Input
|
||||
value={dataEdit.name}
|
||||
onChange={(e) =>
|
||||
onValidation({
|
||||
kat: "name",
|
||||
value: e.target.value,
|
||||
aksi: "edit",
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
<PermissionTree
|
||||
selected={dataEdit.permissions}
|
||||
onChange={(permissions) => {
|
||||
setDataEdit({ ...dataEdit, permissions: sortByJsonOrder(permissions) as never[] });
|
||||
}}
|
||||
/>
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={close}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
onClick={handleEdit}
|
||||
disabled={
|
||||
btnDisable ||
|
||||
dataEdit.name.length < 1 ||
|
||||
dataEdit.permissions?.length < 1
|
||||
}
|
||||
loading={btnLoading}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
async function handleDelete() {
|
||||
try {
|
||||
setBtnLoading(true);
|
||||
const res = await apiFetch.api.user["role-delete"].post({
|
||||
id: dataDelete,
|
||||
});
|
||||
if (res.status === 200) {
|
||||
mutate();
|
||||
closeDelete();
|
||||
notification({
|
||||
title: "Success",
|
||||
message: "Your role have been deleted",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to delete role",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
notification({
|
||||
title: "Error",
|
||||
message: "Failed to delete role",
|
||||
type: "error",
|
||||
});
|
||||
} finally {
|
||||
setBtnLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
{/* Modal Tambah */}
|
||||
<Modal
|
||||
opened={openedTambah}
|
||||
onClose={closeTambah}
|
||||
title={"Tambah"}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size={"lg"}
|
||||
>
|
||||
<Stack gap="ld">
|
||||
<Input.Wrapper
|
||||
label="Nama Role"
|
||||
description=""
|
||||
error={error.name ? "Field is required" : ""}
|
||||
>
|
||||
<Input
|
||||
value={dataTambah.name}
|
||||
onChange={(e) =>
|
||||
onValidation({
|
||||
kat: "name",
|
||||
value: e.target.value,
|
||||
aksi: "tambah",
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
<PermissionTree
|
||||
selected={dataTambah.permissions}
|
||||
onChange={(permissions) => {
|
||||
setDataTambah({ ...dataTambah, permissions: sortByJsonOrder(permissions) as never[] });
|
||||
}}
|
||||
/>
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={closeTambah}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
onClick={handleCreate}
|
||||
disabled={
|
||||
btnDisable ||
|
||||
dataTambah.name.length < 1 ||
|
||||
dataTambah.permissions.length < 1
|
||||
}
|
||||
loading={btnLoading}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
function chooseEdit({
|
||||
data,
|
||||
}: {
|
||||
data: { id: string; name: string; permissions: [] };
|
||||
}) {
|
||||
setDataEdit({
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
permissions: data.permissions ? data.permissions : [],
|
||||
});
|
||||
open();
|
||||
}
|
||||
|
||||
{/* Modal Delete */}
|
||||
<Modal
|
||||
opened={openedDelete}
|
||||
onClose={closeDelete}
|
||||
title={"Delete"}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="md" color="gray.6">
|
||||
Apakah anda yakin ingin menghapus role ini?
|
||||
</Text>
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={closeDelete}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
color="red"
|
||||
onClick={handleDelete}
|
||||
loading={btnLoading}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
function onValidation({
|
||||
kat,
|
||||
value,
|
||||
aksi,
|
||||
}: {
|
||||
kat: "name" | "permission";
|
||||
value: string | null;
|
||||
aksi: "edit" | "tambah";
|
||||
}) {
|
||||
if (value == null || value.length < 1) {
|
||||
setBtnDisable(true);
|
||||
setError({ ...error, [kat]: true });
|
||||
} else {
|
||||
setBtnDisable(false);
|
||||
setError({ ...error, [kat]: false });
|
||||
}
|
||||
|
||||
<Stack gap={"md"}>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Title order={4} c="gray.2">
|
||||
Daftar Role
|
||||
</Title>
|
||||
{
|
||||
permissions.includes('setting.user_role.tambah') && (
|
||||
<Tooltip label="Tambah Role">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
if (aksi === "edit") {
|
||||
setDataEdit({ ...dataEdit, [kat]: value });
|
||||
} else {
|
||||
setDataTambah({ ...dataTambah, [kat]: value });
|
||||
}
|
||||
}
|
||||
|
||||
function buildOrderList(menus: MenuNode[]): string[] {
|
||||
const list: string[] = [];
|
||||
|
||||
const traverse = (nodes: MenuNode[]) => {
|
||||
nodes.forEach((node) => {
|
||||
list.push(node.key);
|
||||
if (node.children) traverse(node.children);
|
||||
});
|
||||
};
|
||||
|
||||
traverse(menus);
|
||||
return list;
|
||||
}
|
||||
|
||||
function sortByJsonOrder(arrayData: string[]): string[] {
|
||||
const orderList = buildOrderList(listMenu.menus);
|
||||
|
||||
return arrayData.sort((a, b) => {
|
||||
return orderList.indexOf(a) - orderList.indexOf(b);
|
||||
});
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (dataEdit.name.length > 0) {
|
||||
setBtnDisable(false);
|
||||
}
|
||||
}, [dataEdit.id]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal Edit */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={"Edit"}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size={"lg"}
|
||||
>
|
||||
<Stack gap="ld">
|
||||
<Input.Wrapper label="Nama Role">
|
||||
<Input
|
||||
value={dataEdit.name}
|
||||
onChange={(e) =>
|
||||
onValidation({
|
||||
kat: "name",
|
||||
value: e.target.value,
|
||||
aksi: "edit",
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
<PermissionTree
|
||||
selected={dataEdit.permissions}
|
||||
onChange={(permissions) => {
|
||||
setDataEdit({
|
||||
...dataEdit,
|
||||
permissions: sortByJsonOrder(permissions) as never[],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={close}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
onClick={handleEdit}
|
||||
disabled={
|
||||
btnDisable ||
|
||||
dataEdit.name.length < 1 ||
|
||||
dataEdit.permissions?.length < 1
|
||||
}
|
||||
loading={btnLoading}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* Modal Tambah */}
|
||||
<Modal
|
||||
opened={openedTambah}
|
||||
onClose={closeTambah}
|
||||
title={"Tambah"}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
size={"lg"}
|
||||
>
|
||||
<Stack gap="ld">
|
||||
<Input.Wrapper
|
||||
label="Nama Role"
|
||||
description=""
|
||||
error={error.name ? "Field is required" : ""}
|
||||
>
|
||||
<Input
|
||||
value={dataTambah.name}
|
||||
onChange={(e) =>
|
||||
onValidation({
|
||||
kat: "name",
|
||||
value: e.target.value,
|
||||
aksi: "tambah",
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Input.Wrapper>
|
||||
<PermissionTree
|
||||
selected={dataTambah.permissions}
|
||||
onChange={(permissions) => {
|
||||
setDataTambah({
|
||||
...dataTambah,
|
||||
permissions: sortByJsonOrder(permissions) as never[],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={closeTambah}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
onClick={handleCreate}
|
||||
disabled={
|
||||
btnDisable ||
|
||||
dataTambah.name.length < 1 ||
|
||||
dataTambah.permissions.length < 1
|
||||
}
|
||||
loading={btnLoading}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* Modal Delete */}
|
||||
<Modal
|
||||
opened={openedDelete}
|
||||
onClose={closeDelete}
|
||||
title={"Delete"}
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="md" color="gray.6">
|
||||
Apakah anda yakin ingin menghapus role ini?
|
||||
</Text>
|
||||
<Group justify="center" grow>
|
||||
<Button variant="light" onClick={closeDelete}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
color="red"
|
||||
onClick={handleDelete}
|
||||
loading={btnLoading}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Stack gap={"md"}>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Title order={4} c="gray.2">
|
||||
Daftar Role
|
||||
</Title>
|
||||
{permissions.includes("setting.user_role.tambah") && (
|
||||
<Tooltip label="Tambah Role">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Flex>
|
||||
<Divider my={0} />
|
||||
<Stack gap={"md"}>
|
||||
<Table highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Role</Table.Th>
|
||||
<Table.Th>Permission</Table.Th>
|
||||
<Table.Th>Aksi</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{list.length > 0 ? (
|
||||
list?.map((v: any) => (
|
||||
<Table.Tr key={v.id}>
|
||||
<Table.Td w={"150"}>{v.name}</Table.Td>
|
||||
<Table.Td>
|
||||
<PermissionRole permissions={v.permissions} />
|
||||
</Table.Td>
|
||||
<Table.Td w={"100"}>
|
||||
<Group>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes("setting.user_role.edit")
|
||||
? "Edit Role"
|
||||
: "Edit Role - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
</Flex>
|
||||
<Divider my={0} />
|
||||
<Stack gap={"md"}>
|
||||
<Table highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Role</Table.Th>
|
||||
<Table.Th>Permission</Table.Th>
|
||||
<Table.Th>Aksi</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{list.length > 0 ? (
|
||||
list?.map((v: any) => (
|
||||
<Table.Tr key={v.id}>
|
||||
<Table.Td w={"150"}>{v.name}</Table.Td>
|
||||
<Table.Td>
|
||||
<PermissionRole permissions={v.permissions} />
|
||||
</Table.Td>
|
||||
<Table.Td w={"100"}>
|
||||
<Group>
|
||||
<Tooltip label={permissions.includes('setting.user_role.edit') ? "Edit Role" : "Edit Role - Anda tidak memiliki akses"}>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
|
||||
onClick={() => chooseEdit({ data: v })}
|
||||
disabled={!permissions.includes('setting.user_role.edit') || v.id == "developer"}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={permissions.includes('setting.user_role.delete') ? "Delete Role" : "Delete Role - Anda tidak memiliki akses"}>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
color="red"
|
||||
style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
|
||||
onClick={() => {
|
||||
setDataDelete(v.id);
|
||||
openDelete();
|
||||
}}
|
||||
disabled={!permissions.includes('setting.user_role.delete') || v.id == "developer"}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
) : (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center">
|
||||
Data Role Tidak Ditemukan
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
|
||||
onClick={() => chooseEdit({ data: v })}
|
||||
disabled={
|
||||
!permissions.includes("setting.user_role.edit") ||
|
||||
v.id == "developer"
|
||||
}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes("setting.user_role.delete")
|
||||
? "Delete Role"
|
||||
: "Delete Role - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
color="red"
|
||||
style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
|
||||
onClick={() => {
|
||||
setDataDelete(v.id);
|
||||
openDelete();
|
||||
}}
|
||||
disabled={
|
||||
!permissions.includes(
|
||||
"setting.user_role.delete",
|
||||
) || v.id == "developer"
|
||||
}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
) : (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center">
|
||||
Data Role Tidak Ditemukan
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,7 +21,11 @@ import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import notification from "./notificationGlobal";
|
||||
|
||||
export default function UserSetting({ permissions }: { permissions: JsonValue[] }) {
|
||||
export default function UserSetting({
|
||||
permissions,
|
||||
}: {
|
||||
permissions: JsonValue[];
|
||||
}) {
|
||||
const [btnDisable, setBtnDisable] = useState(true);
|
||||
const [btnLoading, setBtnLoading] = useState(false);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
@@ -437,20 +441,17 @@ export default function UserSetting({ permissions }: { permissions: JsonValue[]
|
||||
<Title order={4} c="gray.2">
|
||||
Daftar User
|
||||
</Title>
|
||||
{
|
||||
permissions.includes('setting.user.tambah') && (
|
||||
<Tooltip label="Tambah User">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
{permissions.includes("setting.user.tambah") && (
|
||||
<Tooltip label="Tambah User">
|
||||
<Button
|
||||
variant="light"
|
||||
leftSection={<IconPlus size={20} />}
|
||||
onClick={openTambah}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Flex>
|
||||
<Divider my={0} />
|
||||
<Stack gap={"md"}>
|
||||
@@ -474,18 +475,33 @@ export default function UserSetting({ permissions }: { permissions: JsonValue[]
|
||||
<Table.Td>{v.nameRole}</Table.Td>
|
||||
<Table.Td>
|
||||
<Group>
|
||||
<Tooltip label={permissions.includes('setting.user.edit') ? "Edit User" : "Edit User - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes("setting.user.edit")
|
||||
? "Edit User"
|
||||
: "Edit User - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
|
||||
onClick={() => chooseEdit({ data: v })}
|
||||
disabled={!permissions.includes('setting.user.edit') || v.roleId == "developer"}
|
||||
disabled={
|
||||
!permissions.includes("setting.user.edit") ||
|
||||
v.roleId == "developer"
|
||||
}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={permissions.includes('setting.user.delete') ? "Delete User" : "Delete User - Anda tidak memiliki akses"}>
|
||||
<Tooltip
|
||||
label={
|
||||
permissions.includes("setting.user.delete")
|
||||
? "Delete User"
|
||||
: "Delete User - Anda tidak memiliki akses"
|
||||
}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
size="sm"
|
||||
@@ -495,7 +511,10 @@ export default function UserSetting({ permissions }: { permissions: JsonValue[]
|
||||
setDataDelete(v.id);
|
||||
openDelete();
|
||||
}}
|
||||
disabled={!permissions.includes('setting.user.delete') || v.roleId == "developer"}
|
||||
disabled={
|
||||
!permissions.includes("setting.user.delete") ||
|
||||
v.roleId == "developer"
|
||||
}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</ActionIcon>
|
||||
|
||||
@@ -3,157 +3,242 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKBedaBiodataDiri({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>();
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>();
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.25" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "15px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<b><u>SURAT KETERANGAN BEDA BIODATA DIRI</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan + " " + data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Dengan ini menerangkan bahwa berdasarkan keterangan dari yang bersangkutan:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
|
||||
<tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Bahwa orang tersebut di atas <b>benar merupakan orang yang sama</b>, meskipun terdapat <b>perbedaan data pribadi (biodata)</b> pada beberapa dokumen, sebagai berikut:
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>1. Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
|
||||
<tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>2. Tempat/Tanggal Lahir</td><td style={{ width: "10px" }}>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
|
||||
<tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>3. Nama Orang Tua</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama orang tua")}</td></tr>
|
||||
<tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
|
||||
<tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Perbedaan tersebut terjadi karena <b>kesalahan penulisan/pencatatan administratif</b>, namun yang bersangkutan adalah <b>orang yang sama</b>.
|
||||
<br />
|
||||
Dengan surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ marginTop: "0px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /><br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.25" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "15px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN BEDA BIODATA DIRI</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>
|
||||
{data.setting.perbekelJabatan + " " + data.setting.desaNama}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Dengan ini menerangkan bahwa berdasarkan keterangan dari yang
|
||||
bersangkutan:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Bahwa orang tersebut di atas <b>benar merupakan orang yang sama</b>,
|
||||
meskipun terdapat <b>perbedaan data pribadi (biodata)</b> pada beberapa
|
||||
dokumen, sebagai berikut:
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>1. Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tertulis pada dokumen A</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tertulis pada dokumen a")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tertulis pada dokumen B</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tertulis pada dokumen b")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>2. Tempat/Tanggal Lahir</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tertulis pada dokumen A</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tertulis pada dokumen a")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tertulis pada dokumen B</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tertulis pada dokumen b")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>3. Nama Orang Tua</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama orang tua")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tertulis pada dokumen A</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tertulis pada dokumen a")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tertulis pada dokumen B</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tertulis pada dokumen b")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Perbedaan tersebut terjadi karena{" "}
|
||||
<b>kesalahan penulisan/pencatatan administratif</b>, namun yang
|
||||
bersangkutan adalah <b>orang yang sama</b>.
|
||||
<br />
|
||||
Dengan surat keterangan ini dibuat dengan sebenar-benarnya untuk
|
||||
dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "0px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,108 +3,166 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKBelumKawin({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>();
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>();
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b><u>SURAT KETERANGAN BELUM KAWIN</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini {data.setting.perbekelJabatan} {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan}, Kabupaten {data.setting.desaKabupaten}, dengan ini menerangkan bahwa:
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
|
||||
<tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
|
||||
<tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Berdasarkan keterangan dari yang bersangkutan dan data administrasi kependudukan yang ada di Desa {data.setting.desaNama},
|
||||
yang bersangkutan benar sampai saat ini belum pernah menikah, baik secara adat, agama, maupun hukum negara.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br /><br />
|
||||
Pemohon
|
||||
<br /><br /><br /><br /><br /><br />
|
||||
<u>{getValue("nama")}</u> <br />
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br /><br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /><br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN BELUM KAWIN</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini {data.setting.perbekelJabatan}{" "}
|
||||
{data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan},
|
||||
Kabupaten {data.setting.desaKabupaten}, dengan ini menerangkan bahwa:
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Berdasarkan keterangan dari yang bersangkutan dan data administrasi
|
||||
kependudukan yang ada di Desa {data.setting.desaNama}, yang bersangkutan
|
||||
benar sampai saat ini belum pernah menikah, baik secara adat, agama,
|
||||
maupun hukum negara.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat
|
||||
digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "40px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
<br />
|
||||
Pemohon
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<u>{getValue("nama")}</u> <br />
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,121 +3,163 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKDomisiliOrganisasi({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b><u>SURAT KETERANGAN DOMISILI ORGANISASI</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Kantor</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaAlamat}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dengan ini menerangkan bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama Organisasi</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>Jenis Organisasi</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Nomor Telepon</td><td>:</td><td>{getValue("negara")}</td></tr>
|
||||
<tr><td>Nama Pimpinan</td><td>:</td><td>{getValue("agama")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Benar bahwa organisasi tersebut berdomisili di wilayah Desa / Kelurahan {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan}, Kabupaten {data.setting.desaKabupaten}.
|
||||
Dan sampai saat ini masih aktif melakukan kegiatan sesuai dengan bidangnya.<br />
|
||||
Surat keterangan ini dibuat untuk keperluan {getValue("keperluan")}.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /><br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN DOMISILI ORGANISASI</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Kantor</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaAlamat}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dengan ini menerangkan bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama Organisasi</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Organisasi</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nomor Telepon</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("negara")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nama Pimpinan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Benar bahwa organisasi tersebut berdomisili di wilayah Desa / Kelurahan{" "}
|
||||
{data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan},
|
||||
Kabupaten {data.setting.desaKabupaten}. Dan sampai saat ini masih aktif
|
||||
melakukan kegiatan sesuai dengan bidangnya.
|
||||
<br />
|
||||
Surat keterangan ini dibuat untuk keperluan {getValue("keperluan")}.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat
|
||||
digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "40px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,142 +3,244 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKKelahiran({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.2" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
||||
<b>PEMERINTAH KABUPATEN/KOTA {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b><u>SURAT KETERANGAN KELAHIRAN</u></b><br />
|
||||
Nomor : {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* PEMBUKA */}
|
||||
<div>
|
||||
Yang bertanda tangan di bawah ini, {data.setting.perbekelJabatan}
|
||||
{` ${data.setting.desaNama}, Kecamatan ${data.setting.desaKecamatan}, Kabupaten/Kota ${data.setting.desaKabupaten}`}
|
||||
, dengan ini menerangkan bahwa:
|
||||
</div>
|
||||
|
||||
{/* DATA KELAHIRAN ANAK */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Telah lahir seorang anak pada:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "200px" }}>Tanggal Lahir</td><td>:</td><td>{getValue("tanggal lahir anak")}</td></tr>
|
||||
<tr><td>Pukul</td><td>:</td><td>{getValue("pukul lahir anak")}</td></tr>
|
||||
<tr><td>Tempat Kelahiran</td><td>:</td><td>{getValue("tempat lahir anak")}</td></tr>
|
||||
<tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin anak")}</td></tr>
|
||||
<tr><td>Anak ke</td><td>:</td><td>{getValue("anak ke")}</td></tr>
|
||||
<tr><td>Nama Anak</td><td>:</td><td>{getValue("nama anak")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DATA IBU */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dari seorang ibu bernama:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "200px" }}>Nama Lengkap Ibu</td><td>:</td><td>{getValue("nama ibu")}</td></tr>
|
||||
<tr><td>NIK</td><td>:</td><td>{getValue("nik ibu")}</td></tr>
|
||||
<tr><td>Tempat & Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir ibu")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan ibu")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat ibu")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DATA AYAH */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dan seorang ayah bernama:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "200px" }}>Nama Lengkap Ayah</td><td>:</td><td>{getValue("nama ayah")}</td></tr>
|
||||
<tr><td>NIK</td><td>:</td><td>{getValue("nik ayah")}</td></tr>
|
||||
<tr><td>Tempat & Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir ayah")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan ayah")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat ayah")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DATA PELAPOR */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Berdasarkan laporan dari:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "200px" }}>Nama Pelapor</td><td>:</td><td>{getValue("nama pelapor")}</td></tr>
|
||||
<tr><td>Hubungan dengan Anak</td><td>:</td><td>{getValue("hubungan pelapor")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat pelapor")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* PENUTUP */}
|
||||
<div style={{ marginTop: "20px", textAlign: "justify" }}>
|
||||
Demikian Surat Keterangan Kelahiran ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TEMPAT TANGGAL */}
|
||||
<table style={{ width: "100%", marginTop: "20px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "200px" }}>Dikeluarkan di</td><td>:</td><td>{data.setting.desaNama}</td></tr>
|
||||
<tr><td>Pada tanggal</td><td>:</td><td>{data.surat.createdAt}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.2" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
||||
<b>
|
||||
PEMERINTAH KABUPATEN/KOTA {_.upperCase(data.setting.desaKabupaten)}
|
||||
</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN KELAHIRAN</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor : {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* PEMBUKA */}
|
||||
<div>
|
||||
Yang bertanda tangan di bawah ini, {data.setting.perbekelJabatan}
|
||||
{` ${data.setting.desaNama}, Kecamatan ${data.setting.desaKecamatan}, Kabupaten/Kota ${data.setting.desaKabupaten}`}
|
||||
, dengan ini menerangkan bahwa:
|
||||
</div>
|
||||
|
||||
{/* DATA KELAHIRAN ANAK */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Telah lahir seorang anak pada:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "200px" }}>Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tanggal lahir anak")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pukul</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pukul lahir anak")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat Kelahiran</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat lahir anak")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin anak")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anak ke</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("anak ke")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nama Anak</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nama anak")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DATA IBU */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dari seorang ibu bernama:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "200px" }}>Nama Lengkap Ibu</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nama ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat & Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat ibu")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DATA AYAH */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dan seorang ayah bernama:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "200px" }}>Nama Lengkap Ayah</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nama ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat & Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat ayah")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DATA PELAPOR */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Berdasarkan laporan dari:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "200px" }}>Nama Pelapor</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nama pelapor")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hubungan dengan Anak</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("hubungan pelapor")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat pelapor")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* PENUTUP */}
|
||||
<div style={{ marginTop: "20px", textAlign: "justify" }}>
|
||||
Demikian Surat Keterangan Kelahiran ini dibuat dengan sebenarnya agar
|
||||
dapat digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TEMPAT TANGGAL */}
|
||||
<table style={{ width: "100%", marginTop: "20px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "200px" }}>Dikeluarkan di</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>:</td>
|
||||
<td>{data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "40px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,143 +3,153 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKKelakuanBaik({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "30px" }}>
|
||||
<b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b><br />
|
||||
(PENGANTAR SKCK)<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* PEMBUKA */}
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS PENDUDUK */}
|
||||
<table style={{ width: "100%", marginBottom: "15px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama lengkap</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tgl Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* ISI */}
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Adalah benar penduduk yang berdomisili di wilayah kami dan selama tinggal di lingkungan
|
||||
Desa {data.setting.desaNama}, berkelakuan baik, tidak pernah terlibat perbuatan melanggar hukum,
|
||||
serta dikenal sopan dan aktif dalam kegiatan kemasyarakatan.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan Surat Keterangan
|
||||
Catatan Kepolisian (SKCK) ke Polsek/Polres {getValue("polsek")}.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan, kecuali terdapat perubahan
|
||||
data yang mendasar.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANGGAL */}
|
||||
<table style={{ width: "100%", marginBottom: "40px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>:</td>
|
||||
<td>{data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa {data.setting.desaNama}
|
||||
<br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u><br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "30px" }}>
|
||||
<b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b>
|
||||
<br />
|
||||
(PENGANTAR SKCK)
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* PEMBUKA */}
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS PENDUDUK */}
|
||||
<table style={{ width: "100%", marginBottom: "15px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama lengkap</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tgl Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* ISI */}
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Adalah benar penduduk yang berdomisili di wilayah kami dan selama
|
||||
tinggal di lingkungan Desa {data.setting.desaNama}, berkelakuan baik,
|
||||
tidak pernah terlibat perbuatan melanggar hukum, serta dikenal sopan dan
|
||||
aktif dalam kegiatan kemasyarakatan.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan
|
||||
Surat Keterangan Catatan Kepolisian (SKCK) ke Polsek/Polres{" "}
|
||||
{getValue("polsek")}.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan,
|
||||
kecuali terdapat perubahan data yang mendasar.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk
|
||||
dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANGGAL */}
|
||||
<table style={{ width: "100%", marginBottom: "40px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>:</td>
|
||||
<td>{data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa {data.setting.desaNama}
|
||||
<br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u>
|
||||
<br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,118 +3,201 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKKematian({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b><u>SURAT KETERANGAN KEMATIAN</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
|
||||
<tr><td>Hubungan dengan almarhum/almarhumah</td><td>:</td><td>{getValue("hubungan dengan almarhum")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Melaporkan bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
|
||||
<tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
|
||||
<tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Telah meninggal dunia pada:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Tanggal Kematian</td><td style={{ width: "10px" }}>:</td><td>{getValue("tanggal kematian")}</td></tr>
|
||||
<tr><td>Waktu Kematian</td><td>:</td><td>{getValue("waktu kematian")}</td></tr>
|
||||
<tr><td>Tempat Kematian</td><td>:</td><td>{getValue("tempat kematian")}</td></tr>
|
||||
<tr><td>Penyebab Kematian</td><td>:</td><td>{getValue("penyebab kematian")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br /><br />
|
||||
Pemohon
|
||||
<br /><br /><br /><br /> <br />
|
||||
<u>{getValue("nama")}</u> <br />
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /><br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN KEMATIAN</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hubungan dengan almarhum/almarhumah</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("hubungan dengan almarhum")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Melaporkan bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Telah meninggal dunia pada:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Tanggal Kematian</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("tanggal kematian")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Waktu Kematian</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("waktu kematian")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat Kematian</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat kematian")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Penyebab Kematian</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("penyebab kematian")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat
|
||||
digunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "40px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
<br />
|
||||
Pemohon
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br /> <br />
|
||||
<u>{getValue("nama")}</u> <br />
|
||||
</div>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,141 +3,180 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKPenghasilan({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b><u>SURAT KETERANGAN PENGHASILAN</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dengan ini menerangkan bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama</td><td>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
|
||||
<tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* PENGHASILAN */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Berdasarkan keterangan yang bersangkutan, orang tersebut memiliki penghasilan rata-rata:
|
||||
<table style={{ width: "100%", marginTop: "10px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Penghasilan</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>
|
||||
Rp {getValue("penghasilan")}
|
||||
{" "}
|
||||
({getValue("penghasilan terbilang")}) per bulan
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* KEPERLUAN */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Surat keterangan ini dibuat untuk keperluan: <b>{getValue("alasan permohonan")}</b>.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANGGAL & TANDA TANGAN */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "20px 0" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN PENGHASILAN</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dengan ini menerangkan bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat / Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* PENGHASILAN */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Berdasarkan keterangan yang bersangkutan, orang tersebut memiliki
|
||||
penghasilan rata-rata:
|
||||
<table style={{ width: "100%", marginTop: "10px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Penghasilan</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>
|
||||
Rp {getValue("penghasilan")} (
|
||||
{getValue("penghasilan terbilang")}) per bulan
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* KEPERLUAN */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Surat keterangan ini dibuat untuk keperluan:{" "}
|
||||
<b>{getValue("alasan permohonan")}</b>.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat
|
||||
dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANGGAL & TANDA TANGAN */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: "40px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,119 +3,142 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKTempatUsaha({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.5" }}>
|
||||
{/* TITLE */}
|
||||
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
||||
<b style={{ fontSize: "16px" }}>SURAT KETERANGAN TEMPAT USAHA</b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* ISI */}
|
||||
<div>
|
||||
<div style={{ marginBottom: "10px" }}>
|
||||
Yang bertanda tangan dibawah ini, saya:
|
||||
</div>
|
||||
|
||||
{/* DATA PEJABAT */}
|
||||
<div>
|
||||
<Row label="Nama" value={data.setting.perbekelNama} />
|
||||
<Row label="Jabatan" value={data.setting.perbekelJabatan} />
|
||||
<Row label="Alamat" value={data.setting.desaAlamat} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
{/* DATA WARGA */}
|
||||
<div>
|
||||
<Row label="Nama Pemilik Usaha" value={getValue("nama")} />
|
||||
<Row label="Tempat/Tanggal Lahir" value={getValue("tempat tanggal lahir")} />
|
||||
<Row label="Alamat Pemilik Usaha" value={getValue("alamat")} />
|
||||
<Row label="Nomor KTP" value={getValue("nik")} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>Benar yang bersangkutan memiliki tempat usaha dengan keterangan seperti berikut:</div>
|
||||
|
||||
<div>
|
||||
<Row label="Nama Usaha" value={getValue("nama usaha")} />
|
||||
<Row label="Bidang Usaha" value={getValue("bidang usaha")} />
|
||||
<Row label="Alamat Usaha" value={getValue("alamat usaha")} />
|
||||
<Row label="Status Tempat Usaha" value={getValue("status tempat usaha")} />
|
||||
<Row label="Luas Tempat Usaha" value={getValue("luas tempat usaha")} />
|
||||
<Row label="Jumlah Karyawan" value={getValue("jumlah karyawan")} />
|
||||
</div>
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Surat keterangan ini dibuat untuk keperluan <b>{getValue("alasan permohonan")}.</b>
|
||||
</p>
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<Row label="Dikeluarkan di" value={data.setting.desaNama} />
|
||||
<Row label="Pada tanggal" value={data.surat.createdAt} />
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
{data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
|
||||
<u>{data.setting.perbekelNama}</u><br />
|
||||
{data.setting.perbekelJabatan + " " + data.setting.desaNama}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div style={{ lineHeight: "1.5" }}>
|
||||
{/* TITLE */}
|
||||
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
||||
<b style={{ fontSize: "16px" }}>SURAT KETERANGAN TEMPAT USAHA</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* ISI */}
|
||||
<div>
|
||||
<div style={{ marginBottom: "10px" }}>
|
||||
Yang bertanda tangan dibawah ini, saya:
|
||||
</div>
|
||||
|
||||
{/* DATA PEJABAT */}
|
||||
<div>
|
||||
<Row label="Nama" value={data.setting.perbekelNama} />
|
||||
<Row label="Jabatan" value={data.setting.perbekelJabatan} />
|
||||
<Row label="Alamat" value={data.setting.desaAlamat} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
{/* DATA WARGA */}
|
||||
<div>
|
||||
<Row label="Nama Pemilik Usaha" value={getValue("nama")} />
|
||||
<Row
|
||||
label="Tempat/Tanggal Lahir"
|
||||
value={getValue("tempat tanggal lahir")}
|
||||
/>
|
||||
<Row label="Alamat Pemilik Usaha" value={getValue("alamat")} />
|
||||
<Row label="Nomor KTP" value={getValue("nik")} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Benar yang bersangkutan memiliki tempat usaha dengan keterangan
|
||||
seperti berikut:
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Row label="Nama Usaha" value={getValue("nama usaha")} />
|
||||
<Row label="Bidang Usaha" value={getValue("bidang usaha")} />
|
||||
<Row label="Alamat Usaha" value={getValue("alamat usaha")} />
|
||||
<Row
|
||||
label="Status Tempat Usaha"
|
||||
value={getValue("status tempat usaha")}
|
||||
/>
|
||||
<Row
|
||||
label="Luas Tempat Usaha"
|
||||
value={getValue("luas tempat usaha")}
|
||||
/>
|
||||
<Row label="Jumlah Karyawan" value={getValue("jumlah karyawan")} />
|
||||
</div>
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Surat keterangan ini dibuat untuk keperluan{" "}
|
||||
<b>{getValue("alasan permohonan")}.</b>
|
||||
</p>
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat
|
||||
dipergunakan sebagaimana mestinya.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<Row label="Dikeluarkan di" value={data.setting.desaNama} />
|
||||
<Row label="Pada tanggal" value={data.surat.createdAt} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
{data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u>
|
||||
<br />
|
||||
{data.setting.perbekelJabatan + " " + data.setting.desaNama}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string, value: string }) {
|
||||
return (
|
||||
<div style={{ display: "flex", marginBottom: "4px" }}>
|
||||
<div style={{ width: "180px" }}>{label}</div>
|
||||
<div style={{ width: "10px" }}>:</div>
|
||||
<div>{value}</div>
|
||||
</div>
|
||||
);
|
||||
function Row({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div style={{ display: "flex", marginBottom: "4px" }}>
|
||||
<div style={{ width: "180px" }}>{label}</div>
|
||||
<div style={{ width: "10px" }}>:</div>
|
||||
<div>{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,110 +3,118 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKTidakMampu({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.5" }}>
|
||||
{/* TITLE */}
|
||||
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
||||
<b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* ISI */}
|
||||
<div>
|
||||
<div style={{ marginBottom: "10px" }}>
|
||||
Yang bertanda tangan dibawah ini, saya
|
||||
</div>
|
||||
|
||||
{/* DATA PEJABAT */}
|
||||
<div>
|
||||
|
||||
<Row label="Nama" value={data.setting.perbekelNama} />
|
||||
<Row label="Alamat" value={data.setting.desaAlamat} />
|
||||
<Row label="Jabatan" value={data.setting.perbekelJabatan} />
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
{/* DATA WARGA */}
|
||||
<div>
|
||||
|
||||
<Row label="Nama" value={getValue("nama")} />
|
||||
<Row label="Tempat Tgl Lahir" value={getValue("tempat tanggal lahir")} />
|
||||
<Row label="Alamat" value={getValue("alamat")} />
|
||||
<Row label="NIK" value={getValue("nik")} />
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan termasuk keluarga tidak mampu.
|
||||
Surat keterangan ini dipergunakan untuk
|
||||
<b>{getValue("alasan permohonan")}.</b>
|
||||
</p>
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk dapat dipergunakan
|
||||
sebagaimana mestinya.
|
||||
</p>
|
||||
|
||||
<br /><br />
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
{data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
|
||||
<u>{data.setting.perbekelNama}</u><br />
|
||||
{data.setting.perbekelJabatan + " " + data.setting.desaNama}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div style={{ lineHeight: "1.5" }}>
|
||||
{/* TITLE */}
|
||||
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
||||
<b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* ISI */}
|
||||
<div>
|
||||
<div style={{ marginBottom: "10px" }}>
|
||||
Yang bertanda tangan dibawah ini, saya
|
||||
</div>
|
||||
|
||||
{/* DATA PEJABAT */}
|
||||
<div>
|
||||
<Row label="Nama" value={data.setting.perbekelNama} />
|
||||
<Row label="Alamat" value={data.setting.desaAlamat} />
|
||||
<Row label="Jabatan" value={data.setting.perbekelJabatan} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
{/* DATA WARGA */}
|
||||
<div>
|
||||
<Row label="Nama" value={getValue("nama")} />
|
||||
<Row
|
||||
label="Tempat Tgl Lahir"
|
||||
value={getValue("tempat tanggal lahir")}
|
||||
/>
|
||||
<Row label="Alamat" value={getValue("alamat")} />
|
||||
<Row label="NIK" value={getValue("nik")} />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan
|
||||
termasuk keluarga tidak mampu. Surat keterangan ini dipergunakan untuk
|
||||
<b>{getValue("alasan permohonan")}.</b>
|
||||
</p>
|
||||
|
||||
<p style={{ textAlign: "justify" }}>
|
||||
Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk
|
||||
dapat dipergunakan sebagaimana mestinya.
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
{data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u>
|
||||
<br />
|
||||
{data.setting.perbekelJabatan + " " + data.setting.desaNama}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string, value: string }) {
|
||||
return (
|
||||
<div style={{ display: "flex", marginBottom: "4px" }}>
|
||||
<div style={{ width: "180px" }}>{label}</div>
|
||||
<div style={{ width: "10px" }}>:</div>
|
||||
<div>{value}</div>
|
||||
</div>
|
||||
);
|
||||
function Row({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div style={{ display: "flex", marginBottom: "4px" }}>
|
||||
<div style={{ width: "180px" }}>{label}</div>
|
||||
<div style={{ width: "10px" }}>:</div>
|
||||
<div>{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,147 +3,217 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKUsaha({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "15px 0" }}>
|
||||
<b><u>SURAT KETERANGAN USAHA</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dengan ini menerangkan dengan sesungguhnya bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
|
||||
<tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
|
||||
<tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
|
||||
<tr><td>Warga Negara</td><td>:</td><td>{getValue("negara")}</td></tr>
|
||||
<tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
|
||||
<tr><td>Status</td><td>:</td><td>{getValue("status perkawinan")}</td></tr>
|
||||
<tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
|
||||
<tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DOMISILI */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Bahwa orang tersebut di atas benar-benar penduduk:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Desa / Kelurahan</td><td style={{ width: "10px" }}>:</td><td>{data.setting.desaNama}</td></tr>
|
||||
<tr><td>Kecamatan</td><td>:</td><td>{data.setting.desaKecamatan}</td></tr>
|
||||
<tr><td>Kabupaten</td><td>:</td><td>{data.setting.desaKabupaten}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* USAHA */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dan yang bersangkutan benar memiliki usaha:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr><td style={{ width: "160px" }}>Jenis Usaha</td><td style={{ width: "10px" }}>:</td><td>{getValue("jenis usaha")}</td></tr>
|
||||
<tr><td>Alamat Usaha</td><td>:</td><td>{getValue("alamat usaha")}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ marginTop: "10px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br /><br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}
|
||||
<br />
|
||||
Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* JUDUL */}
|
||||
<div style={{ textAlign: "center", margin: "15px 0" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN USAHA</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* YANG BERTANDA TANGAN */}
|
||||
<div style={{ marginTop: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS ORANG YG MEMINTA SURAT */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dengan ini menerangkan dengan sesungguhnya bahwa:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Nama</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat / Tanggal Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Warga Negara</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("negara")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("status perkawinan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* DOMISILI */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Bahwa orang tersebut di atas benar-benar penduduk:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Desa / Kelurahan</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kecamatan</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKecamatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kabupaten</td>
|
||||
<td>:</td>
|
||||
<td>{data.setting.desaKabupaten}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* USAHA */}
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dan yang bersangkutan benar memiliki usaha:
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "160px" }}>Jenis Usaha</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("jenis usaha")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Usaha</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat usaha")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan
|
||||
sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
Dikeluarkan di {data.setting.desaNama} <br />
|
||||
Pada tanggal {data.surat.createdAt}
|
||||
</div>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "10px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<br />
|
||||
Kepala Desa / Lurah {data.setting.desaNama}
|
||||
<br />
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,191 +4,209 @@ import { useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKYatim({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "center", marginTop: "15px" }}>
|
||||
<b><u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN PENANDATANGAN */}
|
||||
<div>Yang bertanda tangan di bawah ini:</div>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>: {data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Kantor</td>
|
||||
<td>: {data.setting.desaAlamat}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN IDENTITAS ANAK */}
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>: {getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>: {getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>: {getValue("alamat")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>: {getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>: {getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* KETERANGAN ORANG TUA */}
|
||||
<div>
|
||||
Benar bahwa yang bersangkutan adalah <b>anak (Yatim / Piatu / Yatim Piatu)</b>,
|
||||
dengan keterangan sebagai berikut:
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div><b>1. Nama Ayah</b></div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ayah</td>
|
||||
<td>: {getValue("nama ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ayah")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div><b>2. Nama Ibu</b></div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ibu</td>
|
||||
<td>: {getValue("nama ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ibu")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Dengan demikian, berdasarkan keterangan pihak keluarga dan data di Kantor Desa,
|
||||
maka benar bahwa yang bersangkutan adalah
|
||||
<b> anak (Yatim / Piatu / Yatim Piatu).</b>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TANGGAL & TEMPAT */}
|
||||
<table style={{ width: "100%", marginTop: "10px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td>: {data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>: {data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TTD */}
|
||||
<div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa {data.setting.desaNama}
|
||||
<br /><br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useShallowEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
<div style={{ textAlign: "center", marginTop: "15px" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN PENANDATANGAN */}
|
||||
<div>Yang bertanda tangan di bawah ini:</div>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>: {data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Kantor</td>
|
||||
<td>: {data.setting.desaAlamat}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN IDENTITAS ANAK */}
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>: {getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>: {getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>: {getValue("alamat")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>: {getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>: {getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* KETERANGAN ORANG TUA */}
|
||||
<div>
|
||||
Benar bahwa yang bersangkutan adalah{" "}
|
||||
<b>anak (Yatim / Piatu / Yatim Piatu)</b>, dengan keterangan sebagai
|
||||
berikut:
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<b>1. Nama Ayah</b>
|
||||
</div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ayah</td>
|
||||
<td>: {getValue("nama ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ayah")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<b>2. Nama Ibu</b>
|
||||
</div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ibu</td>
|
||||
<td>: {getValue("nama ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ibu")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Dengan demikian, berdasarkan keterangan pihak keluarga dan data di
|
||||
Kantor Desa, maka benar bahwa yang bersangkutan adalah
|
||||
<b> anak (Yatim / Piatu / Yatim Piatu).</b>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan
|
||||
sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TANGGAL & TEMPAT */}
|
||||
<table style={{ width: "100%", marginTop: "10px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td>: {data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>: {data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TTD */}
|
||||
<div
|
||||
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa {data.setting.desaNama}
|
||||
<br />
|
||||
<br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u> <br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user