@suflon/rnmd-reporting 0.0.3 → 0.0.5

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

@@ -0,0 +1,162 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  TouchableWithoutFeedback,
+  Dimensions,
+  useColorScheme,
+} from 'react-native';
+import { Icon } from '@suflon/native-ui';
+import { themeColors } from '../../../theme/colors';
+
+export type TimeframeOption = 'Daily' | 'Weekly' | 'Monthly';
+export const TIMEFRAMES: TimeframeOption[] = ['Daily', 'Weekly', 'Monthly'];
+
+export function getTimeframeDateFilter(timeframe: TimeframeOption): { from_date: string; to_date: string } {
+  const now = new Date();
+  const to_date = now.toISOString().slice(0, 10);
+  const from = new Date(now);
+
+  if (timeframe === 'Daily') {
+    from.setDate(now.getDate());
+  } else if (timeframe === 'Weekly') {
+    from.setDate(now.getDate() - 7);
+  } else if (timeframe === 'Monthly') {
+    from.setDate(now.getDate() - 30);
+  }
+
+  const from_date = from.toISOString().slice(0, 10);
+  return { from_date, to_date };
+}
+
+interface TimeframeDropdownProps {
+  value: TimeframeOption;
+  onChange: (value: TimeframeOption) => void;
+  size?: 'sm' | 'md';
+}
+
+export const TimeframeDropdown: React.FC<TimeframeDropdownProps> = ({
+  value,
+  onChange,
+  size = 'md',
+}) => {
+  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,
+    width: 0,
+    height: 0,
+  });
+  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 screenWidth = Dimensions.get('window').width;
+  const rightOffset = Math.max(12, screenWidth - (coords.x + coords.width));
+
+  return (
+    <>
+      <TouchableOpacity
+        ref={buttonRef}
+        onPress={handleOpen}
+        activeOpacity={0.8}
+        className={`${
+          size === 'sm' ? 'px-1.5 py-0.5' : 'px-2 py-1'
+        } rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200/80 dark:border-slate-700 flex-row items-center gap-1 shrink-0`}
+      >
+        <Icon name="sliders" type="Feather" size={size === 'sm' ? 8 : 10} color={themeColors.brand[600]} />
+        <Text
+          style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
+          className={`${
+            size === 'sm' ? 'text-[8px]' : 'text-[10px]'
+          } font-bold`}
+        >
+          {value}
+        </Text>
+      </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 + 4,
+                right: rightOffset,
+                backgroundColor: isDark ? themeColors.slate[900] : themeColors.white,
+                borderColor: isDark ? themeColors.slate[700] : themeColors.slate[200],
+                borderWidth: 1,
+                borderRadius: 16,
+                paddingVertical: 5,
+                paddingHorizontal: 4,
+                minWidth: 115,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 6 },
+                shadowOpacity: isDark ? 0.45 : 0.18,
+                shadowRadius: 10,
+                elevation: 25,
+                zIndex: 99999,
+              }}
+            >
+              {TIMEFRAMES.map((tf) => {
+                const isSelected = tf === value;
+                return (
+                  <TouchableOpacity
+                    key={tf}
+                    activeOpacity={0.8}
+                    onPress={() => {
+                      onChange(tf);
+                      setOpen(false);
+                    }}
+                    style={{
+                      backgroundColor: isSelected
+                        ? (isDark ? themeColors.slate[800] : themeColors.brand[50])
+                        : themeColors.transparent,
+                      borderRadius: 10,
+                      paddingVertical: 6,
+                      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={{
+                        fontSize: 11,
+                        fontWeight: isSelected ? '700' : '500',
+                        color: isSelected
+                          ? (isDark ? themeColors.brand[400] : themeColors.brand[600])
+                          : (isDark ? themeColors.slate[200] : themeColors.slate[700]),
+                      }}
+                    >
+                      {tf}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+};

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import { Icon } from '@suflon/native-ui';
+
+interface ViewModeSwitcherProps {
+  activeTab: 'chart' | 'listing';
+  onSwitchTab: (tab: 'chart' | 'listing') => void;
+}
+
+export const ViewModeSwitcher: React.FC<ViewModeSwitcherProps> = ({
+  activeTab,
+  onSwitchTab,
+}) => {
+  const isChart = activeTab === 'chart';
+
+  return (
+    <View className="bg-slate-200/70 dark:bg-slate-800/80 p-1 rounded-2xl flex-row items-center border border-slate-200 dark:border-slate-700/60 shadow-xs mb-3.5">
+      <TouchableOpacity
+        onPress={() => onSwitchTab('chart')}
+        activeOpacity={0.8}
+        className={`flex-1 py-2 rounded-xl flex-row items-center justify-center gap-2 ${
+          isChart
+            ? 'bg-white dark:bg-slate-700'
+            : 'bg-transparent'
+        }`}
+      >
+        <Icon
+          name="trending-up"
+          type="Feather"
+          size={12}
+          color={isChart ? '#7c3aed' : '#94a3b8'}
+        />
+        <Text
+          className={`text-xs ${
+            isChart
+              ? 'font-extrabold text-brand-600 dark:text-brand-300'
+              : 'font-semibold text-slate-500 dark:text-slate-400'
+          }`}
+        >
+          Analytics & Chart
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => onSwitchTab('listing')}
+        activeOpacity={0.8}
+        className={`flex-1 py-2 rounded-xl flex-row items-center justify-center gap-2 ${
+          !isChart
+            ? 'bg-white dark:bg-slate-700'
+            : 'bg-transparent'
+        }`}
+      >
+        <Icon
+          name="list"
+          type="Feather"
+          size={12}
+          color={!isChart ? '#7c3aed' : '#94a3b8'}
+        />
+        <Text
+          className={`text-xs ${
+            !isChart
+              ? 'font-extrabold text-brand-600 dark:text-brand-300'
+              : 'font-semibold text-slate-500 dark:text-slate-400'
+          }`}
+        >
+          Details & Reports
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/modules/ManagementReport/index.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  RefreshControl,
+  Alert,
+  View,
+  Text,
+  ActivityIndicator,
+} from 'react-native';
+import {
+  useManagementReportStore,
+  ServerErrorWrapper,
+} from '@suflon/native-ui';
+import { ManagementReportHeader } from './components/ManagementReportHeader';
+import { KpiMetricsGrid } from './components/KpiMetricsGrid';
+import { AnalyticsChartView } from './components/AnalyticsChartView';
+import { DetailsListingView } from './components/DetailsListingView';
+
+interface ManagementReportScreenProps {
+  onBackPress?: () => void;
+  navigation?: any;
+  route?: any;
+}
+
+const ManagementReportScreen: React.FC<ManagementReportScreenProps> = ({
+  onBackPress,
+  navigation,
+  route,
+}) => {
+  const handleBack = onBackPress || route?.params?.onBackPress || navigation?.goBack;
+  const {
+    detailLoading,
+    executingLoading,
+    errorStatus,
+    managementReports,
+    selectedReport,
+    selectedReportDetails,
+    activeCategory,
+    selectedReportId,
+    searchQuery,
+    reportExecutionData,
+    getManagementReports,
+    getManagementReportById,
+    setActiveCategory,
+    setSelectedReportId,
+    setSearchQuery,
+  } = useManagementReportStore();
+
+  const [refreshing, setRefreshing] = useState(false);
+  const [selectedDoctor, setSelectedDoctor] = useState<string>('ALL');
+
+  // Fetch reports on mount
+  useEffect(() => {
+    getManagementReports(true);
+  }, []);
+
+  // Pull to refresh handler
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await getManagementReports(true);
+    if (selectedReportId) {
+      await getManagementReportById(selectedReportId, true);
+    }
+    setRefreshing(false);
+  }, [getManagementReports, getManagementReportById, selectedReportId]);
+
+  // Reports in active category
+  const categoryReports = useMemo(() => {
+    if (!managementReports || managementReports.length === 0) return [];
+    return managementReports.filter(
+      (r) => r.mgmt_report_type?.toUpperCase() === activeCategory?.toUpperCase()
+    );
+  }, [managementReports, activeCategory]);
+
+  // Report counts per category
+  const categoryCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    (managementReports || []).forEach((r) => {
+      const type = r.mgmt_report_type?.toUpperCase() || 'OTHER';
+      counts[type] = (counts[type] || 0) + 1;
+    });
+    return counts;
+  }, [managementReports]);
+
+  // Extract unique doctors dynamically from loaded dataset
+  const availableDoctors = useMemo(() => {
+    const docSet = new Set<string>();
+    Object.values(reportExecutionData || {}).forEach((rows) => {
+      if (Array.isArray(rows)) {
+        rows.forEach((r: any) => {
+          const doc = r?.staff || r?.doctor || r?.consultant;
+          if (doc && typeof doc === 'string' && doc.trim() !== '' && doc !== '-') {
+            docSet.add(doc.trim());
+          }
+        });
+      }
+    });
+    return Array.from(docSet);
+  }, [reportExecutionData]);
+
+  // Export report action
+  const handleExport = useCallback(() => {
+    Alert.alert(
+      'Export Report Dataset',
+      `Exporting data for ${selectedReport?.name || activeCategory} module.`,
+      [{ text: 'OK' }]
+    );
+  }, [selectedReport, activeCategory]);
+
+  const screenTitle = selectedReport?.name
+    ? `${selectedReport.name} Reports`
+    : 'Reports Catalog';
+  const screenSubtitle = `${activeCategory} Management Module`;
+
+  return (
+    <SafeAreaView className="flex-1 bg-slate-50 dark:bg-background-lightBlack">
+      <ServerErrorWrapper
+        errorStatus={errorStatus}
+        onRetry={handleRefresh}
+      >
+        {/* Sticky Management Header & Tabs */}
+        <ManagementReportHeader
+          title={screenTitle}
+          subtitle={screenSubtitle}
+          activeCategory={activeCategory}
+          onSelectCategory={setActiveCategory}
+          categoryReports={categoryReports}
+          selectedReportId={selectedReportId}
+          onSelectReport={setSelectedReportId}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onBackPress={handleBack}
+          onRefresh={handleRefresh}
+          onExport={handleExport}
+          selectedDoctor={selectedDoctor}
+          onSelectDoctor={setSelectedDoctor}
+          availableDoctors={availableDoctors}
+          categoryCounts={categoryCounts}
+        />
+
+        {/* Main Content Area */}
+        <ScrollView
+          className="flex-1 px-3.5 pt-3.5 space-y-3.5"
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 40 }}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={handleRefresh}
+              colors={['#7c3aed']}
+              tintColor="#7c3aed"
+            />
+          }
+        >
+          {detailLoading ? (
+            /* Centered Lower Content Loader during Tab Switching */
+            <View className="py-20 items-center justify-center">
+              <View className="w-12 h-12 rounded-2xl bg-violet-50 dark:bg-slate-800 items-center justify-center mb-3">
+                <ActivityIndicator size="small" color="#7c3aed" />
+              </View>
+              <Text className="text-xs font-bold text-slate-800 dark:text-slate-200">
+                Fetching Report Data
+              </Text>
+              <Text className="text-[10px] text-slate-400 mt-0.5">
+                Loading {selectedReport?.name || activeCategory} metrics & charts...
+              </Text>
+            </View>
+          ) : (
+            /* Sequential Content Flow: KPIs -> Charts -> Listing Tables */
+            <>
+              {/* SECTION 1: Key Performance Overview Cards */}
+              <KpiMetricsGrid
+                details={selectedReportDetails}
+                executionData={reportExecutionData}
+                loading={executingLoading}
+              />
+
+              {/* SECTION 2: Analytics Charts */}
+              <AnalyticsChartView
+                details={selectedReportDetails}
+                executionData={reportExecutionData}
+                loading={executingLoading}
+              />
+
+              {/* SECTION 3: Records Listing & Tables */}
+              <DetailsListingView
+                details={selectedReportDetails}
+                executionData={reportExecutionData}
+                searchQuery={searchQuery}
+                doctorFilter={selectedDoctor}
+                loading={executingLoading}
+              />
+            </>
+          )}
+        </ScrollView>
+      </ServerErrorWrapper>
+    </SafeAreaView>
+  );
+};
+
+export default ManagementReportScreen;

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} />;