From 7f772a33bbd57f304a72012f7f124617084f8ca9 Mon Sep 17 00:00:00 2001
From: Wellington Braga <maxwellucas.wl@gmail.com>
Date: Wed, 13 Mar 2024 04:57:27 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20Corre=C3=A7=C3=A3o=20do=20compon?=
 =?UTF-8?q?ente=20de=20Fildset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Fieldset/index.tsx             |  25 +-
 src/components/Fieldset/styles.ts             |  75 ++--
 src/components/common/CustomSelect/index.tsx  | 127 +++---
 .../common/Inputs/CustomSelect/index.tsx      |   6 +-
 .../common/Inputs/CustomSelect/styles.ts      |  87 ++--
 .../common/Inputs/CustomTextArea/index.tsx    |  10 +-
 .../common/Inputs/CustomTextArea/styles.ts    |   3 +-
 .../abrir-chamado/confirmar-chamado/index.tsx |   4 +-
 src/screens/abrir-chamado/index.tsx           | 383 +++++++++---------
 9 files changed, 377 insertions(+), 343 deletions(-)

diff --git a/src/components/Fieldset/index.tsx b/src/components/Fieldset/index.tsx
index db1b0647..705062b9 100644
--- a/src/components/Fieldset/index.tsx
+++ b/src/components/Fieldset/index.tsx
@@ -1,5 +1,5 @@
 import { buildTestIds } from "@/utils/functions";
