@suflon/rnmd-reporting 0.0.1

package/src/modules/Reporting/component/ReportFilterModal.tsx

@@ -0,0 +1,403 @@
+import React, { useEffect, useMemo } from 'react';
+import { View, Text, ScrollView, TouchableOpacity, useColorScheme } from 'react-native';
+import { useForm } from 'react-hook-form';
+import {
+    BottomModal,
+    ModalTitle,
+    Dropdown,
+    DatePicker as DatePickerInput,
+    Button as CustomButton,
+    usePatientStore,
+    useStaffStore,
+    IReportMetadata
+} from '@suflon/native-ui';
+import { themeColors } from '@/theme/colors';
+
+const CustomView = View;
+const CustomText = ({ variant, className, style, ...props }: any) => <Text style={style} {...props} />;
+const useTranslation = () => ({ t: (k: string, f?: string) => f || k });
+
+const formatKeyLabel = (key: string) => {
+    return key
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+interface ReportFilterModalProps {
+    isVisible: boolean;
+    onClose: () => void;
+    metadata: IReportMetadata | null;
+    onApply: (payload: any) => void;
+}
+
+const ReportFilterModal: React.FC<ReportFilterModalProps> = ({
+    isVisible,
+    onClose,
+    metadata,
+    onApply,
+}) => {
+    const isDarkMode = useColorScheme() === 'dark';
+    const { t } = useTranslation();
+    const { staffs, staffsByUser, getStaffs, getStaffsByUser } = useStaffStore();
+    const { patients, getPatients } = usePatientStore();
+
+    // Ensure staff/doctors & patients are loaded
+    useEffect(() => {
+        if (isVisible) {
+            if ((!staffs || staffs.length === 0) && getStaffs) {
+                getStaffs('DOCTOR').catch(() => {});
+            }
+            if ((!staffsByUser || staffsByUser.length === 0) && getStaffsByUser) {
+                getStaffsByUser().catch(() => {});
+            }
+            if ((!patients || patients.length === 0) && getPatients) {
+                getPatients().catch(() => {});
+            }
+        }
+    }, [isVisible, staffs, staffsByUser, patients, getStaffs, getStaffsByUser, getPatients]);
+
+    const isDynamicReport = useMemo(() => {
+        if (!metadata?.metadata) return false;
+        const meta = metadata.metadata.meta;
+        return Boolean(meta?.is_dynamic === true);
+    }, [metadata]);
+
+    const { control, handleSubmit, reset, setValue } = useForm({
+        defaultValues: {
+            display_by: '',
+            operation_key: '',
+            staff_id: '',
+            patient_id: '',
+            appointment_status: '',
+            date_from: '',
+            date_to: '',
+        }
+    });
+
+    useEffect(() => {
+        if (metadata) {
+            const displayByList = metadata.metadata?.display_by || [];
+            const defaultDisplay = displayByList.find((d: any) => d.isDefault) || displayByList[0];
+            const defaultDisplayKey = metadata.metadata?.meta?.default_display_key || defaultDisplay?.key || '';
+
+            const opByList = metadata.metadata?.operation_by || [];
+            const defaultOp = opByList.find((o: any) => o.isDefault) || opByList[0];
+            const defaultOpVal = defaultOp ? `${defaultOp.key}:${defaultOp.operation}` : '';
+
+            const defaultFilters = metadata.metadata?.meta?.default_filters || {};
+            const filterByList = metadata.metadata?.filter_by || [];
+
+            // Check if date_range has defaultValue in filter_by or default_filters
+            const dateFilter = filterByList.find((f: any) => f.key === 'date_range');
+            let fromDate = '';
+            let toDate = '';
+            if (dateFilter?.defaultValue) {
+                fromDate = dateFilter.defaultValue.from_date || dateFilter.defaultValue.from || '';
+                toDate = dateFilter.defaultValue.to_date || dateFilter.defaultValue.to || '';
+            } else if (defaultFilters.date_range) {
+                if (typeof defaultFilters.date_range === 'object') {
+                    fromDate = defaultFilters.date_range.from_date || defaultFilters.date_range.from || '';
+                    toDate = defaultFilters.date_range.to_date || defaultFilters.date_range.to || '';
+                } else if (typeof defaultFilters.date_range === 'string' && defaultFilters.date_range.includes(',')) {
+                    const [f, t] = defaultFilters.date_range.split(',');
+                    fromDate = f;
+                    toDate = t;
+                }
+            }
+
+            const initialValues: any = {
+                display_by: defaultDisplayKey,
+                operation_key: defaultOpVal,
+                staff_id: defaultFilters.staff_id ? String(defaultFilters.staff_id) : '',
+                patient_id: defaultFilters.patient_id ? String(defaultFilters.patient_id) : '',
+                appointment_status: defaultFilters.appointment_status || '',
+                date_from: fromDate,
+                date_to: toDate,
+            };
+
+            reset(initialValues);
+        }
+    }, [metadata, reset]);
+
+    const doctors = useMemo(() => {
+        const list = (staffs && staffs.length > 0 ? staffs : staffsByUser || []);
+        const docOpts = list.map((s: any) => {
+            const firstName = s.first_name || s.name || s.user_name || `Staff #${s.id}`;
+            const lastName = s.last_name ? ` ${s.last_name}` : '';
+            const fullName = `${firstName}${lastName}`.trim();
+            const prefix = fullName.toLowerCase().startsWith('dr') ? '' : 'Dr. ';
+            return {
+                label: `${prefix}${fullName}`,
+                value: String(s.id || s.staff_id),
+            };
+        });
+        return [
+            { label: 'All Doctors', value: '' },
+            ...docOpts
+        ];
+    }, [staffs, staffsByUser]);
+
+    const patientOptions = useMemo(() => {
+        const pOpts = (patients || []).map((p: any) => ({
+            label: `${p.first_name || ''} ${p.last_name || ''} (${p.patient_num || p.id})`.trim(),
+            value: String(p.id),
+        }));
+        return [
+            { label: 'All Patients', value: '' },
+            ...pOpts
+        ];
+    }, [patients]);
+
+    const statusOptions = [
+        { label: 'All Status', value: '' },
+        { label: 'Completed', value: 'COMPLETED' },
+        { label: 'Cancelled', value: 'CANCELLED' },
+        { label: 'Schedule', value: 'SCHEDULED' },
+        { label: 'Pending', value: 'PENDING' },
+    ];
+
+    const displayOptions = useMemo(() => {
+        const list = metadata?.metadata?.display_by || [];
+        return list.map((d: any) => ({
+            label: d.label || d.name || formatKeyLabel(d.key),
+            value: d.key,
+        }));
+    }, [metadata]);
+
+    const operationOptions = useMemo(() => {
+        const list = metadata?.metadata?.operation_by || [];
+        return list.map((o: any) => ({
+            label: o.label || `${o.operation} of ${o.key}`,
+            value: `${o.key}:${o.operation}`,
+        }));
+    }, [metadata]);
+
+    const onSubmit = (data: any) => {
+        const todayStr = new Date().toISOString().split('T')[0];
+        const threeMonthsAgoStr = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+        
+        const dateVal = (data.date_from && data.date_to) ? {
+            from_date: data.date_from,
+            to_date: data.date_to
+        } : {
+            from_date: threeMonthsAgoStr,
+            to_date: todayStr
+        };
+
+        const payload: any = {};
+
+        if (isDynamicReport) {
+            // Dynamic report -> filters is a LIST / ARRAY
+            const filtersList: any[] = [
+                {
+                    key: 'date_range',
+                    value: dateVal
+                }
+            ];
+
+            if (data.staff_id !== undefined && data.staff_id !== null && data.staff_id !== '') {
+                filtersList.push({ key: 'staff_id', value: Number(data.staff_id) });
+            }
+            if (data.patient_id !== undefined && data.patient_id !== null && data.patient_id !== '') {
+                filtersList.push({ key: 'patient_id', value: Number(data.patient_id) });
+            }
+            if (data.appointment_status) {
+                filtersList.push({ key: 'appointment_status', value: data.appointment_status });
+            }
+
+            payload.filters = filtersList;
+
+            if (data.display_by) {
+                payload.display_by = data.display_by;
+            }
+            if (data.operation_key) {
+                const [opKey, opType] = data.operation_key.split(':');
+                const selectedOp = metadata?.metadata?.operation_by?.find(
+                    o => o.key === opKey && o.operation === opType
+                );
+                if (opKey && opType) {
+                    payload.operation_by = {
+                        key: opKey,
+                        operation: opType,
+                        label: selectedOp?.label || `${opType} of ${opKey}`
+                    };
+                }
+            }
+        } else {
+            // Static report -> filters is a DICTIONARY / OBJECT
+            const filtersObj: Record<string, any> = {
+                date_range: dateVal
+            };
+
+            if (data.staff_id !== undefined && data.staff_id !== null && data.staff_id !== '') {
+                filtersObj.staff_id = Number(data.staff_id);
+            }
+            if (data.patient_id !== undefined && data.patient_id !== null && data.patient_id !== '') {
+                filtersObj.patient_id = Number(data.patient_id);
+            }
+            if (data.appointment_status) {
+                filtersObj.appointment_status = data.appointment_status;
+            }
+
+            payload.filters = filtersObj;
+        }
+
+        onApply(payload);
+        onClose();
+    };
+
+    const setQuickRange = (days: number | null) => {
+        if (days === null) {
+            setValue('date_from', '');
+            setValue('date_to', '');
+            return;
+        }
+        const to = new Date().toISOString().split('T')[0];
+        const from = new Date(Date.now() - days * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+        setValue('date_from', from);
+        setValue('date_to', to);
+    };
+
+    return (
+        <BottomModal isVisible={isVisible} onClose={onClose} heightMode="fixed" fixedHeightPercent={85}>
+            <ModalTitle heading="Report Filters Selection" showCloseIcon onClose={onClose} variant="text18B" />
+
+            <ScrollView className="px-6 py-4" showsVerticalScrollIndicator={false}>
+                <CustomView className="gap-2">
+                    {/* Display By & Operation By - Render ONLY for Dynamic reports */}
+                    {isDynamicReport && displayOptions.length > 0 && (
+                        <Dropdown
+                            name="display_by"
+                            label="Display By"
+                            control={control}
+                            items={displayOptions}
+                            rules={{}}
+                            defaultValue=""
+                        />
+                    )}
+
+                    {isDynamicReport && operationOptions.length > 0 && (
+                        <Dropdown
+                            name="operation_key"
+                            label="Operation By"
+                            control={control}
+                            items={operationOptions}
+                            rules={{}}
+                            defaultValue=""
+                        />
+                    )}
+
+                    {/* Date Range Section */}
+                    <CustomView className="mb-4">
+                        <Text style={{ color: isDarkMode ? '#FFFFFF' : '#475569' }} className="ml-1 uppercase tracking-widest text-[10px] font-extrabold mb-2">
+                            Date Range
+                        </Text>
+                        <CustomView className="flex-row gap-3">
+                            <View className="flex-1">
+                                <DatePickerInput
+                                    name="date_from"
+                                    control={control}
+                                    placeholder="From"
+                                />
+                            </View>
+                            <View className="flex-1">
+                                <DatePickerInput
+                                    name="date_to"
+                                    control={control}
+                                    placeholder="To"
+                                />
+                            </View>
+                        </CustomView>
+
+                        {/* Presets */}
+                        <CustomView className="flex-row flex-wrap gap-2 mt-2">
+                            {[
+                                { label: 'Today', val: 0 },
+                                { label: 'Last 7 Days', val: 7 },
+                                { label: 'Last 30 Days', val: 30 },
+                                { label: 'All Time', val: null },
+                            ].map((p) => (
+                                <TouchableOpacity
+                                    key={p.label}
+                                    onPress={() => setQuickRange(p.val)}
+                                    style={{
+                                        backgroundColor: isDarkMode ? '#2C2C2E' : '#F1F5F9',
+                                        borderColor: isDarkMode ? '#3A3A3C' : '#E2E8F0',
+                                    }}
+                                    className="px-3.5 py-2 rounded-full border"
+                                >
+                                    <Text style={{ color: isDarkMode ? '#FFFFFF' : '#334155' }} className="text-xs font-bold">{p.label}</Text>
+                                </TouchableOpacity>
+                            ))}
+                        </CustomView>
+                    </CustomView>
+
+                    {/* Dynamic Filters Mapping */}
+                    {metadata?.metadata?.filter_by?.map((item) => {
+                        if (item.key === 'staff_id' || item.key.includes('doctor') || item.key.includes('staff')) {
+                            return (
+                                <Dropdown
+                                    key={item.key}
+                                    name="staff_id"
+                                    label={item.label || 'Filter by Doctor'}
+                                    control={control}
+                                    items={doctors}
+                                    rules={{}}
+                                    defaultValue=""
+                                />
+                            );
+                        }
+                        if (item.key === 'patient_id' || item.key.includes('patient')) {
+                            return (
+                                <Dropdown
+                                    key={item.key}
+                                    name="patient_id"
+                                    label={item.label || 'Filter by Patient'}
+                                    control={control}
+                                    items={patientOptions}
+                                    rules={{}}
+                                    defaultValue=""
+                                />
+                            );
+                        }
+                        if (item.key === 'appointment_status' || item.key.includes('status')) {
+                            return (
+                                <Dropdown
+                                    key={item.key}
+                                    name="appointment_status"
+                                    label={item.label || 'Filter by Status'}
+                                    control={control}
+                                    items={statusOptions}
+                                    rules={{}}
+                                    defaultValue=""
+                                />
+                            );
+                        }
+                        return null;
+                    })}
+                </CustomView>
+
+                <View className="h-10" />
+            </ScrollView>
+
+            <CustomView className="p-6 border-t border-gray-50 dark:border-gray-800 bg-white dark:bg-surface-dark">
+                <CustomButton
+                    title="Apply Filters"
+                    onPress={handleSubmit(onSubmit)}
+                    className="rounded-2xl py-4"
+                />
+                <TouchableOpacity
+                    onPress={() => {
+                        onApply(null);
+                        onClose();
+                    }}
+                    className="mt-4 text-center items-center py-2"
+                >
+                    <Text style={{ color: isDarkMode ? '#A78BFA' : themeColors.brand[600] }} className="text-sm font-extrabold">Reset defaults</Text>
+                </TouchableOpacity>
+            </CustomView>
+        </BottomModal>
+    );
+};
+
+export default ReportFilterModal;