design sidebar & head layout & page dashboard

2024-09-10 02:00:41 +03:30
parent 60749d3b8c
commit dffdab7139
41 changed files with 1350 additions and 170 deletions
@@ -0,0 +1,70 @@
+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 { TableCell, TableRow } from "@mui/material"
+import Image from "next/image"
+
+function Table({ data }) {
+
+    const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
+    const centerTable = [0, 4];
+
+    return (
+        <CustomTable
+            zeroRadius={true}
+            tableHead={tableHead}
+            centerTable={centerTable}
+        >
+            {data.list_of_doctors_appointments.map((row, idx) => (
+                <TableRow
+                    key={idx}
+                    className='!border-0 !border-b !border-[#DBDBDB]'
+                >
+                    <TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' align="center">
+                        <TextLoading width={15} height={18} loading={false}>
+                            {idx + 1}
+                        </TextLoading>
+                    </TableCell>
+                    <TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !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-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
+                        <TextLoading width={30} height={18} loading={false}>
+                            {row.expertise}
+                        </TextLoading>
+                    </TableCell>
+                    <TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
+                        <TextLoading width={50} height={18} loading={false}>
+                            {row.date}
+                        </TextLoading>
+                    </TableCell>
+                    <TableCell className='!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
+                        <TextLoading width={50} height={18} loading={false}>
+                            {row.hour}
+                        </TextLoading>
+                    </TableCell>
+                    <TableCell className='!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
+                        <TextLoading width={50} height={18} loading={false}>
+                            {row.number_of_turns}
+                        </TextLoading>
+                    </TableCell>
+                </TableRow>
+            ))}
+        </CustomTable>
+    )
+}
+
+export default Table