@suflon/rnmd-reporting 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suflon/rnmd-reporting",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "repository": {
     "type": "git",

package/patches/@suflon+native-ui+0.0.18.patch

@@ -19058,10 +19058,10 @@ index 0000000..5b11a80
 +export default ReportingDetail;
 diff --git a/node_modules/@suflon/native-ui/src/modules/Reporting/index.tsx b/node_modules/@suflon/native-ui/src/modules/Reporting/index.tsx
 new file mode 100644
-index 0000000..9c355ad
+index 0000000..98773be
 --- /dev/null
 +++ b/node_modules/@suflon/native-ui/src/modules/Reporting/index.tsx
-@@ -0,0 +1,264 @@
+@@ -0,0 +1,249 @@
 +import React, { useEffect, useState, useMemo, useCallback } from 'react';
 +import { ScrollView, TouchableOpacity, View, Text, SafeAreaView, useColorScheme } from 'react-native';
 +import { useNavigation } from '@react-navigation/native';
@@ -19144,7 +19144,7 @@ index 0000000..9c355ad
 +    const iconMutedColor = isDark ? '#9CA3AF' : themeColors.slate[400];
 +
 +    return (
-+        <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#141518' : '#F8FAFC' }}>
++        <SafeAreaView className="flex-1 bg-slate-50 dark:bg-background-lightBlack">
 +            {/* Header Component */}
 +            <Header
 +                title="Reports Catalog"
@@ -19152,9 +19152,9 @@ index 0000000..9c355ad
 +                showActionIcon={false}
 +            />
 +
-+            <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 30 }}>
++            <ScrollView className="flex-1" contentContainerStyle={{ paddingBottom: 30 }}>
 +                {/* Search Bar */}
-+                <View style={{ paddingHorizontal: 16, paddingTop: 14 }}>
++                <View className="px-4 pt-3.5">
 +                    <SearchFilter
 +                        placeholder="Search reports or creator..."
 +                        value={searchQuery}
