@suflon/rnmd-reporting 0.0.3 → 0.0.5

package/src/index.ts

@@ -3,3 +3,4 @@ export { default as Reporting } from './modules/Reporting';
 export { default as ReportingDetail } from './modules/Reporting/component/ReportingDetail';
 export { default as ReportChart } from './modules/Reporting/component/ReportChart';
 export { default as ReportFilterModal } from './modules/Reporting/component/ReportFilterModal';
+export { default as ManagementReport } from './modules/ManagementReport';

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

@@ -0,0 +1,530 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  useColorScheme,
+  Dimensions,
+} from 'react-native';
+import Svg, { Path, Circle, Defs, LinearGradient, Stop, Line as SvgLine } from 'react-native-svg';
+import {
+  IManagementReportDetail,
+  Icon,
+  useManagementReportStore,
+} from '@suflon/native-ui';
+import { TimeframeDropdown, TimeframeOption, getTimeframeDateFilter } from './TimeframeDropdown';
+
+interface AnalyticsChartViewProps {
+  details: IManagementReportDetail[];
+  executionData: Record<number, any[]>;
+  loading?: boolean;
+}
+
+interface ChartItemData {
+  label: string;
+  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 [];
+
+  return rows.map((r, i) => {
+    if (typeof r === 'number') {
+      return { label: `Item ${i + 1}`, value: r };
+    }
+
+    if (typeof r === 'object' && r !== null) {
+      const keys = Object.keys(r);
+      const labelKey =
+        keys.find((k) =>
+          [
+            'date',
+            'month',
+            'day',
+            'label',
+            'name',
+            'status',
+            'type',
+            'department',
+            'category',
+            'group_key',
+            'appointment_type',
+            'severity',
+          ].includes(k.toLowerCase())
+        ) || keys[0];
+
+      const valueKey =
+        keys.find((k) =>
+          [
+            'count',
+            'total',
+            'value',
+            'amount',
+            'total_amount',
+            'net_amount',
+            'sum',
+            'metric_value',
+            'patients',
+          ].includes(k.toLowerCase())
+        ) || keys[1] || keys[0];
+
+      const val = Number(r[valueKey]) || 0;
+      const rawLbl = String(r[labelKey] || `Item ${i + 1}`);
+
+      return { label: formatLabel(rawLbl), value: val };
+    }
+
+    return { label: `Item ${i + 1}`, value: 0 };
+  });
+}
+
+const SingleChartCard: React.FC<{
+  detail: IManagementReportDetail;
+  rows: any[];
+  loading: boolean;
+}> = ({ detail, rows, loading }) => {
+  const isDark = useColorScheme() === 'dark';
+  const [timeframe, setTimeframe] = useState<TimeframeOption>('Monthly');
+  const [chartType, setChartType] = useState<'bar' | 'line' | 'trend'>('bar');
+  const [fetching, setFetching] = useState(false);
+
+  const executeReportItem = useManagementReportStore((s) => s.executeReportItem);
+
+  const handleSelectTimeframe = useCallback(
+    async (selectedTf: TimeframeOption) => {
+      setTimeframe(selectedTf);
+      if (detail.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(
+          detail.report_id,
+          detail.report?.is_dynamic || false,
+          { filters: dateFilter },
+          origin,
+          true
+        );
+        setFetching(false);
+      }
+    },
+    [detail, executeReportItem]
+  );
+
+  const chartData = useMemo(() => parseChartData(rows), [rows]);
+  const maxValue = useMemo(
+    () => Math.max(...chartData.map((d) => d.value), 1),
+    [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">
+      {/* Header: Title & Timeframe Selector */}
+      <View className="flex-row items-center justify-between mb-3 pb-2 border-b border-slate-100 dark:border-slate-800">
+        <Text
+          style={{ color: isDark ? '#FFFFFF' : '#0F172A' }}
+          className="text-sm font-extrabold tracking-tight flex-1 mr-2"
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+
+        <View className="flex-row items-center gap-1.5 shrink-0">
+          {/* Chart Type Selector */}
+          <View className="p-0.5 rounded-xl bg-slate-100 dark:bg-slate-800 flex-row items-center">
+            <TouchableOpacity
+              onPress={() => setChartType('bar')}
+              activeOpacity={0.8}
+              className={`p-1 rounded-lg ${chartType === 'bar' ? 'bg-white dark:bg-slate-700 shadow-sm' : 'bg-transparent'}`}
+            >
+              <Icon
+                name="bar-chart-2"
+                type="Feather"
+                size={11}
+                color={chartType === 'bar' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setChartType('line')}
+              activeOpacity={0.8}
+              className={`p-1 rounded-lg ${chartType === 'line' ? 'bg-white dark:bg-slate-700 shadow-sm' : 'bg-transparent'}`}
+            >
+              <Icon
+                name="activity"
+                type="Feather"
+                size={11}
+                color={chartType === 'line' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setChartType('trend')}
+              activeOpacity={0.8}
+              className={`p-1 rounded-lg ${chartType === 'trend' ? 'bg-white dark:bg-slate-700 shadow-sm' : 'bg-transparent'}`}
+            >
+              <Icon
+                name="trending-up"
+                type="Feather"
+                size={11}
+                color={chartType === 'trend' ? '#7c3aed' : (isDark ? '#9CA3AF' : '#94a3b8')}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {/* Timeframe Dropdown */}
+          <TimeframeDropdown
+            value={timeframe}
+            onChange={handleSelectTimeframe}
+          />
+        </View>
+      </View>
+
+      {/* Chart Visual Surface */}
+      {isBusy ? (
+        <View className="h-44 items-center justify-center">
+          <ActivityIndicator size="small" color="#7c3aed" />
+          <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] font-semibold mt-2">
+            Fetching chart metrics...
+          </Text>
+        </View>
+      ) : chartData.length === 0 ? (
+        <View className="h-36 items-center justify-center rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-background-lightBlack">
+          <Icon name="bar-chart-2" type="Feather" size={20} color="#94a3b8" />
+          <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-bold mt-1.5">No metrics recorded</Text>
+          <Text style={{ color: isDark ? '#9CA3AF' : '#94A3B8' }} className="text-[10px] text-center mt-0.5">
+            Try adjusting your timeframe filter.
+          </Text>
+        </View>
+      ) : (
+        <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}
+                >
+                  {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
+                    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>
+
+                            <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.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">
+                {chartType === 'bar' ? `${timeframe} Comparison` : chartType === 'line' ? 'Line Trajectory' : 'Trend Area'}
+              </Text>
+            </View>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export const AnalyticsChartView: React.FC<AnalyticsChartViewProps> = ({
+  details,
+  executionData,
+  loading = false,
+}) => {
+  const chartDetails = details.filter(
+    (d) =>
+      d.display_size === 'MD' ||
+      d.report?.report_type === 'CHART' ||
+      d.report?.report_type === 'SUMMARY'
+  );
+
+  if (chartDetails.length === 0) return null;
+
+  return (
+    <View className="space-y-3.5">
+      {chartDetails.map((detail) => (
+        <SingleChartCard
+          key={detail.id || detail.report_id}
+          detail={detail}
+          rows={executionData[detail.report_id] || []}
+          loading={loading}
+        />
+      ))}
+    </View>
+  );
+};

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { ScrollView, TouchableOpacity, View, Text } from 'react-native';
+import { Icon } from '@suflon/native-ui';
+
+export interface CategoryItem {
+  id: string;
+  name: string;
+  icon: string;
+  type: string;
+}
+
+export const CATEGORIES_DATA: CategoryItem[] = [
+  { id: 'OPD', name: 'OPD', icon: 'calendar', type: 'Feather' },
+  { id: 'PRESCRIPTION', name: 'PRESCRIPTION', icon: 'file-text', type: 'Feather' },
+  { id: 'SALES', name: 'SALES', icon: 'pie-chart', type: 'Feather' },
+  { id: 'PURCHASE', name: 'PURCHASE', icon: 'package', type: 'Feather' },
+  { id: 'TRANSACTION', name: 'TRANSACTION', icon: 'credit-card', type: 'Feather' },
+];
+
+interface CategoryTabsProps {
+  activeCategory: string;
+  onSelectCategory: (category: string) => void;
+  reportCounts?: Record<string, number>;
+}
+
+export const CategoryTabs: React.FC<CategoryTabsProps> = ({
+  activeCategory,
+  onSelectCategory,
+  reportCounts = {},
+}) => {
+  return (
+    <View className="py-0.5">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: 8 }}
+      >
+        {CATEGORIES_DATA.map((cat) => {
+          const isActive = activeCategory === cat.id;
+          const count = reportCounts[cat.id];
+
+          return (
+            <TouchableOpacity
+              key={cat.id}
+              onPress={() => onSelectCategory(cat.id)}
+              activeOpacity={0.8}
+              className={`px-3.5 py-1.5 rounded-xl flex-row items-center gap-1.5 border ${
+                isActive
+                  ? 'bg-violet-600 border-violet-600'
+                  : 'bg-white dark:bg-slate-800/90 border-slate-200/60 dark:border-slate-700/60'
+              }`}
+            >
+              <Icon
+                name={cat.icon}
+                type={cat.type as any}
+                size={12}
+                color={isActive ? '#FFFFFF' : '#94a3b8'}
+              />
+              <Text
+                style={{ color: isActive ? '#FFFFFF' : '#94a3b8' }}
+                className={`text-xs ${isActive ? 'font-bold' : 'font-normal'}`}
+              >
+                {cat.name}
+              </Text>
+              {count !== undefined && count > 0 && (
+                <View
+                  className={`px-1.5 py-0.5 rounded-full ${
+                    isActive ? 'bg-white/20' : 'bg-slate-100 dark:bg-slate-700'
+                  }`}
+                >
+                  <Text
+                    style={{ color: isActive ? '#FFFFFF' : '#94a3b8' }}
+                    className={`text-[9px] ${isActive ? 'font-bold' : 'font-normal'}`}
+                  >
+                    {count}
+                  </Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};