refactor(FE): Refactor PdfTable components to support generic data types

src/components/helper/pdf/table/PdfThead.tsx

@@ -1,13 +1,8 @@
 'use client';
 
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
-
-export interface PdfColumn {
-  key: string;
-  header: string;
-  flex: number;
-  align?: 'left' | 'center' | 'right';
-}
+import { ReactNode } from 'react';
+import type { PdfColumn } from './types';
 
 const styles = StyleSheet.create({
   tableRow: {
@@ -48,23 +43,37 @@ const styles = StyleSheet.create({
   },
 });
 
-interface PdfTheadProps {
-  columns: PdfColumn[];
+interface PdfTheadProps<TData = Record<string, unknown>> {
+  columns: PdfColumn<TData>[];
+  data?: TData[];
 }
 
-export const PdfThead = ({ columns }: PdfTheadProps) => {
+export const PdfThead = <TData = Record<string, unknown>,>({
+  columns,
+  data,
+}: PdfTheadProps<TData>) => {
   return (
     <View style={[styles.tableRow, styles.tableHeader]}>
       {columns.map((column, index) => {
-        const align = column.align || 'center';
         const isLastColumn = index === columns.length - 1;
 
+        // Get header content from column definition
+        let headerContent: ReactNode;
+        if (typeof column.header === 'function') {
+          headerContent = column.header(data || []);
+        } else {
+          headerContent = column.header || column.key;
+        }
+
+        // Determine alignment - columns align right by default for numeric data
+        const align = column.align || 'left';
+
         const cellStyle =
           align === 'right'
             ? [
                 styles.tableCellHeaderRight,
                 {
-                  flex: column.flex,
+                  flex: column.flex || 1,
                   textAlign: 'right' as const,
                   borderRightWidth: isLastColumn ? 0 : 1,
                 },
@@ -72,7 +81,7 @@ export const PdfThead = ({ columns }: PdfTheadProps) => {
             : [
                 styles.tableCellHeader,
                 {
-                  flex: column.flex,
+                  flex: column.flex || 1,
                   textAlign: align as 'left' | 'center' | 'right',
                   borderRightWidth: isLastColumn ? 0 : 1,
                 },
@@ -80,10 +89,16 @@ export const PdfThead = ({ columns }: PdfTheadProps) => {
 
         return (
           <View key={column.key} style={cellStyle}>
-            <Text>{column.header}</Text>
+            {typeof headerContent === 'string' ? (
+              <Text>{headerContent}</Text>
+            ) : (
+              headerContent
+            )}
           </View>
         );
       })}
     </View>
   );
 };
+
+export type { PdfColumn };