From 5cc51c52d9b1aa1e7d528d6d7c24cebc551075a2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 10 Feb 2026 14:02:53 +0700
Subject: [PATCH] feat(FE): Add PdfPageNumber component for rendering page
 numbers

---
 .../helper/pdf/layout/PdfPageNumber.tsx       | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/helper/pdf/layout/PdfPageNumber.tsx

diff --git a/src/components/helper/pdf/layout/PdfPageNumber.tsx b/src/components/helper/pdf/layout/PdfPageNumber.tsx
new file mode 100644
index 00000000..977cac89
--- /dev/null
+++ b/src/components/helper/pdf/layout/PdfPageNumber.tsx
@@ -0,0 +1,48 @@
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
+
+type PdfPageNumberProps = {
+  style?: Style;
+  /**
+   * Format template for page number.
+   * Use {pageNumber} and {totalPages} as placeholders.
+   * Default: "{pageNumber} / {totalPages}"
+   */
+  format?: string;
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    position: 'absolute',
+    fontSize: 8,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+});
+
+export const PdfPageNumber = ({
+  style,
+  format = '{pageNumber} / {totalPages}',
+}: PdfPageNumberProps) => {
+  return (
+    <View style={style || styles.footer} fixed>
+      <Text
+        render={({ pageNumber, totalPages }) =>
+          format
+            .replace('{pageNumber}', String(pageNumber))
+            .replace('{totalPages}', String(totalPages))
+        }
+        fixed
+      />
+    </View>
+  );
+};