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,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 }
+];