@@ -19164,12 +19164,12 @@ index 0000000..9c355ad
 +
 +                {/* Quick Access Featured Carousel */}
 +                {featuredPicks.length > 0 && (
-+                    <View style={{ paddingTop: 16 }}>
-+                        <View style={{ paddingHorizontal: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
-+                            <Text style={{ fontSize: 11, fontWeight: '800', color: isDark ? '#9CA3AF' : '#94A3B8', letterSpacing: 1 }}>
++                    <View className="pt-4">
++                        <View className="px-4 flex-row justify-between items-center mb-2.5">
++                            <Text className="text-[11px] font-extrabold text-slate-400 dark:text-gray-400 tracking-wider">
 +                                FEATURED REPORTS
 +                            </Text>
-+                            <Text style={{ fontSize: 11, fontWeight: '700', color: isDark ? '#A78BFA' : themeColors.brand[600] }}>
++                            <Text className="text-[11px] font-bold text-violet-600 dark:text-violet-400">
 +                                Swipe ➔
 +                            </Text>
 +                        </View>
@@ -19180,23 +19180,15 @@ index 0000000..9c355ad
 +                                    key={pick.id || i}
 +                                    onPress={() => handleReportPress(pick)}
 +                                    activeOpacity={0.8}
-+                                    style={{
-+                                        width: 170,
-+                                        backgroundColor: isDark ? '#1C1C1E' : '#FFFFFF',
-+                                        borderColor: isDark ? '#2C2C2E' : '#E2E8F0',
-+                                        borderWidth: 1,
-+                                        borderRadius: 16,
-+                                        padding: 12,
-+                                        gap: 6,
-+                                    }}
++                                    className="w-[170px] bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3 border border-slate-200 dark:border-gray-800 gap-1.5"
 +                                >
-+                                    <View style={{ width: 28, height: 28, borderRadius: 8, backgroundColor: isDark ? '#2E1065' : '#F5F3FF', alignItems: 'center', justifyContent: 'center' }}>
++                                    <View className="w-7 h-7 rounded-lg bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
 +                                        <Icon name="bar-chart-2" type="Feather" size={16} color={iconBrandColor} />
 +                                    </View>
-+                                    <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A', fontSize: 12, fontWeight: '800' }} numberOfLines={1}>
++                                    <Text className="text-xs font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
 +                                        {pick.name}
 +                                    </Text>
-+                                    <Text style={{ color: isDark ? '#9CA3AF' : '#64748B', fontSize: 10, fontWeight: '600' }} numberOfLines={1}>
++                                    <Text className="text-[9px] font-semibold text-slate-500 dark:text-gray-400" numberOfLines={1}>
 +                                        {pick.sub_report_class ? SUB_CLASS_LABEL_MAP[pick.sub_report_class] || pick.sub_report_class : 'Report'}
 +                                    </Text>
 +                                </TouchableOpacity>
@@ -19206,7 +19198,7 @@ index 0000000..9c355ad
 +                )}
 +
 +                {/* Category Pills Switcher - Dynamic from response */}
-+                <View style={{ paddingTop: 16 }}>
++                <View className="pt-4">
 +                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
 +                        {categoryTabs.map((tab) => {
 +                            const isActive = activeTabId === tab.id;
@@ -19218,17 +19210,11 @@ index 0000000..9c355ad
 +                                    key={tab.id}
 +                                    onPress={() => setActiveTabId(tab.id)}
 +                                    activeOpacity={0.8}
-+                                    style={{
-+                                        backgroundColor: isActive ? themeColors.brand[600] : (isDark ? '#1C1C1E' : '#FFFFFF'),
-+                                        borderColor: isActive ? themeColors.brand[600] : (isDark ? '#2C2C2E' : '#E2E8F0'),
-+                                        borderWidth: 1,
-+                                        borderRadius: 9999,
-+                                        paddingHorizontal: 14,
-+                                        paddingVertical: 8,
-+                                        flexDirection: 'row',
-+                                        alignItems: 'center',
-+                                        gap: 6,
-+                                    }}
++                                    className={`flex-row items-center gap-1.5 px-3.5 py-2 rounded-full border ${
++                                        isActive
++                                            ? 'bg-violet-600 border-violet-600'
++                                            : 'bg-white dark:bg-background-darkSecondaryBg border-slate-200 dark:border-gray-800'
++                                    }`}
 +                                >
 +                                    <Icon
 +                                        name={tab.icon}
@@ -19237,20 +19223,27 @@ index 0000000..9c355ad
 +                                        color={isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : themeColors.slate[600])}
 +                                    />
 +                                    <Text
-+                                        style={{ color: isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : '#334155'), fontSize: 11, fontWeight: '700' }}
++                                        className={`text-[11px] font-bold ${
++                                            isActive
++                                                ? 'text-white'
++                                                : 'text-slate-700 dark:text-gray-200'
++                                        }`}
 +                                    >
 +                                        {tab.label}
 +                                    </Text>
 +                                    <View
-+                                        style={{
-+                                            backgroundColor: isActive ? 'rgba(255, 255, 255, 0.25)' : (isDark ? '#2C2C2E' : '#F1F5F9'),
-+                                            borderRadius: 9999,
-+                                            paddingHorizontal: 6,
-+                                            paddingVertical: 2,
-+                                        }}
++                                        className={`rounded-full px-1.5 py-0.5 ${
++                                            isActive
++                                                ? 'bg-white/25'
++                                                : 'bg-slate-100 dark:bg-gray-800'
++                                        }`}
 +                                    >
 +                                        <Text
-+                                            style={{ color: isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : '#475569'), fontSize: 9, fontWeight: '800' }}
++                                            className={`text-[9px] font-extrabold ${
++                                                isActive
++                                                    ? 'text-white'
++                                                    : 'text-slate-600 dark:text-gray-300'
++                                            }`}
 +                                        >
 +                                            {count}
 +                                        </Text>
@@ -19262,14 +19255,14 @@ index 0000000..9c355ad
 +                </View>
 +
 +                {/* Report Catalog List */}
-+                <View style={{ paddingHorizontal: 16, paddingTop: 14, gap: 10 }}>
++                <View className="px-4 pt-3.5 gap-2.5">
 +                    {loading ? (
-+                        <View style={{ paddingVertical: 40 }}>
++                        <View className="py-10">
 +                            <Loader message="Loading reports catalog..." color={iconBrandColor} />
 +                        </View>
 +                    ) : filteredReports.length === 0 ? (
-+                        <View style={{ backgroundColor: isDark ? '#1C1C1E' : '#FFFFFF', padding: 32, borderRadius: 16, alignItems: 'center', marginTop: 10, borderWidth: 1, borderColor: isDark ? '#2C2C2E' : '#E2E8F0' }}>
-+                            <Text style={{ color: isDark ? '#9CA3AF' : '#64748B', fontSize: 12, fontWeight: '600' }}>No reports match the selected category</Text>
++                        <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
++                            <Text className="text-slate-500 dark:text-gray-400 text-xs font-semibold">No reports match the selected category</Text>
 +                        </View>
 +                    ) : (
 +                        filteredReports.map((item) => (
@@ -19277,18 +19270,10 @@ index 0000000..9c355ad
 +                                key={item.id}
 +                                onPress={() => handleReportPress(item)}
 +                                activeOpacity={0.8}
-+                                style={{
-+                                    backgroundColor: isDark ? '#1C1C1E' : '#FFFFFF',
-+                                    borderColor: isDark ? '#2C2C2E' : '#E2E8F0',
-+                                    borderWidth: 1,
-+                                    borderRadius: 16,
-+                                    padding: 14,
-+                                    flexDirection: 'row',
-+                                    alignItems: 'center',
-+                                }}
++                                className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 flex-row items-center"
 +                            >
-+                                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, flex: 1 }}>
-+                                    <View style={{ width: 40, height: 40, borderRadius: 12, backgroundColor: isDark ? '#2E1065' : '#F5F3FF', alignItems: 'center', justifyContent: 'center' }}>
++                                <View className="flex-row items-center gap-3 flex-1">
++                                    <View className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
 +                                        <Icon
 +                                            name={SUB_CLASS_ICON_MAP[item.sub_report_class] || (item.is_dynamic ? "pie-chart" : "file-text")}
 +                                            type="Feather"
@@ -19297,23 +19282,23 @@ index 0000000..9c355ad
 +                                        />
 +                                    </View>
 +
-+                                    <View style={{ flex: 1 }}>
-+                                        <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A', fontSize: 13, fontWeight: '800' }} numberOfLines={1}>
++                                    <View className="flex-1">
++                                        <Text className="text-[13px] font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
 +                                            {item.name}
 +                                        </Text>
-+                                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 }}>
-+                                            <Text style={{ fontSize: 10, fontWeight: '700', color: isDark ? '#A78BFA' : themeColors.brand[600] }}>
++                                        <View className="flex-row items-center gap-1.5 mt-0.5">
++                                            <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
 +                                                {SUB_CLASS_LABEL_MAP[item.sub_report_class] || item.sub_report_class || 'Report'}
 +                                            </Text>
-+                                            <Text style={{ fontSize: 10, color: isDark ? '#6B7280' : '#94A3B8' }}>•</Text>
-+                                            <Text style={{ fontSize: 10, color: isDark ? '#9CA3AF' : '#64748B', fontWeight: '600' }}>
++                                            <Text className="text-[10px] text-slate-400 dark:text-gray-500">•</Text>
++                                            <Text className="text-[10px] font-semibold text-slate-500 dark:text-gray-400">
 +                                                {item.report_type || 'LISTING'}
 +                                            </Text>
 +                                        </View>
 +                                    </View>
 +                                </View>
 +
-+                                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
++                                <View className="flex-row items-center gap-1.5">
 +                                    <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
 +                                </View>
 +                            </TouchableOpacity>
@@ -21410,15 +21395,17 @@ index 0000000..5af6cc6
 +
 +export default NewConnectionModal;
 diff --git a/node_modules/@suflon/native-ui/src/services/ApiService.ts b/node_modules/@suflon/native-ui/src/services/ApiService.ts
-index 7613a70..b549dc4 100644
+index 7613a70..abaa6f6 100644
 --- a/node_modules/@suflon/native-ui/src/services/ApiService.ts
 +++ b/node_modules/@suflon/native-ui/src/services/ApiService.ts
-@@ -1,118 +1,30 @@
+@@ -1,118 +1,44 @@
 -import axios, { AxiosRequestConfig } from 'axios';
 -import type { AxiosRequestHeaders } from 'axios';
 -import { useAuthStore } from '../store/auth.store';
 -import { getData } from '../utils/AsyncStorageUtils';
--
++import { axiosInstance } from './api';
++import { saveData, getData } from '@/utils/AsyncStorageUtils';
+ 
 -/** Default API origin when the host has not called {@link setBaseUrl} yet. Host apps should call `setBaseUrl` at startup (from env or config). */
 -const DEFAULT_BASE_URL =
 -  'https://api-local.woctor.com';
@@ -21466,8 +21453,12 @@ index 7613a70..b549dc4 100644
 -  const base_url = apiBaseUrl;
 -
 -  return { token, company_id, region_id, staff_id, user_id, base_url };
--};
--
++export const setBaseUrl = async (url: string) => {
++    const cleanUrl = url ? url.trim().replace(/\/+$/, '') : '';
++    await saveData('api_base_url', cleanUrl);
++    axiosInstance.defaults.baseURL = cleanUrl;
+ };
+ 
 -axiosInstance.interceptors.request.use(
 -  async config => {
 -    const { token, region_id, company_id, user_id, staff_id, base_url } = await resolveAuthContext();
@@ -21506,8 +21497,10 @@ index 7613a70..b549dc4 100644
 -    data: body,
 -  });
 -  return response.data as T;
--};
-+import { axiosInstance } from './api';
++export const getBaseUrl = async (): Promise<string> => {
++    const stored = await getData<string>('api_base_url');
++    return stored || axiosInstance.defaults.baseURL || '';
+ };
  
  export const ApiService = {
 -  get: <T = any>(url: string, config?: AxiosRequestConfig) =>
@@ -21522,6 +21515,14 @@ index 7613a70..b549dc4 100644
 -    handleRequest<T>('delete', url, undefined, config),
 -  fetchList: <T = any>(url: string, config?: AxiosRequestConfig) =>
 -    handleRequest<T>('get', url, undefined, config),
+-};
+-
+-export const getBaseUrl = () => apiBaseUrl;
+-export const setBaseUrl = (url: string) => {
+-  const normalized = String(url || '').trim().replace(/\/+$/, '');
+-  if (!normalized) return;
+-  apiBaseUrl = normalized;
+-  axiosInstance.defaults.baseURL = normalized;
 +    get: async (url: string, paramsOrConfig?: Record<string, any>) => {
 +        let config: { params?: Record<string, any> } = {};
 +        if (paramsOrConfig) {
@@ -21549,16 +21550,9 @@ index 7613a70..b549dc4 100644
 +        return ApiService.get(url, params);
 +    },
  };
--
--export const getBaseUrl = () => apiBaseUrl;
--export const setBaseUrl = (url: string) => {
--  const normalized = String(url || '').trim().replace(/\/+$/, '');
--  if (!normalized) return;
--  apiBaseUrl = normalized;
--  axiosInstance.defaults.baseURL = normalized;
--};
--
+ 
 -export default axiosInstance;
++export { axiosInstance };
 diff --git a/node_modules/@suflon/native-ui/src/services/ConnectionService.ts b/node_modules/@suflon/native-ui/src/services/ConnectionService.ts
 new file mode 100644
 index 0000000..b7e3f15
@@ -25467,7 +25461,7 @@ index 221e5d1..352ad70 100644
    ),
  );
 diff --git a/node_modules/@suflon/native-ui/src/store/package.store.ts b/node_modules/@suflon/native-ui/src/store/package.store.ts
