@suflon/rnmd-reporting 0.0.1

package/src/modules/Reporting/index.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { ScrollView, TouchableOpacity, View, Text, SafeAreaView, useColorScheme } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useReportStore, IReport, Header, SearchFilter, Loader, Icon } from '@suflon/native-ui';
+import { themeColors } from '@/theme/colors';
+import { SUB_CLASS_ICON_MAP, SUB_CLASS_LABEL_MAP } from './utils';
+
+const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
+    const navigation = useNavigation<any>();
+    const colorScheme = useColorScheme();
+    const isDark = colorScheme === 'dark';
+
+    const { reports, loading, getReports } = useReportStore();
+
+    const [searchQuery, setSearchQuery] = useState('');
+    const [activeTabId, setActiveTabId] = useState<string>('all');
+
+    // Fetch all reports once on mount and when search changes
+    useEffect(() => {
+        getReports({
+            search_query: searchQuery || '',
+        });
+    }, [searchQuery, getReports]);
+
+    // Build dynamic category tabs from the response's sub_report_class
+    const categoryTabs = useMemo(() => {
+        const tabs: { id: string; label: string; icon: string }[] = [
+            { id: 'all', label: 'All Reports', icon: 'grid' },
+        ];
+
+        if (!reports || reports.length === 0) return tabs;
+
+        // Extract unique sub_report_class values
+        const uniqueSubClasses = new Set<string>();
+        reports.forEach((r: IReport) => {
+            if (r.sub_report_class) {
+                uniqueSubClasses.add(r.sub_report_class);
+            }
+        });
+
+        // Sort and build tabs
+        Array.from(uniqueSubClasses).sort().forEach((subClass) => {
+            tabs.push({
+                id: subClass,
+                label: SUB_CLASS_LABEL_MAP[subClass] || subClass.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
+                icon: SUB_CLASS_ICON_MAP[subClass] || 'folder',
+            });
+        });
+
+        return tabs;
+    }, [reports]);
+
+    // Filter reports client-side based on selected tab
+    const filteredReports = useMemo(() => {
+        if (!reports || reports.length === 0) return [];
+        if (activeTabId === 'all') return reports;
+        return reports.filter((r: IReport) => r.sub_report_class === activeTabId);
+    }, [reports, activeTabId]);
+
+    // Reset to 'all' if the active tab no longer exists
+    useEffect(() => {
+        if (activeTabId !== 'all' && categoryTabs.length > 0) {
+            const tabExists = categoryTabs.some(t => t.id === activeTabId);
+            if (!tabExists) setActiveTabId('all');
+        }
+    }, [categoryTabs, activeTabId]);
+
+    const handleReportPress = useCallback((report: IReport) => {
+        navigation.navigate('ReportingDetail', { report });
+    }, [navigation]);
+
+    const featuredPicks = useMemo(() => {
+        if (!filteredReports || filteredReports.length === 0) return [];
+        // Show featured reports first, fallback to first 4
+        const featured = filteredReports.filter((r: IReport) => r.featured);
+        return featured.length > 0 ? featured.slice(0, 4) : filteredReports.slice(0, 4);
+    }, [filteredReports]);
+
+    const iconBrandColor = isDark ? '#a78bfa' : themeColors.brand[600];
+    const iconMutedColor = isDark ? '#9CA3AF' : themeColors.slate[400];
+
+    return (
+        <SafeAreaView className="flex-1 bg-slate-50 dark:bg-background-lightBlack">
+            {/* Header Component */}
+            <Header
+                title="Reports Catalog"
+                onBackPress={onBackPress}
+                showActionIcon={false}
+            />
+
+            <ScrollView className="flex-1" contentContainerStyle={{ paddingBottom: 30 }}>
+                {/* Search Bar */}
+                <View className="px-4 pt-3.5">
+                    <SearchFilter
+                        placeholder="Search reports or creator..."
+                        value={searchQuery}
+                        onChangeText={setSearchQuery}
+                    />
+                </View>
+
+                {/* Quick Access Featured Carousel */}
+                {featuredPicks.length > 0 && (
+                    <View className="pt-4">
+                        <View className="px-4 flex-row justify-between items-center mb-2.5">
+                            <Text className="text-[11px] font-extrabold text-slate-400 dark:text-gray-400 tracking-wider">
+                                FEATURED REPORTS
+                            </Text>
+                            <Text className="text-[11px] font-bold text-violet-600 dark:text-violet-400">
+                                Swipe ➔
+                            </Text>
+                        </View>
+
+                        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16, gap: 10 }}>
+                            {featuredPicks.map((pick, i) => (
+                                <TouchableOpacity
+                                    key={pick.id || i}
+                                    onPress={() => handleReportPress(pick)}
+                                    className="w-[170px] bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3 border border-slate-200 dark:border-gray-800 gap-1.5"
+                                >
+                                    <View className="w-7 h-7 rounded-lg bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
+                                        <Icon name="bar-chart-2" type="Feather" size={16} color={iconBrandColor} />
+                                    </View>
+                                    <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-extrabold" numberOfLines={1}>
+                                        {pick.name}
+                                    </Text>
+                                    <Text className="text-[9px] text-slate-500 dark:text-gray-400" numberOfLines={1}>
+                                        {pick.sub_report_class ? SUB_CLASS_LABEL_MAP[pick.sub_report_class] || pick.sub_report_class : 'Report'}
+                                    </Text>
+                                </TouchableOpacity>
+                            ))}
+                        </ScrollView>
+                    </View>
+                )}
+
+                {/* Category Pills Switcher - Dynamic from response */}
+                <View className="pt-4">
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
+                        {categoryTabs.map((tab) => {
+                            const isActive = activeTabId === tab.id;
+                            const count = tab.id === 'all'
+                                ? (reports || []).length
+                                : (reports || []).filter((r: IReport) => r.sub_report_class === tab.id).length;
+                            return (
+                                <TouchableOpacity
+                                    key={tab.id}
+                                    onPress={() => setActiveTabId(tab.id)}
+                                    style={{
+                                        backgroundColor: isActive ? themeColors.brand[600] : (isDark ? '#1C1C1E' : '#FFFFFF'),
+                                        borderColor: isActive ? themeColors.brand[600] : (isDark ? '#2C2C2E' : '#E2E8F0'),
+                                    }}
+                                    className="flex-row items-center gap-1.5 px-3.5 py-2 rounded-full border"
+                                >
+                                    <Icon
+                                        name={tab.icon}
+                                        type="Feather"
+                                        size={13}
+                                        color={isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : themeColors.slate[600])}
+                                    />
+                                    <Text
+                                        style={{ color: isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : '#334155') }}
+                                        className="text-[11px] font-bold"
+                                    >
+                                        {tab.label}
+                                    </Text>
+                                    <View
+                                        style={{
+                                            backgroundColor: isActive ? 'rgba(255, 255, 255, 0.25)' : (isDark ? '#2C2C2E' : '#F1F5F9'),
+                                        }}
+                                        className="rounded-full px-1.5 py-0.5"
+                                    >
+                                        <Text
+                                            style={{ color: isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : '#475569') }}
+                                            className="text-[9px] font-extrabold"
+                                        >
+                                            {count}
+                                        </Text>
+                                    </View>
+                                </TouchableOpacity>
+                            );
+                        })}
+                    </ScrollView>
+                </View>
+
+                {/* Report Catalog List */}
+                <View className="px-4 pt-3.5 gap-2.5">
+                    {loading ? (
+                        <View className="py-10">
+                            <Loader message="Loading reports catalog..." color={iconBrandColor} />
+                        </View>
+                    ) : filteredReports.length === 0 ? (
+                        <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
+                            <Text className="text-slate-500 dark:text-gray-400 text-xs">No reports match the selected category</Text>
+                        </View>
+                    ) : (
+                        filteredReports.map((item) => (
+                            <TouchableOpacity
+                                key={item.id}
+                                onPress={() => handleReportPress(item)}
+                                className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 flex-row items-center"
+                            >
+                                <View className="flex-row items-center gap-3 flex-1">
+                                    <View className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
+                                        <Icon
+                                            name={SUB_CLASS_ICON_MAP[item.sub_report_class] || (item.is_dynamic ? "pie-chart" : "file-text")}
+                                            type="Feather"
+                                            size={20}
+                                            color={iconBrandColor}
+                                        />
+                                    </View>
+
+                                    <View className="flex-1">
+                                        <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-sm font-extrabold" numberOfLines={1}>
+                                            {item.name}
+                                        </Text>
+                                        <View className="flex-row items-center gap-1.5 mt-0.5">
+                                            <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
+                                                {SUB_CLASS_LABEL_MAP[item.sub_report_class] || item.sub_report_class || 'Report'}
+                                            </Text>
+                                            <Text className="text-[10px] text-slate-400 dark:text-gray-500">•</Text>
+                                            <Text className="text-[10px] text-slate-500 dark:text-gray-400">
+                                                {item.report_type || 'LISTING'}
+                                            </Text>
+                                        </View>
+                                    </View>
+                                </View>
+
+                                <View className="flex-row items-center gap-1.5">
+                                    <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
+                                </View>
+                            </TouchableOpacity>
+                        ))
+                    )}
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default Reporting;

