@argusoft/medplat-app-shell 1.0.5 → 1.0.7

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

@@ -0,0 +1,332 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Typography, IconButton, Button, Chip, Divider } from '@mui/material';
+import Grid from '@mui/material/Grid2'; // Ensure you are using Grid2 as per your imports
+import { useForm, FormProvider, useWatch } from 'react-hook-form';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faXmark, faUser, faPhone, faLocationDot } from '@fortawesome/free-solid-svg-icons';
+import CustomCheckBox from '@/views/custom-components/CustomCheckBox';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import { showToast } from '@/common/toaster/toaster';
+import { execute, executeAll } from '@/common/services/GlobalApis';
+
+// --- Validation Schema ---
+const validationSchema = Yup.object().shape({
+  currentMobileCorrect: Yup.boolean(),
+  mobileNumber: Yup.string().when('currentMobileCorrect', {
+    is: (val) => val === false, // If checkbox is NOT checked
+    then: () =>
+      Yup.string()
+        .required('Mobile number is required')
+        .matches(/^[0-9]{10}$/, 'Must be exactly 10 digits'),
+    otherwise: () => Yup.string().notRequired(), // If checked, ignore validation
+  }),
+});
+
+const HealthWorkerIncorrectDetailsModal = ({ open, onClose, task, onSave }) => {
+  const initialValues = {
+    currentMobileCorrect: false,
+    mobileNumber: '',
+  };
+  const [isLoading, setIsLoading] = useState(false);
+  const [callData, setCallData] = useState(null);
+  const methods = useForm({
+    mode: 'onChange',
+    resolver: yupResolver(validationSchema),
+    defaultValues: initialValues,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    setValue,
+    clearErrors,
+  } = methods;
+
+  // Watch the checkbox to conditionally disable the input
+  const isNumberCorrect = useWatch({ control, name: 'currentMobileCorrect' });
+
+  // Reset form when modal opens
+  useEffect(() => {
+    if (open) {
+      reset(initialValues);
+    }
+  }, [open, reset]);
+
+  // Handle Input Logic: Clear errors/value when checkbox toggles
+  useEffect(() => {
+    if (isNumberCorrect) {
+      // If checked: Set value from record
+      const recordNumber = task?.details?.['Phone Number on Record'];
+      setValue('mobileNumber', recordNumber || '');
+      clearErrors('mobileNumber');
+    } else {
+      // If unchecked: Clear the field
+      setValue('mobileNumber', '');
+    }
+  }, [isNumberCorrect, task, setValue]);
+
+  // 1. INIT: Fetch Call Data when modal opens
+  useEffect(() => {
+    if (open && task?.taskId) {
+      const fetchCallData = async () => {
+        setIsLoading(true);
+        try {
+          const response = await execute({
+            code: 'incorrect_details_retrieve_call_data',
+            parameters: {
+              taskId: task.taskId,
+            },
+          });
+          if (response?.data?.result?.length > 0) {
+            setCallData(response?.data?.result[0]);
+          }
+        } catch (error) {
+          console.error(error);
+          showToast({ message: 'Error in loading call data', type: 'error' });
+        } finally {
+          setIsLoading(false);
+        }
+      };
+
+      fetchCallData();
+
+      // Reset form
+      reset({ currentMobileCorrect: false, mobileNumber: '' });
+    }
+  }, [open, task, reset]);
+
+  // 3. SUBMIT: Handle API execution
+  const onSubmit = async (data) => {
+    setIsLoading(true);
+
+    // Base Query
+    const queryDtos = [
+      {
+        code: 'incorrect_details_update',
+        parameters: {
+          taskId: task.taskId,
+          mobileNumber: data.mobileNumber,
+        },
+        sequence: 1,
+      },
+    ];
+
+    // Add logic based on Call Types (from init API)
+    if (callData && callData.callTypes) {
+      const callTypes = callData.callTypes.split(',');
+
+      callTypes.forEach((callType) => {
+        switch (callType) {
+          case 'ASHA_VERI':
+            queryDtos.push({
+              code: 'incorrect_details_update_insert_gvk_asha_verification_info',
+              parameters: { taskId: task?.taskId },
+              sequence: queryDtos.length + 1,
+            });
+            break;
+          case 'ASHA_TRAINING_VERI':
+            queryDtos.push({
+              code: 'incorrect_details_update_insert_gvk_training_verification_info',
+              parameters: { taskId: task?.taskId },
+              sequence: queryDtos.length + 1,
+            });
+            break;
+          default:
+            break;
+        }
+      });
+    }
+
+    try {
+      await executeAll(queryDtos);
+      const updatedTask = {
+        ...task,
+        selectedAction: 'VERIFIED',
+      };
+      await onSave(updatedTask);
+      // Pass the task back to parent on success, similar to $uibModalInstance.close($scope.task)
+      onClose(task);
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in updating call data', type: 'error' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Helper for Details
+  const DetailItem = ({ label, value, icon }) => {
+    if (!value) 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>
+        <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,
+  };
+
+  const currentMobileCorrectChanged = () => {};
+  return (
+    <Modal open={open} onClose={onClose} className="flex items-center justify-center">
+      {/* Main Container */}
+      <Grid container className="bg-white shadow-2xl rounded-lg flex flex-col w-[90%] max-w-[600px] outline-none">
+        {/* Header */}
+        <div className="flex justify-between items-center p-5 border-b border-gray-100">
+          <Typography variant="h6" className="font-bold text-customBlue">
+            Health Workers Incorrect Details Updation
+          </Typography>
+          <IconButton onClick={onClose} size="small">
+            <FontAwesomeIcon icon={faXmark} className="text-gray-400 hover:text-gray-600" />
+          </IconButton>
+        </div>
+
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
+            {/* Body Content */}
+            <div className="max-h-[60vh] overflow-y-auto w-full">
+              <div className="p-6">
+                {/* Read-Only Details Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2 mb-6">
+                  <DetailItem
+                    label="Health Worker"
+                    value={task?.details?.['Name of Health Worker'] || 'N/A'}
+                    icon={faUser}
+                  />
+                  <DetailItem label="Role" value={task?.details?.['Role'] || 'N/A'} />
+                  <DetailItem
+                    label="Phone on Record"
+                    value={task?.details?.['Phone Number on Record'] || 'N/A'}
+                    icon={faPhone}
+                  />
+                  <DetailItem
+                    label="Last Contact Attempt"
+                    value={task?.details?.['Last Contact Attempted on'] || 'N/A'}
+                  />
+                  <DetailItem label="Location" value={task?.details?.['Location'] || 'N/A'} icon={faLocationDot} />
+
+                  {/* Issue Badge */}
+                  {task?.details?.['Issue'] && (
+                    <div className="flex flex-col mb-3">
+                      <Typography
+                        variant="caption"
+                        className="text-gray-500 uppercase tracking-wider mb-1 font-semibold text-[11px]"
+                      >
+                        Reported Issue
+                      </Typography>
+                      <div>
+                        <Chip
+                          label={task?.details?.['Issue']}
+                          color="warning"
+                          size="small"
+                          sx={{ borderRadius: '4px', height: '24px', fontSize: '12px', fontWeight: 600 }}
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <Divider className="mb-6" />
+
+                {/* Form Section */}
+                <div className="bg-gray-50 p-5 rounded border border-gray-200">
+                  {/* Checkbox */}
+                  <div className="mb-4">
+                    <CustomCheckBox
+                      name="currentMobileCorrect"
+                      control={control}
+                      className="my-2"
+                      label={' Current mobile number is correct'}
+                      labelSizeInRem="1rem"
+                      onChange={() => currentMobileCorrectChanged()}
+                    />
+                  </div>
+
+                  {/* Input Field */}
+                  <div
+                    className={`transition-opacity duration-300 ${isNumberCorrect ? 'opacity-50 pointer-events-none' : 'opacity-100'}`}
+                  >
+                    <CustomTextField
+                      control={control}
+                      name={`mobileNumber`}
+                      errors={errors}
+                      type="number"
+                      placeholder="Updated Mobile Number"
+                    />
+                    {/* <Controller
+                      name="mobileNumber"
+                      control={control}
+                      render={({ field }) => (
+                        <TextField
+                          {...field}
+                          fullWidth
+                          label="Updated Mobile Number"
+                          placeholder="Enter 10-digit number"
+                          variant="outlined"
+                          size="small"
+                          disabled={isNumberCorrect}
+                          error={!!errors.mobileNumber}
+                          helperText={errors.mobileNumber?.message}
+                          inputProps={{ maxLength: 10 }}
+                          sx={{ backgroundColor: 'white' }}
+                        />
+                      )}
+                    /> */}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Footer Buttons */}
+            <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}
+                variant="contained"
+                color="secondary"
+                // className="border-gray-300 text-gray-600 normal-case"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={isLoading}
+                // className="bg-blue-600 hover:bg-blue-700 normal-case shadow-none"
+              >
+                Save
+              </Button>
+            </div>
+          </form>
+        </FormProvider>
+      </Grid>
+    </Modal>
+  );
+};
+
+HealthWorkerIncorrectDetailsModal.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  task: PropTypes.object, // Passed from parent containing details
+  onSave: PropTypes.func,
+};
+
+export default HealthWorkerIncorrectDetailsModal;

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

@@ -0,0 +1,275 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Modal,
+  Typography,
+  IconButton,
+  Button,
+  Divider,
+  MenuItem,
+  Select,
+  FormControl,
+  CircularProgress,
+} from '@mui/material';
+import { useForm, FormProvider, Controller } from 'react-hook-form';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faXmark, faSkull, faCalendar, faPhone, faLocationDot, faUserNurse } from '@fortawesome/free-solid-svg-icons';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+// --- Services/Utils (Mock Imports based on context) ---
+import { execute } from '@/common/services/GlobalApis';
+import { FormItem } from '@/views/custom-components/FormItem';
+import CustomRadioGroup from '@/views/custom-components/CustomRadioComponent';
+import { showToast } from '@/common/toaster/toaster';
+
+// --- Validation Schema ---
+const validationSchema = Yup.object().shape({
+  actionKey: Yup.string().required('Please select an action'),
+  // verbalAutopsy is required. We handle "true"/"false" strings from Radio and cast later if needed
+  verbalAutopsy: Yup.string().required('Please select a Verbal Autopsy option'),
+});
+
+// --- Detail Item Component ---
+const DetailItem = ({ label, value, icon }) => {
+  if (!value) 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>
+      <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,
+};
+const MoMaternalDeathVerifcationModal = ({ open, onClose, task, message, onSave }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [actionsList, setActionsList] = useState([]);
+
+  // --- Form Setup ---
+  const methods = useForm({
+    mode: 'onChange',
+    resolver: yupResolver(validationSchema),
+    defaultValues: {
+      actionKey: null,
+      verbalAutopsy: '', // Default empty to force selection
+    },
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  // --- 1. Init: Fetch Actions & Reset ---
+  useEffect(() => {
+    if (open) {
+      // Reset form
+      reset({ actionKey: null, verbalAutopsy: '' });
+
+      const fetchActions = async () => {
+        try {
+          // Logic: QueryDAO.executeQuery({ code: 'mo_death_verification_mo_actions' ... })
+          const response = await execute({
+            code: 'mo_death_verification_mo_actions',
+            parameters: {},
+          });
+          if (response?.data?.result?.length > 0) {
+            setActionsList(response.data.result);
+          }
+        } catch (error) {
+          console.error('Failed to fetch actions', error);
+          showToast({ message: 'Unable to fetch actions', type: 'error' });
+        }
+      };
+
+      fetchActions();
+    }
+  }, [open, reset]);
+
+  // --- 2. Submit Logic ---
+  const onSubmit = async (data) => {
+    setIsLoading(true);
+
+    // Convert string "true"/"false" back to boolean for API if necessary
+    const isVerbalAutopsy = data.verbalAutopsy === 'true';
+
+    try {
+      await execute({
+        code: 'maternal_death_verification_mo_verbal_autospy_updation',
+        parameters: {
+          taskId: task.taskId,
+          verbalAutopsy: isVerbalAutopsy,
+        },
+      });
+      const selectedAction = actionsList?.find((action) => action?.actionKey === Number(data?.actionKey || '0'));
+      console.log(actionsList, selectedAction, data.actionKey);
+      const updatedTask = {
+        ...task,
+        isOtherDetailsRequired: selectedAction?.isOtherDetailsRequired,
+        selectedAction: Number(data.actionKey),
+        action: selectedAction,
+      };
+      await onSave(updatedTask);
+      onClose(updatedTask);
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Unable to save task actions', type: 'error' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={() => onClose(null)} className="flex items-center justify-center">
+      {/* CHANGED: Replaced <Grid container ...> with <div ...> 
+        The 'flex flex-col' classes already handle the layout logic previously done by Grid.
+      */}
+      <div className="bg-white shadow-2xl rounded-lg flex flex-col w-[90%] max-w-[700px] 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">
+              {/* Title */}
+              <Typography
+                variant="subtitle1"
+                className="font-bold text-primary-600 mb-4 border-l-4 border-blue-500 pl-3"
+              >
+                Maternal Death Verification
+              </Typography>
+
+              {/* Details Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 mb-6 bg-gray-50 p-4 rounded-md border border-gray-100">
+                <DetailItem label="Birth Date" value={task?.details?.['Birth date'] || 'N/A'} icon={faCalendar} />
+                <DetailItem label="Death Type" value={task?.details?.['Death Type'] || 'N/A'} icon={faSkull} />
+
+                <DetailItem label="Death Date" value={task?.details?.['Death date'] || 'N/A'} icon={faCalendar} />
+                <DetailItem
+                  label="Last Delivery Date"
+                  value={task?.details?.['Last delivery date'] || 'N/A'}
+                  icon={faCalendar}
+                />
+
+                <DetailItem label="Death Reason" value={task?.details?.['Death Reason'] || 'N/A'} />
+                <DetailItem label="Location" value={task?.details?.['Location'] || 'N/A'} icon={faLocationDot} />
+
+                <DetailItem
+                  label="Family Contact"
+                  value={task?.details?.['Family Contact Detail'] || 'N/A'}
+                  icon={faPhone}
+                />
+                <DetailItem label="FHW Name" value={task?.details?.['FHW Name'] || 'N/A'} icon={faUserNurse} />
+              </div>
+
+              <Divider className="mb-6" />
+
+              {/* Form Controls */}
+              <div className="space-y-6">
+                {/* 1. Action Dropdown */}
+                <Controller
+                  name="actionKey"
+                  control={control}
+                  render={({ field }) => (
+                    <>
+                      <FormItem label="Action" required>
+                        <FormControl fullWidth error={!!errors.actionKey} size="small">
+                          <Select
+                            {...field}
+                            labelId="action-select-label"
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value)}
+                          >
+                            <MenuItem value="">
+                              <em>-- Select --</em>
+                            </MenuItem>
+                            {actionsList.map((action, index) => (
+                              <MenuItem key={index} value={action.actionKey}>
+                                {action.displayText}
+                              </MenuItem>
+                            ))}
+                          </Select>
+                          <p className="error-helper-text">{errors['actionKey']?.message}</p>
+                        </FormControl>
+                      </FormItem>
+                    </>
+                  )}
+                />
+
+                {/* 2. Verbal Autopsy Radio */}
+                <FormControl component="fieldset" className="w-full">
+                  <FormItem label="Verbal Autopsy" required>
+                    <CustomRadioGroup
+                      control={control}
+                      name={`verbalAutopsy`}
+                      errors={errors}
+                      options={[
+                        { label: 'Yes', value: true },
+                        { label: 'No', value: false },
+                      ]}
+                      direction="row"
+                    />
+                  </FormItem>
+                </FormControl>
+              </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>
+  );
+};
+
+MoMaternalDeathVerifcationModal.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func, // onClose(task) on success, onClose(null) on cancel
+  task: PropTypes.object,
+  message: PropTypes.string,
+  onSave: PropTypes.func,
+};
+
+export default MoMaternalDeathVerifcationModal;