Rate-PDF-DOC

ratePDF.tsx

import React from 'react';
import { Page, Text, View, Document, StyleSheet, Font } from '@react-pdf/renderer';
import { RateLookupFormData, RateData } from './types';

// Register font (optional, but recommended for broader compatibility)
// Font.register({ family: 'Roboto', src: '/path/to/Roboto-Regular.ttf' }); // Adjust path as needed

// Define styles
const styles = StyleSheet.create({
    page: {
        flexDirection: 'column',
        backgroundColor: '#FFFFFF',
        padding: 30,
        // fontFamily: 'Roboto' // Use registered font
        fontSize: 10,
    },
    header: {
        fontSize: 16,
        marginBottom: 20,
        textAlign: 'center',
        textDecoration: 'underline',
    },
    section: {
        marginBottom: 15,
        padding: 10,
        border: '1pt solid #cccccc',
        borderRadius: 3,
    },
    sectionTitle: {
        fontSize: 12,
        marginBottom: 8,
        fontWeight: 'bold',
        textDecoration: 'underline',
    },
    formRow: {
        flexDirection: 'row',
        marginBottom: 4,
    },
    formLabel: {
        width: '30%',
        fontWeight: 'bold',
    },
    formValue: {
        width: '70%',
    },
    table: {
        width: 'auto',
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#bfbfbf',
        borderRightWidth: 0,
        borderBottomWidth: 0,
        marginTop: 10,
    },
    tableRow: {
        flexDirection: 'row',
        borderBottomColor: '#bfbfbf',
        borderBottomWidth: 1,
        alignItems: 'center',
        minHeight: 18, // Adjust as needed
    },
    tableColHeader: {
        // width: '11%', // Adjust based on number of columns
        borderStyle: 'solid',
        borderColor: '#bfbfbf',
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: '#f2f2f2', // Light grey background for header
        padding: 4,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    tableCol: {
        // width: '11%', // Adjust based on number of columns
        borderStyle: 'solid',
        borderColor: '#bfbfbf',
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        padding: 4,
        textAlign: 'left', // Default alignment
    },
    // Specific column widths (adjust percentages to sum roughly to 100)
     colCarrier: { width: '15%' },
     colYear: { width: '10%' },
     colState: { width: '8%' },
     colCounty: { width: '15%' },
     colTownship: { width: '10%' },
     colRange: { width: '10%' },
     colForm: { width: '15%' },
     colCrop: { width: '10%' },
     colRate: { width: '7%', textAlign: 'right' }, // Rate column narrower and right-aligned

});

interface RatePdfDocumentProps {
    formData: Partial<RateLookupFormData>;
    rates: RateData[]; // Use RateData as intermediate fields are removed before display
}

// Create Document Component
export const RatePdfDocument: React.FC<RatePdfDocumentProps> = ({ formData, rates }) => (
    <Document>
        <Page size="A4" style={styles.page} orientation="landscape">
            <Text style={styles.header}>Hail Rate Lookup Results</Text>

            <View style={styles.section}>
                <Text style={styles.sectionTitle}>Lookup Parameters</Text>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>State:</Text>
                    <Text style={styles.formValue}>{formData.state || 'N/A'}</Text>
                </View>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>County:</Text>
                    <Text style={styles.formValue}>{formData.county || 'N/A'}</Text>
                </View>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Township:</Text>
                    <Text style={styles.formValue}>{formData.township || 'N/A'}</Text>
                </View>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Range:</Text>
                    <Text style={styles.formValue}>{formData.range || 'N/A'}</Text>
                </View>
                 <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Crop (Class):</Text>
                    <Text style={styles.formValue}>{formData.crop && formData.class ? `${formData.crop} (${formData.class})` : 'N/A'}</Text>
                 </View>
                 <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Selected Carriers:</Text>
                    <Text style={styles.formValue}>{(formData.selectedCarriers || []).join(', ') || 'None'}</Text>
                 </View>
                 <View style={styles.formRow}>
                     <Text style={styles.formLabel}>Selected Products:</Text>
                     <Text style={styles.formValue}>{(formData.selectedHailProducts || []).join(', ') || 'None'}</Text>
                </View>
            </View>

            <View style={styles.section}>
                <Text style={styles.sectionTitle}>Matching Rates</Text>
                {rates.length > 0 ? (
                    <View style={styles.table}>
                        {/* Table Header */}
                        <View style={styles.tableRow}>
                            <Text style={[styles.tableColHeader, styles.colCarrier]}>Carrier</Text>
                            <Text style={[styles.tableColHeader, styles.colYear]}>Year</Text>
                            <Text style={[styles.tableColHeader, styles.colState]}>State</Text>
                            <Text style={[styles.tableColHeader, styles.colCounty]}>County</Text>
                            <Text style={[styles.tableColHeader, styles.colTownship]}>Township</Text>
                            <Text style={[styles.tableColHeader, styles.colRange]}>Range</Text>
                            <Text style={[styles.tableColHeader, styles.colForm]}>Product</Text> {/* Changed label */}
                            <Text style={[styles.tableColHeader, styles.colCrop]}>Crop</Text>
                            <Text style={[styles.tableColHeader, styles.colRate]}>{`Rate (${formData.class || '?'})`}</Text>
                        </View>
                        {/* Table Body */}
                        {rates.map((row) => (
                            <View key={row.id} style={styles.tableRow}>
                                <Text style={[styles.tableCol, styles.colCarrier]}>{row.carrier || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colYear]}>{row.crop_year || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colState]}>{row.state || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colCounty]}>{row.county || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colTownship]}>{row.township || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colRange]}>{row.range || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colForm]}>{row.form || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colCrop]}>{row.crop || '-'}</Text>
                                <Text style={[styles.tableCol, styles.colRate]}>{row.selected_rate ?? 'N/A'}</Text>
                            </View>
                        ))}
                    </View>
                ) : (
                    <Text>No matching rates to display based on current selections.</Text>
                )}
            </View>
        </Page>
    </Document>
);