@suflon/rnmd-reporting 0.0.3 → 0.0.5

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, useContext } from 'react';
 import { ScrollView, View, Text, TouchableOpacity, SafeAreaView, useColorScheme } from 'react-native';
-import { useRoute, useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { useReportStore, IReport, Header, SearchFilter, Loader, Icon } from '@suflon/native-ui';
-import { themeColors } from '@/theme/colors';
+import { themeColors } from '../../../theme/colors';
 import ReportChart from './ReportChart';
 import ReportFilterModal from './ReportFilterModal';
 
@@ -12,10 +12,19 @@ const formatKeyLabel = (key: string) => {
         .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 ReportingDetail = (props: any) => {
+    const navHook = useNavigation<any>();
+    const navigation = props.navigation || navHook;
+    
+    let routeParams: any = {};
+    try {
+        const r = useRoute<any>();
+        routeParams = props.route?.params || r?.params || {};
+    } catch (e) {
+        routeParams = props.route?.params || {};
+    }
+
+    const report = routeParams?.report as IReport;
     const colorScheme = useColorScheme();
     const isDarkMode = colorScheme === 'dark';
 
@@ -137,6 +146,7 @@ const ReportingDetail = () => {
                 reportMetadata?.metadata?.meta?.is_dynamic === true ||
                 report?.is_dynamic === true
             );
+
             executeReport(report.id, isMetaDynamic, payload).finally(() => {
                 setIsLocalLoading(false);
             });
@@ -203,23 +213,6 @@ const ReportingDetail = () => {
         });
     }, [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 */}
@@ -237,7 +230,7 @@ const ReportingDetail = () => {
 
             {/* 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 className="flex-row bg-white dark:bg-background-darkSecondaryBg px-4 py-2.5 gap-2 border-b border-slate-200/70 dark:border-gray-800">
                     {VIEW_TABS.map((tab) => {
                         const isActive = viewTab === tab.key;
                         return (
@@ -253,10 +246,10 @@ const ReportingDetail = () => {
                                     name={tab.icon}
                                     type="Feather"
                                     size={14}
-                                    color={isActive ? '#FFFFFF' : (isDarkMode ? '#FFFFFF' : themeColors.slate[600])}
+                                    color={isActive ? '#FFFFFF' : (isDarkMode ? '#94a3b8' : themeColors.slate[600])}
                                 />
                                 <Text
-                                    style={{ color: isActive ? '#FFFFFF' : (isDarkMode ? '#FFFFFF' : '#334155') }}
+                                    style={{ color: isActive ? '#FFFFFF' : (isDarkMode ? '#E2E8F0' : '#334155') }}
                                     className="text-xs font-extrabold"
                                 >
                                     {tab.label}
@@ -278,96 +271,91 @@ const ReportingDetail = () => {
                     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 */}
+                    {/* Search and Action Bar */}
+                    <View className="flex-row gap-2 mb-4">
+                        <View className="flex-1">
                             <SearchFilter
-                                placeholder="Search records..."
+                                placeholder="Search in results..."
                                 value={searchQuery}
                                 onChangeText={setSearchQuery}
                             />
+                        </View>
+                    </View>
+
+                    {/* Chart Mode */}
+                    {viewTab === 'chart' && (
+                        <View className="gap-4">
+                            <ReportChart
+                                data={chartData}
+                                records={filteredRecords}
+                                visibleKeys={visibleKeys}
+                                title={report?.name || 'Analytics Chart'}
+                                subtitle={`Visual breakdown of ${filteredRecords.length} records`}
+                                color={themeColors.brand[600]}
+                                height={240}
+                                isDarkMode={isDarkMode}
+                            />
+                        </View>
+                    )}
+
+                    {/* Records List / Table */}
+                    {viewTab !== 'chart' && (
+                        <View className="gap-3">
+                            <View className="flex-row justify-between items-center px-1">
+                                <Text style={{ color: isDarkMode ? '#E2E8F0' : '#0F172A' }} className="text-xs font-black uppercase tracking-wider">
+                                    Records Dataset ({filteredRecords.length})
+                                </Text>
+                            </View>
 
-                            {/* 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 className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl border border-slate-200 dark:border-gray-800 items-center justify-center">
+                                    <Icon name="inbox" type="Feather" size={32} color={isDarkMode ? '#6B7280' : themeColors.slate[300]} />
+                                    <Text style={{ color: isDarkMode ? '#E2E8F0' : '#1E293B' }} className="text-xs font-bold mt-2">No records found</Text>
+                                    <Text style={{ color: isDarkMode ? '#9CA3AF' : '#64748B' }} className="text-[10px] text-center mt-1">
+                                        Try adjusting your search query or reset active filters.
+                                    </Text>
                                 </View>
                             ) : viewTab === 'card' ? (
+                                /* Structured Clean Card View */
                                 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 primaryKey = visibleKeys[0] || 'id';
+                                    const primaryVal = item[primaryKey] ?? `#${idx + 1}`;
+                                    
+                                    const secondaryKeys = visibleKeys.slice(1, 7);
+                                    const detailKeys = visibleKeys.slice(7);
+                                    const cardId = item.id || idx;
                                     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"
+                                            className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-4 border border-slate-200/70 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}
+                                            {/* Top Card Header */}
+                                            <View className="flex-row justify-between items-center">
+                                                <View className="flex-row items-center gap-2">
+                                                    <View className="w-2 h-2 rounded-full bg-violet-600 dark:bg-violet-400" />
+                                                    <Text style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="text-sm font-black">
+                                                        {formatKeyLabel(primaryKey)}: {String(primaryVal)}
                                                     </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}
+                                                {item.status && (
+                                                    <View className="px-2 py-0.5 rounded-full bg-violet-50 dark:bg-violet-950/40 border border-violet-100 dark:border-violet-800/40">
+                                                        <Text className="text-[9px] font-extrabold text-violet-700 dark:text-violet-300 uppercase">
+                                                            {String(item.status)}
                                                         </Text>
                                                     </View>
-                                                ) : null}
+                                                )}
                                             </View>
 
-                                            {/* 2x2 Grid Dynamic Info */}
-                                            <View className="flex-row flex-wrap gap-2.5">
-                                                {gridKeys.map((key) => {
+                                            {/* Key Metrics Grid */}
+                                            <View className="flex-row flex-wrap gap-y-2 pt-1 border-t border-slate-50 dark:border-gray-800/60">
+                                                {secondaryKeys.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">
+                                                        <View key={key} className="w-1/2 pr-2">
+                                                            <Text style={{ color: isDarkMode ? '#9CA3AF' : '#64748B' }} className="text-[10px] font-semibold" numberOfLines={1}>
                                                                 {formatKeyLabel(key)}
                                                             </Text>
                                                             <Text style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold mt-0.5" numberOfLines={1}>
@@ -383,7 +371,7 @@ const ReportingDetail = () => {
                                                 <>
                                                     <TouchableOpacity
                                                         onPress={() => setExpandedCardId(isExpanded ? null : cardId)}
-                                                        className="flex-row justify-between items-center pt-2 border-t border-slate-100 dark:border-gray-800"
+                                                        className="flex-row justify-between items-center pt-2 border-t border-slate-200/70 dark:border-gray-800"
                                                     >
                                                         <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
                                                             View Full Response Details
@@ -397,7 +385,7 @@ const ReportingDetail = () => {
                                                     </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">
+                                                        <View className="bg-slate-50 dark:bg-background-lightBlack p-2.5 rounded-xl gap-1.5 border border-slate-200/70 dark:border-gray-800">
                                                             {detailKeys.map((key) => {
                                                                 const rawDetailVal = item[key];
                                                                 const displayDetailVal = (rawDetailVal === null || rawDetailVal === undefined || rawDetailVal === '' || String(rawDetailVal).trim() === '') ? '-' : String(rawDetailVal);
@@ -430,7 +418,7 @@ const ReportingDetail = () => {
                                                 ))}
                                             </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">
+                                                <View key={idx} className="flex-row p-2.5 border-b border-slate-200/70 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);
@@ -449,14 +437,14 @@ const ReportingDetail = () => {
 
                             {/* Pagination Footer */}
                             <View className="flex-row justify-between items-center pt-2">
-                                <Text className="text-[11px] text-slate-500 dark:text-gray-300">
+                                <Text style={{ color: isDarkMode ? '#9CA3AF' : '#64748B' }} className="text-[11px]">
                                     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>
+                                    <Text style={{ color: isDarkMode ? '#FFFFFF' : '#0F172A' }} className="text-[11px] font-extrabold">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>

package/src/modules/Reporting/index.tsx

@@ -2,7 +2,7 @@ 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 { themeColors } from '../../theme/colors';
 import { SUB_CLASS_ICON_MAP, SUB_CLASS_LABEL_MAP } from './utils';
 
 const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
@@ -71,13 +71,11 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
 
     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);
+        const featured = filteredReports.filter((r: IReport) => (r as any).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">
@@ -101,9 +99,9 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
 
                 {/* 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">
+                    <View className="pt-3.5">
+                        <View className="px-4 flex-row justify-between items-center mb-2">
+                            <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[11px] font-extrabold tracking-wider">
                                 FEATURED REPORTS
                             </Text>
                             <Text className="text-[11px] font-bold text-violet-600 dark:text-violet-400">
@@ -117,15 +115,15 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                                     key={pick.id || i}
                                     onPress={() => handleReportPress(pick)}
                                     activeOpacity={0.8}
-                                    className="w-[170px] bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3 border border-slate-200 dark:border-gray-800 gap-1.5"
+                                    className="w-[170px] bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3 border border-slate-200/70 dark:border-slate-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} />
+                                        <Icon name="bar-chart-2" type="Feather" size={15} color={iconBrandColor} />
                                     </View>
-                                    <Text className="text-xs font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
+                                    <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-extrabold" numberOfLines={1}>
                                         {pick.name}
                                     </Text>
-                                    <Text className="text-[9px] font-semibold text-slate-500 dark:text-gray-400" numberOfLines={1}>
+                                    <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[9px] font-semibold" numberOfLines={1}>
                                         {pick.sub_report_class ? SUB_CLASS_LABEL_MAP[pick.sub_report_class] || pick.sub_report_class : 'Report'}
                                     </Text>
                                 </TouchableOpacity>
@@ -134,8 +132,8 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                     </View>
                 )}
 
-                {/* Category Pills Switcher - Dynamic from response */}
-                <View className="py-4">
+                {/* Category Pills Switcher */}
+                <View className="py-3.5">
                     <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
                         {categoryTabs.map((tab) => {
                             const isActive = activeTabId === tab.id;
@@ -147,40 +145,34 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                                     key={tab.id}
                                     onPress={() => setActiveTabId(tab.id)}
                                     activeOpacity={0.8}
-                                    className={`flex-row items-center gap-1.5 px-3.5 py-2 rounded-full border ${
+                                    className={`flex-row items-center gap-1.5 px-3.5 py-1.5 rounded-xl border ${
                                         isActive
                                             ? 'bg-violet-600 border-violet-600'
-                                            : 'bg-white dark:bg-background-darkSecondaryBg border-slate-200 dark:border-gray-800'
+                                            : 'bg-white dark:bg-background-darkSecondaryBg border-slate-200/70 dark:border-slate-800'
                                     }`}
                                 >
                                     <Icon
                                         name={tab.icon}
                                         type="Feather"
-                                        size={13}
-                                        color={isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : themeColors.slate[600])}
+                                        size={12}
+                                        color={isActive ? '#FFFFFF' : '#94a3b8'}
                                     />
                                     <Text
-                                        className={`text-[11px] font-bold ${
-                                            isActive
-                                                ? 'text-white'
-                                                : 'text-slate-700 dark:text-gray-200'
-                                        }`}
+                                        style={{ color: isActive ? '#FFFFFF' : (isDark ? '#9CA3AF' : '#94A3B8') }}
+                                        className={`text-xs ${isActive ? 'font-bold' : 'font-normal'}`}
                                     >
                                         {tab.label}
                                     </Text>
                                     <View
-                                        className={`rounded-full px-1.5 py-0.5 ${
+                                        className={`px-1.5 py-0.5 rounded-full ${
                                             isActive
-                                                ? 'bg-white/25'
-                                                : 'bg-slate-100 dark:bg-gray-800'
+                                                ? 'bg-white/20'
+                                                : 'bg-slate-100 dark:bg-slate-800'
                                         }`}
                                     >
                                         <Text
-                                            className={`text-[9px] font-extrabold ${
-                                                isActive
-                                                    ? 'text-white'
-                                                    : 'text-slate-600 dark:text-gray-300'
-                                            }`}
+                                            style={{ color: isActive ? '#FFFFFF' : (isDark ? '#9CA3AF' : '#94A3B8') }}
+                                            className={`text-[9px] ${isActive ? 'font-bold' : 'font-normal'}`}
                                         >
                                             {count}
                                         </Text>
@@ -192,57 +184,58 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                 </View>
             </View>
 
-            {/* Scrollable Report Catalog List ONLY */}
-            <ScrollView className="flex-1" contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 30, gap: 10 }}>
-                {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 font-semibold">No reports match the selected category</Text>
-                    </View>
-                ) : (
-                    filteredReports.map((item) => (
-                        <TouchableOpacity
-                            key={item.id}
-                            onPress={() => handleReportPress(item)}
-                            activeOpacity={0.8}
-                            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>
+            {/* Content Area */}
+            {loading ? (
+                <View className="flex-1 justify-center items-center">
+                    <Loader message="Loading reports catalog..." color={themeColors.brand[600]} />
+                </View>
+            ) : (
+                <ScrollView
+                    className="flex-1"
+                    showsVerticalScrollIndicator={false}
+                    contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 120 }}
+                >
+                    {filteredReports.length === 0 ? (
+                        <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl border border-slate-200/70 dark:border-slate-800 items-center justify-center mt-2">
+                            <Icon name="inbox" type="Feather" size={32} color={isDark ? '#6B7280' : themeColors.slate[300]} />
+                            <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold mt-2">No reports found</Text>
+                            <Text style={{ color: isDark ? '#9CA3AF' : '#64748B' }} className="text-[10px] text-center mt-1">
+                                {searchQuery ? 'Try matching another keyword or filter' : 'No available reports listed for this category'}
+                            </Text>
+                        </View>
+                    ) : (
+                        <View className="gap-2">
+                            <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-extrabold uppercase tracking-wider px-1 mb-0.5">
+                                {activeTabId === 'all' ? 'All Catalog Reports' : `${SUB_CLASS_LABEL_MAP[activeTabId] || activeTabId} Reports`} ({filteredReports.length})
+                            </Text>
 
-                                <View className="flex-1">
-                                    <Text className="text-[13px] font-extrabold text-slate-900 dark:text-text-dark-primary" 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] font-semibold text-slate-500 dark:text-gray-400">
-                                            {item.report_type || 'LISTING'}
-                                        </Text>
+                            {filteredReports.map((report: IReport) => (
+                                <TouchableOpacity
+                                    key={report.id}
+                                    onPress={() => handleReportPress(report)}
+                                    activeOpacity={0.8}
+                                    className="flex-row items-center justify-between bg-white dark:bg-background-darkSecondaryBg p-3 rounded-2xl border border-slate-200/70 dark:border-slate-800"
+                                >
+                                    <View className="flex-row items-center gap-3 flex-1 mr-2">
+                                        <View className="w-9 h-9 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center shrink-0">
+                                            <Icon name="file-text" type="Feather" size={15} color={iconBrandColor} />
+                                        </View>
+                                        <View className="flex-1">
+                                            <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold" numberOfLines={1}>
+                                                {report.name}
+                                            </Text>
+                                            <Text style={{ color: isDark ? '#9CA3AF' : '#64748B' }} className="text-[10px] mt-0.5" numberOfLines={1}>
+                                                {report.description || (report.sub_report_class ? SUB_CLASS_LABEL_MAP[report.sub_report_class] : 'Ready for export & view')}
+                                            </Text>
+                                        </View>
                                     </View>
-                                </View>
-                            </View>
-
-                            <View className="flex-row items-center gap-1.5">
-                                <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
-                            </View>
-                        </TouchableOpacity>
-                    ))
-                )}
-            </ScrollView>
+                                    <Icon name="chevron-right" type="Feather" size={14} color={isDark ? '#6B7280' : themeColors.slate[400]} />
+                                </TouchableOpacity>
+                            ))}
+                        </View>
+                    )}
+                </ScrollView>
+            )}
         </SafeAreaView>
     );
 };

package/src/navigation/index.tsx

@@ -1,8 +1,9 @@
 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';
+import Reporting from '../modules/Reporting';
+import ReportingDetail from '../modules/Reporting/component/ReportingDetail';
+import ManagementReport from '../modules/ManagementReport';
 
 export type AppNavigationProps = {
     onBackPress?: () => void;
@@ -15,10 +16,20 @@ 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.Screen 
+                    name="ReportingList" 
+                    component={Reporting} 
+                    initialParams={{ onBackPress }} 
+                />
+                <Stack.Screen 
+                    name="ReportingDetail" 
+                    component={ReportingDetail} 
+                />
+                <Stack.Screen 
+                    name="ManagementReport" 
+                    component={ManagementReport} 
+                    initialParams={{ onBackPress }} 
+                />
             </Stack.Navigator>
         </View>
     );