add prettier formatter to all file

components/layoutPanel/header/Icons.js

@@ -1,51 +1,51 @@
-import { Button } from '@mui/material'
-import React from 'react'
-import MoonP from '@/components/icons/MoonP'
-import NotificationP from '@/components/icons/NotificationP'
-import SettingP from '@/components/icons/SettingP'
-import SearchHeaderP from '@/components/icons/SearchHeaderP'
+import { Button } from "@mui/material";
+import React from "react";
+import MoonP from "@/components/icons/MoonP";
+import NotificationP from "@/components/icons/NotificationP";
+import SettingP from "@/components/icons/SettingP";
+import SearchHeaderP from "@/components/icons/SearchHeaderP";
 
 function Icons() {
-    return (
-        <div className="flex items-center justify-start gap-[12px]">
-            <Button
-                className="
+  return (
+    <div className="flex items-center justify-start gap-[12px]">
+      <Button
+        className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]
                     !w-[32px] md:!w-[36px] lg:!w-[40px]
                     !h-[32px] md:!h-[36px] lg:!h-[40px]
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                     !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                 "
-                variant="outlined"
-            >
-                <MoonP />
-            </Button>
-            <Button
-                className="
+        variant="outlined"
+      >
+        <MoonP />
+      </Button>
+      <Button
+        className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]
                     !w-[32px] md:!w-[36px] lg:!w-[40px]
                     !h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                     !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                 "
-                variant="outlined"
-            >
-                <SearchHeaderP />
-            </Button>
-            <Button
-                className="
+        variant="outlined"
+      >
+        <SearchHeaderP />
+      </Button>
+      <Button
+        className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]
                     !w-[32px] md:!w-[36px] lg:!w-[40px]
                     !h-[32px] md:!h-[36px] lg:!h-[40px]
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                     !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                 "
-                variant="outlined"
-            >
-                <SettingP />
-            </Button>
-            <Button
-                className='
+        variant="outlined"
+      >
+        <SettingP />
+      </Button>
+      <Button
+        className="
                     !w-[32px] md:!w-[36px] lg:!w-[40px]
                     !h-[32px] md:!h-[36px] lg:!h-[40px]
                     !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
@@ -53,13 +53,13 @@ function Icons() {
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
                     before:!absolute before:!right-[-2px] before:!top-[-2px] before:!w-[6px] before:!h-[6px]
                     before:!bg-[#D32F2F]
-                '
-                variant="outlined"
-            >
-                <NotificationP />
-            </Button>
-        </div>
-    )
+                "
+        variant="outlined"
+      >
+        <NotificationP />
+      </Button>
+    </div>
+  );
 }
 
-export default Icons
+export default Icons;

components/layoutPanel/header/MenuProfile.js

