Feat/card for pet

src/assets/Icons/CalendarIcon.tsx

@@ -2,7 +2,7 @@ import { memo } from "react"
 import { TIconProps } from "./types"
 
 const Component: React.FC<TIconProps> = props => {
-  const { width = 32, height = 32, ...rest } = props
+  const { width = 20, height = 20, ...rest } = props
   return (
     <svg
       width={width}

src/assets/Icons/DownArrowIcon.tsx

@@ -0,0 +1,27 @@
+import { memo } from "react"
+import { TIconProps } from "./types"
+
+const Component: React.FC<TIconProps> = props => {
+  const { width = 16, height = 16, ...rest } = props
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M16.95 7.5L11.5167 12.9333C10.875 13.575 9.825 13.575 9.18333 12.9333L3.75 7.5"
+        stroke="#181A1A"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export const DownArrowIcon = memo(Component)

src/assets/Icons/LeftArrowIcon.tsx

@@ -15,9 +15,9 @@ export const LeftArrowIcon: React.FC<TIconProps> = props => {
         d="M10.5 13.5L5.90683 8.97222C5.36439 8.4375 5.36439 7.5625 5.90683 7.02778L10.5 2.5"
         stroke="#181A1A"
         strokeWidth="1.5"
-        stroke-miterlimit="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

src/assets/Icons/RightArrowIcon.tsx

@@ -15,9 +15,9 @@ export const RightArrowIcon: React.FC<TIconProps> = props => {
         d="M5.5 13.5L10.0932 8.97222C10.6356 8.4375 10.6356 7.5625 10.0932 7.02778L5.5 2.5"
         stroke="#181A1A"
         strokeWidth="1.5"
-        stroke-miterlimit="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

src/assets/Icons/StarIcon.tsx

@@ -0,0 +1,35 @@
+import { TIconProps } from "@/assets/Icons/types.tsx"
+import { memo } from "react"
+
+const Component: React.FC<TIconProps> = props => {
+  const { width = 16, height = 16, ...rest } = props
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      {...rest}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_6240_6968)">
+        <path
+          d="M9.14937 2.34465L10.3227 4.69132C10.4827 5.01798 10.9094 5.33132 11.2694 5.39132L13.396 5.74465C14.756 5.97131 15.076 6.95798 14.096 7.93132L12.4427 9.58465C12.1627 9.86465 12.0094 10.4046 12.096 10.7913L12.5694 12.838C12.9427 14.458 12.0827 15.0846 10.6494 14.238L8.65603 13.058C8.29603 12.8446 7.7027 12.8446 7.33603 13.058L5.3427 14.238C3.91603 15.0846 3.04937 14.4513 3.4227 12.838L3.89603 10.7913C3.9827 10.4046 3.82937 9.86465 3.54937 9.58465L1.89603 7.93132C0.9227 6.95798 1.23603 5.97131 2.59603 5.74465L4.7227 5.39132C5.07603 5.33132 5.5027 5.01798 5.6627 4.69132L6.83603 2.34465C7.47603 1.07132 8.51603 1.07132 9.14937 2.34465Z"
+          fill="#FFC107"
+          stroke="#181A1A"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_6240_6968">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export const StarIcon = memo(Component)

src/assets/Icons/types.tsx

@@ -7,11 +7,13 @@ import { SuccessIcon } from "./SuccessIcon"
 import { WarningIcon } from "./WarningIcon"
 import { RightArrowIcon } from "./RightArrowIcon"
 import { LeftArrowIcon } from "./LeftArrowIcon"
-import { CalendarIcon } from "./CalendarIcon"
+// import { CalendarIcon } from "./CalendarIcon"
 import { TeamIcon } from "@/assets/Icons/TeamIcon.tsx"
 import { RoomIcon } from "@/assets/Icons/RoomIcon.tsx"
 import { CategoryIcon } from "@/assets/Icons/CategoryIcon.tsx"
 import { ClientIcon } from "@/assets/Icons/ClientIcon.tsx"
+import { CalendarIcon } from "@/assets/Icons/CalendarIcon.tsx"
+import { DownArrowIcon } from "./DownArrowIcon"
 
 export type TIcon =
   | "PlusIcon"
@@ -28,6 +30,8 @@ export type TIcon =
   | "CategoryIcon"
   | "ClientIcon"
   | "AnimalIcon"
+  | "CalendarIcon"
+  | "DownArrowIcon"
 
 export type TIconProps = SVGProps<SVGSVGElement>
 
@@ -45,4 +49,6 @@ export const iconTypes = new Map<TIcon, React.JSX.Element>([
   ["RoomIcon", <RoomIcon key={"RoomIcon"} />],
   ["CategoryIcon", <CategoryIcon key={"CategoryIcon"} />],
   ["ClientIcon", <ClientIcon key={"ClientIcon"} />],
+  ["CalendarIcon", <CalendarIcon key={"CalendarIcon"} />],
+  ["DownArrowIcon", <DownArrowIcon key={"DownArrowIcon"}/>],
 ])

src/modules/Booking/components/form/blocks/ScheduleForm/ScheduleForm.tsx

@@ -80,7 +80,7 @@ export const ScheduleForm = (props: ScheduleProps) => {
   return (
     <div className="flex flex-col">
       <div className="flex flex-col gap-x-2">
-        <div className="flex flex-row gap-4">
+        <div className="flex flex-row gap-4 items-center">
           <div className="relative">
             <TextField
               width="260px"
@@ -118,7 +118,6 @@ export const ScheduleForm = (props: ScheduleProps) => {
               <BookingSelect
                 className="w-64"
                 data={SCHEDULE_CHECKIN}
-                marginBottom="16px"
                 placeholder={Placeholder.TIME_FROM.valueOf()}
                 label={
                   field.value?.length ? Placeholder.TIME_FROM.valueOf() : ""
@@ -130,7 +129,7 @@ export const ScheduleForm = (props: ScheduleProps) => {
           />
         </div>
 
-        <div className="flex flex-row gap-3">
+        <div className="flex flex-row gap-3 items-center">
           <div className="relative">
             <TextField
               width={"260px"}
@@ -165,7 +164,6 @@ export const ScheduleForm = (props: ScheduleProps) => {
               <BookingSelect
                 className="w-64"
                 data={SCHEDULE_DEPARTURE}
-                marginBottom="16px"
                 placeholder={Placeholder.TIME_TO.valueOf()}
                 label={field.value?.length ? Placeholder.TIME_TO.valueOf() : ""}
                 {...field}

src/modules/Booking/components/form/fields/BookingSelect/BookingSelect.tsx

@@ -65,9 +65,7 @@ export const BookingSelect = forwardRef<HTMLSelectElement, TProps>(
     } = props
 
     const handleSelectChange = (e: SelectChangeEvent) => {
-      console.log(e)
       onChange(e.target.value)
-      console.log(value)
     }
 
     return (

src/modules/Booking/components/modal/ShortClientModal/ShortClientModal.tsx

@@ -1,122 +1,120 @@
 import { Box, Dialog, DialogTitle } from "@mui/material"
 import { memo } from "react"
-import { FieldValues, useForm } from "react-hook-form"
 import { ShortClientForm } from "@/modules/Booking/consts/Placeholders"
 import { TextField } from "@/shared/ui/TextField"
-import { NewOwnerDto } from "@/generated/owners"
 import { Button, EButtonSize, EButtonVariant } from "@/shared/ui/Button/Button"
+import { NewOwnerDto } from "@/generated/owners"
+import { UseFormReturn } from "react-hook-form"
 
-interface IShortClientProps {
+interface ShortClientModalProps {
+  form: UseFormReturn<NewOwnerDto>
+  isModalOpen: boolean
   onClose: () => void
   onSubmit: (data: NewOwnerDto) => void
-  isModalOpen: boolean
-  form: ReturnType<typeof useForm>
 }
 
-export const ShortClientModal: React.FC<IShortClientProps> = memo(props => {
-  const { onClose, onSubmit, isModalOpen, form } = props
-  const {
-    handleSubmit,
-    register,
-    formState: { errors },
-  } = form
-  return (
-    <Dialog
-      open={isModalOpen}
-      maxWidth="lg"
-      onClose={onClose}
-      aria-labelledby="modal-booking-title"
-      aria-describedby="modal-booking-description"
-      sx={{
-        "& .MuiDialogTitle-root": {
-          padding: "40px 64px 0",
-        },
-        "& .MuiPaper-root": {
-          borderRadius: "16px",
-          width: "656px ",
-        },
-      }}
-    >
-      <DialogTitle
-        display="flex"
-        justifyContent="flex-start"
-        padding="0"
-        fontSize={24}
-        fontWeight={800}
-      >
-        Новый клиент
-      </DialogTitle>
-      <form
-        className="pb-10 px-16"
-        onSubmit={(data: FieldValues) => onSubmit(data as NewOwnerDto)}
+export const ShortClientModal: React.FC<ShortClientModalProps> = memo(
+  ({ form, isModalOpen, onClose, onSubmit }) => {
+    const {
+      handleSubmit,
+      register,
+      formState: { isDirty, errors },
+    } = form
+
+    const formFields = [
+      {
+        id: "lastname",
+        label: ShortClientForm.LAST_NAME.valueOf(),
+        placeholder: ShortClientForm.LAST_NAME.valueOf(),
+        error: errors?.lastName?.message,
+      },
+      {
+        id: "firstName",
+        label: ShortClientForm.FIRST_NAME.valueOf(),
+        placeholder: ShortClientForm.FIRST_NAME.valueOf(),
+        error: errors?.firstName?.message,
+      },
+      {
+        id: "middleName",
+        label: ShortClientForm.MIDDLE_NAME.valueOf(),
+        placeholder: ShortClientForm.MIDDLE_NAME.valueOf(),
+        error: errors?.middleName?.message,
+      },
+      {
+        id: "mainPhone",
+        label: ShortClientForm.MAIN_PHONE.valueOf(),
+        placeholder: ShortClientForm.MAIN_PHONE.valueOf(),
+        error: errors?.mainPhone?.message,
+      },
+      {
+        id: "optionalPhone",
+        label: ShortClientForm.OPTIONAL_PHONE.valueOf(),
+        placeholder: ShortClientForm.OPTIONAL_PHONE.valueOf(),
+        error: errors?.optionalPhone?.message,
+      },
+      {
+        id: "rating",
+        label: ShortClientForm.RATING.valueOf(),
+        placeholder: ShortClientForm.RATING.valueOf(),
+        error: errors?.rating?.message,
+      },
+    ]
+
+    const isReadyToSubmit = isDirty && Object.keys(errors).length === 0
+
+    return (
+      <Dialog
+        open={isModalOpen}
+        maxWidth="lg"
+        onClose={onClose}
+        aria-labelledby="modal-booking-title"
+        aria-describedby="modal-booking-description"
+        sx={{
+          "& .MuiDialogTitle-root": {
+            padding: "40px 64px 0",
+          },
+          "& .MuiPaper-root": {
+            borderRadius: "16px",
+            width: "656px",
+          },
+        }}
       >
-        <Box
+        <DialogTitle
           display="flex"
-          alignItems="center"
-          justifyContent="center"
-          marginBottom={"15px"}
+          justifyContent="flex-start"
+          padding="0"
+          fontSize={24}
+          fontWeight={800}
         >
-          <Box
-            display="flex"
-            justifyContent="flex-start"
-            flexDirection="column"
-            width="100%"
-          >
-            <TextField
-              label={ShortClientForm.LAST_NAME.valueOf()}
-              id={ShortClientForm.LAST_NAME.valueOf()}
-              placeholder={ShortClientForm.LAST_NAME.valueOf()}
-              error={errors?.lastname?.message as string}
-              {...register("lastname")}
-            />
-            <TextField
-              label={ShortClientForm.FIRST_NAME.valueOf()}
-              id={ShortClientForm.FIRST_NAME.valueOf()}
-              placeholder={ShortClientForm.FIRST_NAME.valueOf()}
-              error={errors?.firstName?.message as string}
-              {...register("firstName")}
-            />
-            <TextField
-              label={ShortClientForm.MIDDLE_NAME.valueOf()}
-              id={ShortClientForm.MIDDLE_NAME.valueOf()}
-              placeholder={ShortClientForm.MIDDLE_NAME.valueOf()}
-              error={errors?.middleName?.message as string}
-              {...register("middleName")}
-            />
-            <TextField
-              label={ShortClientForm.MAIN_PHONE.valueOf()}
-              id={ShortClientForm.MAIN_PHONE.valueOf()}
-              placeholder={ShortClientForm.MAIN_PHONE.valueOf()}
-              error={errors?.mainPhone?.message as string}
-              {...register("mainPhone")}
-            />
-            <TextField
-              label={ShortClientForm.OPTIONAL_PHONE.valueOf()}
-              id={ShortClientForm.OPTIONAL_PHONE.valueOf()}
-              placeholder={ShortClientForm.OPTIONAL_PHONE.valueOf()}
-              error={errors?.optionalPhone?.message as string}
-              {...register("optionalPhone")}
-            />
-            <TextField
-              className="mb-5"
-              label={ShortClientForm.RATING.valueOf()}
-              id={ShortClientForm.RATING.valueOf()}
-              placeholder={ShortClientForm.RATING.valueOf()}
-              error={errors?.rating?.message as string}
-              {...register("rating")}
-            />
+          Новый клиент
+        </DialogTitle>
+        <form className="pb-10 px-16" onSubmit={handleSubmit(onSubmit)}>
+          <Box display="flex" flexDirection="column" gap={2}>
+            {formFields.map(field => (
+              <TextField
+                key={field.id}
+                label={field.label}
+                id={field.id}
+                placeholder={field.placeholder}
+                error={field.error}
+                {...register(field.id as keyof NewOwnerDto)}
+              />
+            ))}
+          </Box>
+          <Box display="flex" justifyContent="flex-end" mt={4}>
             <Button
-              onClick={handleSubmit(onSubmit as unknown as () => void)}
+              type="submit"
               variant={EButtonVariant.Primary}
               size={EButtonSize.Large}
               fontSize={16}
               fontWeight={700}
+              disabled={!isReadyToSubmit}
             >
-              Сохранить
+              Добавить
             </Button>
           </Box>
-        </Box>
-      </form>
-    </Dialog>
-  )
-})
+        </form>
+      </Dialog>
+    )
+  }
+)