design page specialdays & workingdays & turns & add modal working day

2024-09-11 22:15:28 +03:30
parent d75e3c82b7
commit 55e32c63ae
23 changed files with 562 additions and 6 deletions
@@ -0,0 +1,42 @@
+import EditGrayA from "@/components/icons/EditGrayA"
+import EditOrangeA from "@/components/icons/EditOrangeA"
+import { Button, TextField } from "@mui/material"
+
+function FieldIcon({ changeData, icon, placeholder, name }) {
+    return (
+        <div className="relative w-full">
+            <TextField
+                placeholder={placeholder || ''}
+                type='text'
+                className='!w-full'
+                onChange={e => {
+                    changeData(e.target.value, name)
+                }}
+                sx={{
+                    '& .MuiFormLabel-root': {
+                        top: '-4px !important'
+                    },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+                    '& .MuiInputBase-root': {
+                        padding: '0 !important',
+                        borderRadius: '8px !important'
+                    },
+                    '.Mui-focused': {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #5559CE !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <Button
+                className='!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1'
+            >
+                {icon}
+            </Button>
+        </div>
+    )
+}
+
+export default FieldIcon
@@ -304,6 +304,10 @@ html {
    border-radius: 12px !important;
 }

+.w-full-content .content-text-panel {
+    width: 100%;
+}
+
@keyframes rotate {
    from {
        rotate: 90;
@@ -0,0 +1,10 @@
+import TurnsPage from '@/components/panel/turns'
+import Information from '@/data/information.json';
+
+function page() {
+    return (
+        <TurnsPage data={Information} />
+    )
+}
+
+export default page
@@ -0,0 +1,11 @@
+function AddTimeP() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M9.99984 18.3337C14.5832 18.3337 18.3332 14.5837 18.3332 10.0003C18.3332 5.41699 14.5832 1.66699 9.99984 1.66699C5.4165 1.66699 1.6665 5.41699 1.6665 10.0003C1.6665 14.5837 5.4165 18.3337 9.99984 18.3337Z" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.6665 10H13.3332" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M10 13.3337V6.66699" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default AddTimeP
@@ -0,0 +1,10 @@
+function ClockP() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M18.3337 10.0003C18.3337 14.6003 14.6003 18.3337 10.0003 18.3337C5.40033 18.3337 1.66699 14.6003 1.66699 10.0003C1.66699 5.40033 5.40033 1.66699 10.0003 1.66699C14.6003 1.66699 18.3337 5.40033 18.3337 10.0003Z" stroke="#525252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.0914 12.6505L10.5081 11.1088C10.0581 10.8421 9.69141 10.2005 9.69141 9.67546V6.25879" stroke="#525252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ClockP
@@ -0,0 +1,10 @@
+function PlusBlueP() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M5 10H15" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M10 15V5" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default PlusBlueP
@@ -14,7 +14,7 @@ function Links() {
        { name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
        { name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
        { name: 'اضافه کردن پزشک', src: '/panel/add-doctor', icon: <ProfileAddP /> },
-        { name: 'نوبت ها', src: '/', icon: <CalendarP /> }
+        { name: 'نوبت ها', src: '/panel/turns', icon: <CalendarP /> }
    ];

    const pathname = usePathname();
@@ -1,6 +1,6 @@
 function ContentText({ children, text }) {
    return (
-        <div className="flex flex-col items-start justify-start gap-[16px]">
+        <div className="flex flex-col items-start justify-start gap-[16px] content-text-panel">
            <p className="text-[#525252] text-[14px] font-medium">{text}</p>
            {children}
        </div>
@@ -32,7 +32,7 @@ function AddDoctorPage() {
                    value={value}
                    handleChange={handleChange}
                />
-                <div className="mt-[24px] mx-[56px]">
+                <div className={`mt-[24px] ${value !== 4 ? 'mx-[56px]' : 'mx-0'}`}>
                    {components[value]}
                </div>
            </div>
@@ -0,0 +1,89 @@
+import { useState } from "react"
+
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
+import ContentText from "@/components/panel/ContentText"
+import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector"
+import FieldIcon from "@/app/component/FieldIcon"
+import { Button } from "@mui/material"
+import PlusBlueP from "@/components/icons/PlusBlueP"
+import ClockP from "@/components/icons/ClockP"
+
+function Form() {
+
+    const [data, setData] = useState({
+        start_time: '',
+        end_time: ''
+    });
+    const [selected, setSelected] = useState({
+        numberOfTurns: '',
+        timeOfEachTurn: ''
+    });
+
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: value
+        });
+
+    return (
+        <div className="flex flex-col w-full-content">
+            <div className="flex w-full items-center justify-start gap-[16px]">
+                <ContentText text='تعداد نوبت در هر روز'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='numberOfTurns'
+                        list={turnsPerDay}
+                    />
+                </ContentText>
+                <ContentText text='تعداد نوبت در هر روز'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='numberOfTurns'
+                        list={timeEachTurn}
+                    />
+                </ContentText>
+                <div className="content-text-panel"></div>
+                <div className="min-w-[152px]"></div>
+            </div>
+            <div className="flex items-end justify-center gap-[16px] mt-[32px]">
+                <ContentText text='تعداد نوبت در هر روز'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='numberOfTurns'
+                        list={dayOfWeek}
+                    />
+                </ContentText>
+                <ContentText text='زمان شروع'>
+                    <FieldIcon
+                        placeholder='انتخاب کنید...'
+                        changeData={changeData}
+                        icon={<ClockP />}
+                        name='start_time'
+                    />
+                </ContentText>
+                <ContentText text='زمان پایان'>
+                    <FieldIcon
+                        placeholder='انتخاب کنید...'
+                        changeData={changeData}
+                        icon={<ClockP />}
+                        name='end_time'
+                    />
+                </ContentText>
+                <Button
+                    variant="outlined"
+                    className="!border-[#5559CE] !gap-[4px] !min-w-[152px]"
+                >
+                    <PlusBlueP />
+                    اضافه کردن
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+
+function List() {
+
+    const [data, setData] = useState([
+        { name: 'شنبه', morning_time: '9 - 12', evening_time: '16 - 21' },
+        { name: 'یکشنبه', morning_time: '9 - 12', evening_time: '16 - 21' },
+        { name: 'دوشنبه', morning_time: '9 - 12', evening_time: '16 - 21' }
+    ]);
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div className="w-full flex flex-col mt-[48px] items-start gap-[16px]">
+            <p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
+            <TableContainer
+                className="!w-fit"
+                sx={{
+                    '&.MuiTableContainer-root': {
+                        boxShadow: 'none !important',
+                        border: 'none !important',
+                        borderBottom: '1px solid #DBDBDB !important'
+                    },
+                    '& .MuiTableRow-root th, .MuiTableRow-root td': {
+                        borderBottom: 'none !important'
+                    }
+                }}
+            >
+                <Table>
+                    <TableHead className="!py-2">
+                        <TableRow className="!bg-[#EFEFEF] !py-2">
+                            <TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">روز های هفته</TableCell>
+                            <TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم صبح</TableCell>
+                            <TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم عصر</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {data.map((row) => (
+                            <TableRow
+                                key={row.name}
+                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                            >
+                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" component="th" scope="row">
+                                    {row.name}
+                                </TableCell>
+                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
+                                    {row.morning_time}
+                                </TableCell>
+                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
+                                    {row.evening_time}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </div>
+    )
+}
+
+export default List
@@ -1,6 +1,22 @@
+import { Button } from "@mui/material"
+import Form from "./Form"
+import List from "./List"
+import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD"
+
 function SpecialDays() {
    return (
-        <div className="opacity-page">SpecialDays</div>
+        <div className="opacity-page">
+            <Form />
+            <List />
+            <Button
+                className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+                !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
+                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
+            >
+                ثبت اطلاعات
+                <ArrowLeftWhiteD />
+            </Button>
+        </div>
    )
 }

@@ -0,0 +1,22 @@
+export const turnsPerDay = [
+    { label: '1', id: 10 },
+    { label: '2', id: 20 },
+    { label: '3', id: 30 },
+    { label: '4', id: 40 }
+];
+
+export const timeEachTurn = [
+    { label: '10', id: 10 },
+    { label: '20', id: 20 },
+    { label: '30', id: 30 },
+    { label: '40', id: 40 }
+];
+
+export const dayOfWeek = [
+    { label: 'شنبه', id: 10 },
+    { label: 'یکشنبه', id: 20 },
+    { label: 'دوشنبه', id: 30 },
+    { label: 'سه شنبه', id: 40 },
+    { label: 'چهار شنبه', id: 40 },
+    { label: 'پنج شنبه', id: 40 }
+];
@@ -0,0 +1,37 @@
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
+import ContentText from "@/components/panel/ContentText"
+import { numberOfTurns, timeOfEachTurn } from "./listSelector"
+import { useState } from "react";
+
+function Form() {
+
+    const [selected, setSelected] = useState({
+        numberOfTurns: '',
+        timeOfEachTurn: '',
+    });
+
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    return (
+        <div className="mt-[40px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
+            <ContentText text='تعداد نوبت در هر روز'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='انتخاب کنید...'
+                    name='numberOfTurns'
+                    list={numberOfTurns}
+                />
+            </ContentText>
+            <ContentText text='زمان هر نوبت'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='انتخاب کنید...'
+                    name='timeOfEachTurn'
+                    list={timeOfEachTurn}
+                />
+            </ContentText>
+        </div>
+    )
+}
+
+export default Form
@@ -1,6 +1,20 @@
+import { Button } from "@mui/material"
+import Form from "./Form"
+import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD"
+
 function Turns() {
    return (
-        <div className="opacity-page">Turns</div>
+        <div className="opacity-page">
+            <Form />
+            <Button
+                className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+                !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
+                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
+            >
+                ثبت اطلاعات
+                <ArrowLeftWhiteD />
+            </Button>
+        </div>
    )
 }

@@ -0,0 +1,13 @@
+export const numberOfTurns = [
+    { label: 'نوبت 1', id: 10 },
+    { label: 'نوبت 2', id: 20 },
+    { label: 'نوبت 3', id: 30 },
+    { label: 'نوبت 4', id: 40 }
+];
+
+export const timeOfEachTurn = [
+    { label: 'دقیقه 1', id: 10 },
+    { label: 'دقیقه 2', id: 20 },
+    { label: 'دقیقه 3', id: 30 },
+    { label: 'دقیقه 4', id: 40 }
+];
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import ModalAddTime from "./modal/ModalAddTime";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+import ContentModal from "./modal/ContentModal";
+
+function List() {
+
+    const [data, setData] = useState([
+        { name: 'شنبه', morning_time: '', evening_time: '' },
+        { name: 'یکشنبه', morning_time: '', evening_time: '' },
+        { name: 'دوشنبه', morning_time: '', evening_time: '' },
+        { name: 'سه شنبه', morning_time: '', evening_time: '' },
+        { name: 'چهار شنبه', morning_time: '', evening_time: '' },
+        { name: 'پنج شنبه', morning_time: '', evening_time: '' },
+    ]);
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div className="w-full flex justify-center">
+            <TableContainer
+                className="!mt-[32px] !w-fit"
+                sx={{
+                    '&.MuiTableContainer-root': {
+                        boxShadow: 'none !important',
+                        border: 'none !important',
+                        borderBottom: '1px solid #DBDBDB !important'
+                    },
+                    '& .MuiTableRow-root th, .MuiTableRow-root td': {
+                        borderBottom: 'none !important'
+                    }
+                }}
+            >
+                <Table>
+                    <TableHead className="!py-2">
+                        <TableRow className="!bg-[#EFEFEF] !py-2">
+                            <TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">روز های هفته</TableCell>
+                            <TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم صبح</TableCell>
+                            <TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم عصر</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {data.map((row) => (
+                            <TableRow
+                                key={row.name}
+                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                            >
+                                <TableCell className="!border-[1px] !border-[#DBDBDB]" component="th" scope="row">
+                                    {row.name}
+                                </TableCell>
+                                <TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
+                                    {row.morning_time ? '' : (
+                                        <ModalAddTime handleOpen={handleOpen} />
+                                    )}
+                                </TableCell>
+                                <TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
+                                    {row.evening_time ? '' : (
+                                        <ModalAddTime handleOpen={handleOpen} />
+                                    )}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <ContentModal
+                open={open}
+                setOpen={setOpen}
+                handleClose={handleClose}
+            />
+        </div>
+    )
+}
+
+export default List
@@ -1,6 +1,11 @@
+import List from "./List"
+
 function WorkingDays() {
    return (
-        <div className="opacity-page">WorkingDays</div>
+        <div className="opacity-page">
+            <p className="text-[#525252] text-[16px] font-bold">لیست روزهای کاری</p>
+            <List />
+        </div>
    )
 }

@@ -0,0 +1,36 @@
+import CloseModalD from "@/components/icons/CloseModalD"
+import { styleDefault } from "@/mui"
+import { Box, Button, Modal } from "@mui/material"
+import Radios from "./Radios"
+import Form from "./Form"
+
+function ContentModal({ open, setOpen, handleClose }) {
+    return (
+        <Modal
+            open={open}
+            onClose={handleClose}
+        >
+            <Box
+                sx={styleDefault}
+                className="!w-fit !py-[20px] !px-[16px] !pb-[56px]"
+            >
+                <div className="flex items-center justify-between">
+                    <p className="text-[#525252] text-[20px] font-bold">اضافه کردن روز کاری</p>
+                    <Button
+                        variant="text"
+                        className="!p-1"
+                        onClick={handleClose}
+                    >
+                        <CloseModalD />
+                    </Button>
+                </div>
+                <div className="mx-[52px]">
+                    <Radios />
+                    <Form />
+                </div>
+            </Box>
+        </Modal>
+    )
+}
+
+export default ContentModal
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import ClockP from "@/components/icons/ClockP";
+import FieldIcon from "@/app/component/FieldIcon";
+import ContentText from "@/components/panel/ContentText";
+import { Button } from "@mui/material";
+
+function Form() {
+
+    const [data, setData] = useState({
+        start_time: '',
+        end_time: ''
+    });
+
+    const changeData = (value, name) => setData({ ...data, [name]: value })
+
+    return (
+        <div className="flex flex-col gap-[40px] min-w-[420px]">
+            <ContentText text='زمان شروع'>
+                <FieldIcon
+                    placeholder='انتخاب کنید...'
+                    changeData={changeData}
+                    icon={<ClockP />}
+                    name='start_time'
+                />
+            </ContentText>
+            <ContentText text='زمان پایان'>
+                <FieldIcon
+                    placeholder='انتخاب کنید...'
+                    changeData={changeData}
+                    icon={<ClockP />}
+                    name='end_time'
+                />
+            </ContentText>
+            <div className="flex items-center justify-center gap-[16px]">
+                <Button
+                    variant="outlined"
+                    className="!border-[#5559CE] !shadow-none !px-[48px]"
+                >انصراف</Button>
+                <Button
+                    variant="contained"
+                    className=" !shadow-none !px-[48px]"
+                >ذخیره</Button>
+            </div>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,20 @@
+import AddTimeP from '@/components/icons/AddTimeP'
+import { Button } from '@mui/material'
+import React from 'react'
+
+function ModalAddTime({ handleOpen }) {
+    return (
+        <div>
+            <Button
+                variant='text'
+                onClick={handleOpen}
+                className='!gap-[8px] !p-1 !text-[#5559CE] !text-[16px] !font-medium'
+            >
+                <AddTimeP />
+                انتخاب کنید
+            </Button>
+        </div>
+    )
+}
+
+export default ModalAddTime
@@ -0,0 +1,21 @@
+import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
+
+function Radios() {
+    return (
+        <RadioGroup
+            dir="ltr"
+            className="!flex !flex-row !my-[40px] !gap-[36px] !items-center !justify-end"
+            defaultValue='workingDay'
+            sx={{
+                '& .muirtl-j204z7-MuiFormControlLabel-root': {
+                    marginLeft: '0 !important'
+                }
+            }}
+        >
+            <FormControlLabel value="workingDay" control={<Radio />} label="روز کاری" />
+            <FormControlLabel value="holiday" control={<Radio />} label="تعطیل" />
+        </RadioGroup>
+    )
+}
+
+export default Radios
@@ -0,0 +1,7 @@
+function TurnsPage({ data }) {
+    return (
+        <div>TurnsPage</div>
+    )
+}
+
+export default TurnsPage