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

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

@@ -1,7 +1,9 @@
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
 
 type PdfParamBadgeProps = {
   children: React.ReactNode;
+  style?: Style;
 };
 
 const styles = StyleSheet.create({
@@ -16,9 +18,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export const PdfParamBadge = ({ children }: PdfParamBadgeProps) => {
+export const PdfParamBadge = ({ children, style }: PdfParamBadgeProps) => {
   return (
-    <View style={styles.parameterBadge}>
+    <View style={[styles.parameterBadge, ...(style ? [style] : [])]}>
       <Text>{children}</Text>
     </View>
   );

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;
+  style?: Style;
-  textColor?: string;
-  borderColor?: string;
 };
 
 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 = ({
+export const PdfStatusBadge = ({ children, style }: PdfStatusBadgeProps) => {
-  children,
+  const styleRecord = style as Record<string, unknown>;
-  backgroundColor = '#F5F5F5',
+  const color = styleRecord?.color as string | undefined;
-  textColor = '#333333',
+
-  borderColor = '#E5E7EB',
+  const viewStyle = Object.entries(styleRecord || {}).reduce(
-}: PdfStatusBadgeProps) => {
+    (acc, [key, value]) => {
+      if (key !== 'color') {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, unknown>
+  );
+
   return (
     <View
       style={[
         styles.statusBadge,
-        {
+        ...(Object.keys(viewStyle).length > 0 ? [viewStyle as Style] : []),
-          backgroundColor,
-          borderColor,
-        },
       ]}
     >
-      <Text style={[styles.statusBadgeText, { color: textColor }]}>
+      <Text style={[styles.statusBadgeText, ...(color ? [{ color }] : [])]}>
         {children}
       </Text>
     </View>

src/components/helper/pdf/typography/PdfTypography.tsx

@@ -1,5 +1,6 @@
 import { Color } from '@/types/theme';
 import { Text, StyleSheet } from '@react-pdf/renderer';
+import type { Style } from '@react-pdf/types';
 
 type TypographySize = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'small' | 'label';
 
@@ -10,7 +11,7 @@ type PdfTypographyProps = {
   size?: TypographySize;
   variant?: TypographyVariant;
   color?: string;
-  marginBottom?: number;
+  style?: Style;
 };
 
 const styles = StyleSheet.create({
@@ -66,17 +67,13 @@ export const PdfTypography = ({
   size = 'p',
   variant = 'default',
   color,
-  marginBottom,
+  style,
 }: PdfTypographyProps) => {
   const sizeStyle = styles[size];
   const textColor = color || variantColors[variant];
 
-  const customStyle = {
-    ...(marginBottom !== undefined && { marginBottom }),
-  };
-
   return (
-    <Text style={[sizeStyle, { color: textColor }, customStyle]}>
+    <Text style={[sizeStyle, { color: textColor }, ...(style ? [style] : [])]}>
       {children}
     </Text>
   );