update design and request pages dashboards & doctors & doctor item & clinics & clinic item and layout

app/blog/[slug]/page.js

@@ -1,19 +1,19 @@
-import axios from "axios";
 import BlogPage from "@/components/blog";
 import Layout from "@/components/layout/StLayout";
+import { fetchReq } from "@/lib/ability";
 
 async function Blog({ params: { slug } }) {
-  const blog = await axios.get(
+  const blog = await fetchReq(
     `https://back-dev.clinic-pro.ir/api/v1/blog/${slug}`
   );
-  const blogs = await axios.get("https://back-dev.clinic-pro.ir/api/v1/blogs");
+  const blogs = await fetchReq("https://back-dev.clinic-pro.ir/api/v1/blogs");
 
-  const resBlog = blog.data;
-  const resBlogs = blogs.data;
+  const resBlog = blog;
+  const resBlogs = blogs;
 
   return (
     <Layout>
-      <BlogPage blog={resBlog} blogs={resBlogs} />
+      <BlogPage blog={resBlog} blogs={resBlogs.blogs} />
     </Layout>
   );
 }

app/blogs/page.js

@@ -1,12 +1,12 @@
 import BlogsPage from "@/components/blogs";
 import Layout from "@/components/layout/StLayout";
-import axios from "axios";
+import { fetchReq } from "@/lib/ability";
 
 export default async function Blogs() {
-  const response = await axios.get(
+  const response = await fetchReq(
     "https://back-dev.clinic-pro.ir/api/v1/blogs"
   );
-  const blogs = response.data.blogs;
+  const blogs = response.blogs;
 
   return (
     <Layout name="/blogs">

app/clinic/[slug]/page.js

@@ -1,18 +1,18 @@
 import ClinicPage from "@/components/clinic";
 import Layout from "@/components/layout/StLayout";
-import axios from "axios";
+import { fetchReq } from "@/lib/ability";
 
 async function Clinic({ params: { slug } }) {
-  const reqClinics = await axios.get(
+  const reqClinics = await fetchReq(
     `https://back-dev.clinic-pro.ir/api/v1/clinic/${slug}`
   );
 
-  const reqDoctors = await axios.get(
+  const reqDoctors = await fetchReq(
     "https://back-dev.clinic-pro.ir/api/v1/doctors"
   );
 
-  const clinic = reqClinics.data;
-  const doctors = reqDoctors.data.$data;
+  const clinic = reqClinics;
+  const doctors = reqDoctors?.data || [];
 
   return (
     <Layout>

app/clinics/page.js

@@ -1,22 +1,20 @@
 // app/clinics/page.js
 import ClinicsPage from "@/components/clinics";
 import Layout from "@/components/layout/StLayout";
+import { fetchReq } from "@/lib/ability";
 import { getStateInfo } from "@/lib/getStateInfo";
-import axios from "axios";
 
 export default async function Clinics() {
   const { matchedCity, matchedState } = getStateInfo();
 
-  const response = await axios.get(
-    "https://back-dev.clinic-pro.ir/api/v1/clinics?page=1&limit=10"
+  const clinics = await fetchReq(
+    "https://back-dev.clinic-pro.ir/api/v1/clinics"
   );
 
-  const clinics = response.data.$data;
-
   return (
     <Layout name="/clinics">
       <ClinicsPage
-        clinics={clinics}
+        clinics={clinics && clinics.data}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />

app/component/DetailProfile.js

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import ProfilePA from "@/components/icons/ProfilePA";
 import LogoutP from "@/components/icons/LogoutP";
-import SettingPA from "@/components/icons/SettingPA";
 import CardDA from "@/components/icons/CardDA";
 import { Button, Popover } from "@mui/material";
 import Link from "next/link";
@@ -15,6 +14,7 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
 
   const open = Boolean(anchorEl);
   const id = open ? "simple-popover" : undefined;
+  
   return (
     <>
       <ModalLogout open={modal} handleClose={closeModal} />
@@ -39,22 +39,24 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
               پروفایل من
             </Button>
           </Link>
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+          <Link
+            href={{
+              pathname: "/dashboard",
+              query: {
+                sidebar: 2,
+              },
+            }}
+            className="w-full"
           >
-            <CardDA />
-            پرداخت ها
-          </Button>
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <SettingPA />
-            تنظیمات
-          </Button>
+            <Button
+              fullWidth
+              variant="text"
+              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+            >
+              <CardDA />
+              تراکنش های من
+            </Button>
+          </Link>
           <Button
             fullWidth
             color="error"

app/component/EditField.js

@@ -20,9 +20,9 @@ function EditField({
       <TextField
         {...props}
         rows={multiline}
-        value={data?.value || ""}
         multiline={multiline}
         type={type || "text"}
+        value={data?.value || ""}
         placeholder={placeholder || ""}
         disabled={noDisable ? false : !data?.isEdit}
         className={`!w-full res-field-account dark:!bg-transparent ${

app/component/ModalLogout.js

@@ -3,13 +3,15 @@ import { Box, Button, Modal } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import { removeToken } from "@/utils";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 function ModalLogout({ open, handleClose }) {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
   const logout = () => {
+    setLoading(true);
     removeToken();
     router.replace("/login");
-    handleClose();
   };
 
   return (
@@ -39,9 +41,10 @@ function ModalLogout({ open, handleClose }) {
             انصراف
           </Button>
           <Button
-            variant="contained"
             onClick={logout}
-            className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
+            loading={loading}
+            variant="contained"
+            className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
           >
             خروج
           </Button>

app/component/Tabs.js

@@ -7,7 +7,7 @@ function a11yProps(index) {
   };
 }
 
-function Tabs({ value, handleChange, listTab, isSm, style }) {
+function Tabs({ value, handleChange, listTab, inactives, isSm, style }) {
   return (
     <Box className="!border-none !w-full">
       <TabsMUI
@@ -24,6 +24,7 @@ function Tabs({ value, handleChange, listTab, isSm, style }) {
           <Tab
             key={idx}
             label={item}
+            disabled={inactives && inactives.includes(idx)}
             {...a11yProps(idx)}
             sx={{
               "&.MuiButtonBase-root": {

app/dashboard/page.js

@@ -1,27 +1,35 @@
 import Content from "@/components/dashboard/Content";
-import { defineAbilitiesFor } from "@/lib/ability";
+import { defineAbilitiesFor, fetchReq } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { getStateInfo } from "@/lib/getStateInfo";
 import axios from "axios";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
-export default async function Dashboard() {
+export default async function Dashboard({ searchParams }) {
   const { matchedCity } = getStateInfo();
   const user = await getUser();
   const ability = defineAbilitiesFor(user);
   const cookieStore = cookies();
   const token = cookieStore.get("access_token");
-  const uuid = "9ef7c050-6e81-4aa2-8248-283a16635624";
-  const response = await axios.get(
-    `https://back-dev.clinic-pro.ir/api/v1/user-profile/9ef7c050-6e81-4aa2-8248-283a16635624`,
-    {
-      headers: {
-        Authorization: `Bearer ${token.value}`,
-      },
-    }
-  );
-  const dashboard = response.data;
+  const uuid = cookieStore.get("uuid");
+
+  let dashboard = null;
+  try {
+    const response = await fetchReq(
+      `https://back-dev.clinic-pro.ir/api/v1/user-profile/${uuid}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    dashboard = response.data;
+  } catch (error) {
+    // console.error("problem with req:", error.message);
+    // return redirect("/unauthorized");
+  }
 
   if (!ability.can("access", "Dashboard")) {
     return redirect("/");
@@ -32,8 +40,9 @@ export default async function Dashboard() {
 
   return (
     <Content
-      logged={token}
+      logged={token.value}
       dataUser={dashboard}
+      params={searchParams}
       matchedCity={matchedCity}
       initialTurnsDetails={isMobile}
     />

app/doctors/page.js

@@ -6,11 +6,18 @@ import axios from "axios";
 async function Doctors({ searchParams }) {
   const { matchedCity, matchedState } = getStateInfo();
 
-  const response = await axios.get(
-    "https://back-dev.clinic-pro.ir/api/v1/doctors"
-  );
+  let doctors = null;
+  try {
+    const response = await axios.get(
+      "https://back-dev.clinic-pro.ir/api/v1/doctors"
+    );
+    console.log(response);
 
-  const doctors = response.data.$data;
+    doctors = response.data.$data;
+  } catch (error) {
+    // console.error("problem with req:", error.message);
+    // return redirect("/unauthorized");
+  }
 
   return (
     <Layout>

app/not-found.js

@@ -1,4 +1,4 @@
-import Layout from "@/components/layout";
+import Layout from "@/components/layout/StLayout";
 import NotFoundPage from "@/components/notFound";
 
 function NotFound() {