package/src/modules/Reporting/utils.tsx

@@ -0,0 +1,14 @@
+export const SUB_CLASS_ICON_MAP: Record<string, string> = {
+    'APPOINTMENT': 'calendar',
+    'PRESCRIPTION': 'file-text',
+    'TREATMENT_PLAN': 'activity',
+    'BILLING': 'dollar-sign',
+};
+
+// Label mapping for known sub_report_class values
+export const SUB_CLASS_LABEL_MAP: Record<string, string> = {
+    'APPOINTMENT': 'Appointment',
+    'PRESCRIPTION': 'Prescription',
+    'TREATMENT_PLAN': 'Treatment Plan',
+    'BILLING': 'Billing',
+};

package/src/navigation/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Reporting from '@/modules/Reporting';
+import ReportingDetail from '@/modules/Reporting/component/ReportingDetail';
+
+export type AppNavigationProps = {
+    onBackPress?: () => void;
+    title?: string;
+};
+
+const Stack = createNativeStackNavigator();
+
+export function AppNavigation({ onBackPress }: AppNavigationProps = {}) {
+    return (
+        <View style={styles.container}>
+            <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="ReportingList">
+                <Stack.Screen name="ReportingList">
+                    {(props) => <Reporting {...props} onBackPress={onBackPress} />}
+                </Stack.Screen>
+                <Stack.Screen name="ReportingDetail" component={ReportingDetail} />
+            </Stack.Navigator>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});