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

Merge pull request #18 from bipproduction/nico/30-apr-25

Browse Source 
Admin Dashboard Bagian Data Kesehatan
This commit is contained in:
Nico Arya
2025-04-30 16:42:45 +08:00
committed by GitHub
parent ddf0ca62c4 ea7de13d28
commit f8914ab78f
22 changed files with 1007 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

2
package.json
View File

@@ -62,7 +62,7 @@
"react-simple-toasts": "^6.1.0",
"react-toastify": "^11.0.5",
"readdirp": "^4.1.1",
"recharts": "2",
"recharts": "^2.15.3",
"swr": "^2.3.2",
"valtio": "^2.1.3",
"zod": "^3.24.3"

39
prisma/schema.prisma
View File

@@ -46,6 +46,7 @@ model AppMenuChild {
AppMenu AppMenu? @relation(fields: [appMenuId], references: [id])
appMenuId String?
}
// ========================================= MENU DESA ========================================= //
// ========================================= BERITA ========================================= //
model Berita {
@@ -106,6 +107,7 @@ model Images {
updatedAt DateTime @updatedAt
GalleryFoto GalleryFoto[]
}
// ========================================= VIDEOS ========================================= //
model Videos {
id String @id @default(cuid())
@@ -117,7 +119,6 @@ model Videos {
GalleryVideo GalleryVideo[]
}
// ========================================= GALLERY ========================================= //
model GalleryFoto {
id String @id @default(cuid())
@@ -147,16 +148,6 @@ model GalleryVideo {
// ========================================= DATA KESEHATAN WARGA ========================================= //
// ========================================= FASILITAS KESEHATAN ========================================= //
model DataKematian_Kelahiran {
id Int @id @default(autoincrement())
tahun String
kematianKasar String
kematianBayi String
kelahiranKasar String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model FasilitasKesehatan {
id String @id @default(cuid())
name String
@@ -298,7 +289,7 @@ model DokumenJadwalKegiatan{
model PendaftaranJadwalKegiatan {
id String @id @default(cuid())
name String
tanggal DateTime
tanggal String
namaOrangtua String
nomor String
alamat String
@@ -308,3 +299,27 @@ model PendaftaranJadwalKegiatan{
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
// ========================================= PERSENTASE KELAHIRAN & KEMATIAN ========================================= //
model DataKematian_Kelahiran {
id Int @id @default(autoincrement())
tahun String
kematianKasar String
kematianBayi String
kelahiranKasar String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
// ========================================= GRAFIK KEPUASAN ========================================= //
model GrafikKepuasan {
id Int @id @default(autoincrement())
label String
jumlah String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}

76
src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan.ts Normal file
View File

@@ -0,0 +1,76 @@
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
const templateGrafikKepuasan = z.object({
label: z.string().min(2, "Label harus diisi"),
jumlah: z.string().min(2, "Jumlah harus diisi"),
});
type GrafikKepuasan = Prisma.GrafikKepuasanGetPayload<{
select: {
label: true;
jumlah: true;
};
}>;
const defaultForm: GrafikKepuasan = {
label: "",
jumlah: ""
};
const grafikkepuasan = proxy({
create: {
form: defaultForm,
loading: false,
async create() {
const cek = templateGrafikKepuasan.safeParse(grafikkepuasan.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
grafikkepuasan.create.loading = true;
const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(
grafikkepuasan.create.form
);
if (res.status === 200) {
grafikkepuasan.create.form = {
label: "",
jumlah: ""
};
grafikkepuasan.findMany.load();
return toast.success("success create");
}
return toast.error("failed create");
} catch (error) {
console.log((error as Error).message);
} finally {
grafikkepuasan.create.loading = false;
}
},
},
findMany: {
data: null as
| Prisma.GrafikKepuasanGetPayload<{ omit: { isActive: true } }>[]
| null,
async load() {
const res = await ApiFetch.api.kesehatan.grafikkepuasan[
"find-many"
].get();
if (res.status === 200) {
grafikkepuasan.findMany.data = res.data?.data ?? [];
}
},
},
});
const stategrafikKepuasan = proxy({
grafikkepuasan,
});
export default stategrafikKepuasan;

84
src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran.ts Normal file
View File

@@ -0,0 +1,84 @@
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
const templatePersentase = z.object({
tahun: z.string().min(4, "Tahun harus diisi"),
kematianKasar: z.string().min(2, "Kematian kasar harus diisi"),
kelahiranKasar: z.string().min(2, "Kelahiran kasar harus diisi"),
kematianBayi: z.string().min(2, "Kematian bayi harus diisi"),
});
type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
select: {
tahun: true;
kematianKasar: true;
kelahiranKasar: true;
kematianBayi: true;
};
}>;
const defaultForm: Persentase = {
tahun: "",
kematianKasar: "",
kelahiranKasar: "",
kematianBayi: "",
};
const persentasekelahiran = proxy({
create: {
form: defaultForm,
loading: false,
async create() {
const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
persentasekelahiran.create.loading = true;
const res = await ApiFetch.api.kesehatan.persentasekelahiran[
"create"
].post(persentasekelahiran.create.form);
if (res.status === 200) {
persentasekelahiran.create.form = {
tahun: "",
kematianKasar: "",
kelahiranKasar: "",
kematianBayi: "",
};
persentasekelahiran.findMany.load();
return toast.success("success create");
}
return toast.error("failed create");
} catch (error) {
console.log((error as Error).message);
} finally {
persentasekelahiran.create.loading = false;
}
},
},
findMany: {
data: null as
| Prisma.DataKematian_KelahiranGetPayload<{ omit: { isActive: true } }>[]
| null,
async load() {
const res = await ApiFetch.api.kesehatan.persentasekelahiran[
"find-many"
].get();
if (res.status === 200) {
persentasekelahiran.findMany.data = res.data?.data ?? [];
}
},
},
});
const statePersentase = proxy({
persentasekelahiran,
});
export default statePersentase;

68
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/grafik_hasil_kepuasan/page.tsx
View File

@@ -1,10 +1,72 @@
import { Stack, Title } from '@mantine/core';
import React from 'react';
'use client'
import stategrafikKepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
import colors from '@/con/colors';
import { Box, Button, Group, Stack, TextInput, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import { Bar, Legend, RadialBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { useProxy } from 'valtio/utils';
function GrafikHasilKepuasan() {
const grafikkepuasan = useProxy(stategrafikKepuasan.grafikkepuasan)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [chartData, setChartData] = useState<any[]>([])
useShallowEffect(() => {
const fetchData = async () => {
await grafikkepuasan.findMany.load();
if (grafikkepuasan.findMany.data && grafikkepuasan.findMany.data.length > 0) {
setChartData(grafikkepuasan.findMany.data);
}
};
fetchData();
}, []);
return (
<Stack py={10}>
<Stack gap={"xs"}>
<Title order={3}>Grafik Hasil Kepuasan</Title>
<Box>
<TextInput
label="Label"
placeholder='Masukkan label yang diinginkan'
value={grafikkepuasan.create.form.label}
onChange={(val) => {
grafikkepuasan.create.form.label = val.currentTarget.value
}}
/>
<TextInput
label="Jumlah Penderita Farangitis Akut"
type='number'
placeholder='Masukkan jumlah penderita farangitis akut'
value={grafikkepuasan.create.form.jumlah}
onChange={(val) => {
grafikkepuasan.create.form.jumlah = val.currentTarget.value
}}
/>
</Box>
<Group>
<Button mt={10}
onClick={async () => {
await grafikkepuasan.create.create();
await grafikkepuasan.findMany.load();
if (grafikkepuasan.findMany.data) {
setChartData(grafikkepuasan.findMany.data);
}
}}
>Submit</Button>
</Group>
<Box h={400} w={{ base: "100%", md: "80%" }}>
<Title order={3}>Data Kelahiran & Kematian</Title>
<ResponsiveContainer width="100%" height="100%">
<RadialBarChart
data={chartData}
>
<XAxis dataKey="label" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
</RadialBarChart>
</ResponsiveContainer>
</Box>
</Stack>
);
}

8
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx
View File

@@ -61,7 +61,7 @@ function JadwalKegiatan() {
<SyaratDanKetentuan />
<DokumenYangDiperlukan />
<Pendaftaran />
<Button onClick={submitAllForms}>
<Button mt={10} onClick={submitAllForms}>
Submit
</Button>
</Box>
@@ -84,13 +84,15 @@ function AllList() {
allList.layanantersedia.findMany.load()
allList.syaratketentuan.findMany.load()
allList.dokumenjadwalkegiatan.findMany.load()
})
allList.pendaftaranjadwal.findMany.load()
}, [])
const isLoading = !allList.informasiKegiatan.findMany.data ||
!allList.deskripsiKegiatan.findMany.data ||
!allList.layanantersedia.findMany.data ||
!allList.syaratketentuan.findMany.data ||
!allList.dokumenjadwalkegiatan.findMany.data
!allList.dokumenjadwalkegiatan.findMany.data ||
!allList.pendaftaranjadwal.findMany.data
if (isLoading) {
return (

26
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx
View File

@@ -1,21 +1,10 @@
'use client'
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { ActionIcon, Box, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { IconCalendar } from '@tabler/icons-react';
import { useState } from 'react';
import { Box, Text, Textarea, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';
function Pendaftaran() {
const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
const [dateInputOpened, setDateInputOpened] = useState(false);
const pickerControl = (
<ActionIcon onClick={() => setDateInputOpened(true)} variant="subtle" color="gray">
<IconCalendar size={18} />
</ActionIcon>
);
const formatDate = (date: Date | null): string => { if (!date) return ""; return date.toISOString().split('T')[0]; }
return (
<Box>
@@ -27,16 +16,11 @@ function Pendaftaran() {
pendaftaran.create.form.name = val.target.value
}}
/>
<DateInput
clearable defaultValue={new Date()}
styles={{label: {fontSize: '14px'}}}
label='Tanggal Lahir'
placeholder='dd/mm/yyyy'
value={pendaftaran.create.form.tanggal ? new Date(pendaftaran.create.form.tanggal) : null}
popoverProps={{opened: dateInputOpened, onChange: setDateInputOpened}}
rightSection={pickerControl}
<TextInput
label='Tanggal'
placeholder='Masukkan tanggal'
onChange={(val) => {
pendaftaran.create.form.tanggal = formatDate(val);
pendaftaran.create.form.tanggal = val.target.value
}}
/>
<TextInput

101
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/persentase_data_kelahiran_kematian/page.tsx
View File

@@ -1,10 +1,107 @@
import { Stack, Title } from '@mantine/core';
import React from 'react';
'use client'
/* eslint-disable @typescript-eslint/no-explicit-any */
import statePersentase from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
import { Box, Button, Stack, TextInput, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { useProxy } from 'valtio/utils';
function PersentaseDataKelahiranKematian() {
const persentase = useProxy(statePersentase.persentasekelahiran);
const [chartData, setChartData] = useState<any[]>([]);
const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
useEffect(() => {
setMounted(true);
}, []);
useShallowEffect(() => {
const fetchData = async () => {
await persentase.findMany.load();
if (persentase.findMany.data && persentase.findMany.data.length > 0) {
setChartData(persentase.findMany.data);
}
};
fetchData();
}, []);
return (
<Stack py={10}>
{/* Form Input */}
<Box>
<Title order={3}>Persentase Data Kelahiran & Kematian</Title>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Tahun"
type="number"
value={persentase.create.form.tahun}
placeholder="Masukkan tahun"
onChange={(val) => {
persentase.create.form.tahun = val.currentTarget.value;
}}
/>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Kematian Kasar"
type="number"
value={persentase.create.form.kematianKasar}
placeholder="Masukkan kematian kasar"
onChange={(val) => {
persentase.create.form.kematianKasar = val.currentTarget.value;
}}
/>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Kematian Bayi"
type="number"
value={persentase.create.form.kematianBayi}
placeholder="Masukkan kematian bayi"
onChange={(val) => {
persentase.create.form.kematianBayi = val.currentTarget.value;
}}
/>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Kelahiran Kasar"
type="number"
value={persentase.create.form.kelahiranKasar}
placeholder="Masukkan kelahiran kasar"
onChange={(val) => {
persentase.create.form.kelahiranKasar = val.currentTarget.value;
}}
/>
<Button
mt={10}
onClick={async () => {
await persentase.create.create();
await persentase.findMany.load();
if (persentase.findMany.data) {
setChartData(persentase.findMany.data);
}
}}
>
Submit
</Button>
</Box>
{/* Chart */}
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
<Title order={3}>Data Kelahiran & Kematian</Title>
{mounted && chartData.length > 0 && (
<ResponsiveContainer width="100%" aspect={2}>
<BarChart width={300} data={chartData}>
<XAxis dataKey="tahun" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
<Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
<Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
</BarChart>
</ResponsiveContainer>
)}
</Box>
</Stack>
);
}

4
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx
View File

@@ -1,10 +1,10 @@
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
import ArtikelKesehatan from './_ui/artikel_kesehatan/page';
import FasilitasKesehatan from './_ui/fasilitas_kesehatan/page';
import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
import JadwalKegiatan from './_ui/jadwal_kegiatan/page';
import PersentaseDataKelahiranKematian from './_ui/persentase_data_kelahiran_kematian/page';
import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
import colors from '@/con/colors';
function Page() {

27
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/grafik_kepuasan/create.ts Normal file
View File

@@ -0,0 +1,27 @@
import prisma from "@/lib/prisma";
import { Prisma } from "@prisma/client";
import { Context } from "elysia";
type FormCreate = Prisma.GrafikKepuasanGetPayload<{
select: {
label: true;
jumlah: true
};
}>;
export default async function grafikKepuasanCreate(context: Context) {
const body = context.body as FormCreate;
await prisma.grafikKepuasan.create({
data: {
label: body.label,
jumlah: body.jumlah,
},
});
return {
success: true,
message: "Success create grafik kepuasan",
data: {
...body,
},
};
}

8
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/grafik_kepuasan/find-many.ts Normal file
View File

@@ -0,0 +1,8 @@
import prisma from "@/lib/prisma"
export default async function grafikKepuasanFindMany() {
const res = await prisma.grafikKepuasan.findMany()
return {
data: res
}
}

16
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/grafik_kepuasan/index.ts Normal file
View File

@@ -0,0 +1,16 @@
import Elysia, { t } from "elysia";
import grafikKepuasanCreate from "./create";
import grafikKepuasanFindMany from "./find-many";
const GrafikKepuasan = new Elysia({
prefix: "/grafikkepuasan",
tags: ["Data Kesehatan/Grafik Kepuasan"]
})
.get("/find-many", grafikKepuasanFindMany)
.post("/create", grafikKepuasanCreate, {
body: t.Object({
label: t.String(),
jumlah: t.String(),
}),
})
export default GrafikKepuasan

32
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/create.ts Normal file
View File

@@ -0,0 +1,32 @@
import prisma from "@/lib/prisma";
import { Prisma } from "@prisma/client";
import { Context } from "elysia";
type FormCreate = Prisma.DataKematian_KelahiranGetPayload<{
select: {
tahun: true;
kematianKasar: true;
kematianBayi: true;
kelahiranKasar: true;
};
}>;
export default async function persentaseKelahiranKematianCreate(context: Context) {
const body = context.body as FormCreate
await prisma.dataKematian_Kelahiran.create({
data: {
tahun: body.tahun,
kematianKasar: body.kematianKasar,
kematianBayi: body.kematianBayi,
kelahiranKasar: body.kelahiranKasar,
}
})
return{
success: true,
message: "Success create persentase kelahiran kematian",
data: {
...body
}
}
}

9
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/find-many.ts Normal file
View File

@@ -0,0 +1,9 @@
import prisma from "@/lib/prisma";
export default async function persentaseKelahiranKematianFindMany() {
const res = await prisma.dataKematian_Kelahiran.findMany();
return {
data: res
}
}

19
src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/index.ts Normal file
View File

@@ -0,0 +1,19 @@
import Elysia, { t } from "elysia";
import persentaseKelahiranKematianCreate from "./create";
import persentaseKelahiranKematianFindMany from "./find-many";
const PersentaseKelahiranKematian = new Elysia({
prefix: "/persentasekelahiran",
tags: ["Data Kesehatan/Persentase Kelahiran Kematian"],
})
.get("/find-many", persentaseKelahiranKematianFindMany)
.post("/create", persentaseKelahiranKematianCreate, {
body: t.Object({
tahun: t.String(),
kematianKasar: t.String(),
kematianBayi: t.String(),
kelahiranKasar: t.String(),
}),
})
export default PersentaseKelahiranKematian;

5
src/app/api/[[...slugs]]/_lib/kesehatan/index.ts
View File

@@ -11,6 +11,9 @@ import LayananTersedia from "./data_kesehatan_warga/jadwal_kegiatan/layanan_yang
import SyaratKetentuan from "./data_kesehatan_warga/jadwal_kegiatan/syarat_dan_ketentuan";
import DokumenDiperlukan from "./data_kesehatan_warga/jadwal_kegiatan/dokumen_yang_diperlukan";
import PendaftaranJadwal from "./data_kesehatan_warga/jadwal_kegiatan/pendaftaran";
import PersentaseKelahiranKematian from "./data_kesehatan_warga/persentase_kelahiran_kematian";
import GrafikKepuasan from "./data_kesehatan_warga/grafik_kepuasan";
const Kesehatan = new Elysia({
prefix: "/api/kesehatan",
@@ -28,4 +31,6 @@ const Kesehatan = new Elysia({
.use(SyaratKetentuan)
.use(DokumenDiperlukan)
.use(PendaftaranJadwal)
.use(PersentaseKelahiranKematian)
.use(GrafikKepuasan)
export default Kesehatan;

300
src/app/percobaan/_lib/ClientRouter.txt Normal file
View File

@@ -0,0 +1,300 @@
"use client";
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-empty-object-type */
import { z } from "zod";
type RouterLeaf<T extends z.ZodType = z.ZodObject<{}>> = {
get: () => string;
query: (params: z.infer<T>) => string;
parse: (searchParams: URLSearchParams) => z.infer<T>;
};
// Helper type to convert dashes to camelCase
type DashToCamelCase<S extends string> = S extends `${infer F}-${infer R}`
? `${F}${Capitalize<DashToCamelCase<R>>}`
: S;
// Modified RouterPath to handle dash conversion
type RouterPath<
T extends z.ZodType = z.ZodObject<{}>,
Segments extends string[] = []
> = Segments extends [infer Head extends string, ...infer Tail extends string[]]
? { [K in DashToCamelCase<Head>]: RouterPath<T, Tail> }
: RouterLeaf<T>;
type RemoveLeadingSlash<S extends string> = S extends `/${infer Rest}`
? Rest
: S;
type SplitPath<S extends string> = S extends `${infer Head}/${infer Tail}`
? [Head, ...SplitPath<Tail>]
: S extends ""
? []
: [S];
type WibuRouterOptions = {
prefix?: string;
name?: string;
};
export class V2ClientRouter<Routes = {}> {
private tree: any = {};
private prefix: string = "";
private name: string = "";
private querySchemas: Map<string, z.ZodType> = new Map();
constructor(options?: WibuRouterOptions) {
if (options?.prefix) {
// Ensure prefix starts with / and doesn't end with /
this.prefix = options.prefix.startsWith("/")
? options.prefix
: `/${options.prefix}`;
if (this.prefix.endsWith("/")) {
this.prefix = this.prefix.slice(0, -1);
}
}
if (options?.name) {
this.name = options.name;
}
}
// Convert dash-case to camelCase
private toCamelCase(str: string): string {
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
}
add<
Path extends string,
NormalizedPath extends string = RemoveLeadingSlash<Path>,
Segments extends string[] = SplitPath<NormalizedPath>,
T extends z.ZodType = z.ZodObject<{}>
>(
path: Path,
schema?: { query: T }
): V2ClientRouter<
Routes &
(NormalizedPath extends ""
? RouterLeaf<T>
: {
[K in Segments[0] as DashToCamelCase<K>]: RouterPath<
T,
Segments extends [any, ...infer Rest] ? Rest : []
>;
})
> {
const normalizedPath = path.startsWith("/") ? path : `/${path}`;
const fullPath = `${this.prefix}${normalizedPath}`;
const segments = normalizedPath.split("/").filter(Boolean);
// Store the Zod schema for this path
if (schema) {
this.querySchemas.set(fullPath, schema.query);
} else {
// Default empty schema
this.querySchemas.set(fullPath, z.object({}));
}
const handleQuery = (params: any): string => {
if (!params || Object.keys(params).length === 0) return fullPath;
// Validate params against schema
const schema = this.querySchemas.get(fullPath);
if (schema) {
try {
schema.parse(params);
} catch (error) {
console.error("Query params validation failed:", error);
throw new Error("Invalid query parameters");
}
}
const queryString = Object.entries(params)
.map(
([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`
)
.join("&");
return `${fullPath}?${queryString}`;
};
const handleGet = () => fullPath;
const handleParse = (searchParams: URLSearchParams): any => {
const schema = this.querySchemas.get(fullPath);
if (!schema) return {};
// Convert URLSearchParams to object
const queryObject: Record<string, any> = {};
searchParams.forEach((value, key) => {
queryObject[key] = value;
});
// Parse through Zod schema
try {
return schema.parse(queryObject);
} catch (error) {
console.error("Failed to parse search params:", error);
// Return safe default values
const safeParsed = schema.safeParse(queryObject);
if (safeParsed.success) {
return safeParsed.data;
}
return {};
}
};
// Special case for root path "/"
if (segments.length === 0) {
this.tree.get = handleGet;
this.tree.query = handleQuery;
this.tree.parse = handleParse;
} else {
let current = this.tree;
for (const segment of segments) {
// Use camelCase version for the property name
const camelSegment = this.toCamelCase(segment);
if (!current[camelSegment]) {
current[camelSegment] = {};
}
current = current[camelSegment];
}
current.get = handleGet;
current.query = handleQuery;
current.parse = handleParse;
}
return this as any;
}
// Add a method to incorporate another router's routes into this one
use<N extends string, ChildRoutes>(
name: N,
childRouter: V2ClientRouter<ChildRoutes>
): V2ClientRouter<Routes & Record<DashToCamelCase<N>, ChildRoutes>> {
const camelName = this.toCamelCase(name);
if (!this.tree[camelName]) {
this.tree[camelName] = {};
}
// Copy query schemas from child router
childRouter.querySchemas.forEach((schema, path) => {
const newPath = `${this.prefix}/${name}${path.substring(
childRouter.prefix.length
)}`;
this.querySchemas.set(newPath, schema);
});
// Create a deep copy of the child router's tree with updated paths
const updatePaths = (obj: any, childPrefix: string): any => {
const result: any = {};
for (const key in obj) {
if (key === "get" && typeof obj[key] === "function") {
// Capture the original path from the child router
const originalPath = obj[key]();
// Create a new function that returns the combined path
result[key] = () => {
const newPath = `${this.prefix}/${name}${originalPath.substring(
childPrefix.length
)}`;
return newPath;
};
} else if (key === "query" && typeof obj[key] === "function") {
// Capture the child router's prefix for path adjustment
result[key] = (params: any) => {
// Get the original result without query params
const originalPathWithoutParams = obj["get"]();
// Create the proper path with our parent prefix
const newBasePath = `${
this.prefix
}/${name}${originalPathWithoutParams.substring(
childPrefix.length
)}`;
// Add query params if any
if (!params || Object.keys(params).length === 0) return newBasePath;
// Validate params against schema
const newPath = `${
this.prefix
}/${name}${originalPathWithoutParams.substring(
childPrefix.length
)}`;
const schema = this.querySchemas.get(newPath);
if (schema) {
try {
schema.parse(params);
} catch (error) {
console.error("Query params validation failed:", error);
throw new Error("Invalid query parameters");
}
}
const queryString = Object.entries(params)
.map(
([k, v]) =>
`${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`
)
.join("&");
return `${newBasePath}?${queryString}`;
};
} else if (key === "parse" && typeof obj[key] === "function") {
result[key] = (searchParams: URLSearchParams) => {
const originalPath = obj["get"]();
const newPath = `${this.prefix}/${name}${originalPath.substring(
childPrefix.length
)}`;
const schema = this.querySchemas.get(newPath);
if (!schema) return {};
// Convert URLSearchParams to object
const queryObject: Record<string, any> = {};
searchParams.forEach((value, key) => {
queryObject[key] = value;
});
// Parse through Zod schema
try {
return schema.parse(queryObject);
} catch (error) {
console.error("Failed to parse search params:", error);
// Return safe default values
const safeParsed = schema.safeParse(queryObject);
if (safeParsed.success) {
return safeParsed.data;
}
return {};
}
};
} else if (typeof obj[key] === "object" && obj[key] !== null) {
result[key] = updatePaths(obj[key], childPrefix);
} else {
result[key] = obj[key];
}
}
return result;
};
// Copy the child router's tree into this router
this.tree[camelName] = updatePaths(
(childRouter as any).tree,
childRouter.prefix
);
return this as any;
}
// Allow access to the tree with strong typing
get routes(): Routes {
return this.tree as Routes;
}
}
export default V2ClientRouter;

20
src/app/percobaan/_router/router.txt Normal file
View File

@@ -0,0 +1,20 @@
import { z } from "zod";
import V2ClientRouter from "../_lib/ClientRouter";
const dashboard = new V2ClientRouter({
prefix: "/dashboard",
name: "dashboard",
})
.add("/", {
query: z.object({
page: z.string(),
}),
})
.add("/berita");
const router = new V2ClientRouter({
prefix: "/percobaan",
name: "percobaan",
}).use("dashboard", dashboard);
export default router;

11
src/app/percobaan/dashboard/berita/page.txt Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
function Page() {
return (
<div>
berita
</div>
);
}
export default Page;

33
src/app/percobaan/dashboard/page.txt Normal file
View File

@@ -0,0 +1,33 @@
'use client'
import { useSearchParams } from 'next/navigation';
import router from '../_router/router';
import { Box } from '@mantine/core';
function Page() {
const { page } = router.routes.dashboard.parse(useSearchParams())
switch (page) {
case "1":
return <Page1 />
case "2":
return <Page2 />
case "3":
return <Page3 />
default:
return <Page1 />
}
}
const Page1 = () => {
return <Box h={200} bg="red">Page 1</Box>
}
const Page2 = () => {
return <Box h={200} bg="blue">Page 2</Box>
}
const Page3 = () => {
return <Box h={200} bg="green">Page 3</Box>
}
export default Page;

18
src/app/percobaan/page2.txt Normal file
View File

@@ -0,0 +1,18 @@
'use client'
import { Button, Group, Stack } from "@mantine/core"
import { Link } from "next-view-transitions"
import router from "./_router/router"
const Page = () => {
return <Group>
<Stack>
{[1, 2, 3].map((v) => (<Button component={Link} href={router.routes.dashboard.query({
page: v.toString(),
})} key={v}>ke dashboard {v}</Button>))}
<Button component={Link} href={router.routes.dashboard.berita.get()}>berita</Button>
</Stack>
</Group>
}
export default Page