responsive page user-account & add-doctor & turns & add loading to all page panel & change design page dashboard

components/panel/turns/list/Cards.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Cards() {
+  return (
+    <div className='flex hidden'>Cards</div>
+  )
+}
+
+export default Cards

components/panel/turns/list/Table.js

@@ -0,0 +1,76 @@
+import Image from "next/image";
+
+import { TableCell, TableRow } from "@mui/material";
+import Pagination from "@/app/component/Pagination";
+import CustomTable from "@/app/component/CustomTable";
+import TextLoading from "@/app/component/loading/Text";
+import CustomLoading from "@/app/component/loading/Custom";
+import CircularLoading from "@/app/component/loading/Circular";
+
+function Table({ data, loading }) {
+
+    const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
+    const centerTable = [0, 4];
+
+    return (
+        <div className="hidden md:flex flex-col">
+            <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={loading}>
+                                {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={loading}>
+                                    <Image
+                                        src={row.image}
+                                        alt='doctor'
+                                        height={32}
+                                        width={32}
+                                    />
+                                </CircularLoading>
+                                <TextLoading width={40} height={18} loading={loading}>
+                                    {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={loading}>
+                                {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={loading}>
+                                {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={loading}>
+                                {row.hour}
+                            </TextLoading>
+                        </TableCell>
+                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="left">
+                            <CustomLoading width={80} height={22} loading={loading}>
+                                {row.number_of_turns}
+                            </CustomLoading>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </CustomTable>
+            <div className="w-full flex justify-center mt-[48px]">
+                <Pagination />
+            </div>
+        </div>
+    )
+}
+
+export default Table

components/panel/turns/list/index.js

@@ -0,0 +1,13 @@
+import ColTable from "../../ColTable"
+import Table from "./Table"
+
+function List({ data, loading }) {
+    return (
+        <div className="mt-[32px] pb-[20px] table-rounded-8">
+            <Table data={data} loading={loading} />
+            <ColTable data={data.list_of_doctors_appointments} loading={loading} />
+        </div>
+    )
+}
+
+export default List