@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/Dashboard/DhnddModal/AshaDataQualityVerificationModal.jsx

@@ -0,0 +1,278 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Modal,
+  Typography,
+  IconButton,
+  Button,
+  Divider,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Collapse,
+  Box,
+  CircularProgress,
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faXmark, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+import { showToast } from '@/common/toaster/toaster';
+import { execute, executeAll } from '@/common/services/GlobalApis';
+import { getLoggedInUser } from '@/common/services/AuthenticateService'; // Adjust path based on your project
+
+const AshaScreenedMembersModal = ({ open, onClose, task, onSave }) => {
+  const [members, setMembers] = useState([]);
+  const [expandedId, setExpandedId] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [userId, setUserId] = useState(null);
+
+  // --- 1. INIT Logic: Fetch User and Members ---
+  const init = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      // Get Logged In User
+      const userRes = await getLoggedInUser();
+      setUserId(userRes?.data?.id);
+
+      // Fetch Screened Members
+      const response = await execute({
+        code: 'retrieve_cbac_done_member_by_asha_id',
+        parameters: {
+          ashaName: task?.details?.UserName,
+          taskId: task?.taskId,
+        },
+      });
+
+      if (response?.data?.result) {
+        const formattedMembers = response.data.result.map((m) => ({
+          ...m,
+          pending: m.status === 'PENDING',
+          currentStatus: m.status, // Track changes locally
+        }));
+        setMembers(formattedMembers);
+      }
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error loading initial data', type: 'error' });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [task]);
+
+  useEffect(() => {
+    if (open) init();
+  }, [open, init]);
+
+  // --- 2. Action Handlers (Local State Only) ---
+  const handleMemberAction = (memberId, newStatus) => {
+    setMembers((prev) => prev.map((m) => (m.member_id === memberId ? { ...m, currentStatus: newStatus } : m)));
+    setExpandedId(null); // Close details after action
+  };
+
+  // --- 3. SAVE Logic: Batch Execute Queries ---
+  const saveChanges = async () => {
+    const nonPendingMembers = members.filter((m) => m.currentStatus !== 'PENDING');
+
+    if (nonPendingMembers.length === 0) {
+      onClose();
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      // Map member updates to query DTOs
+      const queryDtos = nonPendingMembers.map((member, index) => ({
+        code: 'update_member_status',
+        parameters: {
+          memberId: member.member_id,
+          status: member.currentStatus,
+          taskId: task.taskId,
+          userId: userId,
+        },
+        sequence: index + 1,
+      }));
+
+      // If all (or 5) are processed, mark notification complete
+      if (nonPendingMembers.length === members.length || nonPendingMembers.length === 5) {
+        queryDtos.push({
+          code: 'mark_techo_web_notification_as_complete',
+          parameters: {
+            notification_id: task.taskId,
+            action_by: userId,
+          },
+          sequence: queryDtos.length + 1,
+        });
+      }
+
+      await executeAll(queryDtos);
+      showToast({ message: 'Changes saved successfully', type: 'success' });
+      await onSave;
+      await onClose();
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error saving changes', type: 'error' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose} className="flex items-center justify-center">
+      <Grid container className="bg-white shadow-2xl rounded-lg flex flex-col w-[95%] max-w-[1100px] outline-none">
+        {/* Header */}
+        <div className="flex justify-between items-center p-4 border-b">
+          <Typography variant="h6" className="font-bold text-customBlue">
+            List of members screened by asha
+          </Typography>
+          <IconButton onClick={onClose} size="small" disabled={isLoading}>
+            <FontAwesomeIcon icon={faXmark} className="text-gray-400" />
+          </IconButton>
+        </div>
+
+        {/* Body */}
+        <div className="p-4 max-h-[70vh] overflow-y-auto relative">
+          {isLoading && members.length === 0 ? (
+            <Box className="flex justify-center p-10">
+              <CircularProgress />
+            </Box>
+          ) : (
+            <TableContainer component={Paper} variant="outlined">
+              <Table stickyHeader size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell className="bg-gray-50 font-bold">Sr. No.</TableCell>
+                    <TableCell className="bg-gray-50 font-bold">Member ID</TableCell>
+                    <TableCell className="bg-gray-50 font-bold">Name</TableCell>
+                    <TableCell className="bg-gray-50 font-bold">Contact</TableCell>
+                    <TableCell className="bg-gray-50 font-bold">Location</TableCell>
+                    <TableCell className="bg-gray-50 font-bold">CBAC Date</TableCell>
+                    <TableCell className="bg-gray-50 font-bold">Status</TableCell>
+                    <TableCell className="bg-gray-50 font-bold" align="center">
+                      Details
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {members.map((member, index) => (
+                    <React.Fragment key={member.member_id}>
+                      <TableRow hover selected={expandedId === member.member_id}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>{member?.unique_health_id || 'N/A'}</TableCell>
+                        <TableCell>{member?.member_name || 'N/A'}</TableCell>
+                        <TableCell>{member?.contact_number || 'N/A'}</TableCell>
+                        <TableCell>{member?.location || 'N/A'}</TableCell>
+                        <TableCell>{member?.done_on || 'N/A'}</TableCell>
+                        <TableCell>
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              color:
+                                member?.currentStatus === 'Approved'
+                                  ? 'success.main'
+                                  : member?.currentStatus === 'Disapproved'
+                                    ? 'error.main'
+                                    : 'inherit',
+                              fontWeight: member?.currentStatus !== 'PENDING' ? 600 : 400,
+                            }}
+                          >
+                            {member?.currentStatus || 'N/A'}
+                          </Typography>
+                        </TableCell>
+                        <TableCell align="center">
+                          <IconButton
+                            size="small"
+                            onClick={() => setExpandedId(expandedId === member?.member_id ? null : member?.member_id)}
+                          >
+                            <FontAwesomeIcon icon={expandedId === member?.member_id ? faMinus : faPlus} />
+                          </IconButton>
+                        </TableCell>
+                      </TableRow>
+
+                      <TableRow>
+                        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>
+                          <Collapse in={expandedId === member.member_id} timeout="auto" unmountOnExit>
+                            <Box className="m-4 p-4 bg-gray-50 border border-gray-200 rounded-md">
+                              <Grid container spacing={2}>
+                                <Grid size={{ xs: 12, md: 6 }}>
+                                  <Typography variant="body2">
+                                    <strong>Suspected for:</strong> {member?.suspected || 'N.A.'}
+                                  </Typography>
+                                  <Typography variant="body2">
+                                    <strong>Smoke:</strong> {member?.smoke || 'N.A.'}
+                                  </Typography>
+                                  <Typography variant="body2">
+                                    <strong>Alcohol:</strong> {member?.alchohol || 'N.A.'}
+                                  </Typography>
+                                </Grid>
+                                <Grid size={{ xs: 12, md: 6 }}>
+                                  <Typography variant="body2">
+                                    <strong>Waist:</strong> {member?.waist || 'N.A.'}
+                                  </Typography>
+                                  <Typography variant="body2">
+                                    <strong>Score:</strong> {member?.score || 'N.A.'}
+                                  </Typography>
+                                </Grid>
+                              </Grid>
+                              <Divider className="my-3" />
+                              <div className="flex justify-center gap-2">
+                                <Button
+                                  variant="contained"
+                                  size="small"
+                                  onClick={() => handleMemberAction(member?.member_id, 'Approved')}
+                                  disabled={!member?.pending}
+                                >
+                                  Approve
+                                </Button>
+                                <Button
+                                  variant="contained"
+                                  size="small"
+                                  color="error"
+                                  onClick={() => handleMemberAction(member?.member_id, 'Disapproved')}
+                                  disabled={!member?.pending}
+                                >
+                                  Disapprove
+                                </Button>
+                              </div>
+                            </Box>
+                          </Collapse>
+                        </TableCell>
+                      </TableRow>
+                    </React.Fragment>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 px-6 bg-gray-50 border-t flex justify-end gap-3 rounded-b-lg">
+          <Button variant="contained" color="secondary" onClick={onClose} disabled={isLoading}>
+            Close
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={saveChanges}
+            disabled={isLoading || members.length === 0}
+          >
+            {isLoading ? <CircularProgress size={24} color="inherit" /> : 'Save Changes'}
+          </Button>
+        </div>
+      </Grid>
+    </Modal>
+  );
+};
+
+AshaScreenedMembersModal.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  task: PropTypes.object,
+  onSave: PropTypes.any,
+};
+
+export default AshaScreenedMembersModal;

package/src/views/feature-components/Dashboard/PinFeatureModal.jsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+  Checkbox,
+  TextField,
+  InputAdornment,
+} from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { showToast } from '@/common/toaster/toaster';
+
+const PinFeatureModal = ({ open, onClose, linearMenuItems, pinnedFeatures, onSave }) => {
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setSelected(pinnedFeatures || []);
+      setSearch('');
+    }
+  }, [open, pinnedFeatures]);
+
+  const handleToggle = (navState) => {
+    const currentIndex = selected.indexOf(navState);
+    const newSelected = [...selected];
+
+    if (currentIndex === -1) {
+      if (selected.length >= 5) {
+        // Enforce maximum 5 pins
+        return;
+      }
+      newSelected.push(navState);
+    } else {
+      newSelected.splice(currentIndex, 1);
+    }
+    setSelected(newSelected);
+  };
+
+  const handleSave = () => {
+    onSave(selected);
+    onClose();
+  };
+
+  // Convert dictionary back to array and filter out nulls or parents without actual routing
+  const availableItems = Object.values(linearMenuItems || {})
+    .filter((item) => item?.displayName || item?.name)
+    .sort((a, b) => (a.displayName || a.name || '').localeCompare(b.displayName || b.name || ''));
+
+  const filteredItems = availableItems.filter((item) => {
+    const name = (item.displayName || item.name || '').toLowerCase();
+    return name.includes(search.toLowerCase());
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>
+        Pin Menu Shortcuts
+        <div className="text-sm font-normal text-slate-500 mt-1">
+          Select up to 5 quick access features for your Dashboard. ({selected.length}/5)
+        </div>
+      </DialogTitle>
+
+      <div className="px-6 pb-2">
+        <TextField
+          fullWidth
+          size="small"
+          placeholder="Search features..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <FontAwesomeIcon icon={faSearch} className="text-slate-400" />
+              </InputAdornment>
+            ),
+          }}
+        />
+      </div>
+
+      <DialogContent dividers sx={{ p: 0, minHeight: 300 }}>
+        <List sx={{ pt: 0 }}>
+          {filteredItems.map((item) => {
+            const isChecked = selected.includes(item.navigationState);
+            const isDisabled = !isChecked && selected.length >= 5;
+
+            return (
+              <ListItem
+                className='cursor-pointer'
+                key={item.navigationState}
+                button
+                onClick={() => {
+                  if (!isDisabled) {
+                    handleToggle(item.navigationState);
+                  } else {
+                    showToast({
+                      message: 'You can only pin up to 5 features.',
+                      type: 'info'
+                    });
+                  }
+                }}
+                disabled={isDisabled}
+              >
+                <ListItemIcon>
+                  <Checkbox
+                    edge="start"
+                    checked={isChecked}
+                    tabIndex={-1}
+                    disableRipple
+                    disabled={isDisabled}
+                  />
+                </ListItemIcon>
+                <ListItemText primary={item.displayName || item.name} secondary={item.navigationState} />
+              </ListItem>
+            );
+          })}
+          {filteredItems.length === 0 && (
+            <div className="text-center text-slate-500 py-8">
+              No matching features found.
+            </div>
+          )}
+        </List>
+      </DialogContent>
+      <DialogActions sx={{ p: '1rem 1.5rem' }}>
+        <Button onClick={onClose} color="inherit">
+          Cancel
+        </Button>
+        <Button onClick={handleSave} variant="contained" color="primary">
+          Save Pins
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default PinFeatureModal;

