@suflon/rnmd-reporting 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suflon/rnmd-reporting",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "repository": {
     "type": "git",

package/src/modules/ManagementReport/components/AnalyticsChartView.tsx

@@ -109,7 +109,7 @@ const SingleChartCard: React.FC<{
   loading: boolean;
 }> = ({ detail, rows, loading }) => {
   const isDark = useColorScheme() === 'dark';
-  const [timeframe, setTimeframe] = useState<TimeframeOption>('Monthly');
+  const [timeframe, setTimeframe] = useState<TimeframeOption>('Daily');
   const [chartType, setChartType] = useState<'bar' | 'line' | 'trend'>('bar');
   const [fetching, setFetching] = useState(false);
 

package/src/modules/ManagementReport/components/DetailsListingView.tsx

@@ -214,7 +214,7 @@ const SingleReportTableCard: React.FC<{
   loading,
 }) => {
   const isDark = useColorScheme() === 'dark';
-  const [timeframe, setTimeframe] = useState<TimeframeOption>('Monthly');
+  const [timeframe, setTimeframe] = useState<TimeframeOption>('Daily');
   const [layoutMode, setLayoutMode] = useState<'table' | 'card'>('table');
   const [statusFilter, setStatusFilter] = useState<string>('ALL');
   const [fetching, setFetching] = useState(false);

package/src/modules/ManagementReport/components/DoctorFilterDropdown.tsx

@@ -12,146 +12,128 @@ import {
 import { Icon } from '@suflon/native-ui';
 import { themeColors } from '../../../theme/colors';
 
-interface DoctorFilterDropdownProps {
+export interface DoctorFilterDropdownProps {
   selectedDoctor: string;
   onSelectDoctor: (doctor: string) => void;
   availableDoctors: string[];
 }
 
-export const DoctorFilterDropdown: React.FC<DoctorFilterDropdownProps> = ({
-  selectedDoctor,
-  onSelectDoctor,
-  availableDoctors,
-}) => {
+export interface DoctorFilterDropdownRef {
+  open: (coords?: { x: number; y: number; width: number; height: number }) => void;
+}
+
+export const DoctorFilterDropdown = React.forwardRef<
+  DoctorFilterDropdownRef,
+  DoctorFilterDropdownProps
+>(({ selectedDoctor, onSelectDoctor, availableDoctors }, ref) => {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === 'dark';
   const [open, setOpen] = useState(false);
   const [coords, setCoords] = useState<{ x: number; y: number; width: number; height: number }>({
     x: 0,
-    y: 0,
+    y: 90,
     width: 0,
-    height: 0,
+    height: 48,
   });
-  const buttonRef = useRef<any>(null);
 
-  const handleOpen = () => {
-    buttonRef.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
-      setCoords({ x, y, width, height });
-      setOpen(true);
-    });
+  const handleOpen = (anchorCoords?: { x: number; y: number; width: number; height: number }) => {
+    if (anchorCoords) {
+      setCoords(anchorCoords);
+    }
+    setOpen(true);
   };
 
-  const hasFilter = selectedDoctor !== 'ALL' && selectedDoctor !== '';
-  const screenWidth = Dimensions.get('window').width;
-  const rightOffset = Math.max(16, screenWidth - (coords.x + coords.width));
+  React.useImperativeHandle(ref, () => ({
+    open: handleOpen,
+  }));
 
   const allOptions = ['ALL', ...availableDoctors];
 
   return (
-    <>
-      <TouchableOpacity
-        ref={buttonRef}
-        onPress={handleOpen}
-        activeOpacity={0.8}
-        className={`w-9 h-9 rounded-xl items-center justify-center border ${
-          hasFilter
-            ? 'bg-violet-600 border-violet-600'
-            : 'bg-slate-100 dark:bg-slate-800 border-slate-200/80 dark:border-slate-700'
-        }`}
-      >
-        <Icon
-          name="filter"
-          type="Feather"
-          size={14}
-          color={hasFilter ? '#FFFFFF' : '#64748b'}
-        />
-      </TouchableOpacity>
-
-      <Modal
-        visible={open}
-        transparent={true}
-        animationType="none"
-        onRequestClose={() => setOpen(false)}
-      >
-        <TouchableWithoutFeedback onPress={() => setOpen(false)}>
-          <View className="flex-1 bg-transparent">
-            <View
-              style={{
-                position: 'absolute',
-                top: coords.y + coords.height + 6,
-                right: rightOffset,
-                backgroundColor: isDark ? themeColors.slate[900] : themeColors.white,
-                borderColor: isDark ? themeColors.slate[700] : themeColors.slate[200],
-                borderWidth: 1,
-                borderRadius: 16,
-                paddingVertical: 6,
-                paddingHorizontal: 4,
-                minWidth: 170,
-                maxHeight: 250,
-                shadowColor: '#000',
-                shadowOffset: { width: 0, height: 6 },
-                shadowOpacity: isDark ? 0.45 : 0.18,
-                shadowRadius: 10,
-                elevation: 25,
-                zIndex: 99999,
-              }}
-            >
-              <View className="px-2.5 py-1 border-b border-slate-100 dark:border-slate-800 mb-1">
-                <Text className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400">
-                  Filter by Doctor
-                </Text>
-              </View>
+    <Modal
+      visible={open}
+      transparent={true}
+      animationType="none"
+      onRequestClose={() => setOpen(false)}
+    >
+      <TouchableWithoutFeedback onPress={() => setOpen(false)}>
+        <View className="flex-1 bg-transparent">
+          <View
+            style={{
+              position: 'absolute',
+              top: (coords.y || 90) + (coords.height || 48) + 6,
+              right: 16,
+              backgroundColor: isDark ? themeColors.slate[900] : themeColors.white,
+              borderColor: isDark ? themeColors.slate[700] : themeColors.slate[200],
+              borderWidth: 1,
+              borderRadius: 16,
+              paddingVertical: 6,
+              paddingHorizontal: 4,
+              minWidth: 180,
+              maxHeight: 250,
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 6 },
+              shadowOpacity: isDark ? 0.45 : 0.18,
+              shadowRadius: 10,
+              elevation: 25,
+              zIndex: 99999,
+            }}
+          >
+            <View className="px-2.5 py-1 border-b border-slate-100 dark:border-slate-800 mb-1">
+              <Text className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400">
+                Filter by Doctor
+              </Text>
+            </View>
 
-              <ScrollView showsVerticalScrollIndicator={false}>
-                {allOptions.map((doc) => {
-                  const isSelected = doc === selectedDoctor || (doc === 'ALL' && !selectedDoctor);
-                  const label = doc === 'ALL' ? 'All Doctors' : doc;
+            <ScrollView showsVerticalScrollIndicator={false}>
+              {allOptions.map((doc) => {
+                const isSelected = doc === selectedDoctor || (doc === 'ALL' && !selectedDoctor);
+                const label = doc === 'ALL' ? 'All Doctors' : doc;
 
-                  return (
-                    <TouchableOpacity
-                      key={doc}
-                      activeOpacity={0.8}
-                      onPress={() => {
-                        onSelectDoctor(doc);
-                        setOpen(false);
-                      }}
+                return (
+                  <TouchableOpacity
+                    key={doc}
+                    activeOpacity={0.8}
+                    onPress={() => {
+                      onSelectDoctor(doc);
+                      setOpen(false);
+                    }}
+                    style={{
+                      backgroundColor: isSelected
+                        ? (isDark ? themeColors.slate[800] : themeColors.brand[50])
+                        : themeColors.transparent,
+                      borderRadius: 10,
+                      paddingVertical: 7,
+                      paddingHorizontal: 8,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}
+                  >
+                    <View style={{ width: 14, alignItems: 'center', justifyContent: 'center' }}>
+                      {isSelected && (
+                        <Icon name="check" type="Feather" size={11} color={themeColors.brand[600]} />
+                      )}
+                    </View>
+                    <Text
                       style={{
-                        backgroundColor: isSelected
-                          ? (isDark ? themeColors.slate[800] : themeColors.brand[50])
-                          : themeColors.transparent,
-                        borderRadius: 10,
-                        paddingVertical: 7,
-                        paddingHorizontal: 8,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
+                        fontSize: 11,
+                        fontWeight: isSelected ? '700' : '500',
+                        color: isSelected
+                          ? (isDark ? themeColors.brand[400] : themeColors.brand[600])
+                          : (isDark ? themeColors.slate[200] : themeColors.slate[700]),
                       }}
+                      numberOfLines={1}
                     >
-                      <View style={{ width: 14, alignItems: 'center', justifyContent: 'center' }}>
-                        {isSelected && (
-                          <Icon name="check" type="Feather" size={11} color={themeColors.brand[600]} />
-                        )}
-                      </View>
-                      <Text
-                        style={{
-                          fontSize: 11,
-                          fontWeight: isSelected ? '700' : '500',
-                          color: isSelected
-                            ? (isDark ? themeColors.brand[400] : themeColors.brand[600])
-                            : (isDark ? themeColors.slate[200] : themeColors.slate[700]),
-                        }}
-                        numberOfLines={1}
-                      >
-                        {label}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
-              </ScrollView>
-            </View>
+                      {label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </ScrollView>
           </View>
-        </TouchableWithoutFeedback>
-      </Modal>
-    </>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
   );
-};
+});

package/src/modules/ManagementReport/components/KpiMetricsGrid.tsx

@@ -65,7 +65,7 @@ const KpiCardItem: React.FC<{
   loading: boolean;
 }> = ({ item, index, data, loading }) => {
   const isDark = useColorScheme() === 'dark';
-  const [timeframe, setTimeframe] = useState<TimeframeOption>('Monthly');
+  const [timeframe, setTimeframe] = useState<TimeframeOption>('Daily');
   const [fetching, setFetching] = useState(false);
 
   const executeReportItem = useManagementReportStore((s) => s.executeReportItem);

package/src/modules/ManagementReport/components/ManagementReportHeader.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, TextInput, useColorScheme } from 'react-native';
+import { View, useColorScheme } from 'react-native';
 import {
   IManagementReport,
-  Icon,
+  Header,
+  SearchFilter,
 } from '@suflon/native-ui';
 import { CategoryTabs } from './CategoryTabs';
 import { SubModuleTabs } from './SubModuleTabs';
@@ -25,6 +26,9 @@ interface ManagementReportHeaderProps {
   onSelectDoctor: (doctor: string) => void;
   availableDoctors: string[];
   categoryCounts?: Record<string, number>;
+  showFilter?: boolean;
+  onFilterPress?: () => void;
+  currentFilter?: string;
 }
 
 export const ManagementReportHeader: React.FC<ManagementReportHeaderProps> = ({
@@ -41,54 +45,53 @@ export const ManagementReportHeader: React.FC<ManagementReportHeaderProps> = ({
   onSelectDoctor,
   availableDoctors,
   categoryCounts,
+  showFilter = true,
+  onFilterPress,
+  currentFilter,
 }) => {
   const isDark = useColorScheme() === 'dark';
+  const doctorDropdownRef = React.useRef<any>(null);
+  const searchBarRef = React.useRef<any>(null);
+
+  const handleFilterClick = () => {
+    if (onFilterPress) {
+      onFilterPress();
+    } else {
+      searchBarRef.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
+        doctorDropdownRef.current?.open({ x, y, width, height });
+      });
+    }
+  };
+
+  const isFilterActive = currentFilter || (selectedDoctor && selectedDoctor !== 'ALL' ? 'active' : '');
 
   return (
     <View className="border-b border-slate-100 dark:border-slate-800/80 bg-white dark:bg-background-lightBlack px-3.5 pt-2.5 pb-2">
-      {/* 1. Top Header Bar: Back Button & Title */}
-      <View className="flex-row items-center justify-between mb-2">
-        <View className="flex-row items-center gap-2 flex-1">
-          {onBackPress && (
-            <TouchableOpacity
-              onPress={onBackPress}
-              activeOpacity={0.8}
-              className="w-7 h-7 rounded-full bg-slate-100 dark:bg-slate-800 items-center justify-center shrink-0"
-            >
-              <Icon name="arrow-left" type="Feather" size={14} color={isDark ? '#FFFFFF' : '#64748b'} />
-            </TouchableOpacity>
-          )}
-
-          <Text
-            style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
-            className="text-[15px] font-extrabold tracking-tight leading-tight flex-1"
-            numberOfLines={1}
-          >
-            {title}
-          </Text>
-        </View>
-      </View>
+      {/* 1. Top Header Bar from Suflon Native UI */}
+      <Header
+        title={title}
+        showBackButton={!!onBackPress}
+        onBackPress={onBackPress}
+        className="px-0 mb-2"
+      />
 
-      {/* 2. Compact Search Bar with Doctor Filter Dropdown Popover */}
-      <View className="w-full flex-row items-center gap-2 mb-2">
-        <View className="flex-1 flex-row items-center h-10 px-3 rounded-2xl bg-slate-100 dark:bg-slate-800/80 border border-slate-200/70 dark:border-slate-700/80">
-          <Icon name="search" type="Feather" size={15} color="#94a3b8" />
-          <TextInput
-            placeholder="Search reports or creator..."
-            placeholderTextColor="#94a3b8"
-            value={searchQuery}
-            onChangeText={onSearchChange}
-            style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
-            className="flex-1 ml-2 text-xs font-medium p-0"
-          />
-          {searchQuery ? (
-            <TouchableOpacity onPress={() => onSearchChange('')} activeOpacity={0.8}>
-              <Icon name="x" type="Feather" size={13} color="#94a3b8" />
-            </TouchableOpacity>
-          ) : null}
-        </View>
+      {/* 2. Search Filter from Suflon Native UI with Integrated Filter Modal */}
+      <View
+        ref={searchBarRef}
+        collapsable={false}
+        className="w-full mb-2"
+      >
+        <SearchFilter
+          placeholder="Search reports or creator..."
+          value={searchQuery}
+          onChangeText={onSearchChange}
+          showFilter={showFilter}
+          onFilterPress={handleFilterClick}
+          currentFilter={isFilterActive}
+        />
 
         <DoctorFilterDropdown
+          ref={doctorDropdownRef}
           selectedDoctor={selectedDoctor}
           onSelectDoctor={onSelectDoctor}
           availableDoctors={availableDoctors}

package/src/modules/ManagementReport/index.tsx

@@ -11,11 +11,13 @@ import {
 import {
   useManagementReportStore,
   ServerErrorWrapper,
+  Icon,
 } from '@suflon/native-ui';
 import { ManagementReportHeader } from './components/ManagementReportHeader';
 import { KpiMetricsGrid } from './components/KpiMetricsGrid';
 import { AnalyticsChartView } from './components/AnalyticsChartView';
 import { DetailsListingView } from './components/DetailsListingView';
+import { TouchableOpacity } from 'react-native';
 
 interface ManagementReportScreenProps {
   onBackPress?: () => void;
@@ -69,7 +71,7 @@ const ManagementReportScreen: React.FC<ManagementReportScreenProps> = ({
   const categoryReports = useMemo(() => {
     if (!managementReports || managementReports.length === 0) return [];
     return managementReports.filter(
-      (r) => r.mgmt_report_type?.toUpperCase() === activeCategory?.toUpperCase()
+      (r) => (r.mgmt_report_type || '').trim().toUpperCase() === (activeCategory || '').trim().toUpperCase()
     );
   }, [managementReports, activeCategory]);
 
@@ -77,7 +79,7 @@ const ManagementReportScreen: React.FC<ManagementReportScreenProps> = ({
   const categoryCounts = useMemo(() => {
     const counts: Record<string, number> = {};
     (managementReports || []).forEach((r) => {
-      const type = r.mgmt_report_type?.toUpperCase() || 'OTHER';
+      const type = (r.mgmt_report_type || 'OTHER').trim().toUpperCase();
       counts[type] = (counts[type] || 0) + 1;
     });
     return counts;
@@ -113,6 +115,8 @@ const ManagementReportScreen: React.FC<ManagementReportScreenProps> = ({
     : 'Reports Catalog';
   const screenSubtitle = `${activeCategory} Management Module`;
 
+  const hasContent = selectedReportDetails && selectedReportDetails.length > 0;
+
   return (
     <SafeAreaView className="flex-1 bg-slate-50 dark:bg-background-lightBlack">
       <ServerErrorWrapper
@@ -137,6 +141,8 @@ const ManagementReportScreen: React.FC<ManagementReportScreenProps> = ({
           onSelectDoctor={setSelectedDoctor}
           availableDoctors={availableDoctors}
           categoryCounts={categoryCounts}
+          showFilter={true}
+          currentFilter={selectedDoctor !== 'ALL' ? 'active' : ''}
         />
 
         {/* Main Content Area */}
@@ -166,6 +172,31 @@ const ManagementReportScreen: React.FC<ManagementReportScreenProps> = ({
                 Loading {selectedReport?.name || activeCategory} metrics & charts...
               </Text>
             </View>
+          ) : categoryReports.length === 0 || !selectedReport || !hasContent ? (
+            /* Informative Empty State for categories without published reports or empty data */
+            <View className="py-16 px-6 items-center justify-center bg-white dark:bg-background-darkSecondaryBg rounded-2xl border border-slate-100 dark:border-slate-800 mt-2">
+              <View className="w-14 h-14 rounded-2xl bg-violet-50 dark:bg-slate-800 items-center justify-center mb-3.5">
+                <Icon name="bar-chart-2" type="Feather" size={24} color="#7c3aed" />
+              </View>
+              <Text className="text-sm font-bold text-slate-800 dark:text-slate-100 text-center">
+                {categoryReports.length === 0
+                  ? `No ${activeCategory} Reports Available`
+                  : `No Data for ${selectedReport?.name || activeCategory}`}
+              </Text>
+              <Text className="text-xs text-slate-400 text-center mt-1 px-4 leading-4">
+                {categoryReports.length === 0
+                  ? `There are currently no published reports configured for the ${activeCategory.toLowerCase()} module.`
+                  : 'Report structure is available, but no KPI cards or data tables were found.'}
+              </Text>
+              <TouchableOpacity
+                onPress={handleRefresh}
+                activeOpacity={0.8}
+                className="mt-4 px-4 py-2 bg-violet-600 rounded-xl flex-row items-center gap-1.5"
+              >
+                <Icon name="refresh-cw" type="Feather" size={13} color="#FFFFFF" />
+                <Text className="text-xs font-semibold text-white">Refresh Reports</Text>
+              </TouchableOpacity>
+            </View>
           ) : (
             /* Sequential Content Flow: KPIs -> Charts -> Listing Tables */
             <>

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

@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useMemo, useContext } from 'react';
-import { ScrollView, View, Text, TouchableOpacity, SafeAreaView, useColorScheme } from 'react-native';
-import { useNavigation, useRoute } from '@react-navigation/native';
+import React, { useEffect, useState, useMemo, useContext, useCallback } from 'react';
+import { ScrollView, View, Text, TouchableOpacity, SafeAreaView, useColorScheme, BackHandler } from 'react-native';
+import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
 import { useReportStore, IReport, Header, SearchFilter, Loader, Icon } from '@suflon/native-ui';
 import { themeColors } from '../../../theme/colors';
 import ReportChart from './ReportChart';
@@ -33,6 +33,20 @@ const ReportingDetail = (props: any) => {
     const [isLocalLoading, setIsLocalLoading] = useState(true);
     const [activeReportId, setActiveReportId] = useState<string | number | null>(null);
 
+    useFocusEffect(
+        useCallback(() => {
+            const onBack = () => {
+                if (navigation?.canGoBack?.()) {
+                    navigation.goBack();
+                    return true;
+                }
+                return false;
+            };
+            const sub = BackHandler.addEventListener('hardwareBackPress', onBack);
+            return () => sub.remove();
+        }, [navigation])
+    );
+
     const isDynamic = report?.report_type === 'SUMMARY' || report?.is_dynamic;
 
     // Detect report_type from backend response metadata or item prop