@suflon/rnmd-reporting 0.0.4 → 0.0.6

package/package.json

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

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

@@ -6,7 +6,9 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   useColorScheme,
+  Dimensions,
 } from 'react-native';
+import Svg, { Path, Circle, Defs, LinearGradient, Stop, Line as SvgLine } from 'react-native-svg';
 import {
   IManagementReportDetail,
   Icon,
@@ -25,6 +27,29 @@ interface ChartItemData {
   value: number;
 }
 
+function formatLabel(label: string): string {
+  if (!label) return '-';
+  if (/^\d{4}-\d{2}-\d{2}$/.test(label)) {
+    const parts = label.split('-');
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const m = parseInt(parts[1], 10) - 1;
+    return `${parts[2]} ${months[m] || parts[1]}`;
+  }
+
+  return label
+    .replace(/_/g, ' ')
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+    .trim();
+}
+
+function formatYAxisValue(val: number): string {
+  if (val >= 1000000) return `${(val / 1000000).toFixed(1)}M`;
+  if (val >= 1000) return `${(val / 1000).toFixed(1)}k`;
+  if (Number.isInteger(val)) return String(val);
+  return val.toFixed(1);
+}
+
 function parseChartData(rows: any[]): ChartItemData[] {
   if (!rows || rows.length === 0) return [];
 
@@ -48,6 +73,8 @@ function parseChartData(rows: any[]): ChartItemData[] {
             'department',
             'category',
             'group_key',
+            'appointment_type',
+            'severity',
           ].includes(k.toLowerCase())
         ) || keys[0];
 
@@ -62,13 +89,14 @@ function parseChartData(rows: any[]): ChartItemData[] {
             'net_amount',
             'sum',
             'metric_value',
+            'patients',
           ].includes(k.toLowerCase())
         ) || keys[1] || keys[0];
 
       const val = Number(r[valueKey]) || 0;
-      const lbl = String(r[labelKey] || `Item ${i + 1}`);
+      const rawLbl = String(r[labelKey] || `Item ${i + 1}`);
 
-      return { label: lbl, value: val };
+      return { label: formatLabel(rawLbl), value: val };
     }
 
     return { label: `Item ${i + 1}`, value: 0 };
@@ -81,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);
 
@@ -114,8 +142,49 @@ const SingleChartCard: React.FC<{
     [chartData]
   );
 
+  // Generate 4 evenly spaced Y-axis ticks
+  const yTicks = useMemo(() => {
+    return [
+      maxValue,
+      Math.round(maxValue * 0.66),
+      Math.round(maxValue * 0.33),
+      0,
+    ];
+  }, [maxValue]);
+
   const isBusy = loading || fetching;
   const title = detail.report?.name || detail.report_num || 'Performance Metric';
