@suflon/rnmd-reporting 0.0.3 → 0.0.4

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,294 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  useColorScheme,
+} from 'react-native';
+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 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',
+          ].includes(k.toLowerCase())
+        ) || keys[0];
+
+      const valueKey =
+        keys.find((k) =>
+          [
+            'count',
+            'total',
+            'value',
+            'amount',
+            'total_amount',
+            'net_amount',
+            'sum',
+            'metric_value',
+          ].includes(k.toLowerCase())
+        ) || keys[1] || keys[0];
+
+      const val = Number(r[valueKey]) || 0;
+      const lbl = String(r[labelKey] || `Item ${i + 1}`);
+
+      return { label: lbl, 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]
+  );
+
+  const isBusy = loading || fetching;
+  const title = detail.report?.name || detail.report_num || 'Performance Metric';
+
+  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-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 }}
+                >
+                  {/* 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 */}
+                  <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'
+                    }`}
+                  />
+
+                  {/* 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>
+
+          {/* Subtitle / Legend Footer */}
+          <View className="flex-row items-center justify-between pt-2 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
+              </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>
+  );
+};