package/src/views/feature-components/Dashboard/QuickLinks.jsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faPlus,
+  faUsers,
+  faUserTie,
+  faChartBar,
+  faHeartbeat,
+  faHome,
+  faCog,
+  faFileAlt,
+  faStar,
+  faCubes,
+  faLayerGroup,
+  faTimes,
+} from '@fortawesome/free-solid-svg-icons';
+import { getPinnedFeatures, setPinnedFeatures } from '@/store/reducers/AuthenticationReducer';
+import PinFeatureModal from './PinFeatureModal';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { Tooltip, useTheme, alpha } from '@mui/material';
+
+const QuickLinks = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const pinnedStates = useSelector(getPinnedFeatures) || [];
+  const { linearMenuItems } = useSelector((state) => state.Authenticate);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  // Handler to remove a shortcut
+  const handleRemove = (navState) => {
+    const updated = pinnedStates.filter((ns) => ns !== navState);
+    dispatch(setPinnedFeatures(updated));
+  };
+
+  // Derive full objects based on navigationState matches
+  const pinnedItems = pinnedStates.map((navState) => linearMenuItems?.[navState]).filter(Boolean);
+
+  const getFeatureIcon = (name) => {
+    const n = (name || '').toLowerCase();
+    if (n.includes('user')) return faUsers;
+    if (n.includes('role')) return faUserTie;
+    if (n.includes('report')) return faChartBar;
+    if (n.includes('patient') || n.includes('health') || n.includes('disease')) return faHeartbeat;
+    if (n.includes('dashboard') || n.includes('home')) return faHome;
+    if (n.includes('setting') || n.includes('config')) return faCog;
+    if (n.includes('form') || n.includes('data')) return faFileAlt;
+    if (n.includes('location')) return faLayerGroup;
+    if (n.includes('feature') || n.includes('app')) return faCubes;
+    return faStar; // Default placeholder
+  };
+
+  const handleShortcutClick = (item) => {
+    let path = GeneralUtil.naviagationFunc(item);
+    if (path) {
+      if (!path.startsWith('/ui/')) {
+        path = `/ui/${path}`;
+      }
+      // is ekavach then only open in new tab
+      if (path.includes('report/view/')) {
+        if (GeneralUtil.isEkavach) {
+          window.open(`/ui/${path}`, '_blank');
+        } else {
+          navigate(path);
+        }
+      } else {
+        navigate(path);
+      }
+    }
+  };
+
+  const handleSavePins = (selectedNavStates) => {
+    dispatch(setPinnedFeatures(selectedNavStates));
+  };
+
+  // Skip showing anything if the component renders before menu items load
+  if (!linearMenuItems || Object.keys(linearMenuItems).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="w-full mt-4 mb-2 flex justify-center">
+      <div className="flex flex-wrap items-center justify-center gap-6 max-w-4xl px-4 py-4">
+        {pinnedItems.map((item, idx) => {
+          const name = item.displayName || item.name;
+          const icon = getFeatureIcon(name);
+          return (
+            <div className="relative" key={item.navigationState || idx}>
+              <Tooltip title={name} arrow placement="bottom">
+                <button
+                  onClick={() => handleShortcutClick(item)}
+                  className="flex flex-col items-center group w-[100px] hover:-translate-y-1 transition-transform duration-200 focus:outline-none cursor-pointer"
+                >
+                  <div
+                    className={`w-[56px] h-[56px] rounded-full shadow-sm flex items-center justify-center border transition-colors mb-2 ${
+                      isDark
+                        ? 'bg-slate-800 border-slate-700 group-hover:bg-slate-700 group-hover:border-blue-500/50'
+                        : 'bg-slate-100 border-slate-200 group-hover:bg-blue-50 group-hover:border-blue-200'
+                    }`}
+                  >
+                    <FontAwesomeIcon
+                      icon={icon}
+                      className={`text-xl transition-colors ${
+                        isDark ? 'text-slate-300 group-hover:text-blue-400' : 'text-slate-600 group-hover:text-blue-600'
+                      }`}
+                    />
+                  </div>
+                  <span
+                    className={`text-[13px] font-medium text-center line-clamp-1 leading-tight transition-colors ${
+                      isDark ? 'text-slate-200 group-hover:text-blue-400' : 'text-slate-700 group-hover:text-blue-700'
+                    }`}
+                  >
+                    {name}
+                  </span>
+                </button>
+              </Tooltip>
+            </div>
+          );
+        })}
+
+        <button
+          onClick={() => setModalOpen(true)}
+          className="flex flex-col items-center group w-[100px] hover:-translate-y-1 transition-transform duration-200 focus:outline-none cursor-pointer"
+        >
+          <div
+            className={`w-[56px] h-[56px] rounded-full flex items-center justify-center border border-dashed transition-colors ${
+              isDark
+                ? 'bg-slate-800/40 border-slate-700 group-hover:bg-slate-800/60 group-hover:border-slate-500'
+                : 'bg-slate-50 border-slate-300 group-hover:bg-slate-100 group-hover:border-slate-400'
+            }`}
+          >
+            <FontAwesomeIcon
+              icon={faPlus}
+              className={`transition-colors ${
+                isDark ? 'text-slate-500 group-hover:text-slate-300' : 'text-slate-400 group-hover:text-slate-600'
+              }`}
+            />
+          </div>
+          <span
+            className={`text-[13px] font-medium text-center transition-colors ${
+              isDark ? 'text-slate-400 group-hover:text-slate-200' : 'text-slate-500 group-hover:text-slate-700'
+            }`}
+          >
+            Add Shortcut
+          </span>
+        </button>
+      </div>
+
+      <PinFeatureModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        linearMenuItems={linearMenuItems}
+        pinnedFeatures={pinnedStates}
+        onSave={handleSavePins}
+      />
+    </div>
+  );
+};
+
+export default QuickLinks;

