@suflon/rnmd-reporting 0.0.3 → 0.0.5

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

@@ -0,0 +1,157 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  TouchableWithoutFeedback,
+  Dimensions,
+  ScrollView,
+  useColorScheme,
+} from 'react-native';
+import { Icon } from '@suflon/native-ui';
+import { themeColors } from '../../../theme/colors';
+
+interface DoctorFilterDropdownProps {
+  selectedDoctor: string;
+  onSelectDoctor: (doctor: string) => void;
+  availableDoctors: string[];
+}
+
+export const DoctorFilterDropdown: React.FC<DoctorFilterDropdownProps> = ({
+  selectedDoctor,
+  onSelectDoctor,
+  availableDoctors,
+}) => {
+  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 hasFilter = selectedDoctor !== 'ALL' && selectedDoctor !== '';
+  const screenWidth = Dimensions.get('window').width;
+  const rightOffset = Math.max(16, screenWidth - (coords.x + coords.width));
+
+  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>
+
+              <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);
+                      }}
+                      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={{
+                          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>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+};

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

@@ -0,0 +1,183 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text, ActivityIndicator, useColorScheme } from 'react-native';
+import {
+  IManagementReportDetail,
+  useManagementReportStore,
+} from '@suflon/native-ui';
+import { TimeframeDropdown, TimeframeOption, getTimeframeDateFilter } from './TimeframeDropdown';
+
+interface KpiMetricsGridProps {
+  details: IManagementReportDetail[];
+  executionData: Record<number, any[]>;
+  loading?: boolean;
+}
+
+function extractMetricValue(
+  data: any[],
+  item: IManagementReportDetail,
+  index: number
+): { value: string; subtext?: string } {
+  if (data && data.length > 0) {
+    const first = data[0];
+    if (typeof first === 'number' || typeof first === 'string') {
+      return { value: String(first) };
+    }
+
+    if (typeof first === 'object' && first !== null) {
+      const val =
+        first.value ??
+        first.total ??
+        first.count ??
+        first.net_amount ??
+        first.paid_amount ??
+        first.stock_value ??
+        first.total_value ??
+        first.total_count ??
+        first.stock_count ??
+        first.amount ??
+        first.total_amount ??
+        first.volume ??
+        first[Object.keys(first)[0]];
+
+      const label = first.label || first.name || item.report?.description;
+
+      if (val !== undefined && val !== null && val !== '') {
+        const formatted =
+          typeof val === 'number'
+            ? val > 1000
+              ? `₹${val.toLocaleString()}`
+              : val.toLocaleString()
+            : String(val);
+        return { value: formatted, subtext: label };
+      }
+    }
+
+    return { value: String(data.length) };
+  }
+
+  return { value: '0', subtext: item.report?.description || 'No data recorded' };
+}
+
+const KpiCardItem: React.FC<{
+  item: IManagementReportDetail;
+  index: number;
+  data: any[];
+  loading: boolean;
+}> = ({ item, index, data, loading }) => {
+  const isDark = useColorScheme() === 'dark';
+  const [timeframe, setTimeframe] = useState<TimeframeOption>('Monthly');
+  const [fetching, setFetching] = useState(false);
+
+  const executeReportItem = useManagementReportStore((s) => s.executeReportItem);
+
+  const handleSelectTimeframe = useCallback(
+    async (selectedTf: TimeframeOption) => {
+      setTimeframe(selectedTf);
+      if (item.report_id) {
+        setFetching(true);
+        const dateFilter = getTimeframeDateFilter(selectedTf);
+        const state = useManagementReportStore.getState();
+        const origin = (state.selectedReport?.mgmt_report_type || state.activeCategory || 'opd').toLowerCase();
+        await executeReportItem(
+          item.report_id,
+          item.report?.is_dynamic || false,
+          { filters: dateFilter },
+          origin,
+          true
+        );
+        setFetching(false);
+      }
+    },
+    [item, executeReportItem]
+  );
+
+  const metric = extractMetricValue(data, item, index);
+  const isBusy = loading || fetching;
+
+  return (
+    <View className="w-1/2 p-1">
+      <View className="p-3 rounded-2xl bg-white dark:bg-background-darkSecondaryBg border border-slate-100 dark:border-slate-800 justify-between min-h-[95px]">
+        {/* Top Header: Title & Timeframe Selector */}
+        <View className="flex-row items-center justify-between mb-1.5">
+          <Text
+            style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
+            className="text-[11px] font-extrabold flex-1 mr-1"
+            numberOfLines={1}
+          >
+            {item.report?.name || item.report_num}
+          </Text>
+
+          <TimeframeDropdown
+            value={timeframe}
+            onChange={handleSelectTimeframe}
+            size="sm"
+          />
+        </View>
+
+        {/* Value Display */}
+        <View className="pt-0.5">
+          {isBusy ? (
+            <View className="py-1">
+              <ActivityIndicator size="small" color="#7c3aed" />
+            </View>
+          ) : (
+            <Text
+              style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
+              className="text-2xl font-black tracking-tight"
+            >
+              {metric.value}
+            </Text>
+          )}
+          <Text
+            style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }}
+            className="text-[9px] font-semibold mt-0.5"
+            numberOfLines={1}
+          >
+            {metric.subtext || item.report?.description || 'Synchronized Metric'}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export const KpiMetricsGrid: React.FC<KpiMetricsGridProps> = ({
+  details,
+  executionData,
+  loading = false,
+}) => {
+  const isDark = useColorScheme() === 'dark';
+  const cardDetails = details.filter(
+    (d) => d.display_size === 'XS' || d.report?.report_type === 'CARD'
+  );
+
+  if (cardDetails.length === 0) return null;
+
+  return (
+    <View className="mb-3.5">
+      <View className="flex-row items-center justify-between mb-2">
+        <Text
+          style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }}
+          className="text-[10px] font-extrabold uppercase tracking-wider"
+        >
+          Key Performance Overview
+        </Text>
+        <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
+          {cardDetails.length} Metrics Live
+        </Text>
+      </View>
+
+      <View className="flex-row flex-wrap -mx-1">
+        {cardDetails.map((item, index) => (
+          <KpiCardItem
+            key={item.id}
+            item={item}
+            index={index}
+            data={executionData[item.report_id] || []}
+            loading={loading}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import { BottomModal, ModalTitle } from '@suflon/native-ui';
+
+export interface FilterValues {
+  doctor: string;
+}
+
+export interface ManagementFilterModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onApply: (filters: FilterValues) => void;
+  onReset: () => void;
+  currentFilters?: FilterValues;
+}
+
+const DOCTORS = [
+  'ALL',
+  'william s smith',
+  'William A Smith',
+  'Usman Shaikh',
+  'Usman Bin Shaikh',
+  'Amit Kumar Sharma',
+  'Aarif Ab Chaudhary',
+  'Sohail Shaikh',
+  'Prod test doctor',
+];
+
+export const ManagementFilterModal: React.FC<ManagementFilterModalProps> = ({
+  visible,
+  onClose,
+  onApply,
+  onReset,
+  currentFilters,
+}) => {
+  const [selectedDoctor, setSelectedDoctor] = useState<string>(
+    currentFilters?.doctor || 'ALL'
+  );
+
+  useEffect(() => {
+    if (currentFilters?.doctor) {
+      setSelectedDoctor(currentFilters.doctor);
+    }
+  }, [currentFilters]);
+
+  const handleApply = () => {
+    onApply({
+      doctor: selectedDoctor,
+    });
+    onClose();
+  };
+
+  const handleReset = () => {
+    setSelectedDoctor('ALL');
+    onReset();
+    onClose();
+  };
+
+  return (
+    <BottomModal
+      isVisible={visible}
+      onClose={onClose}
+      heightMode="auto"
+    >
+      <View className="px-5 pb-6 pt-1 space-y-4">
+        {/* Header with Title and Close Button */}
+        <ModalTitle
+          heading="Filter Reports"
+          showCloseIcon={true}
+          onClose={onClose}
+        />
+
+        {/* Doctor Selection Section */}
+        <View className="space-y-2">
+          <Text className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
+            Select Doctor / Staff
+          </Text>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{ gap: 8 }}
+            className="py-1"
+          >
+            {DOCTORS.map((doc) => {
+              const isSelected = selectedDoctor.toLowerCase() === doc.toLowerCase();
+              return (
+                <TouchableOpacity
+                  key={doc}
+                  onPress={() => setSelectedDoctor(doc)}
+                  activeOpacity={0.8}
+                  className={`px-3.5 py-2 rounded-2xl border ${
+                    isSelected
+                      ? 'bg-violet-600 border-violet-600'
+                      : 'bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700'
+                  }`}
+                >
+                  <Text
+                    className={`text-xs ${
+                      isSelected
+                        ? 'font-bold text-white'
+                        : 'font-medium text-slate-700 dark:text-slate-300'
+                    }`}
+                  >
+                    {doc === 'ALL' ? 'All Doctors' : doc}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
+
+        {/* Action Buttons: Apply and Clear */}
+        <View className="flex-row items-center gap-3 pt-2">
+          <TouchableOpacity
+            onPress={handleReset}
+            activeOpacity={0.8}
+            className="flex-1 py-3 rounded-2xl bg-slate-100 dark:bg-slate-800 items-center justify-center border border-slate-200 dark:border-slate-700"
+          >
+            <Text className="text-xs font-bold text-slate-700 dark:text-slate-300">
+              Clear Filter
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={handleApply}
+            activeOpacity={0.8}
+            className="flex-1 py-3 rounded-2xl bg-violet-600 items-center justify-center shadow-lg shadow-violet-500/25"
+          >
+            <Text className="text-xs font-bold text-white">
+              Apply Filter
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </BottomModal>
+  );
+};

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, TextInput, useColorScheme } from 'react-native';
+import {
+  IManagementReport,
+  Icon,
+} from '@suflon/native-ui';
+import { CategoryTabs } from './CategoryTabs';
+import { SubModuleTabs } from './SubModuleTabs';
+import { DoctorFilterDropdown } from './DoctorFilterDropdown';
+
+interface ManagementReportHeaderProps {
+  title: string;
+  subtitle?: string;
+  activeCategory: string;
+  onSelectCategory: (category: string) => void;
+  categoryReports: IManagementReport[];
+  selectedReportId: number | null;
+  onSelectReport: (id: number) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onBackPress?: () => void;
+  onRefresh?: () => void;
+  onExport?: () => void;
+  selectedDoctor: string;
+  onSelectDoctor: (doctor: string) => void;
+  availableDoctors: string[];
+  categoryCounts?: Record<string, number>;
+}
+
+export const ManagementReportHeader: React.FC<ManagementReportHeaderProps> = ({
+  title,
+  activeCategory,
+  onSelectCategory,
+  categoryReports,
+  selectedReportId,
+  onSelectReport,
+  searchQuery,
+  onSearchChange,
+  onBackPress,
+  selectedDoctor,
+  onSelectDoctor,
+  availableDoctors,
+  categoryCounts,
+}) => {
+  const isDark = useColorScheme() === 'dark';
+
+  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>
+
+      {/* 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>
+
+        <DoctorFilterDropdown
+          selectedDoctor={selectedDoctor}
+          onSelectDoctor={onSelectDoctor}
+          availableDoctors={availableDoctors}
+        />
+      </View>
+
+      {/* 3. Category Carousel Tabs (OPD, PRESCRIPTION, SALES, etc.) */}
+      <View className="mb-1">
+        <CategoryTabs
+          activeCategory={activeCategory}
+          onSelectCategory={onSelectCategory}
+          reportCounts={categoryCounts}
+        />
+      </View>
+
+      {/* 4. Sub-Module Report Tabs (Symptoms, Medicines, Diagnoses, etc.) */}
+      <SubModuleTabs
+        reports={categoryReports}
+        selectedReportId={selectedReportId}
+        onSelectReport={onSelectReport}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ScrollView, TouchableOpacity, Text, View } from 'react-native';
+import { IManagementReport } from '@suflon/native-ui';
+
+interface SubModuleTabsProps {
+  reports: IManagementReport[];
+  selectedReportId: number | null;
+  onSelectReport: (id: number) => void;
+}
+
+export const SubModuleTabs: React.FC<SubModuleTabsProps> = ({
+  reports,
+  selectedReportId,
+  onSelectReport,
+}) => {
+  if (!reports || reports.length <= 1) return null;
+
+  return (
+    <View className="py-0.5">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: 6 }}
+      >
+        {reports.map((report) => {
+          const isSelected = selectedReportId === report.id;
+
+          return (
+            <TouchableOpacity
+              key={report.id}
+              onPress={() => onSelectReport(report.id)}
+              activeOpacity={0.8}
+              style={{
+                borderBottomColor: isSelected ? '#7c3aed' : 'transparent',
+                borderBottomWidth: isSelected ? 2 : 0,
+              }}
+              className={`px-2.5 py-1.5 rounded-lg ${
+                isSelected
+                  ? 'bg-violet-50 dark:bg-slate-800'
+                  : 'bg-transparent'
+              }`}
+            >
+              <Text
+                style={{
+                  color: isSelected ? '#7c3aed' : '#94a3b8',
+                  fontWeight: isSelected ? '700' : '500',
+                }}
+                className="text-xs"
+              >
+                {report.name}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};