@suflon/rnmd-reporting 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suflon/rnmd-reporting",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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 };
@@ -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 {

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

@@ -10,7 +10,7 @@ import {
   useColorScheme,
 } from 'react-native';
 import { Icon } from '@suflon/native-ui';
-import { themeColors } from '@/theme/colors';
+import { themeColors } from '../../../theme/colors';
 
 interface DoctorFilterDropdownProps {
   selectedDoctor: string;

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

@@ -2,7 +2,7 @@ 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 { 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';
 

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;