update src/components/Avatar/index.js and User.js

src/assets/images/default-profile-pic.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68">
+  <g id="Group_2182" data-name="Group 2182" transform="translate(-233 -97)">
+    <circle id="Ellipse_240" data-name="Ellipse 240" cx="34" cy="34" r="34" transform="translate(233 97)" fill="#d6d6d6"/>
+    <g id="vuesax_linear_user" data-name="vuesax/linear/user" transform="translate(142.967 -73.033)">
+      <g id="user" transform="translate(108 188)">
+        <path id="Vector" d="M13.361,6.68A6.68,6.68,0,1,1,6.68,0,6.68,6.68,0,0,1,13.361,6.68Z" transform="translate(9.353 2.672)" fill="none" stroke="#032d00" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-2" data-name="Vector" d="M22.954,9.353C22.954,4.182,17.81,0,11.477,0S0,4.182,0,9.353" transform="translate(4.556 20.041)" fill="none" stroke="#032d00" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-3" data-name="Vector" d="M0,0H32.066V32.066H0Z" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/components/Avatar/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import userImage from "../../assets/images/user.png";
+import userImage from "../../assets/images/default-profile-pic.svg";
 
 function Avatar({ source, size, rounded, status }) {
   return (

src/views/Dashboard/layouts/Mobile/User.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import Avatar from "../../../../components/Avatar";
 
 const User = ({ user, mobile }) => {
   const [dropdown, setDropdown] = React.useState(true);
@@ -17,18 +18,14 @@ const User = ({ user, mobile }) => {
               style={{ width: 70, height: 70 }}
             />
           ) : (
-            <div
-              className={"rounded-full"}
-              style={{
-                width: 70,
-                height: 70,
-                backgroundColor: "#ddd",
-              }}
-            ></div>
+            <Avatar size={60} rounded={true} />
           )}
           <div className={`flex flex-col  mr-1`}>
             <strong className={`text-base font-semibold text-gray1`}>
-              {user?.firstName + " " + user?.lastName}
+              {/* {user?.firstName + " " + user?.lastName} */}
+              {user.firstName === null
+                ? ""
+                : user.firstName + " " + user.lastName}
             </strong>
             <span className="mt-2 text-sm text-gray1">{user?.cellphone}</span>
           </div>
@@ -70,3 +67,14 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(mapStateToProps)(User);
+
+{
+  /* <div
+className={"rounded-full"}
+style={{
+  width: 70,
+  height: 70,
+  backgroundColor: "red",
+}}
+></div> */
+}