From b05806638005875f6c89b537d32717504cce9587 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Fri, 30 Aug 2024 20:22:41 +0330 Subject: [PATCH] change design and responsive & pay & detail account & success pay & faield pay & doctor id --- app/component/ProgressChange.js | 41 +++ app/component/date/datePicker/index.js | 16 +- app/component/date/dateTime/Hours.js | 2 +- app/component/date/dateTime/index.js | 29 +- app/globals.css | 20 +- components/account/detailDoctor/Detail.js | 62 ++-- components/account/detailDoctor/Head.js | 15 +- components/account/detailDoctor/index.js | 9 +- components/account/index.js | 27 +- components/account/information/ButtonFixed.js | 15 + .../account/information/detail/Content.js | 6 +- components/account/information/detail/Form.js | 3 +- .../account/information/detail/index.js | 26 +- components/account/information/index.js | 15 +- .../account/information/payment/FailedPay.js | 4 +- .../account/information/payment/Paying.js | 35 +- .../account/information/payment/SuccessPay.js | 14 +- components/booking/date/PlaceVisit.js | 2 +- .../booking/date/Time/SelectDatePicker.js | 4 +- components/booking/date/Time/index.js | 2 +- components/booking/date/hour/index.js | 2 +- components/booking/date/index.js | 2 +- components/booking/detail/Address.js | 6 +- components/booking/detail/Head.js | 10 +- components/booking/detail/index.js | 5 +- components/booking/index.js | 2 +- .../cards/comments/chart/ProgressAll.js | 2 +- .../cards/comments/chart/index.js | 2 +- .../cards/comments/modal/ModalAnswer.js | 34 +- components/icons/ArrowLeftWD.js | 10 + components/icons/TickCircleOrange.js | 2 +- package-lock.json | 309 ++++++++++++++++-- package.json | 3 +- 33 files changed, 589 insertions(+), 147 deletions(-) create mode 100644 app/component/ProgressChange.js create mode 100644 components/account/information/ButtonFixed.js create mode 100644 components/icons/ArrowLeftWD.js diff --git a/app/component/ProgressChange.js b/app/component/ProgressChange.js new file mode 100644 index 0000000..bb22d36 --- /dev/null +++ b/app/component/ProgressChange.js @@ -0,0 +1,41 @@ +import { Slider } from "@mui/material" +import { useState } from "react" + +function ProgressChange({ data }) { + + const [value, setValue] = useState(70) + + return ( +
  • +

    {data.label}

    + setValue(e.target.value)} + sx={{ + '& .MuiSlider-rail': { + background: '#E8E8E8', + opacity: '100' + }, + '& .MuiSlider-track': { + background: '#05BA58', + border: 'none' + }, + '& .MuiSlider-thumb': { + marginRight: '-21px', + background: '#EBEBEB', + border: '1px solid #05BA58 !important' + }, + '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': { + boxShadow: 'none' + }, + }} + /> +

    + {value} +

    +
    • + ) +} + +export default ProgressChange \ No newline at end of file diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js index b1f1728..971b5d4 100644 --- a/app/component/date/datePicker/index.js +++ b/app/component/date/datePicker/index.js @@ -4,6 +4,7 @@ import { useState } from 'react'; import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker"; function DatePicker({ date, updateDate }) { + const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); @@ -24,19 +25,20 @@ function DatePicker({ date, updateDate }) { }; return ( -
    +
    - +
    + +
    ); } diff --git a/app/component/date/dateTime/Hours.js b/app/component/date/dateTime/Hours.js index 7b60f1a..c498045 100644 --- a/app/component/date/dateTime/Hours.js +++ b/app/component/date/dateTime/Hours.js @@ -3,7 +3,7 @@ import { Button } from "@mui/material"; function Hours({ doctor, hour, setHour, value, nameHours }) { return (
    ) } diff --git a/app/globals.css b/app/globals.css index e4dc65a..be5435c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -301,8 +301,6 @@ html { } } - - /* Date Picker Style */ .panel-elevation { @@ -348,10 +346,6 @@ html { border-bottom: none !important; } -.day-label-bar-inner-rtl { - background: #FFF !important; -} - .day-label-bar-inner-rtl div { color: #6C757D !important; } @@ -391,4 +385,18 @@ html { border-radius: 50%; } +.day-label-bar-inner-rtl { + background: #FFF !important; +} + +@media (max-width: 1024px) { + + .day-label-bar-inner-rtl, + .panel-jalaali, + .panel-header-rtl, + .days-body { + background: #FAFAFA !important; + } +} + /* End Date Picker Style */ \ No newline at end of file diff --git a/components/account/detailDoctor/Detail.js b/components/account/detailDoctor/Detail.js index 48b0f48..93f8e74 100644 --- a/components/account/detailDoctor/Detail.js +++ b/components/account/detailDoctor/Detail.js @@ -7,53 +7,77 @@ import { Button } from "@mui/material" function Detail({ doctor }) { return ( -
    +
    • - -

      آدرس: {doctor.location}

      +
      + +
      +

      آدرس: {doctor.location}

    • - +
      + +
      -

      تاریخ نوبت:

      -

      13 خرداد 1403

      +

      تاریخ نوبت:

      +

      13 خرداد 1403

    • - +
      + +
      -

      زمان نوبت:

      -

      ساعت 17:20

      +

      زمان نوبت:

      +

      ساعت 17:20

    - -
      -
    • - + +
        +
      • +
        + +

        فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.

        • -
      • - +
      • +
        + +

        لطفا به موقع در مطب حضور داشته باشید.

      diff --git a/components/account/detailDoctor/Head.js b/components/account/detailDoctor/Head.js index 3f2db24..cf53aa6 100644 --- a/components/account/detailDoctor/Head.js +++ b/components/account/detailDoctor/Head.js @@ -2,16 +2,25 @@ import Image from "next/image" function Head({ doctor }) { return ( -
      +
      profile doctor
      -

      {doctor.name}

      -

      تخصص: {doctor.expertise}

      +

      {doctor.name}

      +

      تخصص: {doctor.expertise}

      ) diff --git a/components/account/detailDoctor/index.js b/components/account/detailDoctor/index.js index 30eab4d..43103cc 100644 --- a/components/account/detailDoctor/index.js +++ b/components/account/detailDoctor/index.js @@ -1,9 +1,14 @@ import Detail from "./Detail" import Head from "./Head" -function DetailDoctor({ doctor }) { +function DetailDoctor({ doctor, typePay, isPay }) { return ( -
      +

      جزئیات نوبت

      diff --git a/components/account/index.js b/components/account/index.js index 862477f..eca7718 100644 --- a/components/account/index.js +++ b/components/account/index.js @@ -1,15 +1,32 @@ +'use client'; + +import { useState } from "react"; import DetailDoctor from "./detailDoctor" import Information from "./information"; function AccountPage({ doctor }) { + + const [typePay, setTypePay] = useState('default'); + const [isPay, setIsPay] = useState(false); + return (
      - - + +
      ) } diff --git a/components/account/information/ButtonFixed.js b/components/account/information/ButtonFixed.js new file mode 100644 index 0000000..948d5d1 --- /dev/null +++ b/components/account/information/ButtonFixed.js @@ -0,0 +1,15 @@ +import React from 'react' + +function ButtonFixed({ children }) { + return ( +
      + {children} +
      + ) +} + +export default ButtonFixed \ No newline at end of file diff --git a/components/account/information/detail/Content.js b/components/account/information/detail/Content.js index f6d97de..babc80d 100644 --- a/components/account/information/detail/Content.js +++ b/components/account/information/detail/Content.js @@ -1,11 +1,11 @@ function Content({ isConfirmed, children, title }) { return ( -
      -
      +
      +

      {title}

      {isConfirmed && (

      تایید شده

      )}
      diff --git a/components/account/information/detail/Form.js b/components/account/information/detail/Form.js index a047649..c10d935 100644 --- a/components/account/information/detail/Form.js +++ b/components/account/information/detail/Form.js @@ -10,7 +10,8 @@ const bime = [ function Form({ changeData, data, updateSelect, isForAnother }) { return ( -
      +
      diff --git a/components/account/information/detail/index.js b/components/account/information/detail/index.js index e02f9f6..c376bf4 100644 --- a/components/account/information/detail/index.js +++ b/components/account/information/detail/index.js @@ -3,6 +3,7 @@ import Form from "./Form"; import { Button } from "@mui/material"; import AddCircleBlueA from "@/components/icons/AddCircleBlueA"; import ArrowLeftB from "@/components/icons/ArrowLeftB"; +import ButtonFixed from "../ButtonFixed"; function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) { @@ -40,7 +41,7 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) { /> {!isForAnother && ( )} - + + + ) } diff --git a/components/account/information/index.js b/components/account/information/index.js index bdaf526..701e1c4 100644 --- a/components/account/information/index.js +++ b/components/account/information/index.js @@ -1,14 +1,10 @@ -'use client'; - import { useState } from "react"; -import Detail from "./detail"; import Payment from "./payment"; +import Detail from "./detail"; -function Information() { +function Information({ typePay, setTypePay, setIsPay, isPay }) { - const [isForAnother, setIsForAnother] = useState(false) - const [typePay, setTypePay] = useState('success'); - const [isPay, setIsPay] = useState(true); + const [isForAnother, setIsForAnother] = useState(false); const [fade, setFade] = useState(false); const fadeElement = (func) => { @@ -24,8 +20,9 @@ function Information() { return (
      {isPay ? diff --git a/components/account/information/payment/FailedPay.js b/components/account/information/payment/FailedPay.js index 158f2f4..7cbe490 100644 --- a/components/account/information/payment/FailedPay.js +++ b/components/account/information/payment/FailedPay.js @@ -8,9 +8,9 @@ function FailedPay({ setTypePay, setIsPay, fadeElement }) {
      -

      پرداخت شما انجام نشد.

      +

      پرداخت شما انجام نشد.

      -
      +
      +
      +

      مبلغ پیش پرداخت (بیعانه) :

      +

      20،000 تومان

      + + +
      +

      مبلغ قابل پرداخت : 20،000 تومان

      + +
      +       ) } diff --git a/components/account/information/payment/SuccessPay.js b/components/account/information/payment/SuccessPay.js index 462e561..03b576c 100644 --- a/components/account/information/payment/SuccessPay.js +++ b/components/account/information/payment/SuccessPay.js @@ -9,7 +9,19 @@ function SuccessPay() {

      پرداخت شما با موفقیت انجام شد.

      -

      برای نمایش نوبت ها به قسمت نوبت های من بروید.

      +

      برای نمایش نوبت ها به قسمت نوبت های من بروید.

      +
      + +
      +

      مقدار پرداخت شده:

      +

      20،000 تومان

      +
      + +
      + ) } diff --git a/components/booking/date/Time/index.js b/components/booking/date/Time/index.js index c0ec69f..88d423a 100644 --- a/components/booking/date/Time/index.js +++ b/components/booking/date/Time/index.js @@ -3,7 +3,7 @@ import SelectDatePicker from "./SelectDatePicker" function Time() { return (
      -

      2. انتخاب روز

      +

      2. انتخاب روز

      ) diff --git a/components/booking/date/hour/index.js b/components/booking/date/hour/index.js index 98dfb9e..dd61901 100644 --- a/components/booking/date/hour/index.js +++ b/components/booking/date/hour/index.js @@ -3,7 +3,7 @@ import DateTime from "@/app/component/date/dateTime" function Hour({ doctor }) { return (
      -

      3. انتخاب ساعت

      +

      3. انتخاب ساعت

      diff --git a/components/booking/date/index.js b/components/booking/date/index.js index e712fb5..02b7555 100644 --- a/components/booking/date/index.js +++ b/components/booking/date/index.js @@ -4,7 +4,7 @@ import Time from "./Time" function Date({ doctor }) { return ( -
      +