add open/close to sidebar & responsive sidebar & head & page dashboard and user account

components/panel/turns/List.js

@@ -0,0 +1,75 @@
+import CustomTable from "@/app/component/CustomTable"
+import CircularLoading from "@/app/component/loading/Circular"
+import CustomLoading from "@/app/component/loading/Custom"
+import TextLoading from "@/app/component/loading/Text"
+import Pagination from "@/app/component/Pagination"
+import { TableCell, TableRow } from "@mui/material"
+import Image from "next/image"
+
+function List({ data }) {
+
+    const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
+    const centerTable = [0, 4];
+
+    return (
+        <div className="mt-[32px] pb-[20px] table-rounded-8">
+            <CustomTable
+                tableHead={tableHead}
+                centerTable={centerTable}
+            >
+                {data.list_of_doctors_appointments.map((row, idx) => (
+                    <TableRow
+                        key={idx}
+                        className='!border-0 !border-b !border-[#DBDBDB]'
+                    >
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="center">
+                            <TextLoading width={15} height={18} loading={false}>
+                                {idx + 1}
+                            </TextLoading>
+                        </TableCell>
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' component="th" scope="row">
+                            <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
+                                <CircularLoading width={32} height={32} loading={false}>
+                                    <Image
+                                        src={row.image}
+                                        alt='doctor'
+                                        height={32}
+                                        width={32}
+                                    />
+                                </CircularLoading>
+                                <TextLoading width={40} height={18} loading={false}>
+                                    {row.name}
+                                </TextLoading>
+                            </div>
+                        </TableCell>
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="right">
+                            <TextLoading width={50} height={18} loading={false}>
+                                {row.expertise}
+                            </TextLoading>
+                        </TableCell>
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="left">
+                            <TextLoading width={50} height={18} loading={false}>
+                                {row.date}
+                            </TextLoading>
+                        </TableCell>
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap' align="right">
+                            <TextLoading width={50} height={18} loading={false}>
+                                {row.hour}
+                            </TextLoading>
+                        </TableCell>
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="left">
+                            <CustomLoading width={80} height={22} loading={false}>
+                                {row.number_of_turns}
+                            </CustomLoading>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </CustomTable>
+            <div className="w-full flex justify-center mt-[48px]">
+                <Pagination />
+            </div>
+        </div>
+    )
+}
+
+export default List

components/panel/turns/index.js

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