@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/Dashboard/ekavachModal/MoVerficationForChildScreeningMoadal.jsx

@@ -0,0 +1,566 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Modal,
+  Typography,
+  IconButton,
+  Button,
+  Divider,
+  MenuItem,
+  Select,
+  FormControl,
+  CircularProgress,
+  TextField,
+  FormHelperText,
+} from '@mui/material';
+import { useForm, FormProvider, Controller, useWatch } from 'react-hook-form';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faXmark,
+  faUser,
+  faPhone,
+  faUserNurse,
+  faRulerVertical,
+  faWeightScale,
+} from '@fortawesome/free-solid-svg-icons';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+// --- Mock Service Imports (Replace with your actual imports) ---
+
+import { execute } from '@/common/services/GlobalApis';
+import { showToast } from '@/common/toaster/toaster'; // Assuming a toaster exists
+import { FormItem } from '@/views/custom-components/FormItem';
+import CustomRadioGroup from '@/views/custom-components/CustomRadioComponent';
+
+import SafeHtml from '@/common/SafeHtml.jsx';
+
+// --- Validation Schema ---
+const validationSchema = Yup.object().shape({
+  weight: Yup.number()
+    .typeError('Weight must be a number')
+    .required('Enter weight')
+    .min(0.1, 'Min 0.1')
+    .max(23, 'Max 23'),
+  height: Yup.number()
+    .typeError('Height must be a number')
+    .required('Enter height')
+    .min(45, 'Min 45')
+    .max(120, 'Max 120')
+    .test('is-decimal', 'Height not allowed in decimal value', (val) => Number.isInteger(val)),
+  midUpperArmCircumference: Yup.number()
+    .typeError('MUAC must be a number')
+    .required('Enter MUAC')
+    .min(6, 'Min 6')
+    .max(26, 'Max 26'),
+  bilateralPittingOedema: Yup.string().required('Select a value'),
+  // Conditional validation for apetiteTest and screeningCenter is handled in logic or via dynamic schema if strictly needed.
+  // For simplicity with RHF, we often make them nullable in schema and validate in onSubmit for complex business logic.
+  apetiteTest: Yup.string().nullable(),
+  screeningCenter: Yup.string().nullable(),
+});
+
+// --- Detail Item Component ---
+const DetailItem = ({ label, value, icon, isHtml }) => {
+  if (value === null || value === undefined) return null;
+  return (
+    <div className="flex flex-col mb-3">
+      <Typography
+        variant="caption"
+        className="text-gray-500 uppercase tracking-wider mb-1 flex items-center gap-2 text-[11px] font-semibold"
+      >
+        {icon && <FontAwesomeIcon icon={icon} className="text-gray-400" />}
+        {label}
+      </Typography>
+      {isHtml ? (
+        <div className="font-medium text-gray-900 text-[14px]" dangerouslySetInnerHTML={{ __html: value }} />
+      ) : (
+        <Typography variant="body2" className="font-medium text-gray-900 text-[14px]">
+          {value}
+        </Typography>
+      )}
+    </div>
+  );
+};
+DetailItem.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  icon: PropTypes.object,
+  isHtml: PropTypes.bool,
+};
+const MoVerficationForChildScreeningMoadal = ({ open, onClose, message, task, onSave }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [screeningCenters, setScreeningCenters] = useState([]);
+  const [rchDetails, setRchDetails] = useState({});
+  const [sdScoreInfo, setSdScoreInfo] = useState({ score: 'NONE', display: '--' });
+  const [showApetiteTest, setShowApetiteTest] = useState(true);
+
+  // --- Form Setup ---
+  const methods = useForm({
+    mode: 'onChange',
+    resolver: yupResolver(validationSchema),
+    defaultValues: {
+      weight: '',
+      height: '',
+      midUpperArmCircumference: '',
+      bilateralPittingOedema: '',
+      apetiteTest: null,
+      screeningCenter: '',
+    },
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = methods;
+
+  // Watch fields for calculations
+  const watchedValues = useWatch({
+    control,
+    name: ['weight', 'height', 'midUpperArmCircumference', 'bilateralPittingOedema', 'apetiteTest'],
+  });
+  const [weight, height, muac, oedema, apetiteTest] = watchedValues;
+
+  // --- Helpers ---
+  const formatSdScore = (score) => {
+    switch (score) {
+      case 'SD4':
+        return 'Less than -4';
+      case 'SD3':
+        return '-4 to -3';
+      case 'SD2':
+        return '-3 to -2';
+      case 'SD1':
+        return '-2 to -1';
+      case 'MEDIAN':
+        return 'MEDIAN';
+      default:
+        return 'NONE';
+    }
+  };
+
+  // --- 1. Init: Fetch Data ---
+  useEffect(() => {
+    if (open && task?.childId) {
+      reset(); // Clear form
+      setSdScoreInfo({ score: 'NONE', display: '--' });
+      setShowApetiteTest(true);
+
+      const initData = async () => {
+        try {
+          setIsLoading(true);
+
+          // 1. Fetch Screening Centers
+          // Note: Assuming logic to get userId exists, or passed in params.
+          // Using a generic code here based on your Angular snippet.
+          const centerRes = await execute({
+            code: 'retrieve_cmtc_nrc_centers_for_rbsk',
+            parameters: { userId: task.loggedInUserId },
+          });
+          if (centerRes?.data?.result) setScreeningCenters(centerRes.data.result);
+
+          // 2. Fetch RCH Child Service Details
+          // Use specific service if available, otherwise generic execute
+          const rchRes = await execute({
+            // Mapping "ChildScreeningService.retrieveRchChildServiceDetailsByMemberId"
+            // You might need to adjust this code to your actual API code string
+            code: 'retrieve_rch_child_service_details',
+            parameters: { memberId: task.childId },
+          });
+
+          let rchData = rchRes?.data || {};
+
+          // Format RCH SD Score
+          rchData.sdScoreDisplay = formatSdScore(rchData.sdScore);
+
+          // 3. Fetch Medical Complications
+          const medRes = await execute({
+            code: 'retrieve_medical_complications',
+            parameters: { childId: task.childId },
+          });
+          rchData.medicalComplications = medRes?.data?.medicalComplications;
+
+          setRchDetails(rchData);
+        } catch (error) {
+          console.error(error);
+          showToast({ message: 'Failed to fetch actions', type: 'error' });
+        } finally {
+          setIsLoading(false);
+        }
+      };
+
+      initData();
+    }
+  }, [open, task, reset]);
+
+  // --- 2. Calculate SD Score (Effect) ---
+  useEffect(() => {
+    const calculateScore = async () => {
+      if (weight && height && Number.isInteger(Number(height)) && task?.gender) {
+        try {
+          // Call API to get SD Score
+          const response = await execute({
+            code: 'retrieve_sd_score', // Adjust code
+            parameters: { gender: task.gender, height, weight },
+          });
+
+          const score = response?.data?.sdScore || 'NONE';
+          setSdScoreInfo({
+            score: score,
+            display: formatSdScore(score),
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      } else {
+        setSdScoreInfo({ score: 'NONE', display: '--' });
+      }
+    };
+
+    const timer = setTimeout(() => {
+      if (weight && height) calculateScore();
+    }, 500); // Debounce
+
+    return () => clearTimeout(timer);
+  }, [weight, height, task?.gender]);
+
+  // --- 3. Validate SAM Child (Effect) ---
+  useEffect(() => {
+    // Logic: If NOT SAM, hide appetite test
+    // SAM Criteria: (MUAC <= 11.5) OR (SD Score is SD3 or SD4) OR (Oedema is present)
+    // The Angular logic was:
+    // if (MUAC > 11.5 && SD != SD3 && SD != SD4 && Oedema == NOTPRESENT) -> NOT SAM -> Hide Test
+
+    const isMuacSafe = muac ? Number(muac) > 11.5 : false;
+    const isSdSafe = sdScoreInfo.score !== 'SD3' && sdScoreInfo.score !== 'SD4';
+    const isOedemaSafe = oedema === 'NOTPRESENT';
+
+    if (muac && oedema && sdScoreInfo.score !== 'NONE') {
+      if (isMuacSafe && isSdSafe && isOedemaSafe) {
+        setShowApetiteTest(false);
+        setValue('apetiteTest', null); // Reset value
+      } else {
+        setShowApetiteTest(true);
+      }
+    }
+  }, [muac, oedema, sdScoreInfo.score, setValue]);
+
+  // --- 4. Submit Logic ---
+  const onSubmit = async (data) => {
+    // 1. Final SAM Check
+    const isMuacSafe = Number(data.midUpperArmCircumference) > 11.5;
+    const isSdSafe = sdScoreInfo.score !== 'SD3' && sdScoreInfo.score !== 'SD4';
+    const isOedemaSafe = data.bilateralPittingOedema === 'NOTPRESENT';
+    const isNotSAM = isMuacSafe && isSdSafe && isOedemaSafe;
+
+    if (isNotSAM) {
+      showToast('error', 'Child is not SAM. Entry will be removed');
+      onClose(); // Just close
+      return;
+    }
+
+    // 2. Validate Appetite Test Logic
+    // If Appetite Test is shown and is FALSE (Fail), Screening Center is required
+    if (showApetiteTest) {
+      if (data.apetiteTest === null || data.apetiteTest === undefined) {
+        showToast('error', 'Appetite Test is required');
+        return;
+      }
+      if (data.apetiteTest === 'false' && !data.screeningCenter) {
+        showToast('error', 'Screening Center is required when Appetite Test fails');
+        return;
+      }
+    }
+
+    setIsLoading(true);
+
+    // Prepare Payload
+    const payload = {
+      childId: task.childId,
+      childName: task.childName,
+      areaName: task.areaName,
+      villageName: task.villageName,
+      fhwName: task.fhwName,
+      fhwContactNumber: task.fhwContactNumber,
+      motherName: task.motherName,
+      motherContact: task.motherContact,
+      screenedOn: new Date(),
+      state: 'ACTIVE',
+      locationId: task.locationId,
+      gender: task.gender,
+      screeningCenter: data.screeningCenter,
+      apetiteTest: data.apetiteTest === 'true', // Convert string to boolean
+      childScreeningObject: {
+        childId: task.childId,
+        weight: data.weight,
+        height: data.height,
+        midUpperArmCircumference: data.midUpperArmCircumference,
+        bilateralPittingOedema: data.bilateralPittingOedema,
+        sdScore: sdScoreInfo.score,
+        sdScoreDisplay: sdScoreInfo.display,
+      },
+    };
+
+    try {
+      // 1. Create Child Screening
+      await execute({
+        code: 'create_child_screening', // Replace with actual API/Service call
+        parameters: payload,
+      });
+      showToast('success', 'Details saved successfully');
+
+      // 2. Create MO Verification
+      await execute({
+        code: 'create_mo_verification', // Replace with actual API/Service call
+        parameters: payload.childScreeningObject,
+      });
+      const updatedTask = {
+        ...task,
+        selectedAction: 'VERIFIED',
+      };
+      await onSave(updatedTask);
+      onClose();
+    } catch (error) {
+      if (error?.data?.errorcode === 101) {
+        showToast('error', 'Child is already added');
+      } else {
+        showToast({ message: 'Unable to save task actions', type: 'error' });
+      }
+      onClose();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={() => onClose(null)} className="flex items-center justify-center">
+      <div className="bg-white shadow-2xl rounded-lg flex flex-col w-[90%] max-w-[800px] outline-none max-h-[90vh]">
+        {/* Header */}
+        <div className="flex justify-between items-center p-5 border-b border-gray-100 bg-gray-50 rounded-t-lg">
+          <Typography variant="h6" className="font-bold text-customBlue">
+            {message || 'Perform Action'}
+          </Typography>
+          <IconButton onClick={() => onClose(null)} size="small" disabled={isLoading}>
+            <FontAwesomeIcon icon={faXmark} className="text-gray-400 hover:text-gray-600" />
+          </IconButton>
+        </div>
+
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="overflow-y-auto p-6">
+              {/* Child Info Header */}
+              <div className="mb-6">
+                <Typography variant="h6" className="font-bold text-primary-600 mb-2 text-customBlue">
+                  {task?.childName || 'Child Name'}
+                </Typography>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 text-sm text-gray-600">
+                  <DetailItem label="Area" value={task?.areaName} />
+                  <DetailItem label="Village" value={task?.villageName} />
+                  <DetailItem label="Mother" value={task?.motherName} icon={faUser} />
+                  <DetailItem label="Mother Contact" value={task?.motherContact} icon={faPhone} />
+                  <DetailItem label="FHW Name" value={task?.fhwName} icon={faUserNurse} />
+                  <DetailItem label="FHW Contact" value={task?.fhwContactNumber} icon={faPhone} />
+                </div>
+              </div>
+
+              <Divider className="mb-6" />
+
+              {/* RCH Details (Read Only) */}
+              <Typography variant="subtitle2" className="text-gray-500 font-bold uppercase mb-3 text-xs tracking-wider">
+                Current RCH Details
+              </Typography>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 bg-gray-50 p-4 rounded-md border border-gray-100">
+                <DetailItem
+                  label="Weight"
+                  value={rchDetails.weight ? `${rchDetails.weight} kgs` : 'Not available'}
+                  icon={faWeightScale}
+                />
+                <DetailItem
+                  label="Height"
+                  value={rchDetails.height ? `${rchDetails.height} cms` : 'Not available'}
+                  icon={faRulerVertical}
+                />
+                <DetailItem label="Oedema" value={rchDetails.havePedalEdema ? 'Yes' : 'No'} />
+                <DetailItem
+                  label="MUAC"
+                  value={rchDetails.midArmCircumference ? `${rchDetails.midArmCircumference} cms` : 'Not available'}
+                />
+                <DetailItem label="SD Score" value={rchDetails.sdScoreDisplay || 'N/A'} />
+                <DetailItem label="Medical Complications" value={rchDetails.medicalComplications} isHtml={true} />
+              </div>
+
+              <Divider className="mb-6" />
+
+              {/* Input Form */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Weight */}
+                <Controller
+                  name="weight"
+                  control={control}
+                  render={({ field }) => (
+                    <FormItem label="Weight (in Kg)" required>
+                      <TextField
+                        {...field}
+                        type="number"
+                        fullWidth
+                        size="small"
+                        error={!!errors.weight}
+                        placeholder="Min 0.1 - Max 23"
+                      />
+                      <FormHelperText error>{errors.weight?.message}</FormHelperText>
+                    </FormItem>
+                  )}
+                />
+
+                {/* Height */}
+                <Controller
+                  name="height"
+                  control={control}
+                  render={({ field }) => (
+                    <FormItem label="Height (in cm)" required>
+                      <TextField
+                        {...field}
+                        type="number"
+                        fullWidth
+                        size="small"
+                        error={!!errors.height}
+                        placeholder="Min 45 - Max 120"
+                      />
+                      <FormHelperText error>{errors.height?.message}</FormHelperText>
+                    </FormItem>
+                  )}
+                />
+
+                {/* MUAC */}
+                <Controller
+                  name="midUpperArmCircumference"
+                  control={control}
+                  render={({ field }) => (
+                    <FormItem label="MUAC (in cm)" required>
+                      <TextField
+                        {...field}
+                        type="number"
+                        fullWidth
+                        size="small"
+                        error={!!errors.midUpperArmCircumference}
+                        placeholder="Min 6 - Max 26"
+                      />
+                      <FormHelperText error>{errors.midUpperArmCircumference?.message}</FormHelperText>
+                    </FormItem>
+                  )}
+                />
+
+                {/* Calculated SD Score Display */}
+                <FormItem label="Calculated SD Score">
+                  <div className="p-2 bg-gray-100 rounded border border-gray-200 text-sm font-semibold h-[40px] flex items-center">
+                    {sdScoreInfo.display}
+                  </div>
+                </FormItem>
+
+                {/* Oedema */}
+                <Controller
+                  name="bilateralPittingOedema"
+                  control={control}
+                  render={({ field }) => (
+                    <FormItem label="Bilateral Pitting Oedema" required>
+                      <FormControl fullWidth size="small" error={!!errors.bilateralPittingOedema}>
+                        <Select {...field} displayEmpty value={field.value || ''}>
+                          <MenuItem value="" disabled>
+                            -- Select --
+                          </MenuItem>
+                          <MenuItem value="+">+</MenuItem>
+                          <MenuItem value="++">++</MenuItem>
+                          <MenuItem value="+++">+++</MenuItem>
+                          <MenuItem value="NOTPRESENT">Not present</MenuItem>
+                        </Select>
+                        <FormHelperText>{errors.bilateralPittingOedema?.message}</FormHelperText>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                {/* Appetite Test (Conditional) */}
+                {showApetiteTest && (
+                  <div className="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-orange-50 rounded border border-orange-100">
+                    <FormItem label="Appetite Test" required>
+                      <CustomRadioGroup
+                        control={control}
+                        name="apetiteTest"
+                        errors={errors}
+                        options={[
+                          { label: 'Pass', value: 'true' },
+                          { label: 'Fail', value: 'false' },
+                        ]}
+                        direction="row"
+                      />
+                    </FormItem>
+
+                    {/* Screening Center (Only if Appetite Test Fail) */}
+                    {!apetiteTest && (
+                      <Controller
+                        name="screeningCenter"
+                        control={control}
+                        render={({ field }) => (
+                          <FormItem label="Screening Center" required>
+                            <FormControl fullWidth size="small" error={!!errors.screeningCenter}>
+                              <Select {...field} displayEmpty value={field.value || ''}>
+                                <MenuItem value="" disabled>
+                                  -- Select --
+                                </MenuItem>
+                                {screeningCenters.map((center) => (
+                                  <MenuItem key={center.id} value={center.id}>
+                                    {center.name}
+                                  </MenuItem>
+                                ))}
+                              </Select>
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="p-4 px-6 bg-gray-50 border-t border-gray-100 flex justify-end gap-3 rounded-b-lg">
+              <Button
+                onClick={() => onClose(null)}
+                variant="outlined"
+                color="inherit"
+                disabled={isLoading}
+                className="border-gray-300 text-gray-600 normal-case"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={isLoading}
+                startIcon={isLoading ? <CircularProgress size={16} color="inherit" /> : null}
+                className="bg-blue-600 hover:bg-blue-700 normal-case shadow-none px-6"
+              >
+                {isLoading ? 'Saving...' : 'Save'}
+              </Button>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
+    </Modal>
+  );
+};
+
+MoVerficationForChildScreeningMoadal.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  task: PropTypes.object,
+  message: PropTypes.string,
+  onSave: PropTypes.func,
+};
+
+export default MoVerficationForChildScreeningMoadal;