+  const isCompact = chartData.length <= 4;
+  const chartHeight = 130;
+  const cardWidth = Dimensions.get('window').width - 90;
+  const svgWidth = Math.max(cardWidth, chartData.length * 64);
+
+  // SVG Line / Trend calculations
+  const svgPoints = useMemo(() => {
+    if (chartData.length === 0) return [];
+    const step = chartData.length > 1 ? svgWidth / (chartData.length - 1) : svgWidth / 2;
+    const paddingBottom = 15;
+    const paddingTop = 15;
+    const availableHeight = chartHeight - paddingTop - paddingBottom;
+
+    return chartData.map((d, i) => {
+      const x = chartData.length === 1 ? svgWidth / 2 : i * step;
+      const y = chartHeight - paddingBottom - (d.value / maxValue) * availableHeight;
+      return { x, y, value: d.value, label: d.label };
+    });
+  }, [chartData, maxValue, svgWidth, chartHeight]);
+
+  const linePath = useMemo(() => {
+    if (svgPoints.length === 0) return '';
+    return svgPoints.reduce((acc, p, i) => `${acc} ${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`, '');
+  }, [svgPoints]);
+
+  const areaPath = useMemo(() => {
+    if (svgPoints.length === 0) return '';
+    const lastX = svgPoints[svgPoints.length - 1].x;
+    const firstX = svgPoints[0].x;
+    return `${linePath} L ${lastX},${chartHeight - 10} L ${firstX},${chartHeight - 10} Z`;
+  }, [linePath, svgPoints, chartHeight]);
 
   return (
     <View className="p-3.5 rounded-3xl bg-white dark:bg-background-darkSecondaryBg border border-slate-100 dark:border-slate-800 mb-3.5">
@@ -195,67 +264,234 @@ const SingleChartCard: React.FC<{
           </Text>
         </View>
       ) : (
-        <View className="pt-2">
-          {/* Scaled Value Grid with Scrollable Interactive Bars */}
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={{ paddingHorizontal: 4, alignItems: 'flex-end', height: 160 }}
-          >
-            {chartData.map((item, idx) => {
-              const heightPercent = Math.max(12, Math.round((item.value / maxValue) * 110));
-              const isTopValue = item.value === maxValue;
-
-              return (
-                <View
-                  key={idx}
-                  className="items-center justify-end mr-3.5"
-                  style={{ width: 44 }}
+        <View className="pt-1">
+          {/* Main Chart Body: Left Y-Axis Scale Column + Chart Canvas */}
+          <View className="flex-row">
+            {/* 1. Left Y-Axis Labels Column */}
+            <View className="w-9 justify-between items-end pr-1.5 pb-6" style={{ height: chartHeight + 24 }}>
+              {yTicks.map((tick, i) => (
+                <Text
+                  key={i}
+                  style={{ color: isDark ? '#64748B' : '#94A3B8' }}
+                  className="text-[9px] font-mono font-medium text-right"
+                  numberOfLines={1}
                 >
-                  {/* Metric Value Label on Top of Bar */}
-                  <Text
-                    style={{ color: isTopValue ? '#a78bfa' : (isDark ? '#E2E8F0' : '#64748b') }}
-                    className="text-[9px] font-extrabold mb-1 font-mono"
-                    numberOfLines={1}
-                  >
-                    {item.value > 1000 ? `${(item.value / 1000).toFixed(1)}k` : item.value}
-                  </Text>
-
-                  {/* Rendered Visual Column */}
+                  {formatYAxisValue(tick)}
+                </Text>
+              ))}
+            </View>
+
+            {/* 2. Chart Grid & Plot Area */}
+            <View className="flex-1 relative">
+              {/* Background Horizontal Guide Lines */}
+              <View className="absolute inset-0 justify-between pb-6 pointer-events-none" style={{ height: chartHeight + 24 }}>
+                {yTicks.map((_, i) => (
                   <View
-                    style={{ height: heightPercent }}
-                    className={`w-full rounded-t-xl ${
-                      isTopValue
-                        ? 'bg-violet-600 dark:bg-violet-500'
-                        : 'bg-violet-400/80 dark:bg-violet-600/60'
-                    }`}
+                    key={i}
+                    style={{
+                      height: 1,
+                      backgroundColor: i === yTicks.length - 1
+                        ? (isDark ? '#475569' : '#cbd5e1')
+                        : (isDark ? '#1e293b' : '#f1f5f9'),
+                    }}
+                    className="w-full"
                   />
+                ))}
+              </View>
+
+              {/* Chart Mode Rendering */}
+              {chartType === 'bar' ? (
+                isCompact ? (
+                  /* Balanced Full-Width Grid for 2-4 items */
+                  <View>
+                    <View className="flex-row justify-around items-end px-1" style={{ height: chartHeight }}>
+                      {chartData.map((item, idx) => {
+                        const barHeight = Math.max(14, Math.round((item.value / maxValue) * (chartHeight - 30)));
+                        const isTopValue = item.value === maxValue;
+
+                        return (
+                          <View
+                            key={idx}
+                            className="items-center justify-end flex-1 max-w-[68px] px-1"
+                          >
+                            <Text
+                              style={{
+                                color: isTopValue ? (isDark ? '#A78BFA' : '#7C3AED') : (isDark ? '#E2E8F0' : '#475569'),
+                              }}
+                              className="text-[9px] font-extrabold mb-1 font-mono"
+                              numberOfLines={1}
+                            >
+                              {formatYAxisValue(item.value)}
+                            </Text>
 
-                  {/* Horizontal Base Axis Line */}
-                  <View className="w-full h-0.5 bg-slate-200 dark:bg-slate-700 mt-0.5" />
-
-                  {/* X-Axis Dimension Label */}
-                  <Text
-                    style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }}
-                    className="text-[8px] font-semibold text-center mt-1 w-full"
-                    numberOfLines={1}
-                  >
-                    {item.label}
-                  </Text>
-                </View>
-              );
-            })}
-          </ScrollView>
+                            <View
+                              style={{ height: barHeight }}
+                              className={`w-full rounded-t-xl ${
+                                isTopValue
+                                  ? 'bg-violet-600 dark:bg-violet-500'
+                                  : 'bg-violet-400/80 dark:bg-violet-600/60'
+                              }`}
+                            />
+                          </View>
+                        );
+                      })}
+                    </View>
+
+                    {/* Continuous X-Axis Baseline */}
+                    <View className="w-full h-[1.5px] bg-slate-300 dark:bg-slate-700" />
+
+                    {/* Category Labels below Baseline */}
+                    <View className="flex-row justify-around px-1 pt-1.5">
+                      {chartData.map((item, idx) => (
+                        <View key={idx} className="flex-1 max-w-[68px] items-center px-0.5">
+                          <Text
+                            style={{ color: isDark ? '#E2E8F0' : '#475569' }}
+                            className="text-[9px] font-semibold text-center leading-tight"
+                            numberOfLines={2}
+                          >
+                            {item.label}
+                          </Text>
+                        </View>
+                      ))}
+                    </View>
+                  </View>
+                ) : (
+                  /* Horizontal Scroll for > 4 items */
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                    <View>
+                      <View className="flex-row items-end px-1" style={{ height: chartHeight }}>
+                        {chartData.map((item, idx) => {
+                          const barHeight = Math.max(14, Math.round((item.value / maxValue) * (chartHeight - 30)));
+                          const isTopValue = item.value === maxValue;
+
+                          return (
+                            <View
+                              key={idx}
+                              className="items-center justify-end mr-3"
+                              style={{ width: 52 }}
+                            >
+                              <Text
+                                style={{
+                                  color: isTopValue ? (isDark ? '#A78BFA' : '#7C3AED') : (isDark ? '#E2E8F0' : '#475569'),
+                                }}
+                                className="text-[9px] font-extrabold mb-1 font-mono"
+                                numberOfLines={1}
+                              >
+                                {formatYAxisValue(item.value)}
+                              </Text>
+
+                              <View
+                                style={{ height: barHeight }}
+                                className={`w-full rounded-t-xl ${
+                                  isTopValue
+                                    ? 'bg-violet-600 dark:bg-violet-500'
+                                    : 'bg-violet-400/80 dark:bg-violet-600/60'
+                                }`}
+                              />
+                            </View>
+                          );
+                        })}
+                      </View>
+
+                      {/* Continuous X-Axis Baseline */}
+                      <View className="w-full h-[1.5px] bg-slate-300 dark:bg-slate-700" />
+
+                      {/* Category Labels below Baseline */}
+                      <View className="flex-row px-1 pt-1.5">
+                        {chartData.map((item, idx) => (
+                          <View key={idx} style={{ width: 52 }} className="mr-3 items-center">
+                            <Text
+                              style={{ color: isDark ? '#E2E8F0' : '#475569' }}
+                              className="text-[9px] font-semibold text-center leading-tight"
+                              numberOfLines={2}
+                            >
+                              {item.label}
+                            </Text>
+                          </View>
+                        ))}
+                      </View>
+                    </View>
+                  </ScrollView>
+                )
+              ) : (
+                /* LINE / TREND SVG GRAPH MODE */
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View style={{ width: svgWidth }}>
+                    <Svg width={svgWidth} height={chartHeight}>
+                      <Defs>
+                        <LinearGradient id="gradientArea" x1="0" y1="0" x2="0" y2="1">
+                          <Stop offset="0%" stopColor="#7c3aed" stopOpacity="0.35" />
+                          <Stop offset="100%" stopColor="#7c3aed" stopOpacity="0.0" />
+                        </LinearGradient>
+                      </Defs>
+
+                      {/* Continuous X-Axis Baseline */}
+                      <SvgLine
+                        x1="0"
+                        y1={chartHeight - 10}
+                        x2={svgWidth}
+                        y2={chartHeight - 10}
+                        stroke={isDark ? '#475569' : '#cbd5e1'}
+                        strokeWidth="1.5"
+                      />
+
+                      {/* Trend Area Gradient Underfill */}
+                      {chartType === 'trend' && (
+                        <Path d={areaPath} fill="url(#gradientArea)" />
+                      )}
+
+                      {/* Line Path */}
+                      <Path
+                        d={linePath}
+                        fill="none"
+                        stroke="#7c3aed"
+                        strokeWidth="2.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+
+                      {/* Data Points */}
+                      {svgPoints.map((p, i) => (
+                        <Circle
+                          key={i}
+                          cx={p.x}
+                          cy={p.y}
+                          r="4"
+                          fill={isDark ? '#1C1C1E' : '#FFFFFF'}
+                          stroke="#7c3aed"
+                          strokeWidth="2"
+                        />
+                      ))}
+                    </Svg>
+
+                    {/* Data Labels under Points */}
+                    <View className="flex-row justify-between w-full px-1 pt-1.5">
+                      {svgPoints.map((p, i) => (
+                        <View key={i} style={{ width: 56, alignItems: 'center' }}>
+                          <Text style={{ color: isDark ? '#E2E8F0' : '#475569' }} className="text-[8px] font-semibold text-center" numberOfLines={1}>
+                            {p.label}
+                          </Text>
+                          <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-[9px] font-mono font-bold mt-0.5">
+                            {formatYAxisValue(p.value)}
+                          </Text>
+                        </View>
+                      ))}
+                    </View>
+                  </View>
+                </ScrollView>
+              )}
+            </View>
+          </View>
 
           {/* Subtitle / Legend Footer */}
