@visns-studio/visns-components 5.15.6 → 5.15.8

package/src/components/utils/CameraReportPDF.jsx

@@ -0,0 +1,625 @@
+import React from 'react';
+import {
+    Document,
+    Page,
+    View,
+    Text,
+    Image,
+    StyleSheet,
+} from '@react-pdf/renderer';
+import { getCameraById } from '../data/verkadaCameras';
+
+// Default neutral professional color theme
+const defaultColors = {
+    primary: '#2d3748',        // Professional dark gray
+    secondary: '#4a5568',      // Medium gray
+    background: '#f7fafc',     // Light gray background
+    paragraph: '#4a5568',      // Medium gray text
+    white: '#ffffff',
+    border: '#e2e8f0',
+    accent: '#3182ce',         // Professional blue accent
+};
+
+// Function to get colors - prioritize neutral professional colors over CSS variables
+const getColors = (customColors = {}) => {
+    // Use the neutral professional colors as the primary choice
+    return {
+        ...defaultColors,
+        ...customColors, // Allow custom override if needed
+    };
+};
+
+// Function to create styles with dynamic colors
+const createStyles = (colors) => StyleSheet.create({
+    // Page styles
+    page: {
+        fontFamily: 'Helvetica',
+        fontSize: 9,
+        padding: 15,
+        backgroundColor: '#ffffff',
+    },
+    landscapePage: {
+        fontFamily: 'Helvetica',
+        fontSize: 10,
+        padding: 15,
+        backgroundColor: '#ffffff',
+    },
+
+    // Compact header styles for site map page
+    compactHeader: {
+        backgroundColor: colors.primary,
+        color: colors.white,
+        padding: 8,
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    compactHeaderTitle: {
+        fontSize: 16,
+        fontWeight: 700,
+        margin: 0,
+    },
+    
+    // Full header styles for details page
+    header: {
+        backgroundColor: colors.primary,
+        color: colors.white,
+        padding: 15,
+        marginBottom: 15,
+        borderRadius: 0,
+    },
+    headerTitle: {
+        fontSize: 20,
+        fontWeight: 700,
+        textAlign: 'center',
+        marginBottom: 5,
+    },
+    headerSubtitle: {
+        fontSize: 10,
+        textAlign: 'center',
+        opacity: 0.9,
+        marginBottom: 8,
+    },
+    headerInfo: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        fontSize: 8,
+        borderTop: '1px solid rgba(255,255,255,0.2)',
+        paddingTop: 8,
+    },
+
+    // Map page styles - leave room for header text
+    mapContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.background,
+        borderRadius: 4,
+        border: `1px solid ${colors.border}`,
+        minHeight: '88%',
+    },
+    mapImage: {
+        maxWidth: '100%',
+        maxHeight: '100%',
+        objectFit: 'contain',
+    },
+    mapPlaceholder: {
+        padding: 40,
+        textAlign: 'center',
+        color: '#6b7280',
+    },
+
+    // Camera details styles - ultra compact
+    detailsHeader: {
+        fontSize: 12,
+        fontWeight: 700,
+        color: colors.primary,
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    cameraCard: {
+        marginBottom: 6,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        overflow: 'hidden',
+        backgroundColor: colors.white,
+    },
+    cameraHeader: {
+        backgroundColor: colors.primary,
+        color: colors.white,
+        padding: 6,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    cameraNumber: {
+        width: 24,
+        height: 24,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 8,
+        border: '1px solid rgba(255,255,255,0.3)',
+    },
+    cameraNumberText: {
+        fontSize: 11,
+        fontWeight: 700,
+        color: colors.white,
+    },
+    cameraTitle: {
+        flex: 1,
+    },
+    cameraTitleText: {
+        fontSize: 12,
+        fontWeight: 700,
+        color: colors.white,
+        marginBottom: 1,
+    },
+    cameraModelText: {
+        fontSize: 9,
+        color: colors.white,
+        opacity: 0.9,
+    },
+    ptzBadge: {
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        borderRadius: 12,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+    },
+    ptzText: {
+        fontSize: 10,
+        fontWeight: 600,
+        color: colors.white,
+    },
+    environmentIndicator: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        marginLeft: 8,
+        border: '2px solid rgba(255,255,255,0.8)',
+    },
+    environmentIndoorIndicator: {
+        backgroundColor: '#22c55e', // Green for indoor
+    },
+    environmentOutdoorIndicator: {
+        backgroundColor: '#dc2626', // Red for outdoor
+    },
+
+    // Camera details content - ultra compact
+    cameraContent: {
+        padding: 4,
+        flexDirection: 'row',
+        gap: 6,
+    },
+    cameraImageContainer: {
+        width: 60,
+        height: 45,
+        backgroundColor: colors.background,
+        borderRadius: 3,
+        border: `1px solid ${colors.border}`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+    },
+    cameraImage: {
+        maxWidth: '100%',
+        maxHeight: '100%',
+        objectFit: 'contain',
+    },
+    cameraImagePlaceholder: {
+        fontSize: 8,
+        color: colors.paragraph,
+        textAlign: 'center',
+    },
+    cameraDetailsContainer: {
+        flex: 1,
+    },
+    specsGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginBottom: 4,
+        gap: 3,
+    },
+    specItem: {
+        backgroundColor: colors.background,
+        padding: 3,
+        borderRadius: 2,
+        borderLeft: `2px solid ${colors.accent}`,
+        width: '48%',
+    },
+    specLabel: {
+        fontSize: 6,
+        color: colors.paragraph,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        marginBottom: 1,
+    },
+    specValue: {
+        fontSize: 8,
+        color: colors.primary,
+        fontWeight: 600,
+    },
+    installationDetails: {
+        backgroundColor: colors.white,
+        border: `1px solid ${colors.primary}`,
+        borderRadius: 3,
+        padding: 4,
+        marginBottom: 4,
+    },
+    installationTitle: {
+        fontSize: 8,
+        color: colors.paragraph,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        textAlign: 'center',
+        marginBottom: 4,
+    },
+    coordinatesGrid: {
+        flexDirection: 'row',
+        gap: 4,
+    },
+    coordinateItem: {
+        backgroundColor: colors.background,
+        padding: 3,
+        borderRadius: 2,
+        border: `1px solid ${colors.secondary}`,
+        flex: 1,
+    },
+    coordinateLabel: {
+        fontSize: 7,
+        color: colors.paragraph,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        marginBottom: 1,
+    },
+    coordinateValue: {
+        fontSize: 8,
+        color: colors.primary,
+        fontWeight: 600,
+        fontFamily: 'Helvetica',
+    },
+    featuresContainer: {
+        backgroundColor: colors.background,
+        padding: 3,
+        borderRadius: 2,
+        border: `1px solid ${colors.border}`,
+    },
+    featuresTitle: {
+        fontSize: 7,
+        color: colors.paragraph,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        textAlign: 'center',
+        marginBottom: 3,
+    },
+    featuresGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 2,
+        justifyContent: 'center',
+    },
+    featureTag: {
+        backgroundColor: colors.white,
+        color: colors.accent,
+        border: `1px solid ${colors.accent}`,
+        borderRadius: 8,
+        paddingHorizontal: 4,
+        paddingVertical: 2,
+        fontSize: 7,
+        fontWeight: 600,
+    },
+    noModelWarning: {
+        backgroundColor: '#fef2f2',
+        border: '1px solid #fca5a5',
+        borderRadius: 8,
+        padding: 16,
+        textAlign: 'center',
+        margin: '8px 0',
+    },
+    warningTitle: {
+        fontSize: 12,
+        fontWeight: 600,
+        color: '#dc2626',
+        marginBottom: 4,
+    },
+    warningText: {
+        fontSize: 10,
+        color: '#7f1d1d',
+    },
+
+    // Footer styles
+    footer: {
+        marginTop: 8,
+        padding: 6,
+        backgroundColor: colors.background,
+        borderRadius: 3,
+        border: `1px solid ${colors.border}`,
+    },
+    footerTitle: {
+        fontSize: 9,
+        fontWeight: 700,
+        color: colors.primary,
+        textAlign: 'center',
+        marginBottom: 4,
+    },
+    legendContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 6,
+        marginBottom: 4,
+    },
+    legendItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: colors.white,
+        padding: '3px 5px',
+        borderRadius: 2,
+        border: `1px solid ${colors.border}`,
+    },
+    legendDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        border: `1px solid ${colors.white}`,
+    },
+    legendDotIndoor: {
+        backgroundColor: '#22c55e', // Green for indoor
+    },
+    legendDotOutdoor: {
+        backgroundColor: '#dc2626', // Red for outdoor
+    },
+    legendDotPtz: {
+        backgroundColor: '#6b7280',
+        border: '2px solid #ef4444',
+    },
+    legendText: {
+        fontSize: 7,
+        color: colors.paragraph,
+        fontWeight: 600,
+    },
+    notesContainer: {
+        backgroundColor: colors.white,
+        padding: 6,
+        borderRadius: 3,
+        border: `1px solid ${colors.border}`,
+    },
+    notesTitle: {
+        fontSize: 9,
+        fontWeight: 700,
+        color: colors.primary,
+        textAlign: 'center',
+        marginBottom: 4,
+    },
+    noteItem: {
+        flexDirection: 'row',
+        marginBottom: 3,
+        backgroundColor: colors.white,
+        padding: 3,
+        borderRadius: 2,
+        borderLeft: `2px solid ${colors.secondary}`,
+    },
+    noteText: {
+        fontSize: 7,
+        color: colors.paragraph,
+        lineHeight: 1.3,
+        flex: 1,
+    },
+    disclaimer: {
+        textAlign: 'center',
+        marginTop: 4,
+        paddingTop: 3,
+        borderTop: `1px solid ${colors.border}`,
+    },
+    disclaimerText: {
+        fontSize: 6,
+        color: colors.paragraph,
+    },
+    reportId: {
+        fontSize: 6,
+        color: colors.paragraph,
+        marginBottom: 2,
+    },
+});
+
+// Camera Card Component
+const CameraCard = ({ camera, number, mode, styles }) => {
+    const verkadaCamera = camera.verkadaModel
+        ? getCameraById(camera.verkadaModel)
+        : null;
+
+    return (
+        <View style={styles.cameraCard}>
+            {/* Camera Header */}
+            <View style={styles.cameraHeader}>
+                <View style={styles.cameraNumber}>
+                    <Text style={styles.cameraNumberText}>{number}</Text>
+                </View>
+                <View style={styles.cameraTitle}>
+                    <Text style={styles.cameraTitleText}>
+                        Camera {number}
+                    </Text>
+                    <Text style={styles.cameraModelText}>
+                        {verkadaCamera ? verkadaCamera.name : 'Model Not Selected'}
+                    </Text>
+                </View>
+                {verkadaCamera?.environment && (
+                    <View 
+                        style={[
+                            styles.environmentIndicator,
+                            verkadaCamera.environment === 'indoor'
+                                ? styles.environmentIndoorIndicator
+                                : styles.environmentOutdoorIndicator,
+                        ]}
+                    />
+                )}
+                {verkadaCamera?.ptz && (
+                    <View style={styles.ptzBadge}>
+                        <Text style={styles.ptzText}>PTZ</Text>
+                    </View>
+                )}
+            </View>
+
+            {/* Camera Content */}
+            <View style={styles.cameraContent}>
+                {/* Camera Image */}
+                <View style={styles.cameraImageContainer}>
+                    {verkadaCamera?.image ? (
+                        <Image src={verkadaCamera.image} style={styles.cameraImage} />
+                    ) : (
+                        <Text style={styles.cameraImagePlaceholder}>
+                            No Image{'\n'}Available
+                        </Text>
+                    )}
+                </View>
+                
+                {/* Camera Details */}
+                <View style={styles.cameraDetailsContainer}>
+                {verkadaCamera ? (
+                    <View>
+                        {/* Specifications Grid */}
+                        <View style={styles.specsGrid}>
+                            <View style={styles.specItem}>
+                                <Text style={styles.specLabel}>Resolution</Text>
+                                <Text style={styles.specValue}>
+                                    {verkadaCamera.resolution}
+                                </Text>
+                            </View>
+                            <View style={styles.specItem}>
+                                <Text style={styles.specLabel}>Field of View</Text>
+                                <Text style={styles.specValue}>
+                                    {verkadaCamera.fov}°
+                                </Text>
+                            </View>
+                            <View style={styles.specItem}>
+                                <Text style={styles.specLabel}>Environment</Text>
+                                <Text style={styles.specValue}>
+                                    {verkadaCamera.environment}
+                                </Text>
+                            </View>
+                            <View style={styles.specItem}>
+                                <Text style={styles.specLabel}>IR Range</Text>
+                                <Text style={styles.specValue}>
+                                    {verkadaCamera.irRange}m
+                                </Text>
+                            </View>
+                        </View>
+
+                        {/* Features */}
+                        {verkadaCamera.features && verkadaCamera.features.length > 0 && (
+                            <View style={styles.featuresContainer}>
+                                <Text style={styles.featuresTitle}>Key Features</Text>
+                                <View style={styles.featuresGrid}>
+                                    {verkadaCamera.features.slice(0, 6).map((feature, index) => (
+                                        <View key={index} style={styles.featureTag}>
+                                            <Text>{feature}</Text>
+                                        </View>
+                                    ))}
+                                    {verkadaCamera.features.length > 6 && (
+                                        <View style={styles.featureTag}>
+                                            <Text>+{verkadaCamera.features.length - 6} more</Text>
+                                        </View>
+                                    )}
+                                </View>
+                            </View>
+                        )}
+                    </View>
+                ) : (
+                    <View style={styles.noModelWarning}>
+                        <Text style={styles.warningTitle}>⚠ No Camera Model Selected</Text>
+                        <Text style={styles.warningText}>
+                            Please configure this camera before installation
+                        </Text>
+                    </View>
+                )}
+                </View>
+            </View>
+        </View>
+    );
+};
+
+// Main PDF Document Component
+const CameraReportPDF = ({ cameras, mapImageData, mode, customColors }) => {
+    const currentDate = new Date();
+    const reportId = Date.now().toString(36).toUpperCase();
+    const colors = getColors(customColors);
+    const styles = createStyles(colors);
+
+    return (
+        <Document
+            title="Security Camera Installation Report"
+            author="VISNS Studio"
+            subject="Camera Installation Layout and Specifications"
+            creator="VISNS Components"
+        >
+            {/* Page 1: Site Map */}
+            <Page size="A4" orientation="landscape" style={styles.landscapePage}>
+                {/* Compact Header */}
+                <View style={styles.compactHeader}>
+                    <Text style={styles.compactHeaderTitle}>
+                        Site Map Layout
+                    </Text>
+                </View>
+
+                {/* Map Container - maximized */}
+                <View style={styles.mapContainer}>
+                    {mapImageData ? (
+                        <Image src={mapImageData} style={styles.mapImage} />
+                    ) : (
+                        <View style={styles.mapPlaceholder}>
+                            <Text>Site map will be displayed here</Text>
+                            <Text>Please upload an image to include the site layout</Text>
+                        </View>
+                    )}
+                </View>
+            </Page>
+
+            {/* Page 2+: Camera Details */}
+            <Page size="A4" style={styles.page}>
+                <Text style={styles.detailsHeader}>Camera Specifications & Details</Text>
+                
+                {cameras.map((camera, index) => (
+                    <CameraCard
+                        key={camera.id}
+                        camera={camera}
+                        number={index + 1}
+                        mode={mode}
+                        styles={styles}
+                    />
+                ))}
+
+                {/* Footer with Legend */}
+                <View style={styles.footer}>
+                    <Text style={styles.footerTitle}>Camera Legend</Text>
+                    
+                    {/* Legend */}
+                    <View style={styles.legendContainer}>
+                        <View style={styles.legendItem}>
+                            <View style={[styles.legendDot, styles.legendDotIndoor]} />
+                            <Text style={styles.legendText}>Indoor</Text>
+                        </View>
+                        <View style={styles.legendItem}>
+                            <View style={[styles.legendDot, styles.legendDotOutdoor]} />
+                            <Text style={styles.legendText}>Outdoor</Text>
+                        </View>
+                        {cameras.some(c => getCameraById(c.verkadaModel)?.ptz) && (
+                            <View style={styles.legendItem}>
+                                <View style={[styles.legendDot, styles.legendDotPtz]} />
+                                <Text style={styles.legendText}>PTZ</Text>
+                            </View>
+                        )}
+                    </View>
+
+                    {/* Disclaimer */}
+                    <View style={styles.disclaimer}>
+                        <Text style={styles.disclaimerText}>
+                            Report ID: {reportId} | Generated automatically
+                        </Text>
+                    </View>
+                </View>
+            </Page>
+        </Document>
+    );
+};
+
+export default CameraReportPDF;