refactor(FE): Refactor PDF components to support custom styles

src/components/helper/pdf/badge/PdfStatusBadge.tsx

@@ -1,10 +1,9 @@
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
 
 type PdfStatusBadgeProps = {
   children: React.ReactNode;
-  backgroundColor?: string;
-  textColor?: string;
-  borderColor?: string;
+  style?: Style;
 };
 
 const styles = StyleSheet.create({
@@ -16,30 +15,38 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     borderWidth: 1,
     borderStyle: 'solid',
+    backgroundColor: '#F5F5F5',
+    borderColor: '#E5E7EB',
   },
   statusBadgeText: {
     fontSize: 7,
     fontWeight: 'bold',
+    color: '#333333',
   },
 });
 
-export const PdfStatusBadge = ({
-  children,
-  backgroundColor = '#F5F5F5',
-  textColor = '#333333',
-  borderColor = '#E5E7EB',
-}: PdfStatusBadgeProps) => {
+export const PdfStatusBadge = ({ children, style }: PdfStatusBadgeProps) => {
+  const styleRecord = style as Record<string, unknown>;
+  const color = styleRecord?.color as string | undefined;
+
+  const viewStyle = Object.entries(styleRecord || {}).reduce(
+    (acc, [key, value]) => {
+      if (key !== 'color') {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, unknown>
+  );
+
   return (
     <View
       style={[
         styles.statusBadge,
-        {
-          backgroundColor,
-          borderColor,
-        },
+        ...(Object.keys(viewStyle).length > 0 ? [viewStyle as Style] : []),
       ]}
     >
-      <Text style={[styles.statusBadgeText, { color: textColor }]}>
+      <Text style={[styles.statusBadgeText, ...(color ? [{ color }] : [])]}>
         {children}
       </Text>
     </View>