apps/frontend/src/components/PageTemplate.tsx

@@ -23,8 +23,6 @@ import {
 	PaginationContent,
 	PaginationEllipsis,
 	PaginationItem,
-	PaginationNext,
-	PaginationPrevious,
 } from "@/shadcn/components/ui/pagination";
 import {
 	Select,
@@ -33,6 +31,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/shadcn/components/ui/select";
+import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
 
 type PaginatedResponse<T extends Record<string, unknown>> = {
 	data: Array<T>;
@@ -90,7 +89,7 @@ const createCreateButton = (
 				variant={"outline"}
 				onClick={addQuery}
 			>
-				Create New
+				Tambah Data
 				<TbPlus />
 			</Button>
 		);
@@ -180,13 +179,15 @@ const CustomPagination = ({
 		<Pagination>
 			<PaginationContent className="flex flex-col items-center gap-4 md:flex-row">
 				<PaginationItem className="w-full md:w-auto">
-					<PaginationPrevious
+					<Button
 						onClick={() => onChange(Math.max(1, currentPage - 1))}
-						aria-disabled={currentPage - 1 == 0 ? true : false}
+						disabled={currentPage - 1 == 0 ? true : false}
 						className="w-full gap-2 md:w-auto"
+						variant={"ghost"}
 					>
-						Previous
-					</PaginationPrevious>
+						<HiChevronLeft />
+						Sebelumnya
+					</Button>
 				</PaginationItem>
 				<div className="flex flex-wrap justify-center gap-2">
 					{getPaginationItems().map((item) => (
@@ -196,13 +197,15 @@ const CustomPagination = ({
 					))}
 				</div>
 				<PaginationItem className="w-full md:w-auto">
-					<PaginationNext
+					<Button
 						onClick={() => onChange(Math.min(totalPages, currentPage + 1))}
-						aria-disabled={currentPage == totalPages ? true : false}
+						disabled={currentPage == totalPages ? true : false}
 						className="w-full gap-2 md:w-auto"
+						variant={"ghost"}
 					>
-						Next
-					</PaginationNext>
+						Selanjutnya
+						<HiChevronRight />
+					</Button>
 				</PaginationItem>
 			</PaginationContent>
 		</Pagination>
@@ -295,7 +298,7 @@ export default function PageTemplate<
 								className="w-full max-w-xs pl-10"
 								value={filterOptions.q}
 								onChange={(e) => handleSearchQueryChange(e.target.value)}
-								placeholder="Search..."
+								placeholder="Pencarian..."
 							/>
 						</div>
 						<div className="flex">
@@ -310,7 +313,7 @@ export default function PageTemplate<
 					{query.data && (
 						<div className="pt-4 flex flex-col md:flex-row lg:flex-row items-center justify-between gap-2">
 							<div className="flex flex-row lg:flex-col items-center w-fit gap-2">
-								<span className="block text-sm font-medium text-muted-foreground">Per Page</span>
+								<span className="block text-sm font-medium text-muted-foreground whitespace-nowrap">Per Halaman</span>
 								<Select
 									onValueChange={(value) =>
 										setFilterOptions((prev) => ({
@@ -341,7 +344,7 @@ export default function PageTemplate<
 							/>
 							<div className="flex items-center gap-4">
 								<span className="text-sm text-muted-foreground whitespace-nowrap">
-									Showing {query.data.data.length} of {query.data._metadata.totalItems}
+									Menampilkan {query.data.data.length} dari {query.data._metadata.totalItems}
 								</span>
 							</div>
 						</div>