@@ -1,108 +1,109 @@
-import { useState } from 'react';
-import { Button, Popover } from '@mui/material';
-import ArrowBottomHD from '@/components/icons/ArrowBottomHD';
-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 Image from 'next/image';
+import { useState } from "react";
+import { Button, Popover } from "@mui/material";
+import ArrowBottomHD from "@/components/icons/ArrowBottomHD";
+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 Image from "next/image";
 
 function MenuProfile({ data }) {
+  const [anchorEl, setAnchorEl] = useState(null);
 
-    const [anchorEl, setAnchorEl] = useState(null);
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
 
-    const handleClick = (event) => setAnchorEl(event.currentTarget);
-    const handleClose = () => setAnchorEl(null);
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
 
-    const open = Boolean(anchorEl);
-    const id = open ? 'simple-popover' : undefined;
-
-    return (
-        <>
-            <Image
-                className='flex md:hidden w-[32px] h-[32px] rounded-full'
-                src={data.src}
-                alt='profile'
-                height={32}
-                width={32}
-            />
-            <Button
-                variant='text'
-                onClick={handleClick}
-                className='!hidden md:!flex !items-start !justify-center !gap-[8px] !p-1'
-            >
-                <Image
-                    className='w-[48px] h-[48px] rounded-full'
-                    src={data.src}
-                    alt='profile'
-                    height={48}
-                    width={48}
-                />
-                <div className='flex flex-col items-start justify-between gap-[3px]'>
-                    <p className='text-[#3B3B3B] text-[14px] font-semibold'>{data.name}</p>
-                    <p className='text-[#7E7E7E] text-[12px] font-normal'>{data.expertise}</p>
-                </div>
-                <div className='mr-[4px]'>
-                    <ArrowBottomHD />
-                </div>
-            </Button>
-            <Popover
-                id={id}
-                open={open}
-                anchorEl={anchorEl}
-                onClose={handleClose}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }}
-            >
-                <div
-                    className='flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]'
-                >
-                    <Button
-                        fullWidth
-                        variant='text'
-                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
-                    >
-                        <ProfilePA />
-                        پروفایل من
-                    </Button>
-                    <Button
-                        fullWidth
-                        variant='text'
-                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
-                    >
-                        <CardDA />
-                        پرداخت ها
-                    </Button>
-                    <Button
-                        fullWidth
-                        variant='text'
-                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
-                    >
-                        <SettingPA />
-                        تنظیمات
-                    </Button>
-                    <Button
-                        fullWidth
-                        color='error'
-                        variant='contained'
-                        onClick={handleClose}
-                        sx={{
-                            '&.MuiButtonBase-root': {
-                                paddingTop: '8px !important',
-                                paddingBottom: '8px !important'
-                            },
-                        }}
-                        className='!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]'
-                    >
-                        <LogoutP />
-                        خروج
-                    </Button>
-                </div>
-            </Popover>
-        </>
-    )
+  return (
+    <>
+      <Image
+        className="flex md:hidden w-[32px] h-[32px] rounded-full"
+        src={data.src}
+        alt="profile"
+        height={32}
+        width={32}
+      />
+      <Button
+        variant="text"
+        onClick={handleClick}
+        className="!hidden md:!flex !items-start !justify-center !gap-[8px] !p-1"
+      >
+        <Image
+          className="w-[48px] h-[48px] rounded-full"
+          src={data.src}
+          alt="profile"
+          height={48}
+          width={48}
+        />
+        <div className="flex flex-col items-start justify-between gap-[3px]">
+          <p className="text-[#3B3B3B] text-[14px] font-semibold">
+            {data.name}
+          </p>
+          <p className="text-[#7E7E7E] text-[12px] font-normal">
+            {data.expertise}
+          </p>
+        </div>
+        <div className="mr-[4px]">
+          <ArrowBottomHD />
+        </div>
+      </Button>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <div className="flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]">
+          <Button
+            fullWidth
+            variant="text"
+            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+          >
+            <ProfilePA />
+            پروفایل من
+          </Button>
+          <Button
+            fullWidth
+            variant="text"
+            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+          >
+            <CardDA />
+            پرداخت ها
+          </Button>
+          <Button
+            fullWidth
+            variant="text"
+            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+          >
+            <SettingPA />
+            تنظیمات
+          </Button>
+          <Button
+            fullWidth
+            color="error"
+            variant="contained"
+            onClick={handleClose}
+            sx={{
+              "&.MuiButtonBase-root": {
+                paddingTop: "8px !important",
+                paddingBottom: "8px !important",
+              },
+            }}
+            className="!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]"
+          >
+            <LogoutP />
+            خروج
+          </Button>
+        </div>
+      </Popover>
+    </>
+  );
 }
 
-export default MenuProfile
+export default MenuProfile;

components/layoutPanel/header/Search.js

