@suflon/rnmd-reporting 0.0.1

package/src/modules/Reporting/component/ReportChart.tsx

@@ -0,0 +1,882 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, Dimensions, TouchableOpacity, ScrollView, PanResponder } from 'react-native';
+import Svg, { Path, Circle, G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
+import { themeColors } from '@/theme/colors';
+import { Icon } from '@suflon/native-ui';
+
+interface ChartData {
+    label: string;
+    value: number;
+}
+
+interface ReportChartProps {
+    data: ChartData[];
+    records?: any[];
+    visibleKeys?: string[];
+    type?: 'BAR' | 'LINE' | 'AREA';
+    title?: string;
+    subtitle?: string;
+    color?: string;
+    height?: number;
+    isDarkMode?: boolean;
+}
+
+const formatKeyLabel = (key: string) => {
+    return key
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+// Format full date YYYY-MM-DD to clean Month name (e.g. Jul '26)
+const formatMonthLabel = (label: string) => {
+    if (!label) return '';
+    if (/^\d{4}-\d{2}(-\d{2})?/.test(label)) {
+        try {
+            const parts = label.split('-');
+            const year = parts[0];
+            const monthNum = parseInt(parts[1], 10);
+            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            if (monthNum >= 1 && monthNum <= 12) {
+                return `${monthNames[monthNum - 1]} '${year.slice(2)}`;
+            }
+        } catch (e) {}
+    }
+    return label;
+};
+
+const STATUS_CONFIG: Record<string, { key: string; label: string; color: string; bgLight: string; borderLight: string }> = {
+    completed: { key: 'completed', label: 'Completed', color: '#10B981', bgLight: '#ECFDF5', borderLight: '#A7F3D0' },
+    scheduled: { key: 'scheduled', label: 'Scheduled', color: '#F59E0B', bgLight: '#FEF3C7', borderLight: '#FDE68A' },
+    cancelled: { key: 'cancelled', label: 'Cancelled', color: '#EF4444', bgLight: '#FEE2E2', borderLight: '#FCA5A5' },
+    noshow: { key: 'noshow', label: 'No-Show', color: '#8B5CF6', bgLight: '#F3E8FF', borderLight: '#DDD6FE' },
+    rescheduled: { key: 'rescheduled', label: 'Rescheduled', color: '#3B82F6', bgLight: '#EFF6FF', borderLight: '#BFDBFE' },
+    upcoming: { key: 'upcoming', label: 'Upcoming', color: '#06B6D4', bgLight: '#CFFAFE', borderLight: '#A5F3FC' },
+};
+
+const MAX_VISIBLE_POINTS = 15;
+
+const ReportChart: React.FC<ReportChartProps> = ({
+    data = [],
+    records = [],
+    visibleKeys = [],
+    type: initialType = 'LINE',
+    title = 'Top 10 Diagnoses',
+    subtitle = 'GRAPH VISUALIZATION',
+    color = themeColors.brand[600],
+    height = 240,
+    isDarkMode = false,
+}) => {
+    const [chartType, setChartType] = useState<'BAR' | 'LINE' | 'AREA'>(initialType);
+    const [viewMode, setViewMode] = useState<'ALL_STATUS' | 'COMBINED'>('ALL_STATUS');
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+    // Active status legend toggles
+    const [activeStatusMap, setActiveStatusMap] = useState<Record<string, boolean>>({
+        completed: true,
+        scheduled: true,
+        cancelled: true,
+        noshow: true,
+        rescheduled: true,
+        upcoming: true,
+    });
+
+    const toggleStatus = (statusKey: string) => {
+        setActiveStatusMap(prev => ({
+            ...prev,
+            [statusKey]: !prev[statusKey]
+        }));
+    };
+
+    // Dark mode colors
+    const colors = useMemo(() => ({
+        cardBg: isDarkMode ? '#1C1C1E' : themeColors.white,
+        cardBorder: isDarkMode ? '#2C2C2E' : themeColors.slate[200],
+        textPrimary: isDarkMode ? '#FFFFFF' : themeColors.slate[900],
+        textSecondary: isDarkMode ? '#9CA3AF' : themeColors.slate[500],
+        textMuted: isDarkMode ? '#94A3B8' : '#94A3B8',
+        gridLine: isDarkMode ? '#2C2C2E' : '#F1F5F9',
+        pillBg: isDarkMode ? '#2C2C2E' : '#F1F5F9',
+        pillActiveBg: '#7C3AED',
+        pillActiveText: '#FFFFFF',
+        pillText: isDarkMode ? '#9CA3AF' : themeColors.slate[600],
+        progressBg: isDarkMode ? '#2C2C2E' : themeColors.slate[100],
+        listBg: isDarkMode ? '#141518' : themeColors.slate[50],
+    }), [isDarkMode]);
+
+    const screenWidth = Dimensions.get('window').width - 32;
+
+    // Detect if series labels are date strings
+    const isDateSeries = useMemo(() => {
+        if (records && records.length > 0) {
+            return records.some(r => /^\d{4}-\d{2}/.test(String(r.date || r.label || r.group_key || '')));
+        }
+        return data.some(d => /^\d{4}-\d{2}/.test(d.label));
+    }, [records, data]);
+
+    // Dedicated Y-Axis Margin & Bottom space for labels
+    const paddingLeft = 45;
+    const paddingRight = 20;
+    const paddingTop = 25;
+    const paddingBottom = isDateSeries ? 36 : 52;
+
+    // Detect if records have status columns (completed, scheduled, cancelled, noshow, etc.)
+    const availableStatusKeys = useMemo(() => {
+        if (!records || records.length === 0) return [];
+        const firstRow = records[0];
+        return Object.keys(firstRow).filter(k => STATUS_CONFIG[k.toLowerCase()]);
+    }, [records]);
+
+    const isMultiStatusAvailable = availableStatusKeys.length > 0;
+
+    // Prepare multi-status items list
+    const multiStatusItems = useMemo(() => {
+        if (!records || records.length === 0) return [];
+        return records.map((r, idx) => {
+            const keys = Object.keys(r);
+            const labelKey = keys.find(k => ['diagnosis_title', 'group_key', 'label', 'name', 'title', 'status', 'date'].includes(k)) || keys[0] || `Item ${idx + 1}`;
+            const label = String(r[labelKey] ?? `Item ${idx + 1}`);
+
+            const statusValues: Record<string, number> = {};
+            availableStatusKeys.forEach(sk => {
+                statusValues[sk] = Number(r[sk]) || 0;
+            });
+
+            const total = Object.values(statusValues).reduce((sum, v) => sum + v, 0);
+
+            return {
+                label,
+                total,
+                statusValues,
+            };
+        });
+    }, [records, availableStatusKeys]);
+
+    // Sort items chronologically if date strings (e.g. 2026-05-01 -> 2026-06-01 -> 2026-07-01 -> 2026-08-01)
+    const sortedMultiStatusItems = useMemo(() => {
+        if (!multiStatusItems || multiStatusItems.length === 0) return [];
+
+        if (isDateSeries) {
+            return [...multiStatusItems].sort((a, b) => a.label.localeCompare(b.label));
+        }
+        return multiStatusItems;
+    }, [multiStatusItems, isDateSeries]);
+
+    // Limit visible points for chart to avoid crowding
+    const hasOverflow = sortedMultiStatusItems.length > MAX_VISIBLE_POINTS || data.length > MAX_VISIBLE_POINTS;
+    const visibleDataItems = useMemo(() => {
+        if (isMultiStatusAvailable) {
+            return hasOverflow ? sortedMultiStatusItems.slice(0, MAX_VISIBLE_POINTS) : sortedMultiStatusItems;
+        } else {
+            const raw = data.map(d => ({ label: d.label, total: d.value, statusValues: {} }));
+            const isRawDateSeries = raw.every(item => /^\d{4}-\d{2}/.test(item.label));
+            const sortedRaw = isRawDateSeries ? [...raw].sort((a, b) => a.label.localeCompare(b.label)) : raw;
+            return hasOverflow ? sortedRaw.slice(0, MAX_VISIBLE_POINTS) : sortedRaw;
+        }
+    }, [isMultiStatusAvailable, sortedMultiStatusItems, data, hasOverflow]);
+
+    const totalCases = useMemo(() => {
+        if (isMultiStatusAvailable) {
+            return multiStatusItems.reduce((sum, item) => sum + item.total, 0);
+        }
+        return data.reduce((sum, d) => sum + (Number(d.value) || 0), 0);
+    }, [isMultiStatusAvailable, multiStatusItems, data]);
+
+    // Dynamic table columns
+    const tableColumns = useMemo(() => {
+        if (visibleKeys && visibleKeys.length > 0) return visibleKeys;
+        if (records && records.length > 0) {
+            return Object.keys(records[0]).filter(
+                k => !['id', 'region_id', 'company_id', 'staff_id', 'patient_id'].includes(k)
+            );
+        }
+        return [];
+    }, [visibleKeys, records]);
+
+    const tableRows = records;
+
+    // SVG Layout Dimensions
+    const effectiveChartWidth = hasOverflow
+        ? Math.max(visibleDataItems.length * 60, screenWidth - paddingLeft - paddingRight)
+        : screenWidth - paddingLeft - paddingRight;
+    const totalSvgWidth = effectiveChartWidth + paddingLeft + paddingRight;
+    const chartHeight = height - paddingTop - paddingBottom;
+
+    // Calculate maximum Y value considering active status lines / bars
+    const maxValue = useMemo(() => {
+        let maxVal = 10;
+        if (isMultiStatusAvailable && viewMode === 'ALL_STATUS') {
+            visibleDataItems.forEach(item => {
+                availableStatusKeys.forEach(sk => {
+                    if (activeStatusMap[sk]) {
+                        maxVal = Math.max(maxVal, item.statusValues[sk] || 0);
+                    }
+                });
+            });
+        } else {
+            visibleDataItems.forEach(item => {
+                maxVal = Math.max(maxVal, item.total || 0);
+            });
+        }
+        return Math.ceil(maxVal * 1.2) || 10;
+    }, [isMultiStatusAvailable, viewMode, visibleDataItems, availableStatusKeys, activeStatusMap]);
+
+    // Precise Dot-to-Dot point coordinates starting right at number side
+    const xPoints = useMemo(() => {
+        if (visibleDataItems.length <= 1) {
+            return [paddingLeft + effectiveChartWidth / 2];
+        }
+        const startX = paddingLeft + 16;
+        const availableWidth = effectiveChartWidth - 32;
+        return visibleDataItems.map((_, i) => {
+            return startX + (i / (visibleDataItems.length - 1)) * availableWidth;
+        });
+    }, [visibleDataItems, paddingLeft, effectiveChartWidth]);
+
+    // Snap Dot-to-Dot Scrubbing
+    const handleTouch = (xPos: number) => {
+        if (!xPoints || xPoints.length === 0) return;
+        let closestIdx = 0;
+        let minDistance = Infinity;
+
+        xPoints.forEach((px, idx) => {
+            const dist = Math.abs(px - xPos);
+            if (dist < minDistance) {
+                minDistance = dist;
+                closestIdx = idx;
+            }
+        });
+
+        setSelectedIndex(closestIdx);
+    };
+
+    const panResponder = useMemo(
+        () =>
+            PanResponder.create({
+                onStartShouldSetPanResponder: () => true,
+                onStartShouldSetPanResponderCapture: () => true,
+                onMoveShouldSetPanResponder: () => true,
+                onMoveShouldSetPanResponderCapture: () => true,
+                onPanResponderGrant: (evt) => {
+                    handleTouch(evt.nativeEvent.locationX);
+                },
+                onPanResponderMove: (evt) => {
+                    handleTouch(evt.nativeEvent.locationX);
+                },
+                onPanResponderRelease: () => {},
+            }),
+        [xPoints]
+    );
+
+    if (visibleDataItems.length === 0) {
+        return (
+            <View style={{
+                backgroundColor: colors.cardBg,
+                borderRadius: 20,
+                padding: 30,
+                borderWidth: 1,
+                borderColor: colors.cardBorder,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                <Text style={{ color: colors.textSecondary, fontSize: 13, fontWeight: '600' }}>
+                    No report data available for visualization
+                </Text>
+            </View>
+        );
+    }
+
+    // Render Multi-Line Curves with Dot-to-Dot nodes (No shadow / fill area)
+    const renderLineCurves = () => {
+        if (isMultiStatusAvailable && viewMode === 'ALL_STATUS') {
+            return availableStatusKeys.map((statusKey) => {
+                if (!activeStatusMap[statusKey]) return null;
+                const statusCfg = STATUS_CONFIG[statusKey] || { color: color, label: statusKey };
+
+                const linePoints = visibleDataItems.map((item, i) => {
+                    const val = item.statusValues[statusKey] || 0;
+                    const y = paddingTop + chartHeight - (val / maxValue) * chartHeight;
+                    return { x: xPoints[i], y, value: val };
+                });
+
+                if (linePoints.length < 1) return null;
+
+                let pathData = `M ${linePoints[0].x} ${linePoints[0].y}`;
+                for (let i = 0; i < linePoints.length - 1; i++) {
+                    const p0 = linePoints[i];
+                    const p1 = linePoints[i + 1];
+                    const cp1x = p0.x + (p1.x - p0.x) / 2;
+                    pathData += ` C ${cp1x} ${p0.y}, ${cp1x} ${p1.y}, ${p1.x} ${p1.y}`;
+                }
+
+                return (
+                    <G key={statusKey}>
+                        <Path
+                            d={pathData}
+                            fill="none"
+                            stroke={statusCfg.color}
+                            strokeWidth="3.5"
+                            strokeLinecap="round"
+                        />
+                        {/* Dot to Dot Circles */}
+                        {linePoints.map((p, i) => (
+                            <Circle
+                                key={i}
+                                cx={p.x}
+                                cy={p.y}
+                                r={i === selectedIndex ? "7" : "5"}
+                                fill={statusCfg.color}
+                                stroke={colors.cardBg}
+                                strokeWidth="2"
+                            />
+                        ))}
+                    </G>
+                );
+            });
+        } else {
+            // Combined single clean stroke line (No shadow / gradient area under curve)
+            const combinedPoints = visibleDataItems.map((item, i) => {
+                const val = item.total;
+                const y = paddingTop + chartHeight - (val / maxValue) * chartHeight;
+                return { x: xPoints[i], y, value: val };
+            });
+
+            if (combinedPoints.length < 1) return null;
+
+            let pathData = `M ${combinedPoints[0].x} ${combinedPoints[0].y}`;
+            for (let i = 0; i < combinedPoints.length - 1; i++) {
+                const p0 = combinedPoints[i];
+                const p1 = combinedPoints[i + 1];
+                const cp1x = p0.x + (p1.x - p0.x) / 2;
+                pathData += ` C ${cp1x} ${p0.y}, ${cp1x} ${p1.y}, ${p1.x} ${p1.y}`;
+            }
+
+            return (
+                <G>
+                    <Path d={pathData} fill="none" stroke={themeColors.brand[600]} strokeWidth="3.5" strokeLinecap="round" />
+                    {combinedPoints.map((p, i) => (
+                        <Circle
+                            key={i}
+                            cx={p.x}
+                            cy={p.y}
+                            r={i === selectedIndex ? "7" : "5"}
+                            fill={i === selectedIndex ? "#7C3AED" : themeColors.brand[600]}
+                            stroke={colors.cardBg}
+                            strokeWidth="2"
+                        />
+                    ))}
+                </G>
+            );
+        }
+    };
+
+    // Render Side-by-Side Grouped Bars
+    const renderBarChart = () => {
+        const stepWidth = visibleDataItems.length > 1 ? (effectiveChartWidth - 32) / (visibleDataItems.length - 1) : 40;
+
+        if (isMultiStatusAvailable && viewMode === 'ALL_STATUS') {
+            const activeKeys = availableStatusKeys.filter(sk => activeStatusMap[sk]);
+            const numBars = activeKeys.length || 1;
+            const totalGroupWidth = Math.min(stepWidth * 0.75, 40);
+            const singleBarWidth = Math.max(totalGroupWidth / numBars - 2, 4);
+
+            return visibleDataItems.map((item, i) => {
+                const groupCenterX = xPoints[i];
+                const startX = groupCenterX - (numBars * (singleBarWidth + 2)) / 2;
+
+                return (
+                    <G key={i}>
+                        {activeKeys.map((statusKey, bIdx) => {
+                            const val = item.statusValues[statusKey] || 0;
+                            const barH = Math.max((val / maxValue) * chartHeight, 3);
+                            const bx = startX + bIdx * (singleBarWidth + 2);
+                            const by = paddingTop + chartHeight - barH;
+                            const statusCfg = STATUS_CONFIG[statusKey] || { color: color };
+
+                            return (
+                                <Path
+                                    key={statusKey}
+                                    d={`M ${bx} ${paddingTop + chartHeight} L ${bx} ${by + 3} Q ${bx} ${by} ${bx + 3} ${by} L ${bx + singleBarWidth - 3} ${by} Q ${bx + singleBarWidth} ${by} ${bx + singleBarWidth} ${by + 3} L ${bx + singleBarWidth} ${paddingTop + chartHeight} Z`}
+                                    fill={statusCfg.color}
+                                    opacity={i === selectedIndex ? 1 : 0.85}
+                                />
+                            );
+                        })}
+                    </G>
+                );
+            });
+        } else {
+            // Combined single bar chart
+            const maxBarWidth = 26;
+            const barWidth = Math.min(stepWidth * 0.55, maxBarWidth);
+
+            return visibleDataItems.map((item, i) => {
+                const val = item.total;
+                const x = xPoints[i] - barWidth / 2;
+                const barH = Math.max((val / maxValue) * chartHeight, 4);
+                const y = paddingTop + chartHeight - barH;
+                const isSelected = i === selectedIndex;
+
+                return (
+                    <G key={i}>
+                        <Path
+                            d={`M ${x} ${paddingTop + chartHeight} L ${x} ${y + 4} Q ${x} ${y} ${x + 4} ${y} L ${x + barWidth - 4} ${y} Q ${x + barWidth} ${y} ${x + barWidth} ${y + 4} L ${x + barWidth} ${paddingTop + chartHeight} Z`}
+                            fill={isSelected ? '#6D28D9' : color}
+                            opacity={isSelected ? 1 : 0.85}
+                        />
+                    </G>
+                );
+            });
+        }
+    };
+
+    const selectedItem = selectedIndex !== null && selectedIndex < visibleDataItems.length ? visibleDataItems[selectedIndex] : null;
+
+    return (
+        <View style={{ gap: 14 }}>
+            {/* Graph Visualization Card (Clean flat surface, no shadow) */}
+            <View style={{
+                backgroundColor: colors.cardBg,
+                borderRadius: 20,
+                padding: 16,
+                borderWidth: 1,
+                borderColor: colors.cardBorder,
+            }}>
+                {/* Title Row on Top (Full Width) */}
+                <View style={{ marginBottom: 12 }}>
+                    <Text style={{ fontSize: 16, fontWeight: '800', color: colors.textPrimary }}>
+                        {title}
+                    </Text>
+                </View>
+
+                {/* Mode Switcher Group: Multi-Line View / Combined & Chart Type Toggle */}
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                    {isMultiStatusAvailable ? (
+                        <View style={{ flexDirection: 'row', backgroundColor: colors.pillBg, padding: 3, borderRadius: 10 }}>
+                            <TouchableOpacity
+                                onPress={() => setViewMode('ALL_STATUS')}
+                                style={{
+                                    paddingHorizontal: 12,
+                                    paddingVertical: 6,
+                                    borderRadius: 8,
+                                    backgroundColor: viewMode === 'ALL_STATUS' ? '#7C3AED' : 'transparent',
+                                }}
+                            >
+                                <Text style={{ fontSize: 11, fontWeight: '800', color: viewMode === 'ALL_STATUS' ? '#FFFFFF' : colors.pillText }}>
+                                    All Status Lines
+                                </Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                onPress={() => setViewMode('COMBINED')}
+                                style={{
+                                    paddingHorizontal: 12,
+                                    paddingVertical: 6,
+                                    borderRadius: 8,
+                                    backgroundColor: viewMode === 'COMBINED' ? '#7C3AED' : 'transparent',
+                                }}
+                            >
+                                <Text style={{ fontSize: 11, fontWeight: '800', color: viewMode === 'COMBINED' ? '#FFFFFF' : colors.pillText }}>
+                                    Combined
+                                </Text>
+                            </TouchableOpacity>
+                        </View>
+                    ) : <View />}
+
+                    <View style={{ flexDirection: 'row', backgroundColor: colors.pillBg, padding: 3, borderRadius: 8, gap: 2 }}>
+                        <TouchableOpacity
+                            onPress={() => setChartType('LINE')}
+                            style={{
+                                paddingHorizontal: 8,
+                                paddingVertical: 6,
+                                borderRadius: 6,
+                                backgroundColor: chartType === 'LINE' || chartType === 'AREA' ? colors.pillActiveBg : 'transparent',
+                            }}
+                        >
+                            <Icon
+                                name="trending-up"
+                                type="Feather"
+                                size={14}
+                                color={chartType === 'LINE' || chartType === 'AREA' ? '#FFFFFF' : colors.pillText}
+                            />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            onPress={() => setChartType('BAR')}
+                            style={{
+                                paddingHorizontal: 8,
+                                paddingVertical: 6,
+                                borderRadius: 6,
+                                backgroundColor: chartType === 'BAR' ? colors.pillActiveBg : 'transparent',
+                            }}
+                        >
+                            <Icon
+                                name="bar-chart-2"
+                                type="Feather"
+                                size={14}
+                                color={chartType === 'BAR' ? '#FFFFFF' : colors.pillText}
+                            />
+                        </TouchableOpacity>
+                    </View>
+                </View>
+
+                {/* Status Legend Pills Row */}
+                {isMultiStatusAvailable && viewMode === 'ALL_STATUS' && (
+                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
+                        {availableStatusKeys.map(sk => {
+                            const cfg = STATUS_CONFIG[sk] || { label: formatKeyLabel(sk), color: '#6B7280', bgLight: '#F3F4F6', borderLight: '#E5E7EB' };
+                            const isActive = activeStatusMap[sk];
+                            return (
+                                <TouchableOpacity
+                                    key={sk}
+                                    onPress={() => toggleStatus(sk)}
+                                    style={{
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        gap: 5,
+                                        paddingHorizontal: 11,
+                                        paddingVertical: 5,
+                                        borderRadius: 20,
+                                        borderWidth: 1.5,
+                                        backgroundColor: isActive ? (isDarkMode ? `${cfg.color}25` : cfg.bgLight) : (isDarkMode ? '#2C2C2E' : '#F8FAFC'),
+                                        borderColor: isActive ? cfg.color : (isDarkMode ? '#3A3A3C' : '#E2E8F0'),
+                                        opacity: isActive ? 1 : 0.4,
+                                    }}
+                                >
+                                    <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: cfg.color }} />
+                                    <Text style={{ fontSize: 11, fontWeight: '800', color: isActive ? (isDarkMode ? '#FFFFFF' : cfg.color) : colors.textMuted }}>
+                                        {cfg.label}
+                                    </Text>
+                                </TouchableOpacity>
+                            );
+                        })}
+                    </View>
+                )}
+
+                {/* Selected Point Floating Scrub Tooltip Banner */}
+                {selectedItem ? (
+                    <View style={{
+                        backgroundColor: colors.listBg,
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 12,
+                        marginBottom: 10,
+                        borderWidth: 1,
+                        borderColor: colors.cardBorder,
+                    }}>
+                        <Text style={{ fontSize: 11, fontWeight: '900', color: colors.textPrimary, marginBottom: 4 }}>
+                            {isDateSeries ? formatMonthLabel(selectedItem.label) : selectedItem.label}
+                        </Text>
+
+                        {isMultiStatusAvailable && viewMode === 'ALL_STATUS' ? (
+                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                                {availableStatusKeys.map(sk => {
+                                    if (!activeStatusMap[sk]) return null;
+                                    const cfg = STATUS_CONFIG[sk];
+                                    const val = selectedItem.statusValues[sk] || 0;
+                                    return (
+                                        <View key={sk} style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                                            <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: cfg?.color || '#6B7280' }} />
+                                            <Text style={{ fontSize: 10, fontWeight: '700', color: colors.textSecondary }}>
+                                                {cfg?.label || sk}: <Text style={{ fontWeight: '900', color: colors.textPrimary }}>{val}</Text>
+                                            </Text>
+                                        </View>
+                                    );
+                                })}
+                            </View>
+                        ) : (
+                            <Text style={{ fontSize: 11, fontWeight: '800', color: themeColors.brand[600] }}>
+                                Total: {selectedItem.total} Cases
+                            </Text>
+                        )}
+                    </View>
+                ) : null}
+
+                {/* SVG Chart Canvas with PanResponder Scrubbing */}
+                <ScrollView horizontal={hasOverflow} showsHorizontalScrollIndicator={false}>
+                    <View
+                        {...panResponder.panHandlers}
+                        style={{ width: hasOverflow ? totalSvgWidth : '100%', position: 'relative' }}
+                    >
+                        <Svg height={height} width={hasOverflow ? totalSvgWidth : screenWidth}>
+                            {/* Horizontal Grid lines */}
+                            {[0, 0.25, 0.5, 0.75, 1].map((p, i) => {
+                                const yPos = paddingTop + p * chartHeight;
+                                return (
+                                    <SvgLine
+                                        key={i}
+                                        x1={paddingLeft}
+                                        y1={yPos}
+                                        x2={hasOverflow ? totalSvgWidth - paddingRight : screenWidth - paddingRight}
+                                        y2={yPos}
+                                        stroke={colors.gridLine}
+                                        strokeDasharray="4,4"
+                                        strokeWidth="1"
+                                    />
+                                );
+                            })}
+
+                            {/* Left Y-axis divider line */}
+                            <SvgLine
+                                x1={paddingLeft}
+                                y1={paddingTop - 10}
+                                x2={paddingLeft}
+                                y2={paddingTop + chartHeight}
+                                stroke={colors.gridLine}
+                                strokeWidth="1"
+                            />
+
+                            {/* Render Curves / Bars */}
+                            {chartType === 'BAR' ? renderBarChart() : renderLineCurves()}
+
+                            {/* Scrub Reticle Crosshair Line (CoinDCX / Groww snap indicator) */}
+                            {selectedIndex !== null && xPoints[selectedIndex] && (
+                                <G pointerEvents="none">
+                                    <SvgLine
+                                        x1={xPoints[selectedIndex]}
+                                        y1={paddingTop - 5}
+                                        x2={xPoints[selectedIndex]}
+                                        y2={paddingTop + chartHeight}
+                                        stroke="#7C3AED"
+                                        strokeWidth="1.5"
+                                        strokeDasharray="4,4"
+                                    />
+                                </G>
+                            )}
+
+                            {/* X-Axis Labels: Straight for Dates, Angled -35 deg for Text Diagnoses so they NEVER collide! */}
+                            {visibleDataItems.map((d, i) => {
+                                const px = xPoints[i];
+                                if (isDateSeries) {
+                                    const displayMonth = formatMonthLabel(d.label);
+                                    return (
+                                        <SvgText
+                                            key={`xlabel-${i}`}
+                                            x={px}
+                                            y={paddingTop + chartHeight + 18}
+                                            textAnchor="middle"
+                                            fontSize="10"
+                                            fontWeight="700"
+                                            fill={i === selectedIndex ? '#7C3AED' : colors.textMuted}
+                                        >
+                                            {displayMonth}
+                                        </SvgText>
+                                    );
+                                } else {
+                                    // For Diagnoses / Text categories, truncate and angle cleanly so words never overlap
+                                    const truncLabel = d.label.length > 10 ? d.label.substring(0, 9) + '…' : d.label;
+                                    return (
+                                        <SvgText
+                                            key={`xlabel-${i}`}
+                                            x={px}
+                                            y={paddingTop + chartHeight + 14}
+                                            textAnchor="end"
+                                            fontSize="9"
+                                            fontWeight="600"
+                                            fill={i === selectedIndex ? '#7C3AED' : colors.textMuted}
+                                            transform={`rotate(-35, ${px}, ${paddingTop + chartHeight + 14})`}
+                                        >
+                                            {truncLabel}
+                                        </SvgText>
+                                    );
+                                }
+                            })}
+                        </Svg>
+
+                        {/* Y-Axis values column on left (Cleanly aligned with grid) */}
+                        <View
+                            pointerEvents="none"
+                            style={{
+                                position: 'absolute',
+                                left: 0,
+                                top: paddingTop - 6,
+                                height: chartHeight + 12,
+                                justifyContent: 'space-between',
+                                width: 40,
+                            }}
+                        >
+                            {[1, 0.8, 0.6, 0.4, 0.2, 0].map((p, i) => (
+                                <Text key={i} style={{ fontSize: 9, fontWeight: '700', color: colors.textMuted, textAlign: 'right', paddingRight: 6 }}>
+                                    {Math.round(maxValue * p)}
+                                </Text>
+                            ))}
+                        </View>
+                    </View>
+                </ScrollView>
+
+                {/* Overflow notice */}
+                {hasOverflow && (
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 4, marginTop: 8 }}>
+                        <Icon name="info" type="Feather" size={12} color={colors.textMuted} />
+                        <Text style={{ fontSize: 10, color: colors.textMuted }}>
+                            Showing {visibleDataItems.length} of {multiStatusItems.length || data.length} items • Scroll chart to see more
+                        </Text>
+                    </View>
+                )}
+            </View>
+
+            {/* Data Breakdown Table (Clean flat surface, no shadow) */}
+            <View style={{
+                backgroundColor: colors.cardBg,
+                borderRadius: 20,
+                borderWidth: 1,
+                borderColor: colors.cardBorder,
+                overflow: 'hidden',
+            }}>
+                <View style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    paddingHorizontal: 16,
+                    paddingVertical: 12,
+                    backgroundColor: colors.listBg,
+                    borderBottomWidth: 1,
+                    borderBottomColor: colors.cardBorder,
+                }}>
+                    <Text style={{ fontSize: 13, fontWeight: '800', color: colors.textPrimary }}>
+                        Data Breakdown Table
+                    </Text>
+                    <Text style={{ fontSize: 11, fontWeight: '700', color: themeColors.brand[600] }}>
+                        Total: {totalCases} Cases
+                    </Text>
+                </View>
+
+                {tableColumns.length > 2 && tableRows.length > 0 ? (
+                    /* Multi-Column Horizontal Scroll Table */
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                        <View>
+                            {/* Table Header Row */}
+                            <View style={{
+                                flexDirection: 'row',
+                                backgroundColor: isDarkMode ? '#2C2C2E' : themeColors.slate[100],
+                                paddingHorizontal: 16,
+                                paddingVertical: 10,
+                                borderBottomWidth: 1,
+                                borderBottomColor: colors.cardBorder,
+                            }}>
+                                {tableColumns.map((colKey) => (
+                                    <Text
+                                        key={colKey}
+                                        style={{
+                                            width: 110,
+                                            fontSize: 10,
+                                            fontWeight: '800',
+                                            color: colors.textSecondary,
+                                            letterSpacing: 0.5,
+                                        }}
+                                    >
+                                        {formatKeyLabel(colKey).toUpperCase()}
+                                    </Text>
+                                ))}
+                            </View>
+
+                            {/* Table Rows */}
+                            {tableRows.map((rowItem: any, rIdx: number) => (
+                                <View
+                                    key={rIdx}
+                                    style={{
+                                        flexDirection: 'row',
+                                        paddingHorizontal: 16,
+                                        paddingVertical: 10,
+                                        borderBottomWidth: 1,
+                                        borderBottomColor: colors.gridLine,
+                                        alignItems: 'center',
+                                    }}
+                                >
+                                    {tableColumns.map((colKey) => {
+                                        const rawCell = rowItem[colKey];
+                                        const displayCell = (rawCell === null || rawCell === undefined || rawCell === '' || String(rawCell).trim() === '') ? '-' : String(rawCell);
+                                        return (
+                                            <Text
+                                                key={colKey}
+                                                style={{
+                                                    width: 110,
+                                                    fontSize: 11,
+                                                    fontWeight: '600',
+                                                    color: colors.textPrimary,
+                                                }}
+                                                numberOfLines={1}
+                                            >
+                                                {displayCell}
+                                            </Text>
+                                        );
+                                    })}
+                                </View>
+                            ))}
+                        </View>
+                    </ScrollView>
+                ) : (
+                    /* Clean 2-Column Table (LABEL on left, VALUE on right with ZERO overlap) */
+                    <View>
+                        {/* 2-Column Header */}
+                        <View style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            backgroundColor: isDarkMode ? '#2C2C2E' : themeColors.slate[100],
+                            paddingHorizontal: 16,
+                            paddingVertical: 10,
+                            borderBottomWidth: 1,
+                            borderBottomColor: colors.cardBorder,
+                        }}>
+                            <Text style={{ fontSize: 10, fontWeight: '800', color: colors.textSecondary, letterSpacing: 0.5 }}>
+                                {tableColumns[0] ? formatKeyLabel(tableColumns[0]).toUpperCase() : 'LABEL'}
+                            </Text>
+                            <Text style={{ fontSize: 10, fontWeight: '800', color: colors.textSecondary, letterSpacing: 0.5 }}>
+                                {tableColumns[1] ? formatKeyLabel(tableColumns[1]).toUpperCase() : 'VALUE'}
+                            </Text>
+                        </View>
+
+                        {/* 2-Column Rows */}
+                        {visibleDataItems.length > 0 ? (
+                            visibleDataItems.map((item, idx) => {
+                                const val = item.total;
+                                const displayVal = (val === null || val === undefined || val === '') ? '-' : String(val);
+                                return (
+                                    <View
+                                        key={idx}
+                                        style={{
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            paddingHorizontal: 16,
+                                            paddingVertical: 11,
+                                            borderBottomWidth: 1,
+                                            borderBottomColor: colors.gridLine,
+                                        }}
+                                    >
+                                        <Text
+                                            style={{
+                                                flex: 1,
+                                                fontSize: 12,
+                                                fontWeight: '700',
+                                                color: colors.textPrimary,
+                                                paddingRight: 14,
+                                            }}
+                                            numberOfLines={1}
+                                        >
+                                            {isDateSeries ? formatMonthLabel(item.label) : item.label}
+                                        </Text>
+                                        <Text
+                                            style={{
+                                                fontSize: 13,
+                                                fontWeight: '800',
+                                                color: colors.textPrimary,
+                                                textAlign: 'right',
+                                                minWidth: 40,
+                                            }}
+                                        >
+                                            {displayVal}
+                                        </Text>
+                                    </View>
+                                );
+                            })
+                        ) : (
+                            <View style={{ padding: 20, alignItems: 'center' }}>
+                                <Text style={{ fontSize: 12, color: colors.textSecondary }}>No breakdown data available</Text>
+                            </View>
+                        )}
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+};
+
+export default ReportChart;