code base

frontend/src/pages/Report/components/ReportPDF.jsx

@@ -0,0 +1,166 @@
+import React from "react";
+import {
+  Page,
+  Text,
+  View,
+  Document,
+  StyleSheet,
+  Image,
+} from "@react-pdf/renderer";
+
+// Create styles
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: "column",
+    backgroundColor: "white",
+    padding: 20,
+  },
+  sectionTitle: {
+    textAlign: "center",
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+  },
+  viewer: {
+    width: "75vw", // Full width
+    height: "100vh", // Full height
+  },
+  cardContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginVertical: 10,
+  },
+  card: {
+    width: "45%",
+    padding: 10,
+    backgroundColor: "#f8e7d1",
+    borderRadius: 5,
+    textAlign: "center",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  chartContainer: {
+    marginVertical: 20,
+    textAlign: "center",
+  },
+  table: {
+    display: "table",
+    width: "auto",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: "#bfbfbf",
+    borderBottomWidth: 0,
+    borderRightWidth: 0,
+  },
+  tableRow: {
+    flexDirection: "row",
+  },
+  tableColHeader: {
+    width: "25%",
+    borderStyle: "solid",
+    borderColor: "#bfbfbf",
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    backgroundColor: "#f2f2f2",
+    padding: 5,
+    textAlign: "center",
+  },
+  tableCol: {
+    width: "25%",
+    borderStyle: "solid",
+    borderColor: "#bfbfbf",
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    padding: 5,
+    textAlign: "center",
+  },
+  tableCellHeader: {
+    margin: 5,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+  tableCell: {
+    margin: 5,
+    fontSize: 10,
+  },
+  image: {
+    width: 400,
+    height: 300,
+  },
+});
+
+// Create Document Component
+const ReportPDF = ({ tableData, chartImages }) => {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Title */}
+        <Text style={styles.sectionTitle}>Travel Policy Report</Text>
+
+        {/* Summary Cards */}
+        {/* <View style={styles.cardContainer}>
+          <View style={styles.card}>
+            <Text>Total Funds Deployed</Text>
+            <Text>12,23,234</Text>
+          </View>
+          <View style={styles.card}>
+            <Text>Enrollment Rate</Text>
+            <Text>90%</Text>
+          </View>
+        </View> */}
+
+        {/* Table */}
+        <View style={styles.table}>
+          <View style={styles.tableRow}>
+            <View style={styles.tableColHeader}>
+              <Text style={styles.tableCellHeader}>ID</Text>
+            </View>
+            <View style={styles.tableColHeader}>
+              <Text style={styles.tableCellHeader}>Stream</Text>
+            </View>
+            <View style={styles.tableColHeader}>
+              <Text style={styles.tableCellHeader}>Scholarship</Text>
+            </View>
+            <View style={styles.tableColHeader}>
+              <Text style={styles.tableCellHeader}>Funds</Text>
+            </View>
+          </View>
+          {tableData?.map((row) => (
+            <View key={row.id} style={styles.tableRow}>
+              <View style={styles.tableCol}>
+                <Text style={styles.tableCell}>{row.id}</Text>
+              </View>
+              <View style={styles.tableCol}>
+                <Text style={styles.tableCell}>{row.Stream}</Text>
+              </View>
+              <View style={styles.tableCol}>
+                <Text style={styles.tableCell}>{row.Scholarship}</Text>
+              </View>
+              <View style={styles.tableCol}>
+                <Text style={styles.tableCell}>{row.Funds}</Text>
+              </View>
+            </View>
+          ))}
+        </View>
+
+        {/* Charts */}
+        {chartImages?.barChart && (
+          <Image src={chartImages.barChart} style={styles.image} />
+        )}
+        {chartImages?.pieChart1 && (
+          <Image src={chartImages.pieChart1} style={styles.image} />
+        )}
+
+        {chartImages?.pieChart2 && (
+          <Image src={chartImages.pieChart2} style={styles.image} />
+        )}
+      </Page>
+    </Document>
+  );
+};
+
+export default ReportPDF;