@@ -1,55 +1,55 @@
-import SearchHeaderP from "@/components/icons/SearchHeaderP"
-import { InputAdornment, TextField } from "@mui/material"
+import SearchHeaderP from "@/components/icons/SearchHeaderP";
+import { InputAdornment, TextField } from "@mui/material";
 
 function Search() {
-    return (
-        <TextField
-            fullWidth
-            placeholder="جستجو"
-            className="!hidden md:!flex"
-            InputProps={{
-                startAdornment: (
-                    <InputAdornment position="start">
-                        <SearchHeaderP />
-                    </InputAdornment>
-                ),
-            }}
-            sx={{
-                '& .MuiOutlinedInput-input': {
-                    paddingTop: '9px !important',
-                    paddingBottom: '9px !important'
-                },
-                '& .MuiFormLabel-root': {
-                    top: '-4px !important'
-                },
-                '& .MuiInputBase-root': {
-                    borderRadius: '8px',
-                },
-                '& .MuiOutlinedInput-input': {
-                    paddingTop: '9px !important',
-                    paddingBottom: '9px !important'
-                },
-                '& .MuiOutlinedInput-notchedOutline': {
-                    border: '1px solid #EFEFEF !important',
-                    transition: '0.3s all !important'
-                },
-                '& .MuiOutlinedInput-root': {
-                    '&.MuiInputBase-root,.MuiFormLabel-root ': {
-                        color: '#7E7E7E !important',
-                        fontsize: '14px',
-                        fontweight: '400',
-                    },
-                    '&:hover .MuiOutlinedInput-notchedOutline': {
-                        border: '1px solid #EFEFEF !important',
-                    },
-                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                        border: '1px solid #5559CE !important',
-                        transition: '0.3s all !important'
-                    },
-                },
-            }}
-        />
-    )
+  return (
+    <TextField
+      fullWidth
+      placeholder="جستجو"
+      className="!hidden md:!flex"
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchHeaderP />
+          </InputAdornment>
+        ),
+      }}
+      sx={{
+        "& .MuiOutlinedInput-input": {
+          paddingTop: "9px !important",
+          paddingBottom: "9px !important",
+        },
+        "& .MuiFormLabel-root": {
+          top: "-4px !important",
+        },
+        "& .MuiInputBase-root": {
+          borderRadius: "8px",
+        },
+        "& .MuiOutlinedInput-input": {
+          paddingTop: "9px !important",
+          paddingBottom: "9px !important",
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #EFEFEF !important",
+          transition: "0.3s all !important",
+        },
+        "& .MuiOutlinedInput-root": {
+          "&.MuiInputBase-root,.MuiFormLabel-root ": {
+            color: "#7E7E7E !important",
+            fontsize: "14px",
+            fontweight: "400",
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #EFEFEF !important",
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #5559CE !important",
+            transition: "0.3s all !important",
+          },
+        },
+      }}
+    />
+  );
 }
 
-export default Search
+export default Search;

components/layoutPanel/header/sideButton/ButtonMenu.js

@@ -1,22 +1,16 @@
-import { Button } from "@mui/material"
+import { Button } from "@mui/material";
 
 function ButtonMenu({ setActive }) {
-    return (
-        <Button
-            onClick={() => setActive(true)}
-            className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
-        >
-            <span
-                className='min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full'
-            ></span>
-            <span
-                className='w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-180'
-            ></span>
-            <span
-                className='min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full'
-            ></span>
-        </Button>
-    )
+  return (
+    <Button
+      onClick={() => setActive(true)}
+      className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
+    >
+      <span className="min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full"></span>
+      <span className="w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-180"></span>
+      <span className="min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full"></span>
+    </Button>
+  );
 }
 
-export default ButtonMenu
+export default ButtonMenu;

components/layoutPanel/header/sideButton/index.js

@@ -1,15 +1,15 @@
-import ButtonMenu from "./ButtonMenu"
-import LogoPanelHead from "@/components/icons/LogoPanelHead"
+import ButtonMenu from "./ButtonMenu";
+import LogoPanelHead from "@/components/icons/LogoPanelHead";
 
 function SideButton({ setActive }) {
-    return (
-        <div className="flex md:hidden items-center justify-start gap-[4px]">
-            <ButtonMenu setActive={setActive} />
-            <div className="w-[100px] h-[24px]">
-                <LogoPanelHead />
-            </div>
-        </div>
-    )
+  return (
+    <div className="flex md:hidden items-center justify-start gap-[4px]">
+      <ButtonMenu setActive={setActive} />
+      <div className="w-[100px] h-[24px]">
+        <LogoPanelHead />
+      </div>
+    </div>
+  );
 }
 
