design head and search page turns

components/icons/ArrowBottomP.js

@@ -0,0 +1,9 @@
+function ArrowBottomP() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M16.6004 7.45801L11.1671 12.8913C10.5254 13.533 9.47539 13.533 8.83372 12.8913L3.40039 7.45801" stroke="#5559CE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowBottomP

components/icons/ExportP.js

@@ -0,0 +1,11 @@
+function ExportP() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M13.6997 7.41699C16.6997 7.67533 17.9247 9.21699 17.9247 12.592V12.7003C17.9247 16.4253 16.4331 17.917 12.7081 17.917H7.28307C3.55807 17.917 2.06641 16.4253 2.06641 12.7003V12.592C2.06641 9.24199 3.27474 7.70033 6.22474 7.42533" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M10 12.4999V3.0166" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12.7913 4.87467L9.99967 2.08301L7.20801 4.87467" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ExportP

components/layoutPanel/sidebar/index.js

@@ -2,15 +2,16 @@ import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
 import LogoPanel from "@/components/icons/LogoPanel";
 import { Button } from "@mui/material";
 import Links from "./Links";
+import Link from "next/link";
 
 function Sidebar() {
   return (
     <aside className="min-w-[243px] h-full">
       <div className="min-w-[243px] p-[24px] h-full flex flex-col justify-between items-start fixed top-0 right-0 border-0 border-l border-l-[#EFEFEF] bg-[#FFF]">
         <div>
-          <div className="flex justify-center">
+          <Link href='/panel/dashboard' className="flex justify-center">
             <LogoPanel />
-          </div>
+          </Link>
           <Links />
         </div>
         <div className="w-full flex justify-center">

components/panel/turns/head/Date.js

@@ -0,0 +1,23 @@
+import { Button, ButtonGroup } from "@mui/material"
+
+function Date() {
+    return (
+        <ButtonGroup
+            variant="outlined"
+            className=""
+        >
+            <Button
+                className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+            >
+                از تاریخ
+            </Button>
+            <Button
+                className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+            >
+                تا تاریخ
+            </Button>
+        </ButtonGroup>
+    )
+}
+
+export default Date

components/panel/turns/head/SearchDoctor.js

@@ -0,0 +1,53 @@
+import ArrowBottomP from '@/components/icons/ArrowBottomP'
+import ExportP from '@/components/icons/ExportP'
+import SearchD from '@/components/icons/SearchD'
+import { Button, ButtonGroup, TextField } from '@mui/material'
+
+function SearchDoctor() {
+    return (
+        <div className="flex items-center justify-between">
+            <ButtonGroup
+                variant="contained"
+                className="!bg-[#FFF] lg:!w-[55%] !mt-[24px] !rounded-[4px] !overflow-hidden 
+            flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
+            >
+                <TextField
+                    variant="standard"
+                    InputProps={{
+                        disableUnderline: true
+                    }}
+                    sx={{
+                        background: 'transparent !important',
+                        '& .MuiInputBase-root': { height: '100%' },
+                        '& .MuiInput-root': { borderBottom: 'none', },
+                        '& .MuiInputBase-input': {
+                            background: 'transparent',
+                            color: '#7E7E7E',
+                            padding: '0'
+                        }
+                    }}
+                    placeholder='جستجو براساس نام پزشک...'
+                    dir='rtl'
+                    className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+                />
+                <Button
+                    className="
+                    !rounded-[4px] !p-[8px] !w-[56px] !h-[56px] !max-w-[40px] !max-h-[40px] 
+                "
+                >
+                    <SearchD />
+                </Button>
+            </ButtonGroup>
+            <Button
+                variant='outlined'
+                className='!border-[#5559CE] !flex !items-center !gap-[6px] !rounded-[4px]'
+            >
+                <ExportP />
+                خروجی گرفتن
+                <ArrowBottomP />
+            </Button>
+        </div>
+    )
+}
+
+export default SearchDoctor

components/panel/turns/head/index.js

@@ -0,0 +1,16 @@
+import Date from "./Date"
+import SearchDoctor from "./SearchDoctor"
+
+function Head() {
+    return (
+        <div className="w-full">
+            <div className="flex items-center justify-start gap-[10px]">
+                <p className="text-[#525252] text-[20px] font-bold">لیست نوبت های پزشکان</p>
+                <Date />
+            </div>
+            <SearchDoctor />
+        </div>
+    )
+}
+
+export default Head

components/panel/turns/index.js

@@ -1,6 +1,10 @@
+import Head from "./head"
+
 function TurnsPage({ data }) {
     return (
-        <div>TurnsPage</div>
+        <div className="bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[24px]">
+            <Head />
+        </div>
     )
 }