get data with filter location for first time, get comment of doctor and show in doctor page, handle new comment

app/component/ProgressChange.js

@@ -1,7 +1,7 @@
 import { Slider } from "@mui/material";
 import { useState } from "react";
 
-function ProgressChange({ data }) {
+function ProgressChange({ data, changeData, parent }) {
   const [value, setValue] = useState(70);
 
   return (
@@ -10,9 +10,12 @@ function ProgressChange({ data }) {
         {data.label}
       </p>
       <Slider
-        defaultValue={value}
+        defaultValue={data.progress}
         className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          setValue(e.target.value);
+          changeData(parent, data.name, e.target.value);
+        }}
         sx={{
           "& .MuiSlider-rail": {
             background: "#E8E8E8",
@@ -32,7 +35,7 @@ function ProgressChange({ data }) {
           },
         }}
       />
-      <p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px]">
+      <p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px] text-center">
         {value}
       </p>
     </li>