-index bee9382..21f88e2 100644
+index bee9382..f1ccdef 100644
 --- a/node_modules/@suflon/native-ui/src/store/package.store.ts
 +++ b/node_modules/@suflon/native-ui/src/store/package.store.ts
 @@ -4,6 +4,8 @@ import { IPackage } from '@utils/index';
@@ -25479,7 +25473,7 @@ index bee9382..21f88e2 100644
  interface IPackageState {
    /* flags & data */
    loading: boolean;
-@@ -12,16 +14,17 @@ interface IPackageState {
+@@ -12,196 +14,231 @@ interface IPackageState {
    packages: IPackage[];
    package: IPackage | null;
  
@@ -25494,13 +25488,19 @@ index bee9382..21f88e2 100644
    /* writes */
    createPackage: (data: Partial<IPackage>) => Promise<IPackage | null>;
    updatePackage: (id: number, data: Partial<IPackage>) => Promise<IPackage | null>;
++  updatePackageDetail: (detailId: number, payload: Record<string, any>) => Promise<any>;
    addPackageGroup: (packageId: number, groups: any[]) => Promise<any>;
 -  // updatePackageDetail: (detailId: number, payload: Record<string, any>) => Promise<any>;
 -  // updatePackageDetail: (detailId: number, payload: Record<string, any>) => Promise<any>; 
  }
  
  /* ─────────────────────────────
-@@ -32,71 +35,86 @@ const serviceUrl = `/billing/api/online/catalogue/package`;
+-   Endpoint root
++   Endpoint root (Content service)
+ ────────────────────────────── */
+-const serviceUrl = `/billing/api/online/catalogue/package`;
++const serviceUrl = `/content/api/online/catalogue/package`;
+ 
  /* ─────────────────────────────
     Store
  ────────────────────────────── */
@@ -25535,27 +25535,6 @@ index bee9382..21f88e2 100644
 -      // Only include company_id for COMPANY source, not for GENERIC
 -      if (!isGeneric && company_id) {
 -        urlObj.searchParams.append('company_id', String(company_id));
--      }
--
--      // Add optional parameters
--      if (params?.package_type) {
--        urlObj.searchParams.append('package_type', params.package_type);
--      }
--      if (params?.source) {
--        urlObj.searchParams.append('source', params.source);
--      }
--      if (params?.search_query) {
--        urlObj.searchParams.append('search_query', params.search_query);
--      }
--
--      const url = urlObj.toString();
--
--      // ✅ Debug logging for search verification
--      console.log('[PackageStore] Fetching packages with URL:', url);
--
--      const res = await ApiService.get(url);
--      if (!Array.isArray(res)) {
--        set({ error: 'Unexpected API response', errorStatus: null, packages: [] });
 +export const usePackageStore = create<IPackageState>()((set, get) => {
 +  registerStore('package', get, set);
 +
@@ -25587,36 +25566,34 @@ index bee9382..21f88e2 100644
 +            // Check if source is GENERIC (generic packages don't use company_id)
 +            const isGeneric = params?.source === 'GENERIC';
 +
-+            // Build URL and query parameters
-+            const urlObj = new URL(serviceUrl + '/');
++            const queryParams: Record<string, any> = {};
 +
 +            // Always include region_id
 +            if (region_id) {
-+              urlObj.searchParams.append('region_id', String(region_id));
++              queryParams.region_id = region_id;
 +            }
 +
 +            // Only include company_id for COMPANY source, not for GENERIC
 +            if (!isGeneric && company_id) {
-+              urlObj.searchParams.append('company_id', String(company_id));
++              queryParams.company_id = company_id;
 +            }
 +
 +            // Add optional parameters
 +            if (params?.package_type) {
-+              urlObj.searchParams.append('package_type', params.package_type);
++              queryParams.package_type = params.package_type;
 +            }
 +            if (params?.source) {
-+              urlObj.searchParams.append('source', params.source);
++              queryParams.source = params.source;
 +            }
 +            if (params?.search_query) {
-+              urlObj.searchParams.append('search_query', params.search_query);
++              queryParams.search_query = params.search_query;
 +            }
 +
-+            const url = urlObj.toString();
++            const url = `${serviceUrl}/`;
 +
-+            // ✅ Debug logging for search verification
-+            console.log('[PackageStore] Fetching packages with URL:', url);
++            console.log('[PackageStore] Fetching packages with URL:', url, 'params:', queryParams);
 +
-+            const res = await ApiService.get(url);
++            const res = await ApiService.get(url, queryParams);
 +            if (!Array.isArray(res)) {
 +              throw new Error('Unexpected API response');
 +            }
@@ -25631,7 +25608,131 @@ index bee9382..21f88e2 100644
 +      } catch (err: any) {
 +        const status = err?.response?.status || null;
 +        set({ error: err.response?.data?.detail || err.message || 'An error occurred', errorStatus: status });
-         return null;
++        return null;
++      } finally {
++        set({ loading: false });
+       }
+-
+-      // Add optional parameters
+-      if (params?.package_type) {
+-        urlObj.searchParams.append('package_type', params.package_type);
++    },
++
++    getPackageById: async (id: number, source: string = 'COMPANY') => {
++      try {
++        set({ loading: true, error: null, errorStatus: null });
++
++        let url: string;
++        if (source === 'GENERIC') {
++          url = `${serviceUrl}/generic/${id}`;
++        } else {
++          url = `${serviceUrl}/${id}`;
++        }
++
++        const res = await ApiService.get(url);
++        set({ package: res });
++
++        return res;
++      } catch (err: any) {
++        const status = err?.response?.status || null;
++        set({ error: err.message || 'An error occurred', errorStatus: status });
++        return null;
++      } finally {
++        set({ loading: false });
+       }
+-      if (params?.source) {
+-        urlObj.searchParams.append('source', params.source);
++    },
++
++    /* ---------- WRITES ---------- */
++    createPackage: async (data) => {
++      try {
++        set({ loading: true, error: null, errorStatus: null });
++        const res: IPackage = await ApiService.post(`${serviceUrl}/create`, data);
++        if (res) {
++          const currentPkgs = get().packages || [];
++          const updatedPkgs = [res, ...currentPkgs.filter((p) => p.id !== res.id)];
++          set({ package: res, packages: updatedPkgs });
++
++          injectIntoCache({
++            get,
++            set,
++            listPrefix: 'getPackages',
++            detailPrefix: 'getPackageById:',
++            item: res,
++          });
++        }
++        return res;
++      } catch (err: any) {
++        const status = err?.response?.status || null;
++        set({ error: err.message || 'An error occurred', errorStatus: status });
++        return null;
++      } finally {
++        set({ loading: false });
+       }
+-      if (params?.search_query) {
+-        urlObj.searchParams.append('search_query', params.search_query);
++    },
++
++    /** PATCH the *meta* (top-card) of a package */
++    updatePackage: async (id, data) => {
++      try {
++        set({ loading: true, error: null, errorStatus: null });
++        const endpoint = `${serviceUrl}/update/${id}`;
++
++        const res: IPackage = await ApiService.patch(endpoint, data);
++        if (res) {
++          const currentPkgs = get().packages || [];
++          const updatedPkgs = currentPkgs.map((p) => p.id === id ? { ...p, ...res } : p);
++          set({ package: res, packages: updatedPkgs });
++
++          updateInCache({
++            get,
++            set,
++            listPrefix: 'getPackages',
++            detailPrefix: 'getPackageById:',
++            item: { id, ...data, ...res },
++          });
++        }
++        return res;
++      } catch (err: any) {
++        const status = err?.response?.status || null;
++        const errorMsg = err?.response?.data?.detail || err?.response?.data?.message || err?.message || 'Update failed';
++        set({ error: errorMsg, errorStatus: status });
++        throw err; // Re-throw to allow component to handle
++      } finally {
++        set({ loading: false });
+       }
+-
+-      const url = urlObj.toString();
+-
+-      // ✅ Debug logging for search verification
+-      console.log('[PackageStore] Fetching packages with URL:', url);
+-
+-      const res = await ApiService.get(url);
+-      if (!Array.isArray(res)) {
+-        set({ error: 'Unexpected API response', errorStatus: null, packages: [] });
+-        return null;
++    },
++
++    /** PATCH a single detail row (service) */
++    updatePackageDetail: async (detailId: number, payload: Record<string, any>) => {
++      try {
++        set({ loading: true, error: null, errorStatus: null });
++        const res = await ApiService.patch(
++          `${serviceUrl}/update_detail/${detailId}`,
++          payload,
++        );
++
++        /* If backend returns parent id refresh local state */
++        const pkgId = res?.package_id;
++        if (typeof pkgId === 'number') await get().getPackageById(pkgId);
++
++        return res;
++      } catch (err: any) {
++        const status = err?.response?.status || null;
++        set({ error: err.message || 'Detail update failed', errorStatus: status });
++        throw err;
 +      } finally {
 +        set({ loading: false });
        }
@@ -25646,60 +25747,134 @@ index bee9382..21f88e2 100644
 -      set({ loading: false });
 -    }
 -  },
+-
+-  getPackageById: async (id: number, source: string = 'COMPANY') => {
+-    try {
+-      set({ loading: true, error: null, errorStatus: null });
+-
+-      let url: string;
+-      if (source === 'GENERIC') {
+-        url = `/billing/api/online/catalogue/package/generic/${id}`;
+-      } else {
+-        url = `${serviceUrl}/${id}`;
 +    },
- 
-   getPackageById: async (id: number, source: string = 'COMPANY') => {
-     try {
-@@ -128,7 +146,19 @@ export const usePackageStore = create<IPackageState>((set, get) => ({
-     try {
-       set({ loading: true, error: null, errorStatus: null });
-       const res: IPackage = await ApiService.post(`${serviceUrl}/create`, data);
--      set({ package: res });
-+      if (res) {
-+        const currentPkgs = get().packages || [];
-+        const updatedPkgs = [res, ...currentPkgs.filter((p) => p.id !== res.id)];
-+        set({ package: res, packages: updatedPkgs });
 +
-+        injectIntoCache({
-+          get,
-+          set,
-+          listPrefix: 'getPackages',
-+          detailPrefix: 'getPackageById:',
-+          item: res,
-+        });
-+      }
-       return res;
-     } catch (err: any) {
-       const status = err?.response?.status || null;
-@@ -146,8 +176,19 @@ export const usePackageStore = create<IPackageState>((set, get) => ({
-       const endpoint = `${serviceUrl}/update/${id}`;
- 
-       const res: IPackage = await ApiService.patch(endpoint, data);
++    /** POST new groups to an existing package */
++    addPackageGroup: async (packageId, groups) => {
++      try {
++        set({ loading: true, error: null, errorStatus: null });
++        const res = await ApiService.post(
++          `${serviceUrl}/add_group/${packageId}`,
++          groups,
++        );
++        // Refresh package data after adding groups
++        await get().getPackageById(packageId);
++        return res;
++      } catch (err: any) {
++        const status = err?.response?.status || null;
++        set({ error: err.message || 'Adding group failed', errorStatus: status });
++        throw err;
++      } finally {
++        set({ loading: false });
+       }
+-
+-      const res = await ApiService.get(url);
+-      set({ package: res });
+-
+-
+-      return res;
+-    } catch (err: any) {
+-      const status = err?.response?.status || null;
+-      set({ error: err.message || 'An error occurred', errorStatus: status });
+-      return null;
+-    } finally {
+-      set({ loading: false });
+-    }
+-  },
+-
+-  /* ---------- WRITES ---------- */
+-  createPackage: async (data) => {
+-    try {
+-      set({ loading: true, error: null, errorStatus: null });
+-      const res: IPackage = await ApiService.post(`${serviceUrl}/create`, data);
+-      set({ package: res });
+-      return res;
+-    } catch (err: any) {
+-      const status = err?.response?.status || null;
+-      set({ error: err.message || 'An error occurred', errorStatus: status });
+-      return null;
+-    } finally {
+-      set({ loading: false });
+-    }
+-  },
+-
+-  /** PATCH the *meta* (top-card) of a package */
+-  updatePackage: async (id, data) => {
+-    try {
+-      set({ loading: true, error: null, errorStatus: null });
+-      const endpoint = `${serviceUrl}/update/${id}`;
+-
+-      const res: IPackage = await ApiService.patch(endpoint, data);
 -
 -      set({ package: res });      // keep local copy fresh
-+      if (res) {
-+        const currentPkgs = get().packages || [];
-+        const updatedPkgs = currentPkgs.map((p) => p.id === id ? { ...p, ...res } : p);
-+        set({ package: res, packages: updatedPkgs });
-+
-+        updateInCache({
-+          get,
-+          set,
-+          listPrefix: 'getPackages',
-+          detailPrefix: 'getPackageById:',
-+          item: { id, ...data, ...res },
-+        });
-+      }
-       return res;
-     } catch (err: any) {
- 
-@@ -202,6 +243,5 @@ export const usePackageStore = create<IPackageState>((set, get) => ({
-       set({ loading: false });
-     }
-   },
+-      return res;
+-    } catch (err: any) {
+-
+-      const status = err?.response?.status || null;
+-      const errorMsg = err?.response?.data?.detail || err?.response?.data?.message || err?.message || 'Update failed';
+-      set({ error: errorMsg, errorStatus: status });
+-      throw err; // Re-throw to allow component to handle
+-    } finally {
+-      set({ loading: false });
+-    }
+-  },
+-
+-  /** PATCH a single detail row (service) */
+-  updatePackageDetail: async (detailId: number, payload: Record<string, any>) => {
+-    try {
+-      set({ loading: true, error: null, errorStatus: null });
+-      const res = await ApiService.patch(
+-        `${serviceUrl}/update_detail/${detailId}`,
+-        payload,
+-      );
+-
+-      /* If backend returns parent id refresh local state */
+-      const pkgId = res?.package_id;
+-      if (typeof pkgId === 'number') await get().getPackageById(pkgId);
+-
+-      return res;
+-    } catch (err: any) {
+-      const status = err?.response?.status || null;
+-      set({ error: err.message || 'Detail update failed', errorStatus: status });
+-      throw err;
+-    } finally {
+-      set({ loading: false });
+-    }
+-  },
+-
+-  /** POST new groups to an existing package */
+-  addPackageGroup: async (packageId, groups) => {
+-    try {
+-      set({ loading: true, error: null, errorStatus: null });
+-      const res = await ApiService.post(
+-        `${serviceUrl}/add_group/${packageId}`,
+-        groups,
+-      );
+-      // Refresh package data after adding groups
+-      await get().getPackageById(packageId);
+-      return res;
+-    } catch (err: any) {
+-      const status = err?.response?.status || null;
+-      set({ error: err.message || 'Adding group failed', errorStatus: status });
+-      throw err;
+-    } finally {
+-      set({ loading: false });
+-    }
+-  },
 -
 -
 -}));
++    },
 +  };
 +});
 diff --git a/node_modules/@suflon/native-ui/src/store/patient.store.ts b/node_modules/@suflon/native-ui/src/store/patient.store.ts

package/src/modules/Reporting/index.tsx

@@ -88,7 +88,8 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                 showActionIcon={false}
             />
 
-            <ScrollView className="flex-1" contentContainerStyle={{ paddingBottom: 30 }}>
+            {/* Fixed Top Controls */}
+            <View>
                 {/* Search Bar */}
                 <View className="px-4 pt-3.5">
                     <SearchFilter
@@ -134,7 +135,7 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                 )}
 
                 {/* Category Pills Switcher - Dynamic from response */}
-                <View className="pt-4">
+                <View className="py-4">
                     <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
                         {categoryTabs.map((tab) => {
                             const isActive = activeTabId === tab.id;
@@ -189,58 +190,58 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
                         })}
                     </ScrollView>
                 </View>
+            </View>
 
-                {/* Report Catalog List */}
-                <View className="px-4 pt-3.5 gap-2.5">
-                    {loading ? (
-                        <View className="py-10">
-                            <Loader message="Loading reports catalog..." color={iconBrandColor} />
-                        </View>
-                    ) : filteredReports.length === 0 ? (
-                        <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
-                            <Text className="text-slate-500 dark:text-gray-400 text-xs font-semibold">No reports match the selected category</Text>
-                        </View>
-                    ) : (
-                        filteredReports.map((item) => (
-                            <TouchableOpacity
-                                key={item.id}
-                                onPress={() => handleReportPress(item)}
-                                activeOpacity={0.8}
-                                className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 flex-row items-center"
-                            >
-                                <View className="flex-row items-center gap-3 flex-1">
-                                    <View className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
-                                        <Icon
-                                            name={SUB_CLASS_ICON_MAP[item.sub_report_class] || (item.is_dynamic ? "pie-chart" : "file-text")}
-                                            type="Feather"
-                                            size={20}
-                                            color={iconBrandColor}
-                                        />
-                                    </View>
+            {/* Scrollable Report Catalog List ONLY */}
+            <ScrollView className="flex-1" contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 30, gap: 10 }}>
+                {loading ? (
+                    <View className="py-10">
+                        <Loader message="Loading reports catalog..." color={iconBrandColor} />
+                    </View>
+                ) : filteredReports.length === 0 ? (
+                    <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
+                        <Text className="text-slate-500 dark:text-gray-400 text-xs font-semibold">No reports match the selected category</Text>
+                    </View>
+                ) : (
+                    filteredReports.map((item) => (
+                        <TouchableOpacity
+                            key={item.id}
+                            onPress={() => handleReportPress(item)}
+                            activeOpacity={0.8}
+                            className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 flex-row items-center"
+                        >
+                            <View className="flex-row items-center gap-3 flex-1">
+                                <View className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
+                                    <Icon
+                                        name={SUB_CLASS_ICON_MAP[item.sub_report_class] || (item.is_dynamic ? "pie-chart" : "file-text")}
+                                        type="Feather"
+                                        size={20}
+                                        color={iconBrandColor}
+                                    />
+                                </View>
 
-                                    <View className="flex-1">
-                                        <Text className="text-[13px] font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
-                                            {item.name}
+                                <View className="flex-1">
+                                    <Text className="text-[13px] font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
+                                        {item.name}
+                                    </Text>
+                                    <View className="flex-row items-center gap-1.5 mt-0.5">
+                                        <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
+                                            {SUB_CLASS_LABEL_MAP[item.sub_report_class] || item.sub_report_class || 'Report'}
+                                        </Text>
+                                        <Text className="text-[10px] text-slate-400 dark:text-gray-500">•</Text>
+                                        <Text className="text-[10px] font-semibold text-slate-500 dark:text-gray-400">
+                                            {item.report_type || 'LISTING'}
                                         </Text>
-                                        <View className="flex-row items-center gap-1.5 mt-0.5">
-                                            <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
-                                                {SUB_CLASS_LABEL_MAP[item.sub_report_class] || item.sub_report_class || 'Report'}
-                                            </Text>
-                                            <Text className="text-[10px] text-slate-400 dark:text-gray-500">•</Text>
-                                            <Text className="text-[10px] font-semibold text-slate-500 dark:text-gray-400">
-                                                {item.report_type || 'LISTING'}
-                                            </Text>
-                                        </View>
                                     </View>
                                 </View>
+                            </View>
 
-                                <View className="flex-row items-center gap-1.5">
-                                    <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
-                                </View>
-                            </TouchableOpacity>
-                        ))
-                    )}
-                </View>
+                            <View className="flex-row items-center gap-1.5">
+                                <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
+                            </View>
+                        </TouchableOpacity>
+                    ))
+                )}
             </ScrollView>
         </SafeAreaView>
     );

package/src/screens/DevToolsCorner.tsx

@@ -85,7 +85,7 @@ const DEV_STRINGS: Record<LanguageCode, Record<string, string>> = {
 
 // Default dev values
 const DEFAULT_VALUES = {
-    authToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZXhwIjoxOTQxNjg3Nzk1LCJ0aWQiOiJ5aDRsa2pkbiIsImNsdCI6IldFQiIsInNjb3BlIjoiQ09NUEFOWSIsImNvbXBhbnlfaWQiOjIsInJlZ2lvbl9pZCI6MSwic3RhZmZfaWQiOjF9.-Z6cH67dOnYJOoG1Gx49nAOeWrA1wKMO5jMFAbaBjeQ',
+    authToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZXhwIjoxOTQxNzEwNzI5LCJ0aWQiOiJka2t3Ynd1ZyIsImNsdCI6IldFQiIsInNjb3BlIjoiQ09NUEFOWSIsImNvbXBhbnlfaWQiOjIsInJlZ2lvbl9pZCI6MSwic3RhZmZfaWQiOjF9.hPQC0_-uFfHU253gvJi-eJD1HnM8fGWA0lG3IRVs09I',
     companyId: '2',
     regionId: '1',
     staffId: '1',