package/src/views/feature-components/Dashboard/Taskbar.jsx

@@ -0,0 +1,56 @@
+import React, { lazy, Suspense } from 'react';
+const WidgetCard = lazy(() => import('@/views/feature-components/Dashboard/WidgetCard'));
+import { Button } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { Box } from '@mui/system';
+import PropTypes from 'prop-types';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+const Taskbar = ({
+  hiddenWidgets,
+  handleHideTaskbar,
+  handleUnhideWidget,
+  onWidgetClick,
+  dataTestId = 'Dashboard-Taskbar',
+}) => {
+  const { translate } = useTranslateProvider();
+  return (
+    <Box className="border border-gray-300 p-4 mt-4" data-testid={dataTestId}>
+      <Grid container spacing={2}>
+        {hiddenWidgets
+          .sort((a, b) => {
+            if (a.orderNo === null) return 1;
+            if (b.orderNo === null) return -1;
+            return a.orderNo - b.orderNo;
+          })
+          .map((widget) => {
+            return (
+              <Grid item key={widget.id} size={{ xs: 12, sm: 6 }}>
+                <Suspense>
+                  <WidgetCard
+                    onClick={() => onWidgetClick(widget)}
+                    widgetData={widget}
+                    hidden={true}
+                    onArrowClick={() => handleUnhideWidget(widget)}
+                    dataTestId={`${dataTestId}-Widget-Card`}
+                  />
+                </Suspense>
+              </Grid>
+            );
+          })}
+      </Grid>
+      <Button data-testid={`taskbar-hide-button`} variant="contained" className=" mt-4" onClick={handleHideTaskbar}>
+        {translate('Hide Taskbar')}
+      </Button>
+    </Box>
+  );
+};
+
+export default Taskbar;
+Taskbar.propTypes = {
+  hiddenWidgets: PropTypes.any,
+  handleHideTaskbar: PropTypes.any,
+  handleUnhideWidget: PropTypes.any,
+  onWidgetClick: PropTypes.any,
+  dataTestId: PropTypes.any,
+};