@argusoft/medplat-app-shell 1.0.6 → 1.0.8

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

@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types';
+import React, { lazy, Suspense, useEffect } from 'react';
+
+import { Button } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { getWebTasksBasketDetails } from '@/common/services/Webtasks';
+import useTrackEvent from '@/hooks/useTrackEvent';
+const LocationSelectionComponent = lazy(
+  () => import('@/views/feature-components/LocationDirective/LocationDirectiveV2')
+);
+
+const WebtasksFilterForm = ({
+  handleOverlayState,
+  setWebTasksData,
+  selectedWidgetData,
+  locations,
+  setLocations,
+  setSelectedLocation,
+  selectedLocation,
+}) => {
+  const trackEvent = useTrackEvent();
+
+  const { translate } = useTranslateProvider();
+
+  const loadInitialData = async () => {};
+
+  useEffect(() => {
+    loadInitialData();
+  }, []);
+
+  const handleSubmit = async () => {
+    try {
+      const searchObject = {
+        limit: 100,
+        offset: 0,
+        taskTypeId: selectedWidgetData.id,
+      };
+
+      const selectedLocationId = selectedLocation?.finalSelected?.optionSelected?.id;
+      if (selectedLocationId) {
+        searchObject['locationId'] = selectedLocationId;
+      }
+
+      trackEvent('filter', {
+        filter_type: ['location', 'task'],
+        ...searchObject,
+      });
+
+      const { data: filteredWebtasksList } = await getWebTasksBasketDetails(searchObject);
+
+      setWebTasksData(
+        filteredWebtasksList.map((data, index) => {
+          return { index: index + 1, ...data.details };
+        })
+      );
+      handleOverlayState();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Grid className="text-[1rem] p-4">
+      <Suspense>
+        <LocationSelectionComponent
+          selectedLocation={selectedLocation}
+          setSelectedLocation={setSelectedLocation}
+          templateType="inline"
+          locations={locations}
+          setLocations={setLocations}
+          fetchAccordingToUserAoi={true}
+        />
+      </Suspense>
+
+      <Grid container spacing={1} marginTop={1} justifyContent="flex-end">
+        <Grid item>
+          <Button
+            data-testid={`webtaskfilterform-close-button`}
+            variant="contained"
+            color="secondary"
+            onClick={() => handleOverlayState()}
+          >
+            {translate('Cancel')}
+          </Button>
+        </Grid>
+
+        <Grid item>
+          <Button data-testid={`webtaskfilterform-search-button`} variant="contained" onClick={() => handleSubmit()}>
+            {translate('Search')}
+          </Button>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default WebtasksFilterForm;
+
+WebtasksFilterForm.propTypes = {
+  handleOverlayState: PropTypes.any,
+  setWebTasksData: PropTypes.any,
+  selectedWidgetData: PropTypes.any,
+  locations: PropTypes.any,
+  setLocations: PropTypes.any,
+  setSelectedLocation: PropTypes.func,
+  selectedLocation: PropTypes.any,
+};

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

@@ -0,0 +1,161 @@
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+
+const WidgetCard = ({
+  hidden,
+  widgetData,
+  onArrowClick,
+  onClick,
+  dataTestId = 'Widget-Card',
+  showIcon = true,
+  isSelected = false,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const { count, name, colorCode: color, lastModified } = widgetData;
+
+  const { translate } = useTranslateProvider();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+
+  const formattedDate =
+    lastModified && !isNaN(Number(lastModified))
+      ? new Date(Number(lastModified)).toLocaleString('en-IN', {
+          day: '2-digit',
+          month: 'short',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        })
+      : lastModified;
+
+  return (
+    <Box
+      className="rounded-[10px] p-[1px] cursor-pointer transition-all duration-200 bg-transparent group"
+      sx={{
+        border: isSelected
+          ? '2px solid var(--color-primary)'
+          : isHovered
+            ? `2px solid ${isDark ? '#8B949E' : '#5A6A7D'}`
+            : '2px solid transparent',
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
+      data-testid={dataTestId}
+    >
+      <Box
+        className="flex items-center rounded-lg h-[80px] py-2 border px-3 shadow-sm relative overflow-hidden"
+        sx={{
+          backgroundColor: isDark ? theme.palette.background.paper : '#ffffff !important',
+          borderColor: isHovered
+            ? isDark
+              ? 'rgba(255, 255, 255, 0.2)'
+              : '#8B949E'
+            : isDark
+              ? 'rgba(255, 255, 255, 0.1)'
+              : '#E5E7EB',
+        }}
+      >
+        {/* Left colored square */}
+        <Box
+          style={{ backgroundColor: color || '#243A50' }}
+          className="shrink-0 flex justify-center items-center text-white rounded-md w-[54px] h-[54px] px-2"
+        >
+          <Typography
+            data-testid={`widgetcard-notification-count-input`}
+            variant="body2"
+            fontWeight="bold"
+            className="text-[15px] "
+          >
+            {count > 9999 ? '9999+' : count}
+          </Typography>
+        </Box>
+
+        {/* Text Section */}
+        <Box className="flex-1 flex flex-col justify-center ml-3 mr-1 overflow-hidden">
+          <Tooltip title={translate(name)} arrow placement="top">
+            <Typography
+              data-testid={`widgetcard-notification-name-input`}
+              variant="body2"
+              sx={{
+                fontWeight: 500,
+                color: isDark ? theme.palette.text.primary : '#243A50',
+                width: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitLineClamp: lastModified ? 2 : 3,
+                WebkitBoxOrient: 'vertical',
+              }}
+              className="text-[14px] leading-snug"
+            >
+              {translate(name)}
+            </Typography>
+          </Tooltip>
+          {lastModified && (
+            <Typography
+              variant="caption"
+              sx={{
+                color: isDark ? theme.palette.text.secondary : '#8d8f91ff',
+                fontSize: '0.65rem',
+                mt: 0.25,
+                fontWeight: 600,
+                fontStyle: 'italic',
+              }}
+            >
+              Updated at : {formattedDate}
+            </Typography>
+          )}
+        </Box>
+
+        {/* Arrow Icon on Hover */}
+        {showIcon && (
+          <Box className="w-8 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity absolute right-1">
+            <IconButton
+              onClick={(event) => {
+                event.stopPropagation();
+                if (onArrowClick) onArrowClick();
+              }}
+              size="small"
+              data-testid={`widgetcard-arrow-button`}
+              sx={{ backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : '#F3F4F6' }}
+            >
+              {hidden ? (
+                <FontAwesomeIcon
+                  icon={faArrowLeft}
+                  data-testid={`widgetcard-arrowback-button`}
+                  size="xs"
+                  className={isDark ? 'text-gray-300' : 'text-gray-600'}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faArrowRight}
+                  data-testid={`widgetcard-arrowforward-button`}
+                  size="xs"
+                  className={isDark ? 'text-gray-300' : 'text-gray-600'}
+                />
+              )}
+            </IconButton>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default WidgetCard;
+
+WidgetCard.propTypes = {
+  widgetData: PropTypes.any,
+  onArrowClick: PropTypes.any,
+  onClick: PropTypes.any,
+  hidden: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  dataTestId: PropTypes.any,
+  showIcon: PropTypes.any,
+};

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

@@ -0,0 +1,263 @@
+import React, { useState, useEffect } from 'react';
+import {
+  TableContainer,
+  Paper,
+  Modal,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  Select,
+  MenuItem,
+  TextField,
+  Divider,
+  Button,
+  Stack,
+  Typography,
+} from '@mui/material';
+import PropTypes from 'prop-types';
+import { getWebTasksAction, saveAction } from '@/common/services/Webtasks';
+import Grid from '@mui/material/Grid2';
+import { showToast } from '@/common/toaster/toaster';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import SafeHtml from '@/common/SafeHtml.jsx';
+
+const ActionModal = ({ open, onClose, selectedTask = {}, ...props }) => {
+  const [currentTask, setCurrentTask] = useState(selectedTask);
+  const [actionOptions, setActionOptions] = useState([]);
+  const { translate } = useTranslateProvider();
+
+  const onSave = async () => {
+    await saveAction([currentTask]);
+    onClose(true);
+  };
+  useEffect(() => {
+    if (selectedTask) {
+      fetchTaskDetails(selectedTask.taskId);
+    }
+  }, [selectedTask]);
+
+  const fetchTaskDetails = async (taskId) => {
+    try {
+      const { data: response } = await getWebTasksAction({ taskId });
+
+      setCurrentTask(selectedTask || response.selected[0].webTasks[0]);
+      setActionOptions(response.selected[0].webTasks[0].actions);
+    } catch (error) {
+      console.error('Unable to retrieve task action details', error);
+      showToast({ type: 'error', message: 'Unable to retrieve task action details' });
+    }
+  };
+
+  const handleActionChange = (task, action) => {
+    const { isOtherDetailsRequired, actionKey } = action;
+    const updatedTask = { ...task, action, selectedAction: actionKey, isOtherDetailsRequired };
+    setCurrentTask(updatedTask);
+  };
+
+  const handleOtherDetailsChange = (task, otherDetail) => {
+    const updatedTask = { ...task, otherDetail, isOtherDetails: true };
+    setCurrentTask(updatedTask);
+  };
+
+  const headerCellStyle = {
+    borderRight: '0.1px solid var(--color-gray3)',
+    borderBottom: '0.1px solid var(--color-gray3)',
+    minWidth: '80px',
+    fontWeight: 'bold',
+    backgroundColor: 'var(--color-background)',
+    color: 'var(--color-text)',
+    fontSize: 14,
+    padding: '12px',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    top: 0,
+    position: 'sticky',
+    zIndex: 1, // Helps to keep header above scrollable content
+  };
+
+  const bodyCellStyle = {
+    borderBottom: '0.1px solid var(--color-gray3)',
+    borderRight: '0.1px solid var(--color-gray3)',
+    backgroundColor: 'var(--color-background2)',
+    color: 'var(--color-text)',
+    padding: '10px',
+    fontSize: 13,
+    maxWidth: 400,
+    height: 50,
+    wordWrap: 'break-word',
+    whiteSpace: 'normal',
+  };
+
+  const rowStyle = (index) => ({
+    backgroundColor: index % 2 === 0 ? 'var(--color-background2)' : 'var(--color-background)',
+  });
+
+  if (!actionOptions.length) return null;
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      sx={{
+        '& .MuiBackdrop-root': {
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        },
+      }}
+      {...props}
+    >
+      <Grid
+        container
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          bgcolor: 'var(--color-background2)',
+          boxShadow: 24,
+          width: '70vw',
+          maxWidth: '80vw',
+          display: 'flex',
+          flexDirection: 'column',
+          outline: 'none',
+          borderRadius: '4px',
+          overflow: 'hidden',
+        }}
+      >
+        <Grid className="justify-between flex items-center flex-row p-2.5 px-5  border-b">
+          <Typography variant="body1" className="font-medium text-lg text-customBlue">
+            {translate('Perform Action')}
+          </Typography>
+        </Grid>
+        <Divider />
+        <Grid className="justify-between flex items-center flex-row border-b border-gray-300 p-[3px_8px]">
+          <Typography data-testid="actionmodal-task-title" variant="body2" className="font-bold">
+            {currentTask?.title}
+          </Typography>
+        </Grid>
+
+        <Grid className="justify-between flex items-center flex-row border-b border-gray-300 p-[3px_8px] w-full">
+          <TableContainer
+            component={Paper}
+            sx={{
+              maxWidth: '100%',
+              overflowX: 'auto', // This enables the horizontal scrollbar
+              maxHeight: '60vh', // Keeps the table from getting too tall
+            }}
+          >
+            <Table size="small" aria-label="task details table">
+              <TableHead>
+                <TableRow>
+                  <TableCell key="#" style={headerCellStyle}>
+                    #
+                  </TableCell>
+
+                  {Object.keys(selectedTask?.details)?.map((data, index) => (
+                    <TableCell data-testid={`actionmodal-task-header-${index}`} key={index + 1} style={headerCellStyle}>
+                      {data}
+                    </TableCell>
+                  ))}
+                  <TableCell style={headerCellStyle} data-testid={`actionmodal-task-header-action`}>
+                    {translate('Actions')}
+                  </TableCell>
+                  <TableCell style={headerCellStyle} data-testid={`actionmodal-task-header-otherDetails`}>
+                    {translate('Other Details')}
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow style={rowStyle(1)}>
+                  <TableCell style={bodyCellStyle}> 1 </TableCell>
+                  {Object.values(selectedTask.details).map((detail, index) => (
+                    <TableCell data-testid={`actionmodal-task-data-${index}`} key={index + 1} style={bodyCellStyle}>
+                      <div className="w-48 h-full flex justify-center items-center">
+                        <div dangerouslySetInnerHTML={{ __html: detail }} />
+                      </div>
+                    </TableCell>
+                  ))}
+
+                  <TableCell width="250px" style={bodyCellStyle}>
+                    {currentTask.isActionRequired ? (
+                      <Select
+                        size="small"
+                        value={currentTask.action || 'select'}
+                        onChange={(e) => handleActionChange(currentTask, e.target.value)}
+                        fullWidths
+                        className="w-[150]"
+                        data-testid={`actionmodal-task-action-select`}
+                      >
+                        <MenuItem value="select">--Select--</MenuItem>
+                        {actionOptions.map((action, idx) => (
+                          <MenuItem
+                            data-testid={`actionmodal-action-select-option-${idx}`}
+                            key={idx + 1}
+                            value={action}
+                          >
+                            {action.displayText}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    ) : (
+                      <Typography data-testid={`actionmodal-no-action`} variant="body2" className="w-[150]">
+                        {translate('No Action Required')}
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell style={bodyCellStyle}>
+                    {currentTask.isOtherDetailsRequired ? (
+                      <TextField
+                        multiline
+                        maxRows={3}
+                        fullWidth
+                        className="w-[150]"
+                        size="small"
+                        maxWidth
+                        value={currentTask.otherDetail || ''}
+                        onChange={(e) => handleOtherDetailsChange(currentTask, e.target.value)}
+                        data-testid={`actionmodal-otherdetails-input`}
+                      />
+                    ) : (
+                      <Typography data-testid={`actionmodal-no-otherdetails`} variant="body2" className="w-[150px]">
+                        {translate('Not Required')}
+                      </Typography>
+                    )}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Grid>
+        <Stack direction="row" spacing={2} justifyContent="flex-end" mt={1} mb={1} paddingRight={1}>
+          <Button
+            data-testid={`actionmodal-close-button`}
+            variant="contained"
+            size="small"
+            color="secondary"
+            onClick={() => onClose()}
+          >
+            <Typography variant="caption">Close</Typography>
+          </Button>
+          <Button
+            data-testid={`actionmodal-save-button`}
+            variant="contained"
+            size="small"
+            onClick={onSave}
+            color="primary"
+          >
+            <Typography variant="caption"> {translate('Save')} </Typography>
+          </Button>
+        </Stack>
+      </Grid>
+    </Modal>
+  );
+};
+
+export default ActionModal;
+
+ActionModal.propTypes = {
+  open: PropTypes.any,
+  onClose: PropTypes.any,
+  selectedTask: PropTypes.any,
+  onSave: PropTypes.any,
+  ActionExecutable: PropTypes.any,
+};