From 606380460e75cb0b5493fbf3d1bc746e49ab54b3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 9 Feb 2026 15:58:28 +0700
Subject: [PATCH] feat(FE): Add PDF helper components for badges and typography

---
 .../helper/pdf/badge/PdfParamBadge.tsx        | 25 ++++++
 .../helper/pdf/badge/PdfStatusBadge.tsx       | 47 +++++++++++
 .../helper/pdf/typography/PdfTypography.tsx   | 83 +++++++++++++++++++
 3 files changed, 155 insertions(+)
 create mode 100644 src/components/helper/pdf/badge/PdfParamBadge.tsx
 create mode 100644 src/components/helper/pdf/badge/PdfStatusBadge.tsx
 create mode 100644 src/components/helper/pdf/typography/PdfTypography.tsx

diff --git a/src/components/helper/pdf/badge/PdfParamBadge.tsx b/src/components/helper/pdf/badge/PdfParamBadge.tsx
new file mode 100644
index 00000000..01fc1a63
--- /dev/null
+++ b/src/components/helper/pdf/badge/PdfParamBadge.tsx
@@ -0,0 +1,25 @@
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+
+type PdfParamBadgeProps = {
+  children: React.ReactNode;
+};
+
+const styles = StyleSheet.create({
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+});
+
+export const PdfParamBadge = ({ children }: PdfParamBadgeProps) => {
+  return (
+    <View style={styles.parameterBadge}>
+      <Text>{children}</Text>
+    </View>
+  );
+};
diff --git a/src/components/helper/pdf/badge/PdfStatusBadge.tsx b/src/components/helper/pdf/badge/PdfStatusBadge.tsx
new file mode 100644
index 00000000..e0444284
--- /dev/null
+++ b/src/components/helper/pdf/badge/PdfStatusBadge.tsx
@@ -0,0 +1,47 @@
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+
+type PdfStatusBadgeProps = {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+};
+
+const styles = StyleSheet.create({
+  statusBadge: {
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    borderRadius: 12,
+    fontSize: 7,
+    fontWeight: 'bold',
+    borderWidth: 1,
+    borderStyle: 'solid',
+  },
+  statusBadgeText: {
+    fontSize: 7,
+    fontWeight: 'bold',
+  },
+});
+
+export const PdfStatusBadge = ({
+  children,
+  backgroundColor = '#F5F5F5',
+  textColor = '#333333',
+  borderColor = '#E5E7EB',
+}: PdfStatusBadgeProps) => {
+  return (
+    <View
+      style={[
+        styles.statusBadge,
+        {
+          backgroundColor,
+          borderColor,
+        },
+      ]}
+    >
+      <Text style={[styles.statusBadgeText, { color: textColor }]}>
+        {children}
+      </Text>
+    </View>
+  );
+};
diff --git a/src/components/helper/pdf/typography/PdfTypography.tsx b/src/components/helper/pdf/typography/PdfTypography.tsx
new file mode 100644
index 00000000..31efe449
--- /dev/null
+++ b/src/components/helper/pdf/typography/PdfTypography.tsx
@@ -0,0 +1,83 @@
+import { Color } from '@/types/theme';
+import { Text, StyleSheet } from '@react-pdf/renderer';
+
+type TypographySize = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'small' | 'label';
+
+type TypographyVariant = Color | 'default';
+
+type PdfTypographyProps = {
+  children: React.ReactNode;
+  size?: TypographySize;
+  variant?: TypographyVariant;
+  color?: string;
+  marginBottom?: number;
+};
+
+const styles = StyleSheet.create({
+  h1: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 5,
+  },
+  h2: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  h3: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  h4: {
+    fontSize: 9,
+    fontWeight: 'bold',
+    marginBottom: 3,
+  },
+  p: {
+    fontSize: 10,
+    marginBottom: 4,
+  },
+  small: {
+    fontSize: 8,
+    marginBottom: 2,
+  },
+  label: {
+    fontSize: 9,
+    marginBottom: 5,
+  },
+});
+
+const variantColors: Record<TypographyVariant, string> = {
+  default: '#333333',
+  primary: '#1f74bf',
+  secondary: '#6B7280',
+  accent: '#8B5CF6',
+  neutral: '#6B7280',
+  info: '#3B82F6',
+  success: '#065F46',
+  warning: '#92400E',
+  error: '#DC2626',
+  none: '#333333',
+};
+
+export const PdfTypography = ({
+  children,
+  size = 'p',
+  variant = 'default',
+  color,
+  marginBottom,
+}: PdfTypographyProps) => {
+  const sizeStyle = styles[size];
+  const textColor = color || variantColors[variant];
+
+  const customStyle = {
+    ...(marginBottom !== undefined && { marginBottom }),
+  };
+
+  return (
+    <Text style={[sizeStyle, { color: textColor }, customStyle]}>
+      {children}
+    </Text>
+  );
+};