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,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