diff --git a/src/components/DashboardCountData.tsx b/src/components/DashboardCountData.tsx index 8da6172..8ba3f5a 100644 --- a/src/components/DashboardCountData.tsx +++ b/src/components/DashboardCountData.tsx @@ -21,7 +21,7 @@ export default function DashboardCountData() { label="Pengaduan Hari Ini" value={String(data?.data?.pengaduan?.today)} change={String(data?.data?.pengaduan?.kenaikan) + "%"} - color={(data?.data?.pengaduan?.kenaikan || 0) > 0 ? "teal" : "gray"} + color={"gray"} /> @@ -30,7 +30,7 @@ export default function DashboardCountData() { label="Pengajuan Surat Hari Ini" value={String(data?.data?.pelayanan?.today)} change={String(data?.data?.pelayanan?.kenaikan) + "%"} - color={(data?.data?.pelayanan?.kenaikan || 0) > 0 ? "teal" : "gray"} + color="gray" /> diff --git a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx index 0d6a5cd..0458d9d 100644 --- a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx +++ b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx @@ -6,8 +6,10 @@ import { Container, Divider, Flex, + Grid, Group, Input, + Pagination, Stack, Tabs, Text, @@ -113,22 +115,26 @@ type StatusKey = function ListPelayananSurat({ status }: { status: StatusKey }) { const [page, setPage] = useState(1); const [value, setValue] = useState(""); - const { data, mutate, isLoading } = useSwr("/", async () => { - const res = await apiFetch.api.pelayanan.list.get({ + const { data, mutate, isLoading } = useSwr("/", async () => + apiFetch.api.pelayanan.list.get({ query: { status, search: value, take: "", - page: "", + page: page.toString(), }, - }); + }) + ); + + useShallowEffect(() => { + setPage(1); + mutate(); + }, [status, value]); - return Array.isArray(res?.data) ? res.data : []; // ⬅ paksa return array - }); useShallowEffect(() => { mutate(); - }, [status, value]); + }, [page]); useShallowEffect(() => { @@ -155,26 +161,39 @@ function ListPelayananSurat({ status }: { status: StatusKey }) { ); - const list = data || []; + const list = data?.data?.data || []; + const total = data?.data?.total || 0; + const totalPage = data?.data?.totalPages || 1; + const pageSize = data?.data?.pageSize || 10; + const pageNow = data?.data?.page || 1; + const toDate = (d: any) => new Date(d); return ( - - setValue(event.currentTarget.value)} - leftSection={} - rightSectionPointerEvents="all" - rightSection={ - setValue("")} - style={{ display: value ? undefined : "none" }} - /> - } - /> - + + + setValue(event.currentTarget.value)} + leftSection={} + rightSectionPointerEvents="all" + rightSection={ + setValue("")} + style={{ display: value ? undefined : "none" }} + /> + } + /> + + + + {`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`} + + + + {Array.isArray(list) && list?.length === 0 ? ( @@ -214,7 +233,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) { #{v.noPengajuan} - {v.updatedAt} + {String(v.updatedAt)} @@ -247,7 +266,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) { Tanggal Ajuan - {v.createdAt} + {toDate(v.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })} diff --git a/src/pages/scr/dashboard/pengaduan/list_page.tsx b/src/pages/scr/dashboard/pengaduan/list_page.tsx index f694682..974ef64 100644 --- a/src/pages/scr/dashboard/pengaduan/list_page.tsx +++ b/src/pages/scr/dashboard/pengaduan/list_page.tsx @@ -6,8 +6,10 @@ import { Container, Divider, Flex, + Grid, Group, Input, + Pagination, Stack, Tabs, Text, @@ -124,22 +126,25 @@ function ListPengaduan({ status }: { status: StatusKey }) { const navigate = useNavigate(); const [page, setPage] = useState(1); const [value, setValue] = useState(""); - const { data, mutate, isLoading } = useSwr("/", async () => { - const res = await apiFetch.api.pengaduan.list.get({ + const { data, mutate, isLoading } = useSwr("/", async () => + apiFetch.api.pengaduan.list.get({ query: { status, search: value, take: "", - page: "", + page: page.toString(), }, - }); + }) + ); - return Array.isArray(res?.data) ? res.data : []; // ⬅ paksa return array - }); + useShallowEffect(() => { + setPage(1); + mutate(); + }, [status, value]); useShallowEffect(() => { mutate(); - }, [status, value]); + }, [page]); useShallowEffect(() => { const unsubscribe = subscribe(state, () => mutate()); @@ -163,31 +168,41 @@ function ListPengaduan({ status }: { status: StatusKey }) { ); - const list = data || []; + const list = data?.data?.data || []; + const total = data?.data?.total || 0; + const totalPage = data?.data?.totalPages || 1; + const pageSize = data?.data?.pageSize || 10; + const pageNow = data?.data?.page || 1; + const toDate = (d: any) => new Date(d); + return ( - - setValue(event.currentTarget.value)} - leftSection={} - rightSectionPointerEvents="all" - rightSection={ - setValue("")} - style={{ display: value ? undefined : "none" }} - /> - } - /> - {/* - Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)} - - */} - - {list.length === 0 ? ( + + + setValue(event.currentTarget.value)} + leftSection={} + rightSectionPointerEvents="all" + rightSection={ + setValue("")} + style={{ display: value ? undefined : "none" }} + /> + } + /> + + + + {`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`} + + + + + {Array.isArray(list) && list.length === 0 ? ( @@ -224,7 +239,7 @@ function ListPengaduan({ status }: { status: StatusKey }) { #{v.noPengaduan} - {v.updatedAt} + {String(v.updatedAt)} @@ -257,7 +272,7 @@ function ListPengaduan({ status }: { status: StatusKey }) { Tanggal Aduan - {v.createdAt} + {toDate(v.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })} diff --git a/src/server/routes/pelayanan_surat_route.ts b/src/server/routes/pelayanan_surat_route.ts index 5d79106..fe3f6e5 100644 --- a/src/server/routes/pelayanan_surat_route.ts +++ b/src/server/routes/pelayanan_surat_route.ts @@ -581,6 +581,14 @@ const PelayananRoute = new Elysia({ mode: "insensitive" }, }, + }, + { + Warga: { + name: { + contains: search ?? "", + mode: "insensitive" + }, + }, } ] } @@ -592,6 +600,11 @@ const PelayananRoute = new Elysia({ } } + + const totalData = await prisma.pelayananAjuan.count({ + where + }); + const data = await prisma.pelayananAjuan.findMany({ skip, take: !take ? 10 : Number(take), @@ -625,12 +638,20 @@ const PelayananRoute = new Elysia({ category: item.CategoryPelayanan.name, warga: item.Warga.name, status: item.status, - createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }), + createdAt: item.createdAt.toISOString(), updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt), } }) - return dataFix + const dataReturn = { + data: dataFix, + total: totalData, + page: Number(page) || 1, + pageSize: !take ? 10 : Number(take), + totalPages: Math.ceil(totalData / (!take ? 10 : Number(take))) + } + + return dataReturn }, { query: t.Object({ take: t.String({ optional: true }), diff --git a/src/server/routes/pengaduan_route.ts b/src/server/routes/pengaduan_route.ts index 0da9701..37ed7fe 100644 --- a/src/server/routes/pengaduan_route.ts +++ b/src/server/routes/pengaduan_route.ts @@ -646,6 +646,10 @@ const PengaduanRoute = new Elysia({ } } + const totalData = await prisma.pengaduan.count({ + where + }); + const data = await prisma.pengaduan.findMany({ skip, take: !take ? 10 : Number(take), @@ -683,12 +687,20 @@ const PengaduanRoute = new Elysia({ detail: item.detail, status: item.status, location: item.location, - createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }), + createdAt: item.createdAt.toISOString(), updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt), } }) - return dataFix + const dataReturn = { + data: dataFix, + total: totalData, + page: Number(page) || 1, + pageSize: !take ? 10 : Number(take), + totalPages: Math.ceil(totalData / (!take ? 10 : Number(take))) + } + + return dataReturn }, { query: t.Object({ take: t.String({ optional: true }), @@ -790,8 +802,6 @@ const PengaduanRoute = new Elysia({ description: "Tool untuk delete file Seafile", }, }) - - ; export default PengaduanRoute