@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/feature-components/Features/NewServerManagement.jsx

@@ -0,0 +1,217 @@
+/**
+ * @author Sanya Srivastava <ssrivastava@argusoft.com>
+ * @date 2025-04-21 (Monday)
+ */
+
+import { getAllServer, getAllServerDetails } from '@/common/services/SyncWithServer';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleCheck, faCircleXmark, faPen, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { useTheme } from '@mui/material/styles';
+import '@/views/feature-components/Features/ServerManagement.scss';
+import {
+  Button,
+  Chip,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { Box } from '@mui/system';
+import React, { useEffect, useState } from 'react';
+import AddServerModal from './AddServerModal';
+
+export default function NewServerManagement() {
+  const [allServerList, setAllServerList] = useState([]);
+  const [openAddServer, setOpenAddServer] = useState(false);
+  const [editServer, setEditServer] = useState(false);
+  const [serverData, setServerData] = useState({});
+  const [allServerDetails, setAllServerDetails] = useState([]);
+  const [reloadPage, setReloadPage] = useState(false);
+  const theme = useTheme();
+
+  useEffect(() => {
+    (async () => {
+      await fetchServers();
+      await fetchAllServerDetails();
+    })();
+  }, [reloadPage]);
+
+  const getClassName = (className) => {
+    console.log(theme.palette.mode === 'light' ? className : `${className}-dark`);
+    return theme.palette.mode === 'light' ? className : `${className}-dark`;
+  };
+
+  const fetchServers = async () => {
+    try {
+      const response = (await getAllServer()).data;
+      if (response) {
+        setAllServerList(
+          response.map((item) => {
+            let obj = { code: item.code, name: item.name };
+            return obj;
+          })
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching servers:', error);
+    }
+  };
+
+  const fetchAllServerDetails = async () => {
+    try {
+      const response = (await getAllServerDetails()).data;
+      if (response) {
+        response.forEach((item) => {
+          let canPull = item.canPullServers ? JSON.parse(item.canPullServers) : [];
+          let canPush = item.canPushServers ? JSON.parse(item.canPushServers) : [];
+          item.canPullServers = JSON.parse(item.canPullServers);
+          item.canPushServers = JSON.parse(item.canPushServers);
+          item.pullServersName = canPull.length > 0 ? canPull.map((server) => server.name) : [];
+          item.pushServersName = canPush.length > 0 ? canPush.map((server) => server.name) : [];
+        });
+        setAllServerDetails(response);
+      }
+    } catch (error) {
+      console.error('Error fetching servers:', error);
+    }
+  };
+
+  const handleServerEdit = (item) => {
+    setEditServer(true);
+    setServerData(item);
+    setOpenAddServer(true);
+  };
+
+  return (
+    <Grid pt={2} sx={{ height: 'calc(100vh)', zoom: '0.9' }}>
+      <Box sx={{ p: 3 }} className={getClassName('server-management-wrapper')}>
+        <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+            Server Management
+          </Typography>
+        </Grid>
+
+        {/* <Box sx={{  }}> */}
+        <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 2, float: 'right' }}>
+          {/* <Grid> */}
+          <Button
+            size="small"
+            variant="contained"
+            color="success"
+            onClick={() => {
+              setOpenAddServer(true);
+            }}
+          >
+            <FontAwesomeIcon icon={faPlus} size="lg" className="mr-1" />
+            server
+          </Button>
+          {/* </Grid> */}
+        </Grid>
+
+        {/* </Box> */}
+        <TableContainer
+          className={getClassName('server-table')}
+          component={Paper}
+          elevation={1}
+          sx={{ borderRadius: 2, overflowY: 'auto', maxHeight: 'calc(100vh - 200px)' }}
+        >
+          <Table stickyHeader>
+            <TableHead>
+              <TableRow>
+                <TableCell sx={{ fontWeight: 'bold' }}>Sr. No.</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Name</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Code</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Type</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>URL</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Active?</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Can Pull From</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Can Push To</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Modified On</TableCell>
+                <TableCell align="center" sx={{ fontWeight: 'bold' }}>
+                  Actions
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {allServerDetails.map((item, index) => (
+                <TableRow
+                  key={index}
+                  sx={{
+                    backgroundColor: index % 2 === 0 ? '#fff' : '#f9f9f9',
+                    '&:hover': { backgroundColor: '#e9f3ff' },
+                  }}
+                >
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>{item.name}</TableCell>
+                  <TableCell>{item.code}</TableCell>
+                  <TableCell>{item.type}</TableCell>
+                  <TableCell>{item.url}</TableCell>
+                  <TableCell>
+                    {item.isActive ? (
+                      <>
+                        <FontAwesomeIcon icon={faCircleCheck} className="text-[var(--color-success)]" size="lg" /> Yes
+                      </>
+                    ) : (
+                      <>
+                        <FontAwesomeIcon icon={faCircleXmark} className="text-[var(--color-error)]" size="lg" /> No
+                      </>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {Array.isArray(item.pullServersName) && item.pullServersName.length > 0
+                      ? item.pullServersName.map((server, i) => (
+                          <Chip key={i} label={server || '-'} color="primary" size="small" sx={{ mr: 0.5, mb: 0.5 }} />
+                        ))
+                      : '-'}
+                  </TableCell>
+                  <TableCell>
+                    {Array.isArray(item.pushServersName) && item.pushServersName.length > 0
+                      ? item.pushServersName.map((server, i) => (
+                          <Chip key={i} label={server || '-'} color="primary" size="small" sx={{ mr: 0.5, mb: 0.5 }} />
+                        ))
+                      : '-'}
+                  </TableCell>
+                  <TableCell>{new Date(item.modifiedOn).toUTCString()}</TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      color="primary"
+                      onClick={() => {
+                        handleServerEdit(item);
+                      }}
+                    >
+                      <FontAwesomeIcon icon={faPen} size="sm" />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {allServerDetails.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} align="center" sx={{ py: 4, color: 'gray' }}>
+                    No server found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Box>
+      {openAddServer && (
+        <AddServerModal
+          openAddServer={openAddServer}
+          openAddServerFunc={setOpenAddServer}
+          allServerList={allServerList}
+          reloadPageFunc={setReloadPage}
+          editServer={editServer}
+          editServerFunc={setEditServer}
+          serverData={serverData}
+        />
+      )}
+    </Grid>
+  );
+}

package/src/views/feature-components/Features/ServerManagement.scss

@@ -0,0 +1,120 @@
+.server-management-wrapper {
+  background-color: #f7f7f7;
+  color: #111;
+
+  &-dark {
+    // background-color: #121212;
+    color: #fdfbfb;
+
+    .MuiPaper-root {
+      background-color: #1e1e1e;
+    }
+
+    .MuiTableCell-root {
+      color: #ddd;
+    }
+
+    .MuiTableRow-root:hover {
+      background-color: #0e0d0d !important;
+    }
+
+    .MuiButton-root {
+      background-color: 'success';
+
+      &:hover {
+        background-color: #2f6131;
+      }
+    }
+  }
+}
+
+.server-table-dark {
+  background-color: #1c1c1c;
+
+  .MuiTableCell-root {
+    color: #ccc;
+  }
+
+  .MuiTableRow-root:nth-child(even) {
+    background-color: #1a1a1a;
+  }
+
+  .MuiTableRow-root:nth-child(odd) {
+    background-color: #222;
+  }
+
+  .MuiTableRow-root:hover {
+    background-color: #2d2d2d !important;
+  }
+
+  thead.MuiTableHead-root {
+    background-color: #423737 !important;
+
+    th.MuiTableCell-root {
+      color: #f0f0f0 !important;
+      background-color: #2b2b2b !important;
+    }
+  }
+}
+
+.add-server-dialog-dark {
+  .MuiPaper-root {
+    background-color: #2a2a2a;
+    color: #f1f1f1;
+
+    .MuiTypography-root {
+      color: #ffffff;
+    }
+
+    .MuiInputBase-root,
+    .MuiOutlinedInput-root {
+      background-color: #3a3a3a;
+      color: #f1f1f1;
+
+      input,
+      textarea {
+        color: #f1f1f1;
+      }
+
+      fieldset {
+        border-color: #555;
+      }
+    }
+
+    .MuiAutocomplete-root .MuiInputBase-root {
+      background-color: #3a3a3a;
+    }
+
+    .MuiFormControlLabel-label {
+      color: #ddd;
+    }
+
+    .MuiDialogTitle-root {
+      background-color: #1e1e1e;
+    }
+
+    .MuiButton-contained {
+      color: white;
+
+      &.MuiButton-containedPrimary {
+        background-color: #1976d2;
+
+        &:hover {
+          background-color: #125a9e;
+        }
+      }
+
+      &.MuiButton-containedSuccess {
+        background-color: #8e5f38;
+
+        &:hover {
+          background-color: #2e7d32;
+        }
+      }
+    }
+
+    .text-red-500 {
+      color: #f87171;
+    }
+  }
+}

package/src/views/feature-components/ForgotPassword/ForgotPassword.jsx

@@ -0,0 +1,226 @@
+import medplatLogo from '@/assets/img/medplat-highres.png';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import React, { Suspense, useEffect, useState } from 'react';
+import * as Yup from 'yup';
+import Grid from '@mui/material/Grid2';
+
+import { forgotPasswordGenerateOTP, forgotPasswordVerifyOTP } from '@/common/services/ForgotPassword.js';
+import { showToast } from '@/common/toaster/toaster';
+import { useForm } from 'react-hook-form';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+const ForgotPassword = () => {
+  const { translate } = useTranslateProvider();
+  const ForgotPasswordSchema = Yup.object().shape({
+    username: Yup.string().required('Username is required'),
+  });
+  const [currentValidationSchema, setCurrentValidationSchema] = useState(ForgotPasswordSchema);
+  const [submitType, setSubmitType] = useState('');
+  const [noOfAttempts, setNoOfAttempts] = useState(0);
+
+  const [timer, setTimer] = useState(null); // Initial countdown value
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  const [mobileNumber, setMobileNumber] = useState(null);
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      username: '',
+    },
+    resolver: yupResolver(currentValidationSchema),
+    mode: 'onChange', // Trigger validation on change
+  });
+
+  useEffect(() => {
+    let interval;
+    if (isDisabled && timer > 0) {
+      // Start the countdown if the button is disabled and timer > 0
+      interval = setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    } else if (timer === 0) {
+      // Re-enable the button when the timer reaches 0
+      setIsDisabled(false);
+      clearInterval(interval);
+    }
+
+    return () => clearInterval(interval); // Clean up the interval on component unmount
+  }, [isDisabled, timer]);
+
+  const generateOTP = async ({ username }) => {
+    try {
+      setValue('otp', '');
+      const response = await forgotPasswordGenerateOTP({ username }).catch((error) => {
+        showToast({ message: `${error.response.data.message}`, type: 'error' });
+      });
+      if (response && response.status === 200) {
+        setMobileNumber(response.data);
+        const schema = ForgotPasswordSchema.shape({
+          otp: Yup.string()
+            .required('OTP is required')
+            .length(4, 'OTP should be of 4 digits') // Enforce exact length
+            .matches(/^\d{4}$/, 'OTP must contain only numbers'), // Enforce numbers only
+        });
+        setCurrentValidationSchema(schema);
+        setTimer(30); // Reset the timer
+        setIsDisabled(true); // Disable the button again
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const verifyOTP = async ({ otp, username }) => {
+    try {
+      setNoOfAttempts((prev) => +prev + 1);
+      await forgotPasswordVerifyOTP({
+        noOfAttempts,
+        otp,
+        username,
+      });
+    } catch (error) {
+      showToast({ message: `${error.response.data.message}`, type: 'error' });
+    }
+  };
+
+  const handleResend = () => {
+    showToast({ message: `OTP Resent to ${mobileNumber}`, type: 'success' });
+    generateOTP({ username: getValues('username') });
+    setTimer(30); // Reset the timer
+    setIsDisabled(true); // Disable the button again
+  };
+  const getOTP = async (values) => {
+    const { username, otp } = values;
+    if (submitType === 'getOTP') {
+      await generateOTP({ username });
+    } else if (submitType === 'verifyOTP') {
+      await verifyOTP({ username, otp });
+    }
+  };
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Grid
+        data-testid="forgot-pssword-form"
+        component="form"
+        onSubmit={handleSubmit(getOTP)}
+        className="flex justify-center"
+        container
+      >
+        <Grid
+          size={{ xs: 12, sm: 6, md: 4, lg: 4, xl: 3 }}
+          sx={{
+            paddingTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <img src={medplatLogo} style={{ height: '70px' }} alt="medplat-logo" data-testid="login-logo" />
+          <Box className="p-2.5 px-5 flex border-b">
+            <Typography variant="body1" className="font-medium text-lg text-customBlue">
+              {translate("FORGOT PASSWORD")}
+            </Typography>
+          </Box>
+
+          {mobileNumber && (
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: '0.75rem', // Adjust font size (optional)
+                whiteSpace: 'nowrap',
+              }}
+            >
+              Please enter OTP received on Mobile Number: {mobileNumber}
+            </Typography>
+          )}
+          <Box sx={{ width: '80%', mt: 2 }}>
+            <CustomTextField
+              control={control}
+              id="username"
+              name="username"
+              placeholder="Username"
+              inputProps={{ 'data-testid': 'username' }}
+              errors={errors}
+              disabled={mobileNumber}
+              size="small"
+              className="3xl:[&_input]:h-8"
+              dataTestId="forgot-password-username-textfield"
+              autoComplete="off"
+            />
+          </Box>
+          {mobileNumber && (
+            <Box sx={{ mt: 2, width: '80%' }}>
+              <CustomTextField
+                control={control}
+                id="otp"
+                name="otp"
+                inputProps={{
+                  maxLength: 4, // Restrict maximum length
+                  inputMode: 'numeric', // Ensure numeric keyboard on mobile
+                  pattern: '[0-9]*', // Only allow numeric input
+                }}
+                errors={errors}
+                placeholder="Enter OTP"
+                size="small"
+                className="3xl:[&_input]:h-8"
+                dataTestId="forgot-password-otp-textfield"
+                autoComplete="off"
+              />
+            </Box>
+          )}
+
+          {isDisabled && mobileNumber ? (
+            <p style={{ color: 'blue' }}>Resend OTP in {timer} seconds</p>
+          ) : (
+            mobileNumber && (
+              <button
+                type="button"
+                style={{
+                  color: 'blue',
+                  cursor: 'pointer',
+                  background: 'none',
+                  border: 'none',
+                }}
+                onClick={handleResend}
+              >
+                {translate("Resend OTP")}
+              </button>
+            )
+          )}
+          {!mobileNumber ? (
+            <Button
+              type="submit"
+              variant="contained"
+              sx={{ mt: 2, mb: 2, width: '80%' }}
+              onClick={() => setSubmitType('getOTP')}
+              data-testid="forgot-password-get-otp-button"
+            >
+              {translate("Get OTP")}
+            </Button>
+          ) : (
+            <Button
+              type="submit"
+              variant="contained"
+              sx={{ mb: 2, width: '80%' }}
+              onClick={() => setSubmitType('verifyOTP')}
+              data-testid="forgot-password-verify-otp-button"
+            >
+              {translate("Submit")}
+            </Button>
+          )}
+        </Grid>
+      </Grid>
+    </Suspense>
+  );
+};
+
+export default ForgotPassword;