addinternational phone number; fix phone number verification; add log…

package.json

@@ -42,6 +42,7 @@
     "html2canvas": "^1.4.1",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
+    "libphonenumber-js": "^1.12.6",
     "lodash": "^4.17.21",
     "next": "15.1.2",
     "next-auth": "^4.24.11",
@@ -52,6 +53,7 @@
     "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.54.2",
     "react-perfect-scrollbar": "1.5.8",
+    "react-phone-input-2": "^2.15.1",
     "react-toastify": "^10.0.6",
     "react-use": "17.6.0",
     "recharts": "^2.15.1",

src/@core/svg/Logo.tsx

@@ -21,3 +21,5 @@ const Logo = ({ className }: { className?: string }) => {
 }
 
 export default Logo
+
+

src/components/ClinicianPatientList/ClinicianPatientList.tsx

@@ -192,7 +192,7 @@ export function ClinicianPatientList({ clinicianId }: { clinicianId: string }) {
           p.email, 
           p.dateOfBirth, 
           p.patientLink?.toUpperCase() ?? '',
-          p.agreedToShareData ? 'Yes' : 'No'
+          p.agreedToShareData ? 'True' : 'Flase'
         ])
 
         autoTable(doc, {

src/components/PhoneInput.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import  React, {  useEffect,useState } from 'react';
+
+import PhoneInput from 'react-phone-input-2';
+
+import 'react-phone-input-2/lib/style.css'
+
+import { useTheme } from '@mui/material/styles';
+
+import { Typography, Box } from '@mui/material';
+
+interface ThemedPhoneInputProps {
+  value?: string;
+  onChange: (value: string, data: any) => void;
+  onBlur?: (e: React.FocusEvent) => void;
+  onFocus?: (e: React.FocusEvent) => void;
+  error?: boolean;
+  helperText?: string;
+  label?: string;
+  required?: boolean;
+  name?: string;
+  country?: string;
+}
+
+const ThemedPhoneInput: React.FC<ThemedPhoneInputProps> = ({
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  error,
+  helperText,
+  label,
+  required = false,
+  name = 'phoneNumber',
+  country = 'gb'
+}) => {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    const applyHoverStyles = () => {
+      const style = document.createElement('style');
+      const hoverColor = 'rgba(110, 65, 226, 0.15)';
+      const hoverTextColor = '#8f6ff7';
+      const inputBg = theme.palette.background.paper;
+      const divider = theme.palette.divider;
+
+      style.innerHTML = `
+        .react-tel-input .country:hover {
+          background-color: ${hoverColor} !important;
+          color: ${hoverTextColor} !important;
+        }
+
+        .react-tel-input .country:hover .country-name,
+        .react-tel-input .country:hover .dial-code {
+          color: ${hoverTextColor} !important;
+        }
+
+        .react-tel-input .country-list .highlight {
+          background-color: ${hoverColor} !important;
+          color: ${hoverTextColor} !important;
+        }
+
+        .react-tel-input .country-list .highlight .country-name,
+        .react-tel-input .country-list .highlight .dial-code {
+          color: ${hoverTextColor} !important;
+        }
+
+        .react-tel-input .flag-dropdown {
+          background-color: ${inputBg} !important;
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+          border-right: 1px solid ${divider};
+        }
+
+        .react-tel-input .selected-flag {
+          background-color: transparent !important;
+        }
+      `;
+
+      document.head.appendChild(style);
+    };
+
+    applyHoverStyles();
+  }, [theme]);
+
+
+  const getBorderColor = () => {
+    if (error) return theme.palette.error.main;
+    if (isFocused) return theme.palette.primary.main;
+
+return theme.palette.divider;
+  };
+
+  const handleFocus = (e: React.FocusEvent) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(e);
+  };
+
+  const handleChange = (phoneValue: string, data: any) => {
+    if (onChange) {
+      onChange(phoneValue, data);
+    }
+  };
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%', mb: 2 }}>
+      {label && (
+        <Typography
+          variant="caption"
+          sx={{
+            position: 'absolute',
+            top: -8,
+            left: 14,
+            zIndex: 1,
+            bgcolor: theme.palette.background.paper,
+            px: 0.5,
+            color: error 
+              ? theme.palette.error.main 
+              : (isFocused || !!value)
+                ? theme.palette.primary.main
+                : theme.palette.text.secondary
+          }}
+        >
+          {label}{required && ' '}
+        </Typography>
+      )}
+      <PhoneInput
+        country={country}
+        value={value}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        specialLabel=""
+        inputProps={{
+          name: name,
+          required: required,
+          autoComplete: 'tel',
+        }}
+        containerStyle={{ 
+          width: '100%' 
+        }}
+        containerClass="custom-phone-input"
+        dropdownStyle={{
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.divider,
+          boxShadow: theme.shadows[4],
+        }}
+        searchStyle={{
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.divider
+        }}
+
+        // @ts-ignore
+        highlightCountryStyle={{
+            backgroundColor: 'rgba(110, 65, 226, 0.2)',  
+            color: theme.palette.primary.main,         
+            fontWeight: 500
+        }}
+        buttonStyle={{
+          backgroundColor: 'transparent',
+          borderTopLeftRadius: '8px',
+          borderBottomLeftRadius: '8px',
+          borderColor: getBorderColor()
+        }}
+        inputStyle={{
+          width: '100%',
+          height: '56px',
+          borderRadius: '8px',
+          backgroundColor: 'transparent',
+          color: theme.palette.text.primary,
+          borderColor: getBorderColor()
+        }}
+        countryCodeEditable={false}
+        enableSearch={false}
+        disableSearchIcon={false}
+      />
+      {helperText && (
+        <Typography 
+          variant="caption" 
+          sx={{ 
+            ml: 1.5, 
+            color: error ? theme.palette.error.main : theme.palette.text.secondary,
+            fontSize: '0.75rem' 
+          }}
+        >
+          {helperText}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default ThemedPhoneInput;

src/components/layout/shared/Logo.tsx

@@ -2,6 +2,7 @@
 
 // React Imports
 import { useEffect, useRef } from 'react'
+
 import type { CSSProperties } from 'react'
 
 // Third-party Imports
@@ -13,7 +14,6 @@ import type { VerticalNavContextProps } from '@menu/contexts/verticalNavContext'
 // Component Imports
 import MaterioLogo from '@core/svg/Logo'
 
-
 // Hook Imports
 import useVerticalNav from '@menu/hooks/useVerticalNav'
 import { useSettings } from '@core/hooks/useSettings'
@@ -87,3 +87,4 @@ const Logo = ({ color }: { color?: CSSProperties['color'] }) => {
 export default Logo
 
 
+

src/views/Login.tsx

@@ -102,10 +102,9 @@ const LoginV2 = ({ mode }: { mode: string }) => {
   return (
     <div className='flex bs-full justify-center'>
       <div className='flex justify-center items-center bs-full bg-backgroundPaper !min-is-full p-6 md:!min-is-[unset] md:p-12 md:is-[480px]'>
-        <Link className='absolute block-start-5 sm:block-start-[38px] inline-start-6 sm:inline-start-[38px]'>
-          {' '}
-          <Logo />
-        </Link>
+      <Link href="/home" className='absolute block-start-5 sm:block-start-[38px] inline-start-6 sm:inline-start-[38px]'>
+        <Logo />
+      </Link>
         <div className='flex flex-col gap-5 is-full sm:is-auto md:is-full sm:max-is-[400px] md:max-is-[unset] border border-divider rounded-lg p-6 bg-backgroundPaper'>
           <Typography variant='h4' className='text-center'>{`Log in`}</Typography>
           {error && (
@@ -185,3 +184,5 @@ const LoginV2 = ({ mode }: { mode: string }) => {
 }
 
 export default LoginV2
+
+