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/Crop.js

@@ -1,15 +1,19 @@
 import { Button } from "@mui/material";
 import { useState } from "react";
 import Cropper from "react-easy-crop";
-import { cropImage } from "./cropImg";
+import { cropImage, dataURLtoFile } from "./cropImg";
 
 function Crop({ data, uploadImg, handleClose }) {
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
   const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
 
-  const onComplete = (imagePromisse) =>
-    imagePromisse.then((image) => uploadImg(image));
+  const onComplete = async (imagePromise) => {
+    const dataUrl = await imagePromise;
+    const file = dataURLtoFile(dataUrl, "cropped-image.jpg");
+
+    uploadImg({ blob: dataUrl, file });
+  };
 
   return (
     <div className="mt-[16px]">

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);

app/component/uploadFile/index.js

@@ -54,7 +54,7 @@ function UploadFile({ image, setImage }) {
           <Image
             width={24}
             height={24}
-            src={image}
+            src={image.blob}
             alt="img-uploaded"
             className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
           />