-export default SideButton
+export default SideButton;

components/layoutPanel/index.js

@@ -1,32 +1,31 @@
-'use client';
+"use client";
 
 import { useEffect } from "react";
-import Header from './header';
-import Sidebar from './sidebar';
-import UserDetail from './userDetail';
+import Header from "./header";
+import Sidebar from "./sidebar";
+import UserDetail from "./userDetail";
 
 // AOS
 import Aos from "aos";
 import "aos/dist/aos.css";
 
 function LayoutPanel({ children, data }) {
+  useEffect(() => {
+    Aos.init({ duration: 1000 });
+  }, []);
 
-    useEffect(() => {
-        Aos.init({ duration: 1000 });
-    }, [])
-
-    return (
-        <div className="flex min-h-screen">
-            <Sidebar />
-            <main className="w-full">
-                <Header />
-                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
-                    {children}
-                </section>
-            </main>
-            <UserDetail data={data} />
-        </div>
-    )
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="w-full">
+        <Header />
+        <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
+          {children}
+        </section>
+      </main>
+      <UserDetail data={data} />
+    </div>
+  );
 }
 
-export default LayoutPanel
+export default LayoutPanel;

components/layoutPanel/sidebar/BgGray.js

@@ -1,13 +1,17 @@
 function BgGray({ isActive, setIsActive }) {
-    return (
-        <div
-            onClick={() => setIsActive(false)}
-            className={`
-                md:hidden ${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
+  return (
+    <div
+      onClick={() => setIsActive(false)}
+      className={`
+                md:hidden ${
+                  isActive
+                    ? "bg-[#232323] opacity-40 flex"
+                    : "bg-transparent opacity-40 hidden"
+                }
                 absolute z-[25] cursor-pointer transition-all duration-500 left-0 top-0 w-screen h-screen
             `}
-        ></div>
-    )
+    ></div>
+  );
 }
 
-export default BgGray
+export default BgGray;

components/layoutPanel/sidebar/HeadMd.js

@@ -1,28 +1,32 @@
-import DoubleArrowLeftP from '@/components/icons/DoubleArrowLeftP'
-import LogoPanel from '@/components/icons/LogoPanel'
-import { Button } from '@mui/material'
-import Link from 'next/link'
-import React from 'react'
+import DoubleArrowLeftP from "@/components/icons/DoubleArrowLeftP";
+import LogoPanel from "@/components/icons/LogoPanel";
+import { Button } from "@mui/material";
+import Link from "next/link";
+import React from "react";
 
 function HeadMd({ open, setOpen }) {
-    return (
-        <div className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}>
-            <Link
-                href='/panel/dashboard'
-                className={`flex justify-center transition-all duration-500 ${open ? 'max-w-full' : 'max-w-0'}`}
-            >
-                <LogoPanel />
-            </Link>
-            <Button
-                onClick={() => setOpen(!open)}
-                className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
+  return (
+    <div
+      className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}
+    >
+      <Link
+        href="/panel/dashboard"
+        className={`flex justify-center transition-all duration-500 ${
+          open ? "max-w-full" : "max-w-0"
+        }`}
+      >
+        <LogoPanel />
+      </Link>
+      <Button
+        onClick={() => setOpen(!open)}
+        className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
                     !transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320] 
-                ${open ? '!rotate-180' : '!rotate-0 !ml-[7px]'}`}
-            >
-                <DoubleArrowLeftP />
-            </Button>
-        </div>
-    )
+                ${open ? "!rotate-180" : "!rotate-0 !ml-[7px]"}`}
+      >
+        <DoubleArrowLeftP />
+      </Button>
+    </div>
+  );
 }
 
-export default HeadMd
+export default HeadMd;

components/layoutPanel/sidebar/HeadSm.js

@@ -3,20 +3,20 @@ import ArrowRightP from "@/components/icons/ArrowRightP";
 import LogoPanelHead from "@/components/icons/LogoPanelHead";
 
 function HeadSm({ setActive }) {
-    return (
-        <div className="flex md:hidden items-center justify-start gap-[8px]">
-            <Button
-                variant="text"
-                className="!min-w-0 !p-1"
-                onClick={() => setActive(false)}
-            >
-                <ArrowRightP />
-            </Button>
-            <div className="w-[100px] h-[23px]">
-                <LogoPanelHead />
-            </div>
-        </div>
-    )
+  return (
+    <div className="flex md:hidden items-center justify-start gap-[8px]">
+      <Button
+        variant="text"
+        className="!min-w-0 !p-1"
+        onClick={() => setActive(false)}
+      >
+        <ArrowRightP />
+      </Button>
+      <div className="w-[100px] h-[23px]">
+        <LogoPanelHead />
+      </div>
+    </div>
+  );
 }
 
-export default HeadSm
+export default HeadSm;

components/layoutPanel/sidebar/Links.js

@@ -9,43 +9,60 @@ import ProfileAddP from "@/components/icons/ProfileAddP";
 import ProfileCircleP from "@/components/icons/ProfileCircleP";
 
 function Links({ open }) {
+  const list = [
+    { name: "دشبورد", src: "/panel/dashboard", icon: <CategoryP /> },
+    {
+      name: "حساب کاربری",
+      src: "/panel/user-account",
+      icon: <ProfileCircleP />,
+    },
+    {
+      name: "اضافه کردن پزشک",
+      src: "/panel/add-doctor",
+      icon: <ProfileAddP />,
+    },
+    { name: "نوبت ها", src: "/panel/turns", icon: <CalendarP /> },
+  ];
 
-    const list = [
-        { name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
-        { name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
-        { name: 'اضافه کردن پزشک', src: '/panel/add-doctor', icon: <ProfileAddP /> },
-        { name: 'نوبت ها', src: '/panel/turns', icon: <CalendarP /> }
-    ];
+  const pathname = usePathname();
 
-    const pathname = usePathname();
-
-    return (
-        <ul className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}>
-            {list.map((item, idx) => (
-                <li key={idx}>
-                    <Link href={item.src}>
-                        <Button
-                            fullWidth
-                            variant="text"
-                            className={`
+  return (
+    <ul
+      className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}
+    >
+      {list.map((item, idx) => (
+        <li key={idx}>
+          <Link href={item.src}>
+            <Button
+              fullWidth
+              variant="text"
+              className={`
                                 !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
-                                ${item.src === pathname ? '!bg-[#5559CE]' : ''}
+                                ${item.src === pathname ? "!bg-[#5559CE]" : ""}
                             `}
-                        >
-                            <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
-                                {item.icon}
-                            </div>
-                            <p className={`
+            >
+              <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
+                {item.icon}
+              </div>
+              <p
+                className={`
                                 transition-all duration-500
-                                ${open ? 'opacity-100' : 'md:opacity-0'}
-                                ${item.src === pathname ? '!text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
-                            `}>{item.name}</p>
-                        </Button>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    )
+                                ${open ? "opacity-100" : "md:opacity-0"}
+                                ${
+                                  item.src === pathname
+                                    ? "!text-[#FAFAFA] !font-bold"
+                                    : "!text-[#525252] !font-medium"
+                                }
+                            `}
+              >
+                {item.name}
+              </p>
+            </Button>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
 }
 
-export default Links
+export default Links;

components/layoutPanel/sidebar/index.js

@@ -37,8 +37,9 @@ function Sidebar({ active, setActive, open, setOpen }) {
             <Links open={open} />
           </div>
           <div
-            className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? "!max-w-full" : "!max-w-0"
-              }`}
+            className={`w-full justify-center overflow-hidden transition-all duration-500 ${
+              open ? "!max-w-full" : "!max-w-0"
+            }`}
           >
             <Button
               variant="text"

components/layoutPanel/userDetail/Activities.js

@@ -1,37 +1,40 @@
-import TextLoading from "@/app/component/loading/Text"
-import WarnP from "@/components/icons/WarnP"
+import TextLoading from "@/app/component/loading/Text";
+import WarnP from "@/components/icons/WarnP";
 
 function Activities({ data, loading }) {
-    return (
-        <div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
-            <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">فعالیت های امروز</p>
-            <ul className="flex flex-col justify-start w-full mt-[24px]">
-                {data.todays_activities.map((item, idx) => (
-                    <li
-                        key={idx}
-                        className="flex flex-col"
-                    >
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-center justify-start gap-[12px]">
-                                <div className="bg-[rgba(255,192,81,0.20)] p-[8px] rounded-full">
-                                    <WarnP />
-                                </div>
-                                <TextLoading width={110} height={18} loading={loading}>
-                                    <p className="text-[#616161] text-[16px] font-medium">{item.text}</p>
-                                </TextLoading>
-                            </div>
-                            <TextLoading width={55} height={18} loading={loading}>
-                                <p className="text-[#7E7E7E] text-[12px] font-normal">{item.time}</p>
-                            </TextLoading>
-                        </div>
-                        {data.todays_activities.length > idx + 1 && (
-                            <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
-                        )}
-                    </li>
-                ))}
-            </ul>
-        </div>
-    )
+  return (
+    <div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+        فعالیت های امروز
+      </p>
+      <ul className="flex flex-col justify-start w-full mt-[24px]">
+        {data.todays_activities.map((item, idx) => (
+          <li key={idx} className="flex flex-col">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center justify-start gap-[12px]">
+                <div className="bg-[rgba(255,192,81,0.20)] p-[8px] rounded-full">
+                  <WarnP />
+                </div>
+                <TextLoading width={110} height={18} loading={loading}>
+                  <p className="text-[#616161] text-[16px] font-medium">
+                    {item.text}
+                  </p>
+                </TextLoading>
+              </div>
+              <TextLoading width={55} height={18} loading={loading}>
+                <p className="text-[#7E7E7E] text-[12px] font-normal">
+                  {item.time}
+                </p>
+              </TextLoading>
+            </div>
+            {data.todays_activities.length > idx + 1 && (
+              <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
 }
 
-export default Activities
+export default Activities;

components/layoutPanel/userDetail/Date.js

@@ -1,16 +1,13 @@
-'use client'
+"use client";
 
 import { DatePicker } from "jalaali-react-date-picker";
 
 function Date() {
-    return (
-        <div className="flex justify-center">
-            <DatePicker
-                nextIcon={<></>}
-                prevIcon={<></>}
-            />
-        </div>
-    )
+  return (
+    <div className="flex justify-center">
+      <DatePicker nextIcon={<></>} prevIcon={<></>} />
+    </div>
+  );
 }
 
-export default Date
+export default Date;

components/layoutPanel/userDetail/Head.js

@@ -1,57 +1,60 @@
-import CircularLoading from '@/app/component/loading/Circular'
-import TextLoading from '@/app/component/loading/Text'
-import ArrowLeftBlueP from '@/components/icons/ArrowLeftBlueP'
-import LocationP from '@/components/icons/LocationP'
-import { Button } from '@mui/material'
-import Image from 'next/image'
-import React from 'react'
+import CircularLoading from "@/app/component/loading/Circular";
+import TextLoading from "@/app/component/loading/Text";
+import ArrowLeftBlueP from "@/components/icons/ArrowLeftBlueP";
+import LocationP from "@/components/icons/LocationP";
+import { Button } from "@mui/material";
+import Image from "next/image";
+import React from "react";
 
 function Head({ data, loading }) {
-    return (
-        <div className="flex w-full flex-col items-center justify-start">
-            <CircularLoading width={80} height={80} loading={loading}>
-                <Image
-                    src={data.src}
-                    height={80}
-                    width={80}
-                    alt="profile"
-                />
-            </CircularLoading>
-            <div className={loading ? 'mt-[8px] mb-[4px]' : ''}>
-                <TextLoading width={60} height={18} loading={loading}>
-                    <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">{data.name}</p>
-                </TextLoading>
-            </div>
-            <div className="flex items-center justify-center gap-[8px]">
-                <LocationP />
-                <TextLoading width={55} height={16} loading={loading}>
-                    <p className="text-[#7E7E7E] text-[14px] font-normal">نماینده شهر اهواز</p>
-                </TextLoading>
-            </div>
-            <div className="flex items-center justify-center my-[16px]">
-                <div className="flex flex-col items-center justify-center">
-                    <p className="text-[#9B9B9B] text-[14px] font-normal">کل بیماران</p>
-                    <TextLoading width={55} height={16} loading={loading}>
-                        <p className="text-[#3B3B3B] text-[14px] font-medium">{data.all_patients}</p>
-                    </TextLoading>
-                </div>
-                <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
-                <div className="flex flex-col items-center justify-center">
-                    <p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
-                    <TextLoading width={55} height={16} loading={loading}>
-                        <p className="text-[#3B3B3B] text-[14px] font-medium">{data.total_turns}</p>
-                    </TextLoading>
-                </div>
-            </div>
-            <Button
-                className="!flex !p-1 !items-center !justify-center !text-[#5559CE] !text-[14px] !font-medium"
-                variant="text"
-            >
-                مشاهده اطلاعات نماینده
-                <ArrowLeftBlueP />
-            </Button>
+  return (
+    <div className="flex w-full flex-col items-center justify-start">
+      <CircularLoading width={80} height={80} loading={loading}>
+        <Image src={data.src} height={80} width={80} alt="profile" />
+      </CircularLoading>
+      <div className={loading ? "mt-[8px] mb-[4px]" : ""}>
+        <TextLoading width={60} height={18} loading={loading}>
+          <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">
+            {data.name}
+          </p>
+        </TextLoading>
+      </div>
+      <div className="flex items-center justify-center gap-[8px]">
+        <LocationP />
+        <TextLoading width={55} height={16} loading={loading}>
+          <p className="text-[#7E7E7E] text-[14px] font-normal">
+            نماینده شهر اهواز
+          </p>
+        </TextLoading>
+      </div>
+      <div className="flex items-center justify-center my-[16px]">
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-[#9B9B9B] text-[14px] font-normal">کل بیماران</p>
+          <TextLoading width={55} height={16} loading={loading}>
+            <p className="text-[#3B3B3B] text-[14px] font-medium">
+              {data.all_patients}
+            </p>
+          </TextLoading>
         </div>
-    )
+        <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
+          <TextLoading width={55} height={16} loading={loading}>
+            <p className="text-[#3B3B3B] text-[14px] font-medium">
+              {data.total_turns}
+            </p>
+          </TextLoading>
+        </div>
+      </div>
+      <Button
+        className="!flex !p-1 !items-center !justify-center !text-[#5559CE] !text-[14px] !font-medium"
+        variant="text"
+      >
+        مشاهده اطلاعات نماینده
+        <ArrowLeftBlueP />
+      </Button>
+    </div>
+  );
 }
 
-export default Head
+export default Head;

components/layoutPanel/userDetail/index.js

@@ -3,19 +3,19 @@ import Date from "./Date";
 import Activities from "./Activities";
 
 function UserDetail({ data, loading }) {
-    return (
-        <div className="hidden xl:flex min-w-[332px] h-full opacity-page">
-            <div
-                className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
+  return (
+    <div className="hidden xl:flex min-w-[332px] h-full opacity-page">
+      <div
+        className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
                 bg-[#FFF] py-[40px] px-[16px]"
-            >
-                <Head data={data} loading={loading} />
-                <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>
-                <Date />
-                <Activities data={data} loading={loading} />
-            </div>
-        </div>
-    )
+      >
+        <Head data={data} loading={loading} />
+        <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>
+        <Date />
+        <Activities data={data} loading={loading} />
+      </div>
+    </div>
+  );
 }
 
-export default UserDetail
+export default UserDetail;