@suflon/rnmd-reporting 0.0.1

package/src/screens/DevToolsCorner.tsx

@@ -0,0 +1,810 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+    View,
+    Modal,
+    ScrollView,
+    TouchableOpacity,
+    Text,
+    StyleSheet,
+    useWindowDimensions,
+    TextInput,
+} from 'react-native';
+import { useColorScheme } from 'nativewind';
+import { useNavigation } from '@react-navigation/native';
+import { useAuthStore, getData, saveData, removeData } from '@suflon/native-ui';
+import { useConnectionI18n } from '@/context/ConnectionI18nContext';
+import { useLanguageStore } from '@/stores/language.store';
+
+type LanguageCode = 'en' | 'hi' | 'ar';
+
+const DEV_STRINGS: Record<LanguageCode, Record<string, string>> = {
+    en: {
+        fabLabel: 'DEV',
+        title: 'Dev Settings',
+        apiBaseUrl: 'API Base URL',
+        authToken: 'Auth Token',
+        companyId: 'Company ID',
+        staffId: 'Staff ID',
+        theme: 'Theme',
+        themeLight: 'Light',
+        themeDark: 'Dark',
+        apply: 'Apply',
+        clear: 'Clear',
+        useCodeDefaults: 'Use code defaults',
+        saved: 'Config saved. Restart app if needed.',
+        cleared: 'Cleared.',
+        defaultsLoaded: 'Loaded code defaults and saved.',
+        language: 'Language',
+        lang_en: 'English',
+        lang_hi: 'Hindi',
+        lang_ar: 'Arabic',
+    },
+    hi: {
+        fabLabel: 'DEV',
+        title: 'डेव सेटिंग्स',
+        apiBaseUrl: 'API बेस URL',
+        authToken: 'ऑथ टोकन',
+        companyId: 'कंपनी आईडी',
+        staffId: 'स्टाफ आईडी',
+        theme: 'थीम',
+        themeLight: 'लाइट',
+        themeDark: 'डार्क',
+        apply: 'अप्लाई',
+        clear: 'क्लियर',
+        useCodeDefaults: 'कोड डिफॉल्ट्स उपयोग करें',
+        saved: 'सेटिंग्स सेव हो गईं। जरूरत हो तो ऐप रीस्टार्ट करें।',
+        cleared: 'क्लीयर किया गया।',
+        defaultsLoaded: 'कोड डिफॉल्ट्स लोड और सेव हो गए हैं।',
+        language: 'भाषा',
+        lang_en: 'अंग्रेज़ी',
+        lang_hi: 'हिंदी',
+        lang_ar: 'अरबी',
+    },
+    ar: {
+        fabLabel: 'DEV',
+        title: 'إعدادات التطوير',
+        apiBaseUrl: 'رابط واجهة برمجة التطبيقات',
+        authToken: 'رمز المصادقة',
+        companyId: 'معرّف الشركة',
+        staffId: 'معرّف الموظف',
+        theme: 'الوضع',
+        themeLight: 'فاتح',
+        themeDark: 'داكن',
+        apply: 'تطبيق',
+        clear: 'مسح',
+        useCodeDefaults: 'استخدام القيم الافتراضية',
+        saved: 'تم حفظ الإعدادات. أعد تشغيل التطبيق إذا لزم الأمر.',
+        cleared: 'تم المسح.',
+        defaultsLoaded: 'تم تحميل القيم الافتراضية والحفظ.',
+        language: 'اللغة',
+        lang_en: 'الإنجليزية',
+        lang_hi: 'الهندية',
+        lang_ar: 'العربية',
+    },
+};
+
+// Default dev values
+const DEFAULT_VALUES = {
+    authToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZXhwIjoxOTQxNjg3Nzk1LCJ0aWQiOiJ5aDRsa2pkbiIsImNsdCI6IldFQiIsInNjb3BlIjoiQ09NUEFOWSIsImNvbXBhbnlfaWQiOjIsInJlZ2lvbl9pZCI6MSwic3RhZmZfaWQiOjF9.-Z6cH67dOnYJOoG1Gx49nAOeWrA1wKMO5jMFAbaBjeQ',
+    companyId: '2',
+    regionId: '1',
+    staffId: '1',
+    userId: '1',
+    apiBaseUrl: 'https://api-local.woctor.com',
+    permissionKey: 'clinic_owner'
+};
+
+const DEV_KEYS = ['token', 'company_id', 'region_id', 'staff_id', 'user_id', 'api_base_url', 'permission_key'];
+
+export const MOCK_ROLES: Record<string, any> = {
+    clinic_owner: {
+        core_dashboard: { app: "core", module: "dashboard", read: true },
+        patient_patient: { app: "patient", module: "patient", read: true, create: true, update: true, delete: true },
+        patient_patient_group: { app: "patient", module: "patient_group", read: true, create: true, update: true, delete: true },
+        opd_appointment: { app: "opd", module: "appointment", read: true, create: true, update: true, delete: true },
+        opd_prescription: { app: "opd", module: "prescription", read: true, create: true, update: true, delete: true },
+        opd_prescription_template: { app: "opd", module: "prescription_template", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan: { app: "opd", module: "treatment_plan", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan_template: { app: "opd", module: "treatment_plan_template", read: true, create: true, update: true, delete: true },
+        inventory_inventory: { app: "inventory", module: "inventory", read: true, create: true, update: true, delete: true },
+        inventory_pricing: { app: "inventory", module: "pricing", read: true, create: true, update: true, delete: true },
+        inventory_products: { app: "inventory", module: "products", read: true, create: true, update: true, delete: true },
+        inventory_ledgers: { app: "inventory", module: "ledgers", read: true, create: true, update: true, delete: true },
+        inventory_shortbook: { app: "inventory", module: "shortbook", read: true, create: true, update: true, delete: true },
+        billing_billing: { app: "billing", module: "billing", read: true, create: true, update: true, delete: true },
+        package_packages: { app: "package", module: "packages", read: true, create: true, update: true, delete: true },
+        reports_reports: { app: "reports", module: "reports", read: true },
+        account_account: { app: "account", module: "account", read: true, update: true },
+        account_account_license: { app: "account", module: "account_license", read: true, update: true },
+        account_account_subscription: { app: "account", module: "account_subscription", read: true, update: true },
+        account_platform_payment: { app: "account", module: "platform_payment", read: true, update: true, delete: true },
+        account_platform_bill: { app: "account", module: "platform_bill", read: true, update: true, delete: true },
+        connection_company_connection: { app: "connection", module: "company_connection", read: true, create: true, update: true, delete: true },
+        credit_coin_credit: { app: "credit", module: "coin_credit", read: true, create: true, update: true, delete: true },
+        account_bank: { app: "account", module: "bank", read: true, create: true, update: true, delete: true },
+        content_content: { app: "content", module: "content", read: true, create: true, update: true, delete: true },
+        promotion_promotion: { app: "promotion", module: "promotion", read: true, create: true, update: true, delete: true },
+        promotion_promotion_template: { app: "promotion", module: "promotion_template", read: true, create: true, update: true, delete: true },
+        promotion_contact: { app: "promotion", module: "contact", read: true, create: true, update: true, delete: true },
+        promotion_contact_group: { app: "promotion", module: "contact_group", read: true, create: true, update: true, delete: true },
+        settings_profile: { app: "settings", module: "profile", read: true, update: true },
+        settings_company: { app: "settings", module: "company", read: true, update: true },
+        settings_notification_setting: { app: "settings", module: "notification_setting", read: true, update: true },
+        settings_staff_setting: { app: "settings", module: "staff_setting", read: true, update: true },
+        settings_appearance: { app: "settings", module: "appearance", read: true, update: true },
+        settings_notification: { app: "settings", module: "notification", read: true, update: true },
+        staff_doctor_staff: { app: "staff", module: "doctor_staff", read: true, create: true, update: true, delete: true },
+        staff_general_staff: { app: "staff", module: "general_staff", read: true, create: true, update: true, delete: true },
+        staff_refer_doctor: { app: "staff", module: "refer_doctor", read: true, create: true, update: true, delete: true },
+        staff_department: { app: "staff", module: "department", read: true, create: true, update: true, delete: true },
+        crm_lead: { app: "crm", module: "lead", read: true, create: true, update: true, delete: true },
+        crm_lead_activity: { app: "crm", module: "lead_activity", read: true, create: true, update: true, delete: true },
+        crm_lead_task: { app: "crm", module: "lead_task", read: true, create: true, update: true, delete: true },
+        crm_lead_call_log: { app: "crm", module: "lead_call_log", read: true, create: true, update: true, delete: true },
+        crm_lead_note: { app: "crm", module: "lead_note", read: true, create: true, update: true, delete: true },
+        crm_lead_document: { app: "crm", module: "lead_document", read: true, create: true, update: true, delete: true },
+        crm_notes: { app: "notes", module: "notes", read: true, create: true, update: true, delete: true },
+        crm_task: { app: "task", module: "task", read: true, create: true, update: true, delete: true }
+    },
+    clinic_admin: {
+        core_dashboard: { app: "core", module: "dashboard", read: true },
+        patient_patient: { app: "patient", module: "patient", read: true, create: true, update: true, delete: true },
+        patient_patient_group: { app: "patient", module: "patient_group", read: true, create: true, update: true, delete: true },
+        opd_appointment: { app: "opd", module: "appointment", read: true, create: true, update: true, delete: true },
+        opd_prescription: { app: "opd", module: "prescription", read: true, create: true, update: true, delete: true },
+        opd_prescription_template: { app: "opd", module: "prescription_template", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan: { app: "opd", module: "treatment_plan", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan_template: { app: "opd", module: "treatment_plan_template", read: true, create: true, update: true, delete: true },
+        inventory_inventory: { app: "inventory", module: "inventory", read: true, create: true, update: true, delete: true },
+        inventory_pricing: { app: "inventory", module: "pricing", read: true, create: true, update: true, delete: true },
+        inventory_products: { app: "inventory", module: "products", read: true, create: true, update: true, delete: true },
+        inventory_ledgers: { app: "inventory", module: "ledgers", read: true, create: true, update: true, delete: true },
+        inventory_shortbook: { app: "inventory", module: "shortbook", read: true, create: true, update: true, delete: true },
+        billing_billing: { app: "billing", module: "billing", read: true, create: true, update: true, delete: true },
+        package_packages: { app: "package", module: "packages", read: true, create: true, update: true, delete: true },
+        reports_reports: { app: "reports", module: "reports", read: true },
+        account_account: { app: "account", module: "account", read: true, update: true },
+        account_account_license: { app: "account", module: "account_license", read: true, update: true },
+        account_account_subscription: { app: "account", module: "account_subscription", read: true, update: true },
+        account_platform_payment: { app: "account", module: "platform_payment", read: true, update: true, delete: true },
+        account_platform_bill: { app: "account", module: "platform_bill", read: true, update: true, delete: true },
+        connection_company_connection: { app: "connection", module: "company_connection", read: true, create: true, update: true, delete: true },
+        credit_coin_credit: { app: "credit", module: "coin_credit", read: true, create: true, update: true, delete: true },
+        account_bank: { app: "account", module: "bank", read: true, create: true, update: true, delete: true },
+        content_content: { app: "content", module: "content", read: true, create: true, update: true, delete: true },
+        promotion_promotion: { app: "promotion", module: "promotion", read: true, create: true, update: true, delete: true },
+        promotion_promotion_template: { app: "promotion", module: "promotion_template", read: true, create: true, update: true, delete: true },
+        promotion_contact: { app: "promotion", module: "contact", read: true, create: true, update: true, delete: true },
+        promotion_contact_group: { app: "promotion", module: "contact_group", read: true, create: true, update: true, delete: true },
+        settings_profile: { app: "settings", module: "profile", read: true, update: true },
+        settings_company: { app: "settings", module: "company", read: true, update: true },
+        settings_notification_setting: { app: "settings", module: "notification_setting", read: true, update: true },
+        settings_staff_setting: { app: "settings", module: "staff_setting", read: true, update: true },
+        settings_appearance: { app: "settings", module: "appearance", read: true, update: true },
+        settings_notification: { app: "settings", module: "notification", read: true, update: true },
+        staff_doctor_staff: { app: "staff", module: "doctor_staff", read: true, create: true, update: true, delete: true },
+        staff_general_staff: { app: "staff", module: "general_staff", read: true, create: true, update: true, delete: true },
+        staff_refer_doctor: { app: "staff", module: "refer_doctor", read: true, create: true, update: true, delete: true },
+        staff_department: { app: "staff", module: "department", read: true, create: true, update: true, delete: true },
+        crm_lead: { app: "crm", module: "lead", read: true, create: true, update: true, delete: true },
+        crm_lead_activity: { app: "crm", module: "lead_activity", read: true, create: true, update: true, delete: true },
+        crm_lead_task: { app: "crm", module: "lead_task", read: true, create: true, update: true, delete: true },
+        crm_lead_call_log: { app: "crm", module: "lead_call_log", read: true, create: true, update: true, delete: true },
+        crm_lead_note: { app: "crm", module: "lead_note", read: true, create: true, update: true, delete: true },
+        crm_lead_document: { app: "crm", module: "lead_document", read: true, create: true, update: true, delete: true },
+        crm_notes: { app: "notes", module: "notes", read: true, create: true, update: true, delete: true },
+        crm_task: { app: "task", module: "task", read: true, create: true, update: true, delete: true }
+    },
+    clinic_manager: {
+        core_dashboard: { app: "core", module: "dashboard", read: true },
+        patient_patient: { app: "patient", module: "patient", read: true, create: true, update: true, delete: true },
+        patient_patient_group: { app: "patient", module: "patient_group", read: true, create: true, update: true, delete: true },
+        opd_appointment: { app: "opd", module: "appointment", read: true, create: true, update: true, delete: true },
+        opd_prescription: { app: "opd", module: "prescription", read: true, create: true, update: true, delete: true },
+        opd_prescription_template: { app: "opd", module: "prescription_template", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan: { app: "opd", module: "treatment_plan", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan_template: { app: "opd", module: "treatment_plan_template", read: true, create: true, update: true, delete: true },
+        inventory_medicines: { app: "inventory", module: "medicines", read: true, create: true, update: true, delete: true },
+        inventory_vaccinations: { app: "inventory", module: "vaccinations", read: true, create: true, update: true, delete: true },
+        inventory_generals: { app: "inventory", module: "generals", read: true, create: true, update: true, delete: true },
+        pricing_medicines: { app: "pricing", module: "medicines", read: true, create: true, update: true, delete: true },
+        pricing_vaccinations: { app: "pricing", module: "vaccinations", read: true, create: true, update: true, delete: true },
+        pricing_generals: { app: "pricing", module: "generals", read: true, create: true, update: true, delete: true },
+        pricing_reports: { app: "pricing", module: "reports", read: true, create: true, update: true, delete: true },
+        pricing_treatments: { app: "pricing", module: "treatments", read: true, create: true, update: true, delete: true },
+        pricing_services: { app: "pricing", module: "services", read: true, create: true, update: true, delete: true },
+        billing_billing: { app: "billing", module: "billing", read: true, create: true, update: true, delete: true },
+        package_packages: { app: "package", module: "packages", read: true },
+        reports_reports: { app: "reports", module: "reports", read: true },
+        credit_coin_credit: { app: "credit", module: "coin_credit", read: true, create: true, update: true, delete: true },
+        account_bank: { app: "account", module: "bank", read: true, create: true, update: true, delete: true },
+        content_content: { app: "content", module: "content", read: true, create: true, update: true, delete: true },
+        settings_profile: { app: "settings", module: "profile", read: true, update: true },
+        settings_notification_setting: { app: "settings", module: "notification_setting", read: true, update: true },
+        settings_appearance: { app: "settings", module: "appearance", read: true, update: true },
+        settings_notification: { app: "settings", module: "notification", read: true, update: true },
+        staff_doctor_staff: { app: "staff", module: "doctor_staff", read: true, create: true },
+        staff_general_staff: { app: "staff", module: "general_staff", read: true, create: true },
+        crm_lead: { app: "crm", module: "lead", read: true, create: true, update: true, delete: true },
+        crm_lead_activity: { app: "crm", module: "lead_activity", read: true, create: true, update: true, delete: true },
+        crm_lead_task: { app: "crm", module: "lead_task", read: true, create: true, update: true, delete: true },
+        crm_lead_call_log: { app: "crm", module: "lead_call_log", read: true, create: true, update: true, delete: true },
+        crm_lead_note: { app: "crm", module: "lead_note", read: true, create: true, update: true, delete: true },
+        crm_lead_document: { app: "crm", module: "lead_document", read: true, create: true, update: true, delete: true },
+        crm_notes: { app: "notes", module: "notes", read: true, create: true, update: true, delete: true },
+        crm_task: { app: "task", module: "task", read: true, create: true, update: true, delete: true }
+    },
+    clinic_editor: {
+        core_dashboard: { app: "core", module: "dashboard", read: true },
+        patient_patient: { app: "patient", module: "patient", read: true, create: true, update: true, delete: true },
+        patient_patient_group: { app: "patient", module: "patient_group", read: true, create: true, update: true, delete: true },
+        opd_appointment: { app: "opd", module: "appointment", read: true, create: true, update: true, delete: true },
+        opd_prescription: { app: "opd", module: "prescription", read: true, create: true, update: true, delete: true },
+        opd_prescription_template: { app: "opd", module: "prescription_template", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan: { app: "opd", module: "treatment_plan", read: true, create: true, update: true, delete: true },
+        opd_treatment_plan_template: { app: "opd", module: "treatment_plan_template", read: true, create: true, update: true, delete: true },
+        inventory_medicines: { app: "inventory", module: "medicines", read: true, create: true, update: true, delete: true },
+        inventory_vaccinations: { app: "inventory", module: "vaccinations", read: true, create: true, update: true, delete: true },
+        inventory_generals: { app: "inventory", module: "generals", read: true, create: true, update: true, delete: true },
+        pricing_medicines: { app: "pricing", module: "medicines", read: true, create: true, update: true, delete: true },
+        pricing_vaccinations: { app: "pricing", module: "vaccinations", read: true, create: true, update: true, delete: true },
+        pricing_generals: { app: "pricing", module: "generals", read: true, create: true, update: true, delete: true },
+        pricing_reports: { app: "pricing", module: "reports", read: true, create: true, update: true, delete: true },
+        pricing_treatments: { app: "pricing", module: "treatments", read: true, create: true, update: true, delete: true },
+        pricing_services: { app: "pricing", module: "services", read: true, create: true, update: true, delete: true },
+        billing_billing: { app: "billing", module: "billing", read: true },
+        reports_reports: { app: "reports", module: "reports", read: true },
+        package_packages: { app: "package", module: "packages", read: true },
+        content_content: { app: "content", module: "content", read: true, create: true, update: true, delete: true },
+        settings_profile: { app: "settings", module: "profile", read: true, update: true },
+        settings_appearance: { app: "settings", module: "appearance", read: true, update: true },
+        settings_notification: { app: "settings", module: "notification", read: true, update: true },
+        crm_lead: { app: "crm", module: "lead", read: true },
+        crm_lead_activity: { app: "crm", module: "lead_activity", read: true },
+        crm_lead_task: { app: "crm", module: "lead_task", read: true },
+        crm_lead_call_log: { app: "crm", module: "lead_call_log", read: true, create: true, update: true, delete: true },
+        crm_lead_note: { app: "crm", module: "lead_note", read: true },
+        crm_lead_document: { app: "crm", module: "lead_document", read: true },
+        crm_notes: { app: "notes", module: "notes", read: true },
+        crm_task: { app: "task", module: "task", read: true }
+    },
+    clinic_viewer: {
+        core_dashboard: { app: "core", module: "dashboard", read: true },
+        patient_patient: { app: "patient", module: "patient", read: true, create: false, update: false, delete: false },
+        patient_patient_group: { app: "patient", module: "patient_group", read: true, create: false, update: false, delete: false },
+        opd_appointment: { app: "opd", module: "appointment", read: true, create: false, update: false, delete: false },
+        opd_prescription: { app: "opd", module: "prescription", read: true, create: false, update: false, delete: false },
+        opd_prescription_template: { app: "opd", module: "prescription_template", read: true, create: false, update: false, delete: false },
+        opd_treatment_plan: { app: "opd", module: "treatment_plan", read: true, create: false, update: false, delete: false },
+        opd_treatment_plan_template: { app: "opd", module: "treatment_plan_template", read: true, create: false, update: false, delete: false },
+        inventory_medicines: { app: "inventory", module: "medicines", read: true, create: false, update: false, delete: false },
+        inventory_vaccination: { app: "inventory", module: "vaccination", read: true, create: false, update: false, delete: false },
+        inventory_general: { app: "inventory", module: "general", read: true, create: false, update: false, delete: false },
+        pricing_medicines: { app: "pricing", module: "medicines", read: true, create: false, update: false, delete: false },
+        pricing_vaccination: { app: "pricing", module: "vaccination", read: true, create: false, update: false, delete: false },
+        pricing_general: { app: "pricing", module: "general", read: true, create: false, update: false, delete: false },
+        pricing_services: { app: "pricing", module: "services", read: true, create: false, update: false, delete: false },
+        billing_billing: { app: "billing", module: "billing", read: true, create: false, update: false, delete: false },
+        package_packages: { app: "package", module: "packages", read: true, create: false, update: false, delete: false },
+        reports_reports: { app: "reports", module: "reports", read: true },
+        account_account: { app: "account", module: "account", read: true, update: false },
+        account_account_license: { app: "account", module: "account_license", read: true, update: false },
+        account_account_subscription: { app: "account", module: "account_subscription", read: true, update: false },
+        account_platform_payment: { app: "account", module: "platform_payment", read: true, update: false, delete: false },
+        account_platform_bill: { app: "account", module: "platform_bill", read: true, update: false, delete: false },
+        connection_company_connection: { app: "connection", module: "company_connection", read: true, create: false, update: false, delete: false },
+        credit_coin_credit: { app: "credit", module: "coin_credit", read: true, create: false, update: false, delete: false },
+        account_bank: { app: "account", module: "bank", read: true, create: false, update: false, delete: false },
+        content_content: { app: "content", module: "content", read: true, create: false, update: false, delete: false },
+        settings_profile: { app: "settings", module: "profile", read: true, update: false },
+        settings_company: { app: "settings", module: "company", read: true, update: false },
+        settings_notification_setting: { app: "settings", module: "notification_setting", read: true, update: false },
+        settings_appearance: { app: "settings", module: "appearance", read: true, update: false },
+        settings_notification: { app: "settings", module: "notification", read: true, update: false },
+        staff_doctor_staff: { app: "staff", module: "doctor_staff", read: true, create: false, update: false, delete: false },
+        staff_general_staff: { app: "staff", module: "general_staff", read: true, create: false, update: false, delete: false },
+        crm_lead: { app: "crm", module: "lead", read: true, create: false, update: false, delete: false },
+        crm_lead_activity: { app: "crm", module: "lead_activity", read: true, create: false, update: false, delete: false },
+        crm_lead_task: { app: "crm", module: "lead_task", read: true, create: false, update: false, delete: false },
+        crm_lead_call_log: { app: "crm", module: "lead_call_log", read: true, create: false, update: false, delete: false },
+        crm_lead_note: { app: "crm", module: "lead_note", read: true, create: false, update: false, delete: false },
+        crm_lead_document: { app: "crm", module: "lead_document", read: true, create: false, update: false, delete: false },
+        crm_notes: { app: "notes", module: "notes", read: true, create: false, update: false, delete: false },
+        crm_task: { app: "task", module: "task", read: true, create: false, update: false, delete: false }
+    },
+    no_access: {
+        settings_profile: { app: 'settings', module: 'profile', read: false, create: false, update: false, delete: false },
+        settings_company: { app: 'settings', module: 'company', read: false, create: false, update: false, delete: false },
+        settings_notification: { app: 'settings', module: 'notification', read: false, create: false, update: false, delete: false },
+        package_packages: { app: 'package', module: 'packages', read: false, create: false, update: false, delete: false },
+        appointment_opd: { app: 'appointment', module: 'opd', read: false, create: false, update: false, delete: false },
+    }
+};
+
+export function DevToolsCorner() {
+    const { width, height } = useWindowDimensions();
+    const { colorScheme, setColorScheme } = useColorScheme();
+    const [visible, setVisible] = useState(false);
+    const [authToken, setAuthToken] = useState(DEFAULT_VALUES.authToken);
+    const [companyId, setCompanyId] = useState(DEFAULT_VALUES.companyId);
+    const [regionId, setRegionId] = useState(DEFAULT_VALUES.regionId);
+    const [staffId, setStaffId] = useState(DEFAULT_VALUES.staffId);
+    const [userId, setUserId] = useState(DEFAULT_VALUES.userId);
+    const [apiBaseUrl, setApiBaseUrl] = useState(DEFAULT_VALUES.apiBaseUrl);
+    const [permissionKey, setPermissionKey] = useState(DEFAULT_VALUES.permissionKey);
+    const [statusMessage, setStatusMessage] = useState('');
+    const setAuthData = useAuthStore((s) => s.setAuthData);
+    const isDark = colorScheme === 'dark';
+
+    const { language, controlledByHost } = useConnectionI18n();
+    const setLanguageFromStore = useLanguageStore((s) => s.setLanguage);
+
+    const navigation = useNavigation<any>();
+
+    const handleNavigateReporting = useCallback(() => {
+        setVisible(false);
+        try {
+            navigation.navigate('ReportingList');
+        } catch (e) {
+            console.error('Navigation error:', e);
+        }
+    }, [navigation]);
+
+    const tDev = useCallback(
+        (key: string): string => {
+            const dict = DEV_STRINGS[language] ?? DEV_STRINGS.en;
+            return dict[key] ?? DEV_STRINGS.en[key] ?? key;
+        },
+        [language],
+    );
+
+    // RBAC store hooks
+    const setPermissionScenario = useAuthStore((s) => s.setPermissionScenario);
+    const setPermissions = useAuthStore((s) => s.setPermissions);
+    const clearPermissions = useAuthStore((s) => s.clearPermissions);
+    const fetchPermissions = useAuthStore((s) => s.fetchPermissions);
+
+    const handleApplyMockRole = useCallback(async (roleKey: string) => {
+        const mockPerms = MOCK_ROLES[roleKey];
+        if (!mockPerms) return;
+
+        let newStaffId = '1';
+        let newCompanyId = '2';
+        let newUserId = '1';
+
+        if (roleKey === 'clinic_editor') {
+            newStaffId = '27';
+            newCompanyId = '15';
+            newUserId = '67';
+        } else if (roleKey === 'clinic_viewer') {
+            newStaffId = '26';
+            newCompanyId = '21';
+            newUserId = '61';
+        } else if (roleKey === 'clinic_owner') {
+            newStaffId = '1';
+            newCompanyId = '2';
+            newUserId = '1';
+        } else if (roleKey === 'clinic_admin') {
+            newStaffId = '14';
+            newCompanyId = '2';
+            newUserId = '49';
+        } else if (roleKey === 'clinic_manager') {
+            newStaffId = '13';
+            newCompanyId = '2';
+            newUserId = '48';
+        }
+
+        setStaffId(newStaffId);
+        setCompanyId(newCompanyId);
+        setUserId(newUserId);
+
+        setPermissionKey(roleKey);
+        await saveData('permission_key', roleKey);
+        await saveData('rbac_permission_scenario', roleKey);
+        await saveData('rbac_permissions', mockPerms);
+
+        await saveData('staff_id', newStaffId);
+        await saveData('company_id', newCompanyId);
+        await saveData('user_id', newUserId);
+
+        setPermissionScenario(roleKey);
+
+        await setAuthData({
+            company_id: Number(newCompanyId) || 0,
+            region_id: Number(regionId) || 0,
+            staff_id: Number(newStaffId) || 0,
+            user_id: Number(newUserId) || 0,
+        });
+
+        await setPermissions(mockPerms, Number(newStaffId));
+
+        setStatusMessage(`Mock role '${roleKey}' applied (Staff: ${newStaffId}, Co: ${newCompanyId}, User: ${newUserId}).`);
+        setTimeout(() => setStatusMessage(''), 2000);
+    }, [regionId, setPermissionScenario, setPermissions, setAuthData]);
+
+    const loadStored = useCallback(async () => {
+        const [token, company, region, staff, user, base, perm, storedScenario] = await Promise.all([
+            getData('token'),
+            getData('company_id'),
+            getData('region_id'),
+            getData('staff_id'),
+            getData('user_id'),
+            getData('api_base_url'),
+            getData('permission_key'),
+            getData('rbac_permission_scenario'),
+        ]);
+        if (token) setAuthToken(String(token));
+        if (company && company !== 'NaN' && company !== '"NaN"') setCompanyId(String(company));
+        if (region && region !== 'NaN' && region !== '"NaN"') setRegionId(String(region));
+        if (staff && staff !== 'NaN' && staff !== '"NaN"') setStaffId(String(staff));
+        if (user && user !== 'NaN' && user !== '"NaN"') setUserId(String(user));
+
+        if (base && String(base).includes('ngrok-free.dev')) {
+            setApiBaseUrl(DEFAULT_VALUES.apiBaseUrl);
+            saveData('api_base_url', DEFAULT_VALUES.apiBaseUrl);
+        } else if (base) {
+            setApiBaseUrl(String(base));
+        }
+
+        const activeScenario = storedScenario || perm || '';
+        if (activeScenario) {
+            setPermissionKey(String(activeScenario));
+        }
+    }, []);
+
+    useEffect(() => {
+        if (visible) loadStored();
+    }, [visible, loadStored]);
+
+    const handleApply = useCallback(async () => {
+        const token = authToken.trim();
+        const company = companyId.trim();
+        const region = regionId.trim();
+        const staff = staffId.trim();
+        const user = userId.trim();
+        const baseUrl = apiBaseUrl.trim();
+        const perm = permissionKey.trim();
+
+        await saveData('token', token);
+        await saveData('company_id', company);
+        await saveData('region_id', region);
+        await saveData('staff_id', staff);
+        await saveData('user_id', user);
+        await saveData('api_base_url', baseUrl);
+        await saveData('permission_key', perm);
+        await saveData('rbac_permission_scenario', perm);
+
+        setPermissionScenario(perm);
+
+        await setAuthData({
+            token,
+            company_id: Number(company) || 0,
+            region_id: Number(region) || 0,
+            staff_id: Number(staff) || 0,
+            user_id: Number(user) || 0,
+        });
+
+        if (staff) {
+            if (MOCK_ROLES[perm]) {
+                const mockPerms = MOCK_ROLES[perm];
+                await saveData('rbac_permissions', mockPerms);
+                await setPermissions(mockPerms, Number(staff));
+            } else {
+                await fetchPermissions(Number(staff));
+            }
+        }
+
+        setStatusMessage(tDev('saved'));
+        setTimeout(() => setVisible(false), 1500);
+    }, [authToken, companyId, regionId, staffId, userId, apiBaseUrl, permissionKey, setAuthData, setPermissionScenario, fetchPermissions, setPermissions, tDev]);
+
+    const handleClear = useCallback(async () => {
+        for (const key of DEV_KEYS) {
+            await removeData(key).catch(() => { });
+        }
+        await clearPermissions();
+        setLanguageFromStore('en');
+        setAuthToken(DEFAULT_VALUES.authToken);
+        setCompanyId(DEFAULT_VALUES.companyId);
+        setRegionId(DEFAULT_VALUES.regionId);
+        setStaffId(DEFAULT_VALUES.staffId);
+        setUserId(DEFAULT_VALUES.userId);
+        setApiBaseUrl(DEFAULT_VALUES.apiBaseUrl);
+        setPermissionKey(DEFAULT_VALUES.permissionKey);
+        setAuthData({
+            token: DEFAULT_VALUES.authToken,
+            company_id: Number(DEFAULT_VALUES.companyId) || 0,
+            region_id: Number(DEFAULT_VALUES.regionId) || 0,
+            staff_id: Number(DEFAULT_VALUES.staffId) || 0,
+            user_id: Number(DEFAULT_VALUES.userId) || 0,
+        });
+        setStatusMessage(tDev('cleared'));
+    }, [setAuthData, clearPermissions, setLanguageFromStore, tDev]);
+
+    const handleLanguageChange = useCallback(
+        (lang: LanguageCode) => {
+            setLanguageFromStore(lang);
+        },
+        [setLanguageFromStore],
+    );
+
+    if (!__DEV__) return null;
+
+    return (
+        <>
+            <View style={styles.fabContainer} pointerEvents="box-none">
+                <TouchableOpacity
+                    onPress={() => setVisible(true)}
+                    activeOpacity={0.8}
+                    className="w-[50px] h-[50px] rounded-full bg-red-500 items-center justify-center shadow-lg"
+                    style={styles.fabShadow}
+                >
+                    <Text className="text-white font-bold text-xs">{tDev('fabLabel')}</Text>
+                </TouchableOpacity>
+            </View>
+
+            <Modal visible={visible} transparent animationType="fade">
+                <View className="flex-1 bg-background-lightGray items-center justify-center">
+                    <View
+                        className="bg-white dark:bg-zinc-900 rounded-2xl overflow-hidden"
+                        style={{ width: width - 32, maxHeight: height * 0.9 }}
+                    >
+                        <View className="flex-row items-center justify-between bg-red-600 p-4">
+                            <Text className="text-lg font-bold text-white">{tDev('title')}</Text>
+                            <TouchableOpacity onPress={() => setVisible(false)}>
+                                <Text className="text-white text-2xl">✕</Text>
+                            </TouchableOpacity>
+                        </View>
+
+                        <ScrollView contentContainerStyle={styles.modalBodyContent}>
+
+                            {/* UI Configuration Section */}
+                            <View style={styles.section}>
+                                <Text style={[styles.sectionTitle, { color: isDark ? '#F3F4F6' : '#333' }]}>Navigation & Configuration</Text>
+
+                                <TouchableOpacity
+                                    onPress={handleNavigateReporting}
+                                    style={{
+                                        backgroundColor: '#7c3aed',
+                                        paddingVertical: 12,
+                                        paddingHorizontal: 16,
+                                        borderRadius: 10,
+                                        alignItems: 'center',
+                                        marginBottom: 12,
+                                    }}
+                                >
+                                    <Text style={{ color: '#ffffff', fontWeight: 'bold', fontSize: 14 }}>
+                                        📊 Open Reporting Screen
+                                    </Text>
+                                </TouchableOpacity>
+
+                                <View style={styles.row}>
+                                    <Text style={{ color: isDark ? '#FFFFFF' : '#111827', fontWeight: '700' }}>Theme ({colorScheme})</Text>
+                                    <View className="flex-row gap-2">
+                                        <TouchableOpacity
+                                            onPress={() => setColorScheme('light')}
+                                            style={[
+                                                styles.toggleBtn,
+                                                colorScheme === 'light'
+                                                    ? styles.toggleBtnActive
+                                                    : { backgroundColor: isDark ? '#374151' : '#E5E7EB' },
+                                            ]}
+                                        >
+                                            <Text style={colorScheme === 'light' ? styles.toggleTextActive : styles.toggleTextInactive}>Light</Text>
+                                        </TouchableOpacity>
+                                        <TouchableOpacity
+                                            onPress={() => setColorScheme('dark')}
+                                            style={[
+                                                styles.toggleBtn,
+                                                colorScheme === 'dark'
+                                                    ? styles.toggleBtnActive
+                                                    : { backgroundColor: isDark ? '#374151' : '#E5E7EB' },
+                                            ]}
+                                        >
+                                            <Text style={colorScheme === 'dark' ? styles.toggleTextActive : styles.toggleTextInactive}>Dark</Text>
+                                        </TouchableOpacity>
+                                    </View>
+                                </View>
+
+                                {/* Language toggle: only when host app does not control language (standalone mode) */}
+                                {!controlledByHost && (
+                                    <View style={[styles.row, { marginTop: 10 }]}>
+                                        <Text style={{ color: isDark ? '#FFFFFF' : '#111827', fontWeight: '700' }}>Language ({language})</Text>
+                                        <View className="flex-row gap-2">
+                                            {(['en', 'hi', 'ar'] as LanguageCode[]).map(lang => (
+                                                <TouchableOpacity
+                                                    key={lang}
+                                                    onPress={() => handleLanguageChange(lang)}
+                                                    style={[
+                                                        styles.toggleBtnSmall,
+                                                        language === lang
+                                                            ? styles.toggleBtnActive
+                                                            : { backgroundColor: isDark ? '#374151' : '#E5E7EB' },
+                                                    ]}
+                                                >
+                                                    <Text style={language === lang ? styles.toggleTextActive : styles.toggleTextInactive}>
+                                                        {lang === 'en' ? 'EN' : lang === 'hi' ? 'HI' : 'AR'}
+                                                    </Text>
+                                                </TouchableOpacity>
+                                            ))}
+                                        </View>
+                                    </View>
+                                )}
+                            </View>
+
+                            <View style={styles.divider} />
+
+                            <View style={styles.inputGroup}>
+                                <Text className="text-xs font-bold text-gray-500 mb-1">{tDev('apiBaseUrl')}</Text>
+                                <TextInput
+                                    className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                    value={apiBaseUrl}
+                                    onChangeText={setApiBaseUrl}
+                                    placeholder="https://..."
+                                    placeholderTextColor="#999"
+                                />
+                            </View>
+
+                            <View style={styles.inputGroup}>
+                                <Text className="text-xs font-bold text-gray-500 mb-1">{tDev('authToken')}</Text>
+                                <TextInput
+                                    className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                    value={authToken}
+                                    onChangeText={setAuthToken}
+                                    multiline
+                                    style={{ height: 80, textAlignVertical: 'top' }}
+                                    placeholder="Paste token here"
+                                    placeholderTextColor="#999"
+                                />
+                            </View>
+
+                            <View style={styles.inputGroup}>
+                                <Text className="text-xs font-bold text-gray-500 mb-1">Permission Key</Text>
+                                <TextInput
+                                    className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                    value={permissionKey}
+                                    onChangeText={setPermissionKey}
+                                    placeholder="e.g. clinic_owner"
+                                    placeholderTextColor="#999"
+                                />
+                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
+                                    {Object.keys(MOCK_ROLES).map((role) => (
+                                        <TouchableOpacity
+                                            key={role}
+                                            onPress={() => handleApplyMockRole(role)}
+                                            style={[
+                                                styles.rolePresetBtn,
+                                                permissionKey === role
+                                                    ? styles.rolePresetBtnActive
+                                                    : { backgroundColor: isDark ? '#374151' : '#E5E7EB' }
+                                            ]}
+                                        >
+                                            <Text
+                                                style={{
+                                                    fontSize: 10,
+                                                    fontWeight: '700',
+                                                    color: permissionKey === role ? '#FFFFFF' : (isDark ? '#E5E7EB' : '#4B5563')
+                                                }}
+                                            >
+                                                {role === 'clinic_owner' ? 'Owner' :
+                                                    role === 'clinic_editor' ? 'Editor' :
+                                                        role === 'clinic_viewer' ? 'Viewer' :
+                                                            role === 'clinic_admin' ? 'Admin' :
+                                                                role === 'clinic_manager' ? 'Manager' : 'No Access'}
+                                            </Text>
+                                        </TouchableOpacity>
+                                    ))}
+                                </View>
+                            </View>
+
+                            <View className="flex-row gap-2">
+                                <View style={[styles.inputGroup, { flex: 1 }]}>
+                                    <Text className="text-xs font-bold text-gray-500 mb-1">{tDev('companyId')}</Text>
+                                    <TextInput
+                                        className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                        value={companyId}
+                                        onChangeText={setCompanyId}
+                                        keyboardType="numeric"
+                                        placeholderTextColor="#999"
+                                    />
+                                </View>
+                                <View style={[styles.inputGroup, { flex: 1 }]}>
+                                    <Text className="text-xs font-bold text-gray-500 mb-1">Region ID</Text>
+                                    <TextInput
+                                        className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                        value={regionId}
+                                        onChangeText={setRegionId}
+                                        keyboardType="numeric"
+                                        placeholderTextColor="#999"
+                                    />
+                                </View>
+                            </View>
+
+                            <View className="flex-row gap-2">
+                                <View style={[styles.inputGroup, { flex: 1 }]}>
+                                    <Text className="text-xs font-bold text-gray-500 mb-1">{tDev('staffId')}</Text>
+                                    <TextInput
+                                        className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                        value={staffId}
+                                        onChangeText={setStaffId}
+                                        keyboardType="numeric"
+                                        placeholderTextColor="#999"
+                                    />
+                                </View>
+                                <View style={[styles.inputGroup, { flex: 1 }]}>
+                                    <Text className="text-xs font-bold text-gray-500 mb-1">User ID</Text>
+                                    <TextInput
+                                        className="border border-gray-300 rounded-lg px-3 py-2 text-sm text-black dark:text-white"
+                                        value={userId}
+                                        onChangeText={setUserId}
+                                        keyboardType="numeric"
+                                        placeholderTextColor="#999"
+                                    />
+                                </View>
+                            </View>
+
+                            <View style={styles.buttonRow}>
+                                <TouchableOpacity onPress={handleApply} style={styles.primaryBtn}>
+                                    <Text className="text-white font-bold">{tDev('apply')}</Text>
+                                </TouchableOpacity>
+                                <View style={{ width: 12 }} />
+                                <TouchableOpacity
+                                    onPress={handleClear}
+                                    style={[
+                                        styles.secondaryBtn,
+                                        { borderColor: isDark ? '#4B5563' : '#D1D5DB', backgroundColor: isDark ? '#1F2937' : '#FFFFFF' },
+                                    ]}
+                                >
+                                    <Text style={{ color: isDark ? '#E5E7EB' : '#4B5563', fontWeight: '700' }}>{tDev('clear')}</Text>
+                                </TouchableOpacity>
+                            </View>
+
+                            {statusMessage ? (
+                                <Text className="mt-3 text-center text-red-500 font-semibold">{statusMessage}</Text>
+                            ) : null}
+                        </ScrollView>
+                    </View>
+                </View>
+            </Modal>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    fabContainer: { position: 'absolute', right: 16, bottom: 100, zIndex: 9999 },
+    modalBodyContent: { padding: 16 },
+    inputGroup: { marginBottom: 12 },
+    fabShadow: { elevation: 5 },
+    buttonRow: { flexDirection: 'row', alignItems: 'center', marginTop: 16 },
+    section: { marginBottom: 16 },
+    sectionTitle: { fontSize: 16, fontStyle: 'normal', fontWeight: 'bold', marginBottom: 8, color: '#333' },
+    divider: { height: 1, backgroundColor: '#eee', marginVertical: 12 },
+    row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    toggleBtn: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 8 },
+    toggleBtnSmall: { paddingHorizontal: 10, paddingVertical: 6, borderRadius: 8 },
+    toggleBtnActive: { backgroundColor: '#3B82F6' },
+    toggleTextActive: { color: '#FFFFFF', fontWeight: '700' },
+    toggleTextInactive: { color: '#111827', fontWeight: '600' },
+    primaryBtn: {
+        flex: 1,
+        backgroundColor: '#DC2626',
+        borderRadius: 10,
+        paddingVertical: 12,
+        alignItems: 'center',
+    },
+    secondaryBtn: {
+        flex: 1,
+        borderWidth: 1,
+        borderRadius: 10,
+        paddingVertical: 12,
+        alignItems: 'center',
+    },
+    rolePresetBtn: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    rolePresetBtnActive: {
+        backgroundColor: '#3B82F6',
+    },
+});