-import { Fieldset, Legend, LegendText } from "./styles";
+import { FieldSetContent, Fieldset, FieldsetContainer, Legend } from "./styles";
 
 export type FieldsetProps = {
   children: React.ReactNode;
@@ -21,20 +21,19 @@ const CustomFieldset = ({
   $justifyContent = "end"
 }: FieldsetProps) => {
   return (
-    <Fieldset
-      {...buildTestIds(`fieldset-container-${labelText}`)}
+    <FieldsetContainer
       width={width}
       height={height}
-      color={color}
-      $hasOverflow={$hasOverflow}
-      $justifyContent={$justifyContent}>
-      <Legend {...buildTestIds(`legend-container-${labelText}`)}>
-        <LegendText {...buildTestIds(`legend-text-${labelText}`)}>
-          {labelText}
-        </LegendText>
-      </Legend>
-      {children}
-    </Fieldset>
+      $hasOverflow={$hasOverflow}>
+      <Legend {...buildTestIds(`legend-text-${labelText}`)}>{labelText}</Legend>
+      <Fieldset
+        {...buildTestIds(`fieldset-container-${labelText}`)}
+        color={color}
+        $hasOverflow={$hasOverflow}
+        $justifyContent={$justifyContent}>
+        <FieldSetContent>{children}</FieldSetContent>
+      </Fieldset>
+    </FieldsetContainer>
   );
 };
 
diff --git a/src/components/Fieldset/styles.ts b/src/components/Fieldset/styles.ts
index 989c7d65..b5b48ef6 100644
--- a/src/components/Fieldset/styles.ts
+++ b/src/components/Fieldset/styles.ts
@@ -1,44 +1,73 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-export const Fieldset = styled.fieldset<{
-  width?: string;
-  height?: string;
+export const FieldSetContent = styled.div`
+  overflow: scroll;
+  width: 100%;
+  word-wrap: break-word;
+`;
+
+export const Fieldset = styled.div<{
   color?: string;
   $hasOverflow?: boolean;
   $justifyContent?: "start" | "center" | "end";
 }>`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: ${({ $justifyContent }) => $justifyContent || "center"};
-  padding: 16px;
-  width: ${({ width }) => width || "fit-content"};
-  height: ${({ height }) => height || "fit-content"};
   border-radius: 4px;
-  border: 1px solid ${({ theme, color }) => color || theme.colors.neutral["15"]};
-  text-overflow: ellipsis;
-  line-height: 112%;
-  overflow: ${({ $hasOverflow }) => ($hasOverflow ? "scroll" : "hidden")};
+  border: 1px solid ${({ theme, color }) => color ?? theme.colors.neutral["15"]};
+  line-height: 132%;
   color: ${({ theme }) => theme.colors.neutral["100"]};
-`;
+  padding: 1rem;
+  width: 100%;
+  overflow: hidden;
 
-export const Legend = styled.legend`
-  padding: 0px 4px 0px 4px;
+  ${({ $hasOverflow }) =>
+    !$hasOverflow &&
+    css`
+      ${FieldSetContent} {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    `};
 `;
 
-export const LegendText = styled.span`
+export const Legend = styled.span`
   font-style: normal;
   font-weight: 400;
-  font-size: 12px;
+  font-size: 1rem;
   line-height: 16px;
   letter-spacing: 0.4px;
   color: #2b4417;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
+  background-color: #f8fcf6;
+  display: inline-flex;
+  left: 16px;
+  padding: 0px 4px;
+  top: 8px;
+  position: relative;
 `;
 
 export const FieldsetTextContent = styled.p`
   width: 100%;
   height: fit-content;
 `;
+
+export const FieldsetContainer = styled.div<{
+  width?: string;
+  height?: string;
+  $hasOverflow?: boolean;
+}>`
+  width: ${({ width }) => width ?? "fit-content"};
+  height: fit-content;
+
+  ${Fieldset} {
+    max-height: ${({ height }) => height ?? "51px"};
+  }
+
+  ${FieldSetContent} {
+    ${({ $hasOverflow, height }) =>
+      $hasOverflow &&
+      height &&
+      css`
+        height: ${height};
+      `}
+  }
+`;
diff --git a/src/components/common/CustomSelect/index.tsx b/src/components/common/CustomSelect/index.tsx
index 3d590d4c..c68bc38e 100644
--- a/src/components/common/CustomSelect/index.tsx
+++ b/src/components/common/CustomSelect/index.tsx
@@ -1,62 +1,65 @@
-import { ChangeEventHandler, ReactNode } from "react";
-import { SelectComponent, CustomOption } from "./styles";
-import { CustomFieldset } from "@/components/Fieldset";
-
-interface OptionProps {
-  key: string;
-  value: string;
-  text: string;
-  isDisabled?: boolean;
-  isSelected?: boolean;
-}
-
-interface SelectProps {
-  labelText: string;
-  width?: string;
-  placeholder?: string;
-  height?: string;
-  onChange?: ChangeEventHandler<HTMLSelectElement>;
-  options?: OptionProps[];
-  isRequired?: boolean;
-  multiple?: boolean;
-  form?: string;
-  name?: string;
-  value?: string;
-}
-
-export const CustomSelect = ({
-  labelText,
-  placeholder = "selecione uma opção",
-  width = "100%",
-  height = "56px",
-  options,
-  onChange,
-  isRequired = false,
-  multiple = false,
-  form
-}: SelectProps) => {
-  return (
-    <CustomFieldset width={width} height={height} labelText={labelText}>
-      <SelectComponent
-        onChange={onChange}
-        required={isRequired}
-        name={placeholder}
-        multiple={multiple}
-        form={form}
-        defaultValue={placeholder}>
-        <CustomOption value="">
-          {placeholder ?? "selecione uma opção abaixo"}
-        </CustomOption>
-        {options?.map((option) => (
-          <CustomOption
-            key={option?.key}
-            value={option?.value}
-            selected={option?.isSelected as boolean}
-            disabled={option?.isDisabled as boolean}>
-            {option?.text}
-          </CustomOption>
-        ))}
-      </SelectComponent>
-    </CustomFieldset>
-  );
-};
+import { ChangeEventHandler, ReactNode } from "react";
+import { SelectComponent, CustomOption } from "./styles";
+import { CustomFieldset } from "@/components/Fieldset";
+
+interface OptionProps {
+  key: string;
+  value: string;
+  text: string;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+}
+
+interface SelectProps {
+  labelText: string;
+  width?: string;
+  placeholder?: string;
+  height?: string;
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
+  options?: OptionProps[];
+  isRequired?: boolean;
+  multiple?: boolean;
+  form?: string;
+  name?: string;
+  value?: string;
+}
+
+export const CustomSelect = ({
+  labelText,
+  placeholder = "selecione uma opção",
+  width = "100%",
+  height = "56px",
+  options,
+  onChange,
+  isRequired = false,
+  multiple = false,
+  form
+}: SelectProps) => {
+  return (
+    <CustomFieldset
+      width={width}
+      height={height}
+      labelText={labelText}>
+      <SelectComponent
+        onChange={onChange}
+        required={isRequired}
+        name={placeholder}
+        multiple={multiple}
+        form={form}
+        defaultValue={placeholder}>
+        <CustomOption value="">
+          {placeholder ?? "selecione uma opção abaixo"}
+        </CustomOption>
+        {options?.map((option) => (
+          <CustomOption
+            key={option?.key}
+            value={option?.value}
+            selected={option?.isSelected as boolean}
+            disabled={option?.isDisabled as boolean}>
+            {option?.text}
+          </CustomOption>
+        ))}
+      </SelectComponent>
+    </CustomFieldset>
+  );
+};
diff --git a/src/components/common/Inputs/CustomSelect/index.tsx b/src/components/common/Inputs/CustomSelect/index.tsx
index 9fe2ba91..be907479 100644
--- a/src/components/common/Inputs/CustomSelect/index.tsx
+++ b/src/components/common/Inputs/CustomSelect/index.tsx
@@ -43,7 +43,7 @@ export const CustomSelect = ({
       <CustomFieldset
         width={width}
         height={height}
-        labelText={labelText as unknown as string}>
+        labelText={labelText || ""}>
         <SelectComponent
           {...register(id, {
             ...registerOptions,
@@ -58,7 +58,9 @@ export const CustomSelect = ({
             }
           })}
           multiple={multiple}>
-          <CustomOption disabled={isRequired} value="">
+          <CustomOption
+            disabled={isRequired}
+            value="">
             {placeholder ?? "selecione uma opção abaixo"}
           </CustomOption>
           {options?.map((option) => (
diff --git a/src/components/common/Inputs/CustomSelect/styles.ts b/src/components/common/Inputs/CustomSelect/styles.ts
index c8c48144..51d6fdd5 100644
--- a/src/components/common/Inputs/CustomSelect/styles.ts
+++ b/src/components/common/Inputs/CustomSelect/styles.ts
@@ -1,45 +1,42 @@
-import styled from "styled-components";
-
-export const SelectContainer = styled.div<{ $status: string }>`
-  width: inherit;
-  display: flex;
-
-  & > fieldset {
-    padding: 11px 12px;
-    border: ${({ $status }) =>
-      $status === "invalid"
-        ? "1px solid red"
-        : $status === "valid"
-          ? "1px solid #7ac143"
-          : "1px solid #79747e"};
-  }
-`;
-
-export const SelectComponent = styled.select`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  outline: 0;
-  border: none;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 24px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 7px;
-  letter-spacing: 0.5px;
-  resize: none;
-  background: transparent;
-  color: #77757b;
-`;
-
-export const CustomOption = styled.option`
-  display: flex;
-  align-items: center;
-  background-color: #ebf6e3;
-  padding-bottom: 10px;
-  width: 20px;
-  border-radius: 0;
-  border: none;
-  font-size: 16px;
-`;
+import styled from "styled-components";
+
+export const SelectContainer = styled.div<{ $status: string }>`
+  width: inherit;
+  display: flex;
+
+  & > div > div {
+    border: ${({ $status }) =>
+      $status === "invalid"
+        ? "1px solid red"
+        : $status === "valid"
+          ? "1px solid #7ac143"
+          : "1px solid #79747e"};
+  }
+`;
+
+export const SelectComponent = styled.select`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  border: none;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 24px;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.5px;
+  resize: none;
+  background: transparent;
+`;
+
+export const CustomOption = styled.option`
+  display: flex;
+  align-items: center;
+  background-color: #ebf6e3;
+  padding-bottom: 10px;
+  width: 20px;
+  border-radius: 0;
+  border: none;
+  font-size: 16px;
+`;
diff --git a/src/components/common/Inputs/CustomTextArea/index.tsx b/src/components/common/Inputs/CustomTextArea/index.tsx
index 1944ad21..50eb60f2 100644
--- a/src/components/common/Inputs/CustomTextArea/index.tsx
+++ b/src/components/common/Inputs/CustomTextArea/index.tsx
@@ -25,8 +25,10 @@ export const CustomTextArea = ({
   return (
     <TextAreaContainer $status={$status}>
       <CustomFieldset
-        width={width as string}
-        labelText={labelText as string}>
+        width={width}
+        height={height}
+        $hasOverflow
+        labelText={labelText || ""}>
         <TextArea
           {...register(id, {
             ...registerOptions,
@@ -40,8 +42,8 @@ export const CustomTextArea = ({
               if (registerOptions?.onChange) registerOptions.onChange(e);
             }
           })}
-          height={height as string}
-          width={width as string}
+          height="100%"
+          width="100%"
           placeholder={placeholder}
           value={value}
         />
diff --git a/src/components/common/Inputs/CustomTextArea/styles.ts b/src/components/common/Inputs/CustomTextArea/styles.ts
index a26d2f82..bcbf19db 100644
--- a/src/components/common/Inputs/CustomTextArea/styles.ts
+++ b/src/components/common/Inputs/CustomTextArea/styles.ts
@@ -3,8 +3,9 @@ import styled from "styled-components";
 export const TextAreaContainer = styled.div<{ $status: string }>`
   width: inherit;
   display: flex;
+  flex-direction: column;
 
-  & > fieldset {
+  & > div > div {
     border: ${({ $status }) =>
       $status === "invalid"
         ? "1px solid red"
diff --git a/src/screens/abrir-chamado/confirmar-chamado/index.tsx b/src/screens/abrir-chamado/confirmar-chamado/index.tsx
index f4e85828..cd2ef24c 100644
--- a/src/screens/abrir-chamado/confirmar-chamado/index.tsx
+++ b/src/screens/abrir-chamado/confirmar-chamado/index.tsx
@@ -69,7 +69,9 @@ export const ConfirmDetailsPage = () => {
             color={theme.colors.primary.default}
             labelText="Descrição"
             width="100%"
-            height="160px">
+            height="240px"
+            $hasOverflow
+            >
             {ticketData?.descricao}
           </CustomFieldset>
         </SectionInfoForm>
diff --git a/src/screens/abrir-chamado/index.tsx b/src/screens/abrir-chamado/index.tsx
index 83ecbdd6..d81f2f0d 100644
--- a/src/screens/abrir-chamado/index.tsx
+++ b/src/screens/abrir-chamado/index.tsx
@@ -1,192 +1,191 @@
-"use client";
-
-import { CustomSelect, CustomTextArea, OutlinedInput } from "@/components";
-import { IssuePageContent } from "./styles";
-import { useFormContext } from "react-hook-form";
-import { useEffect } from "react";
-import toast from "react-hot-toast";
-import {
-  LS_KEY_1_TICKET_RECORD,
-  SS_KEY_DATA_WAS_RECOVERY
-} from "@/utils/alias";
-import { IOpenTicketForm } from "@/app/(app)/(form)/template";
-
-const CreateTicketPage = () => {
-  const {
-    register,
-    formState: { errors, isValid, isValidating },
-    watch,
-    getValues,
-    setValue
-  } = useFormContext<IOpenTicketForm>();
-
-  useEffect(() => {
-    const data = localStorage.getItem(LS_KEY_1_TICKET_RECORD);
-    const isDataRecovered =
-      sessionStorage.getItem(SS_KEY_DATA_WAS_RECOVERY) === "true";
-    if (data) {
-      const parsedData: IOpenTicketForm = JSON.parse(data);
-      setValue("resumo", parsedData.resumo, { shouldValidate: true });
-      setValue("descricao", parsedData.descricao, { shouldValidate: true });
-      setValue("data", parsedData.data, { shouldValidate: true });
-      setValue("tipo", parsedData.tipo, { shouldValidate: true });
-      setValue("prioridade", parsedData.prioridade, { shouldValidate: true });
-      !isDataRecovered && toast.success("Dados recuperados com sucesso!");
-      sessionStorage.setItem(SS_KEY_DATA_WAS_RECOVERY, "true");
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isValid && !isValidating) {
-      localStorage.setItem(
-        LS_KEY_1_TICKET_RECORD,
-        JSON.stringify({ ...getValues() })
-      );
-    }
-  }, [isValid, isValidating]);
-
-  const resumeWatch = watch("resumo", "");
-  const dataWatch = watch("data", "");
-  const descriptionWatch = watch("descricao", "");
-  const typeWatch = watch("tipo", "");
-  const priorityWatch = watch("prioridade", "baixa");
-
-  return (
-    <IssuePageContent id="first-step-form" as="form">
-      <OutlinedInput
-        id="resumo"
-        type="text"
-        placeholder="Do que se trata o chamado?"
-        $status={
-          !!errors?.resumo
-            ? "invalid"
-            : !errors?.resumo && resumeWatch.length
-              ? "valid"
-              : "none"
-        }
-        labelText="Resumo"
-        errorText={errors?.resumo?.message as string}
-        register={register}
-        registerOptions={{
-          required: "É necessário adicionar o resumo do chamado",
-          minLength: {
-            value: 5,
-            message: "O resumo deve ter no mínimo 5 caracteres"
-          },
-          maxLength: {
-            value: 40,
-            message: "O resumo deve ter no máximo 40 caracteres"
-          },
-          pattern: {
-            value:
-              /^[a-zA-Z0-9áéíóúâêîôûãõàèìòùäëïöüçÁÉÍÓÚÂÊÎÔÛÃÕÀÈÌÒÙÄËÏÖÜÇ\s]*$/,
-            message: "O resumo deve conter apenas letras e números"
-          }
-        }}
-      />
-      <CustomSelect
-        id="tipo"
-        isRequired
-        placeholder="Qual o tipo do chamado?"
-        labelText="Tipo"
-        height=""
-        options={[
-          { key: "1", value: "1", text: "1" },
-          { key: "2", value: "2", text: "2" },
-          { key: "3", value: "3", text: "3" }
-        ]}
-        register={register}
-        registerOptions={{
-          required: "É necessário escolher o tipo do chamado",
-          validate: (value) =>
-            value !== "" || "É necessário escolher o tipo do chamado"
-        }}
-        $status={
-          !!errors?.tipo
-            ? "invalid"
-            : !errors?.tipo && typeWatch.length
-              ? "valid"
-              : "none"
-        }
-      />
-      <CustomTextArea
-        id="descricao"
-        placeholder="Nos conte mais detalhes sobre o ocorrido..."
-        labelText="Descrição"
-        $status={
-          !!errors?.descricao
-            ? "invalid"
-            : !errors?.descricao && descriptionWatch.length
-              ? "valid"
-              : errors.descricao?.type === "maxLength"
-                ? "warning"
-                : "none"
-        }
-        register={register}
-        errorText={errors?.descricao?.message as string}
-        warnText={errors.descricao?.message as string}
-        registerOptions={{
-          required: "É necessário escrever mais detalhes sobre o seu chamado",
-          minLength: {
-            value: 20,
-            message: "O resumo deve ter no mínimo 20 caracteres"
-          },
-          maxLength: {
-            value: 280,
-            message: "O resumo deve ter no máximo 280 caracteres"
-          }
-        }}
-      />
-      <OutlinedInput
-        id="data"
-        type="date"
-        placeholder="dd/mm/aaaa"
-        $status={
-          !!errors?.data
-            ? "invalid"
-            : !errors?.data && dataWatch.length
-              ? "valid"
-              : "none"
-        }
-        errorText={errors?.data?.message as string}
-        labelText="Data do ocorrido"
-        register={register}
-        registerOptions={{
-          required: "É necessário adicionar a data do ocorrido",
-          validate: (value) => {
-            const date = new Date(value);
-            const today = new Date();
-            return date < today || "A data não pode ser no futuro";
-          }
-        }}
-      />
-      <CustomSelect
-        id="prioridade"
-        isRequired
-        placeholder="O quão urgente é esse chamado ?"
-        labelText="Prioridade"
-        height=""
-        options={[
-          { key: "baixa", value: "baixa", text: "pouco urgente" },
-          { key: "media", value: "media", text: "mais ou menos" },
-          { key: "alta", value: "alta", text: "muito urgente" }
-        ]}
-        register={register}
-        registerOptions={{
-          required: "É necessário escolher a prioridade do chamado",
-          validate: (value) =>
-            value !== "" || "É necessário escolher a prioridade do chamado"
-        }}
-        $status={
-          !!errors?.prioridade
-            ? "invalid"
-            : !errors?.prioridade && priorityWatch.length
-              ? "valid"
-              : "none"
-        }
-      />
-    </IssuePageContent>
-  );
-};
-
-export { CreateTicketPage };
+"use client";
+
+import { CustomSelect, CustomTextArea, OutlinedInput } from "@/components";
+import { IssuePageContent } from "./styles";
+import { useFormContext } from "react-hook-form";
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+import {
+  LS_KEY_1_TICKET_RECORD,
+  SS_KEY_DATA_WAS_RECOVERY
+} from "@/utils/alias";
+import { IOpenTicketForm } from "@/app/(app)/(form)/template";
+
+const CreateTicketPage = () => {
+  const {
+    register,
+    formState: { errors, isValid, isValidating },
+    watch,
+    getValues,
+    setValue
+  } = useFormContext<IOpenTicketForm>();
+
+  useEffect(() => {
+    const data = localStorage.getItem(LS_KEY_1_TICKET_RECORD);
+    const isDataRecovered =
+      sessionStorage.getItem(SS_KEY_DATA_WAS_RECOVERY) === "true";
+    if (data) {
+      const parsedData: IOpenTicketForm = JSON.parse(data);
+      setValue("resumo", parsedData.resumo, { shouldValidate: true });
+      setValue("descricao", parsedData.descricao, { shouldValidate: true });
+      setValue("data", parsedData.data, { shouldValidate: true });
+      setValue("tipo", parsedData.tipo, { shouldValidate: true });
+      setValue("prioridade", parsedData.prioridade, { shouldValidate: true });
+      !isDataRecovered && toast.success("Dados recuperados com sucesso!");
+      sessionStorage.setItem(SS_KEY_DATA_WAS_RECOVERY, "true");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isValid && !isValidating) {
+      localStorage.setItem(
+        LS_KEY_1_TICKET_RECORD,
+        JSON.stringify({ ...getValues() })
+      );
+    }
+  }, [isValid, isValidating]);
+
+  const resumeWatch = watch("resumo", "");
+  const dataWatch = watch("data", "");
+  const descriptionWatch = watch("descricao", "");
+  const typeWatch = watch("tipo", "");
+  const priorityWatch = watch("prioridade", "baixa");
+
+  return (
+    <IssuePageContent id="first-step-form" as="form">
+      <OutlinedInput
+        id="resumo"
+        type="text"
+        placeholder="Do que se trata o chamado?"
+        $status={
+          !!errors?.resumo
+            ? "invalid"
+            : !errors?.resumo && resumeWatch.length
+              ? "valid"
+              : "none"
+        }
+        labelText="Resumo"
+        errorText={errors?.resumo?.message as string}
+        register={register}
+        registerOptions={{
+          required: "É necessário adicionar o resumo do chamado",
+          minLength: {
+            value: 5,
+            message: "O resumo deve ter no mínimo 5 caracteres"
+          },
+          maxLength: {
+            value: 40,
+            message: "O resumo deve ter no máximo 40 caracteres"
+          },
+          pattern: {
+            value:
+              /^[a-zA-Z0-9áéíóúâêîôûãõàèìòùäëïöüçÁÉÍÓÚÂÊÎÔÛÃÕÀÈÌÒÙÄËÏÖÜÇ\s]*$/,
+            message: "O resumo deve conter apenas letras e números"
+          }
+        }}
+      />
+      <CustomSelect
+        id="tipo"
+        isRequired
+        placeholder="Qual o tipo do chamado?"
+        labelText="Tipo"
+        height=""
+        options={[
+          { key: "1", value: "1", text: "1" },
+          { key: "2", value: "2", text: "2" },
+          { key: "3", value: "3", text: "3" }
+        ]}
+        register={register}
+        registerOptions={{
+          required: "É necessário escolher o tipo do chamado",
+          validate: (value) =>
+            value !== "" || "É necessário escolher o tipo do chamado"
+        }}
+        $status={
+          !!errors?.tipo
+            ? "invalid"
+            : !errors?.tipo && typeWatch.length
+              ? "valid"
+              : "none"
+        }
+      />
+      <CustomTextArea
+        id="descricao"
+        placeholder="Nos conte mais detalhes sobre o ocorrido..."
+        labelText="Descrição"
+        $status={
+          !!errors?.descricao
+            ? "invalid"
+            : !errors?.descricao && descriptionWatch.length
+              ? "valid"
+              : errors.descricao?.type === "maxLength"
+                ? "warning"
+                : "none"
+        }
+        register={register}
+        errorText={errors?.descricao?.message as string}
+        warnText={errors.descricao?.message as string}
+        registerOptions={{
+          required: "É necessário escrever mais detalhes sobre o seu chamado",
+          minLength: {
+            value: 20,
+            message: "O resumo deve ter no mínimo 20 caracteres"
+          },
+          maxLength: {
+            value: 460,
+            message: "O resumo deve ter no máximo 280 caracteres"
+          }
+        }}
+      />
+      <OutlinedInput
+        id="data"
+        type="date"
+        placeholder="dd/mm/aaaa"
+        $status={
+          !!errors?.data
+            ? "invalid"
+            : !errors?.data && dataWatch.length
+              ? "valid"
+              : "none"
+        }
+        errorText={errors?.data?.message as string}
+        labelText="Data do ocorrido"
+        register={register}
+        registerOptions={{
+          required: "É necessário adicionar a data do ocorrido",
+          validate: (value) => {
+            const date = new Date(value);
+            const today = new Date();
+            return date < today || "A data não pode ser no futuro";
+          }
+        }}
+      />
+      <CustomSelect
+        id="prioridade"
+        isRequired
+        placeholder="O quão urgente é esse chamado ?"
+        labelText="Prioridade"
+        options={[
+          { key: "baixa", value: "baixa", text: "pouco urgente" },
+          { key: "media", value: "media", text: "mais ou menos" },
+          { key: "alta", value: "alta", text: "muito urgente" }
+        ]}
+        register={register}
+        registerOptions={{
+          required: "É necessário escolher a prioridade do chamado",
+          validate: (value) =>
+            value !== "" || "É necessário escolher a prioridade do chamado"
+        }}
+        $status={
+          !!errors?.prioridade
+            ? "invalid"
+            : !errors?.prioridade && priorityWatch.length
+              ? "valid"
+              : "none"
+        }
+      />
+    </IssuePageContent>
+  );
+};
+
+export { CreateTicketPage };