feat(FE): Add PdfPageNumber component for rendering page numbers

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>
+  );
+};