page add panel/doctor role agent && save data crop img && upload img && just roles agent can access panel && save data doctor && add field phone number && remove two tab

app/component/uploadFile/cropImg.js

@@ -21,7 +21,7 @@ async function getCroppedImg(imageSrc, pixelCrop) {
   ctx.drawImage(
     image,
     safeArea / 2 - image.width * 0.5,
-    safeArea / 2 - image.height * 0.5,
+    safeArea / 2 - image.height * 0.5
   );
   const data = ctx.getImageData(0, 0, safeArea, safeArea);
 
@@ -31,12 +31,26 @@ async function getCroppedImg(imageSrc, pixelCrop) {
   ctx.putImageData(
     data,
     Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
-    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y),
+    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
   );
 
   return canvas.toDataURL("image/jpeg");
 }
 
+export const dataURLtoFile = (dataurl, filename) => {
+  const arr = dataurl.split(",");
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], filename, { type: mime });
+};
+
 export const cropImage = async (image, croppedAreaPixels, onError) => {
   try {
     const croppedImage = await getCroppedImg(image, croppedAreaPixels);