-          <View className="flex-row items-center justify-between pt-2 mt-2 border-t border-slate-100 dark:border-slate-800">
+          <View className="flex-row items-center justify-between pt-2.5 mt-2 border-t border-slate-100 dark:border-slate-800">
             <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-medium">
               Peak: <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="font-bold">{maxValue.toLocaleString()}</Text>
             </Text>
             <View className="flex-row items-center gap-1">
               <View className="w-2 h-2 rounded-full bg-violet-600" />
               <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-semibold">
-                {timeframe} Trend
+                {chartType === 'bar' ? `${timeframe} Comparison` : chartType === 'line' ? 'Line Trajectory' : 'Trend Area'}
               </Text>
             </View>
           </View>

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

@@ -12,7 +12,7 @@ import {
   Icon,
   useManagementReportStore,
 } from '@suflon/native-ui';
-import { themeColors } from '@/theme/colors';
+import { themeColors } from '../../../theme/colors';
 import { TimeframeDropdown, TimeframeOption, getTimeframeDateFilter } from './TimeframeDropdown';
 
 interface DetailsListingViewProps {
@@ -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

@@ -10,148 +10,130 @@ import {
   useColorScheme,
 } from 'react-native';
 import { Icon } from '@suflon/native-ui';
-import { themeColors } from '@/theme/colors';
+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/components/TimeframeDropdown.tsx

@@ -9,7 +9,7 @@ import {
   useColorScheme,
 } from 'react-native';
 import { Icon } from '@suflon/native-ui';
-import { themeColors } from '@/theme/colors';
+import { themeColors } from '../../../theme/colors';
 
 export type TimeframeOption = 'Daily' | 'Weekly' | 'Monthly';
 export const TIMEFRAMES: TimeframeOption[] = ['Daily', 'Weekly', 'Monthly'];

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/ReportChart.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { View, Text, Dimensions, TouchableOpacity, ScrollView, PanResponder } from 'react-native';
 import Svg, { Path, Circle, G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
-import { themeColors } from '@/theme/colors';
+import { themeColors } from '../../../theme/colors';
 import { Icon } from '@suflon/native-ui';
 
 interface ChartData {

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

@@ -11,7 +11,7 @@ import {
     useStaffStore,
     IReportMetadata
 } from '@suflon/native-ui';
-import { themeColors } from '@/theme/colors';
+import { themeColors } from '../../../theme/colors';
 
 const CustomView = View;
 const CustomText = ({ variant, className, style, ...props }: any) => <Text style={style} {...props} />;

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

@@ -1,8 +1,8 @@
-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 { themeColors } from '../../../theme/colors';
 import ReportChart from './ReportChart';
 import ReportFilterModal from './ReportFilterModal';
 
@@ -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

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 } = {}) => {

package/src/navigation/index.tsx

@@ -1,9 +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 ManagementReport from '@/modules/ManagementReport';
+import Reporting from '../modules/Reporting';
+import ReportingDetail from '../modules/Reporting/component/ReportingDetail';
+import ManagementReport from '../modules/ManagementReport';
 
 export type AppNavigationProps = {
     onBackPress?: () => void;