@suflon/rnmd-reporting 0.0.1

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

@@ -0,0 +1,481 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { ScrollView, View, Text, TouchableOpacity, SafeAreaView, useColorScheme } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import { useReportStore, IReport, Header, SearchFilter, Loader, Icon } from '@suflon/native-ui';
+import { themeColors } from '@/theme/colors';
+import ReportChart from './ReportChart';
+import ReportFilterModal from './ReportFilterModal';
+
+const formatKeyLabel = (key: string) => {
+    return key
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+const ReportingDetail = () => {
+    const navigation = useNavigation<any>();
+    const route = useRoute<any>();
+    const report = route.params?.report as IReport;
+    const colorScheme = useColorScheme();
+    const isDarkMode = colorScheme === 'dark';
+
+    const { reportMetadata, loading, getReportMetadata, executeReport, reportResults } = useReportStore();
+
+    const [isLocalLoading, setIsLocalLoading] = useState(true);
+    const [activeReportId, setActiveReportId] = useState<string | number | null>(null);
+
+    const isDynamic = report?.report_type === 'SUMMARY' || report?.is_dynamic;
+
+    // Detect report_type from backend response metadata or item prop
+    const rawReportType = (reportMetadata?.metadata?.meta?.report_type || report?.report_type || '').toLowerCase();
+    const isChartReport = rawReportType === 'chart' || rawReportType === 'summary';
+    const isRowTableReport = rawReportType === 'row_table' || rawReportType === 'listing';
+
+    const [viewTab, setViewTab] = useState<'card' | 'table' | 'chart'>(isChartReport ? 'chart' : 'card');
+    const [filterModalVisible, setFilterModalVisible] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [expandedCardId, setExpandedCardId] = useState<string | number | null>(null);
+
+    // Dynamic tabs based on report_type from backend response
+    const VIEW_TABS = useMemo(() => {
+        if (isChartReport) {
+            return [
+                { key: 'chart' as const, label: 'Chart View', icon: 'bar-chart-2' },
+            ];
+        }
+        return [
+            { key: 'card' as const, label: 'Card View', icon: 'grid' },
+            { key: 'table' as const, label: 'Table Grid', icon: 'list' },
+        ];
+    }, [isChartReport]);
+
+    // Keep viewTab valid if report_type changes
+    useEffect(() => {
+        if (isChartReport && viewTab !== 'chart') {
+            setViewTab('chart');
+        } else if (!isChartReport && viewTab === 'chart') {
+            setViewTab('card');
+        }
+    }, [isChartReport, viewTab]);
+
+    useEffect(() => {
+        if (report?.id) {
+            setIsLocalLoading(true);
+            getReportMetadata(report.id).then((meta) => {
+                const isMetaDynamic = Boolean(
+                    meta?.metadata?.meta?.is_dynamic === true ||
+                    report?.is_dynamic === true
+                );
+
+                const filterBy = meta?.metadata?.filter_by || [];
+                const dateFilter = filterBy.find((f: any) => f.key === 'date_range');
+                
+                const todayStr = new Date().toISOString().split('T')[0];
+                const threeMonthsAgoStr = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+
+                const fromDate = dateFilter?.defaultValue?.from_date || dateFilter?.defaultValue?.from || threeMonthsAgoStr;
+                const toDate = dateFilter?.defaultValue?.to_date || dateFilter?.defaultValue?.to || todayStr;
+
+                const dateRange = {
+                    from_date: fromDate,
+                    to_date: toDate
+                };
+
+                const displayByList = meta?.metadata?.display_by || [];
+                const defaultDisplay = displayByList.find((d: any) => d.isDefault) || displayByList[0];
+                const defaultDisplayKey = meta?.metadata?.meta?.default_display_key || defaultDisplay?.key || '';
+
+                const opByList = meta?.metadata?.operation_by || [];
+                const defaultOp = opByList.find((o: any) => o.isDefault) || opByList[0];
+
+                const initialPayload: any = {};
+
+                if (isMetaDynamic) {
+                    // Dynamic reports -> filters is a LIST / ARRAY
+                    initialPayload.filters = [
+                        {
+                            key: 'date_range',
+                            value: dateRange
+                        }
+                    ];
+
+                    if (defaultDisplayKey) {
+                        initialPayload.display_by = defaultDisplayKey;
+                    }
+                    if (defaultOp) {
+                        initialPayload.operation_by = {
+                            key: defaultOp.key,
+                            operation: defaultOp.operation,
+                            label: defaultOp.label || `${defaultOp.operation} of ${defaultOp.key}`
+                        };
+                    }
+                } else {
+                    // Static reports -> filters is a DICTIONARY / OBJECT
+                    initialPayload.filters = {
+                        date_range: dateRange
+                    };
+                }
+
+                executeReport(report.id, isMetaDynamic, initialPayload)
+                    .then(() => {
+                        setActiveReportId(report.id);
+                    })
+                    .finally(() => {
+                        setIsLocalLoading(false);
+                    });
+            }).catch(() => {
+                setIsLocalLoading(false);
+            });
+        }
+    }, [report?.id, getReportMetadata, executeReport, isDynamic]);
+
+    const handleApplyFilters = (payload: any) => {
+        setFilterModalVisible(false);
+        if (report?.id) {
+            setIsLocalLoading(true);
+            const isMetaDynamic = Boolean(
+                reportMetadata?.metadata?.meta?.is_dynamic === true ||
+                report?.is_dynamic === true
+            );
+            executeReport(report.id, isMetaDynamic, payload).finally(() => {
+                setIsLocalLoading(false);
+            });
+        }
+    };
+
+    const records = useMemo(() => {
+        if (!reportResults) return [];
+        if (Array.isArray(reportResults)) return reportResults;
+        if (Array.isArray((reportResults as any)?.data)) return (reportResults as any).data;
+        return [];
+    }, [reportResults]);
+
+    const hiddenColumns = useMemo(() => {
+        const cols = reportMetadata?.metadata?.meta?.hidden_columns;
+        if (Array.isArray(cols)) return cols;
+        return ['id', 'region_id', 'company_id', 'dept_id', 'product_id', 'inventory_id', 'staff_id', 'patient_id'];
+    }, [reportMetadata]);
+
+    const visibleKeys = useMemo(() => {
+        if (records.length === 0) return [];
+        const firstRow = records[0];
+        return Object.keys(firstRow).filter((k) => !hiddenColumns.includes(k));
+    }, [records, hiddenColumns]);
+
+    const filteredRecords = useMemo(() => {
+        if (!searchQuery) return records;
+        return records.filter((rec: any) => {
+            const str = JSON.stringify(rec).toLowerCase();
+            return str.includes(searchQuery.toLowerCase());
+        });
+    }, [records, searchQuery]);
+
+    const chartData = useMemo(() => {
+        if (records.length === 0) return [];
+
+        const firstRow = records[0];
+        const statusKeys = ['completed', 'cancelled', 'rescheduled', 'noshow', 'upcoming', 'scheduled', 'pending'];
+        const foundStatusKeys = Object.keys(firstRow).filter(k => statusKeys.includes(k.toLowerCase()));
+
+        // If dataset has status breakdown columns, aggregate & render status-based graph bars
+        if (foundStatusKeys.length > 0) {
+            const statusTotals: Record<string, number> = {};
+            foundStatusKeys.forEach(key => {
+                statusTotals[key] = records.reduce((sum: number, r: any) => sum + (Number(r[key]) || 0), 0);
+            });
+
+            return Object.entries(statusTotals).map(([k, val]) => ({
+                label: formatKeyLabel(k),
+                value: val,
+            }));
+        }
+
+        // Default chart data mapping
+        return records.map((item: any, idx: number) => {
+            const keys = Object.keys(item);
+            const labelKey = keys.find(k => ['group_key', 'label', 'name', 'title', 'diagnosis_title', 'status', 'date'].includes(k)) || keys[0] || `Item ${idx + 1}`;
+            const valueKey = keys.find(k => ['metric_value', 'value', 'count', 'total', 'fees', 'amount', 'net_amount', 'balance_amount'].includes(k)) || keys[1] || keys[0];
+
+            return {
+                label: String(item[labelKey] ?? `Item ${idx + 1}`),
+                value: Number(item[valueKey]) || 0,
+            };
+        });
+    }, [records]);
+
+    const activeFilters = useMemo(() => {
+        const filters: string[] = [];
+        const filterList = reportMetadata?.metadata?.filter_by || [];
+        filterList.forEach((f: any) => {
+            if (f.defaultValue) {
+                if (typeof f.defaultValue === 'object' && (f.defaultValue.from_date || f.defaultValue.from)) {
+                    const from = f.defaultValue.from_date || f.defaultValue.from;
+                    const to = f.defaultValue.to_date || f.defaultValue.to;
+                    filters.push(`${from} - ${to}`);
+                } else if (typeof f.defaultValue === 'string') {
+                    filters.push(f.defaultValue);
+                }
+            }
+        });
+        return filters.length > 0 ? filters : ['All Filters'];
+    }, [reportMetadata]);
+
+    return (
+        <SafeAreaView className="flex-1 bg-slate-50 dark:bg-background-lightBlack">
+            {/* Suflon Header Component */}
+            <Header
+                title={report?.name || reportMetadata?.report_name || 'Report Detail'}
+                showBackButton={true}
+                onBackPress={() => navigation.goBack()}
+                actionIconName="filter"
+                actionIconType="Feather"
+                actionIconSize={18}
+                actionIconColor="#FFFFFF"
+                onActionPress={() => setFilterModalVisible(true)}
+                showActionIcon={true}
+            />
+
+            {/* Top View Mode Switcher Pills - Hidden in Chart View mode */}
+            {!isChartReport && (
+                <View className="flex-row bg-white dark:bg-background-darkSecondaryBg px-4 py-2.5 gap-2 border-b border-slate-100 dark:border-gray-800">
+                    {VIEW_TABS.map((tab) => {
+                        const isActive = viewTab === tab.key;
+                        return (
+                            <TouchableOpacity
+                                key={tab.key}
+                                onPress={() => setViewTab(tab.key)}
+                                style={{
+                                    backgroundColor: isActive ? themeColors.brand[600] : (isDarkMode ? '#2C2C2E' : '#F1F5F9'),
+                                }}
+                                className="flex-1 flex-row items-center justify-center py-2.5 rounded-xl gap-1.5"
+                            >
+                                <Icon
+                                    name={tab.icon}
+                                    type="Feather"
+                                    size={14}
+                                    color={isActive ? '#FFFFFF' : (isDarkMode ? '#FFFFFF' : themeColors.slate[600])}
+                                />
+                                <Text
+                                    style={{ color: isActive ? '#FFFFFF' : (isDarkMode ? '#FFFFFF' : '#334155') }}
+                                    className="text-xs font-extrabold"
+                                >
+                                    {tab.label}
+                                </Text>
+                            </TouchableOpacity>
+                        );
+                    })}
+                </View>
+            )}
+
+            {/* Show Full Screen / Container Loader while fetching data */}
+            {isLocalLoading || loading || activeReportId !== report?.id ? (
+                <View className="flex-1 justify-center items-center bg-slate-50 dark:bg-background-lightBlack">
+                    <Loader message="Fetching report data..." color={themeColors.brand[600]} />
+                </View>
+            ) : (
+                <ScrollView
+                    className="flex-1"
+                    showsVerticalScrollIndicator={false}
+                    contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 14, paddingBottom: 130 }}
+                >
+                    {/* Active Filter Banner */}
+                    <View className="bg-white dark:bg-background-darkSecondaryBg px-3 py-2.5 rounded-2xl border border-slate-200 dark:border-gray-800 flex-row items-center justify-between mb-3">
+                        <View className="flex-row items-center gap-1.5 flex-wrap flex-1">
+                            <Text className="text-[9px] font-extrabold text-slate-400 dark:text-gray-400 tracking-wider">
+                                ACTIVE FILTER:
+                            </Text>
+                            {activeFilters.map((f, i) => (
+                                <View key={i} className="bg-slate-100 dark:bg-gray-800 px-2 py-0.5 rounded-md">
+                                    <Text className="text-[10px] font-bold text-slate-700 dark:text-gray-100">
+                                        {f}
+                                    </Text>
+                                </View>
+                            ))}
+                        </View>
+
+                        <TouchableOpacity onPress={() => setFilterModalVisible(true)} className="flex-row items-center gap-1">
+                            <Icon name="edit-3" type="Feather" size={12} color={themeColors.brand[600]} />
+                            <Text className="text-[11px] font-extrabold text-violet-600 dark:text-violet-400">
+                                Edit
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    {/* Chart View Content */}
+                    {viewTab === 'chart' ? (
+                        <ReportChart
+                            data={chartData}
+                            records={records}
+                            visibleKeys={visibleKeys}
+                            title={report?.name || reportMetadata?.report_name || 'Diagnosis Frequency Curve'}
+                            subtitle="GRAPH VISUALIZATION"
+                            isDarkMode={isDarkMode}
+                        />
+                    ) : (
+                        <View className="gap-3">
+                            {/* Search Component from Suflon Native UI */}
+                            <SearchFilter
+                                placeholder="Search records..."
+                                value={searchQuery}
+                                onChangeText={setSearchQuery}
+                            />
+
+                            {/* Mobile Cards Mode */}
+                            {filteredRecords.length === 0 ? (
+                                <View className="bg-white dark:bg-background-darkSecondaryBg p-6 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
+                                    <Text className="text-slate-500 dark:text-gray-300 text-xs font-semibold">No records found</Text>
+                                </View>
+                            ) : viewTab === 'card' ? (
+                                filteredRecords.map((item: any, idx: number) => {
+                                    const cardId = item.txn_number || item.id || item.app_id || item.code || item.sysid || item.appointment_num || `#${idx + 1}`;
+                                    const isExpanded = expandedCardId === cardId;
+
+                                    const statusKey = visibleKeys.find(k => k.toLowerCase().includes('status')) || '';
+                                    const statusVal = statusKey ? String(item[statusKey] || '') : '';
+                                    const isSuccess = statusVal.toUpperCase().includes('COMPLETED') || statusVal.toUpperCase().includes('PAID') || statusVal.toUpperCase().includes('APPROVED');
+
+                                    const gridKeys = visibleKeys.filter(k => k !== statusKey).slice(0, 4);
+                                    const detailKeys = visibleKeys.filter(k => k !== statusKey && !gridKeys.includes(k));
+
+                                    return (
+                                        <View
+                                            key={idx}
+                                            className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 gap-2.5"
+                                        >
+                                            {/* Card Top Header Row */}
+                                            <View className="flex-row justify-between items-center border-b border-slate-100 dark:border-gray-800 pb-2">
+                                                <View className="flex-row items-center gap-1.5">
+                                                    <View className={`w-2 h-2 rounded-full ${isSuccess ? 'bg-emerald-500' : 'bg-amber-500'}`} />
+                                                    <Text style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="text-xs font-extrabold">
+                                                        {cardId}
+                                                    </Text>
+                                                </View>
+
+                                                {statusVal ? (
+                                                    <View className={`px-2 py-0.5 rounded-md ${isSuccess ? 'bg-emerald-100 dark:bg-emerald-950/50' : 'bg-amber-100 dark:bg-amber-950/50'}`}>
+                                                        <Text className={`text-[9px] font-extrabold ${isSuccess ? 'text-emerald-800 dark:text-emerald-300' : 'text-amber-800 dark:text-amber-300'}`}>
+                                                            {statusVal}
+                                                        </Text>
+                                                    </View>
+                                                ) : null}
+                                            </View>
+
+                                            {/* 2x2 Grid Dynamic Info */}
+                                            <View className="flex-row flex-wrap gap-2.5">
+                                                {gridKeys.map((key) => {
+                                                    const rawVal = item[key];
+                                                    const displayVal = (rawVal === null || rawVal === undefined || rawVal === '' || String(rawVal).trim() === '') ? '-' : String(rawVal);
+                                                    return (
+                                                        <View key={key} className="w-[47%]">
+                                                            <Text style={{ color: isDarkMode ? '#9CA3AF' : '#64748B' }} className="text-[8px] font-extrabold tracking-wider">
+                                                                {formatKeyLabel(key)}
+                                                            </Text>
+                                                            <Text style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold mt-0.5" numberOfLines={1}>
+                                                                {displayVal}
+                                                            </Text>
+                                                        </View>
+                                                    );
+                                                })}
+                                            </View>
+
+                                            {/* Collapsible Full Details */}
+                                            {detailKeys.length > 0 && (
+                                                <>
+                                                    <TouchableOpacity
+                                                        onPress={() => setExpandedCardId(isExpanded ? null : cardId)}
+                                                        className="flex-row justify-between items-center pt-2 border-t border-slate-100 dark:border-gray-800"
+                                                    >
+                                                        <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
+                                                            View Full Response Details
+                                                        </Text>
+                                                        <Icon
+                                                            name={isExpanded ? "chevron-up" : "chevron-down"}
+                                                            type="Feather"
+                                                            size={14}
+                                                            color={themeColors.brand[600]}
+                                                        />
+                                                    </TouchableOpacity>
+
+                                                    {isExpanded && (
+                                                        <View className="bg-slate-50 dark:bg-background-lightBlack p-2.5 rounded-xl gap-1.5 border border-slate-100 dark:border-gray-800">
+                                                            {detailKeys.map((key) => {
+                                                                const rawDetailVal = item[key];
+                                                                const displayDetailVal = (rawDetailVal === null || rawDetailVal === undefined || rawDetailVal === '' || String(rawDetailVal).trim() === '') ? '-' : String(rawDetailVal);
+                                                                return (
+                                                                    <View key={key} className="flex-row justify-between">
+                                                                        <Text style={{ color: isDarkMode ? '#9CA3AF' : '#64748B' }} className="text-[10px] font-semibold">{formatKeyLabel(key)}:</Text>
+                                                                        <Text style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="text-[10px] font-bold">
+                                                                            {displayDetailVal}
+                                                                        </Text>
+                                                                    </View>
+                                                                );
+                                                            })}
+                                                        </View>
+                                                    )}
+                                                </>
+                                            )}
+                                        </View>
+                                    );
+                                })
+                            ) : (
+                                /* Dynamic Compact Grid Table Mode */
+                                <View className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl border border-slate-200 dark:border-gray-800 overflow-hidden">
+                                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                                        <View>
+                                            <View className="flex-row bg-slate-50 dark:bg-background-lightBlack p-2.5 border-b border-slate-200 dark:border-gray-800">
+                                                {visibleKeys.map((key) => (
+                                                    <Text key={key} style={{ color: isDarkMode ? '#E2E8F0' : '#475569' }} className="w-[110px] text-[10px] font-extrabold">
+                                                        {formatKeyLabel(key).toUpperCase()}
+                                                    </Text>
+                                                ))}
+                                            </View>
+                                            {filteredRecords.map((item: any, idx: number) => (
+                                                <View key={idx} className="flex-row p-2.5 border-b border-slate-100 dark:border-gray-800 items-center">
+                                                    {visibleKeys.map((key) => {
+                                                        const rawCellVal = item[key];
+                                                        const displayCellVal = (rawCellVal === null || rawCellVal === undefined || rawCellVal === '' || String(rawCellVal).trim() === '') ? '-' : String(rawCellVal);
+                                                        return (
+                                                            <Text key={key} style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="w-[110px] text-[10px] font-semibold" numberOfLines={1}>
+                                                                {displayCellVal}
+                                                            </Text>
+                                                        );
+                                                    })}
+                                                </View>
+                                            ))}
+                                        </View>
+                                    </ScrollView>
+                                </View>
+                            )}
+
+                            {/* Pagination Footer */}
+                            <View className="flex-row justify-between items-center pt-2">
+                                <Text className="text-[11px] text-slate-500 dark:text-gray-300">
+                                    Showing 1-{filteredRecords.length} of {filteredRecords.length} records
+                                </Text>
+                                <View className="flex-row items-center gap-1.5">
+                                    <TouchableOpacity className="w-6 h-6 rounded-md bg-white dark:bg-background-darkSecondaryBg border border-slate-200 dark:border-gray-800 items-center justify-center">
+                                        <Icon name="chevron-left" type="Feather" size={14} color={isDarkMode ? '#FFFFFF' : themeColors.slate[400]} />
+                                    </TouchableOpacity>
+                                    <Text className="text-[11px] font-extrabold text-slate-900 dark:text-white">1</Text>
+                                    <TouchableOpacity className="w-6 h-6 rounded-md bg-white dark:bg-background-darkSecondaryBg border border-slate-200 dark:border-gray-800 items-center justify-center">
+                                        <Icon name="chevron-right" type="Feather" size={14} color={isDarkMode ? '#FFFFFF' : themeColors.slate[400]} />
+                                    </TouchableOpacity>
+                                </View>
+                            </View>
+                        </View>
+                    )}
+                </ScrollView>
+            )}
+
+            {/* Slide-Up Filter Drawer Sheet */}
+            <ReportFilterModal
+                isVisible={filterModalVisible}
+                onClose={() => setFilterModalVisible(false)}
+                metadata={reportMetadata}
+                onApply={handleApplyFilters}
+            />
+        </SafeAreaView>
+    );
+};
+
+export default ReportingDetail;