feature: cria página de edição de contratos

Refs: #5

src/components/containers/StatusButton.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+function StatusButton() {
+  // Estado para armazenar se o status está "Ativo" ou "Inativo"
+  const [isActive, setIsActive] = useState(false);
+
+  // Função para alternar o estado
+  const toggleStatus = () => {
+    setIsActive(!isActive);
+  };
+
+  return (
+    <div>
+      {/* Botão que chama a função toggleStatus ao ser clicado */}
+      <button 
+        onClick={toggleStatus}
+        style={{
+          height: '39px',
+          width: '10vw',
+          backgroundColor: isActive ? 'green' : 'red',
+          color: 'white',
+          border: 'none',
+          borderRadius: '20px',
+          cursor: 'pointer',
+          fontFamily: 'Jost',
+          fontSize: '20px',
+          fontWeight: '700'
+        }}
+      >
+        {isActive ? 'Ativo' : 'Inativo'}
+      </button>
+    </div>
+  );
+}
+
+export default StatusButton;

src/components/forms/EditContractForm.js

@@ -1,31 +1,129 @@
-import React from "react";
+import React, { useState } from "react";
+import { toast } from "react-toastify";
 import Navbar from "../navbar/Navbar";
-import { FontSizeIcon } from "@radix-ui/react-icons";
+import "../../style/components/editContractForm.css";
+import { createContract, getContract } from "../../services/contractService";
+import StatusButton from "../containers/StatusButton";
 
+export default function EditContractForm() {
+  const [numero, setNumero] = useState('');
+  const [nomeGestor, setNomeGestor] = useState('');
+  const [descricao, setDescricao] = useState('');
+  const [dataInicio, setDataInicio] = useState(new Date(Date.now()).toISOString());
+  const [dataFim, setDataFim] = useState(new Date(Date.now()).toISOString());
+  const ativo = false
+
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const formData = {
+      numero,
+      nomeGestor,
+      descricao,
+      dataInicio: new Date(dataInicio).toISOString(),
+      dataFim: new Date(dataInicio).toISOString(),
+      ativo
+
+    };
+    console.log("Form data:", formData);
+
+    const response = await createContract(formData);
+
+    if(response.type === "success") {
+      toast.success("Contrato criado com sucesso!")
+    } else {
+      if(response.error.response.status === 400){
+        toast.error("Este número de contrato ja existe!")
+      }
+      else{
+        toast.error("Erro ao criar contrato!")
+      }
+    }
+  };
 
-export default function EditContractForm(){
   return (
     <>
-    <Navbar />
-    <div>
-      <h1>Edição de Contratos</h1>
+      <Navbar />
       <div id="padraoPagina">
-        <label>Contrato</label>
-        <input placeholder="Insira o n° do contrato"></input>
-        <label>Gestor do Contrato</label>
-        <input placeholder="Insira o nome do gestor"></input>
-        <label>Descrição do Contrato (Processo)</label>
-        <input placeholder="Insira a descrição do contrato"></input>
-        <label>Data de Início</label>
-        <input placeholder="dd/mm/aaaa"></input>
-        <label>Data de Término</label>
-        <input placeholder="dd/mm/aaaa"></input>
+        <h1 id="titulo">Edição de Contrato</h1>
+        <form id="contratos-form">
+          <div className="ContratoStatus">
+            <label id="label">
+              Contrato
+              <input
+                id="inputCampos"
+                placeholder="Insira o n° do contrato"
+                type="text"
+                maxLength={50}
+                value={numero}
+                onChange={(e) => setNumero(e.target.value)}
+              ></input>
+            </label>
+            <label id="label">
+              Status
+              <StatusButton />
+            </label>
+          </div> 
+          <label id="label">
+            Gestor do Contrato
+            <input
+              id="inputCampos"
+              placeholder="Insira o nome do gestor"
+              type="text"
+              maxLength={255}
+              value={nomeGestor}
+              onChange={(e) => setNomeGestor(e.target.value)}
+            ></input>
+          </label>
+          <label id="label">
+            Descrição do Contrato (Processo)
+            <input
+              id="inputDescricao"
+              placeholder="Insira a descrição do contrato"
+              type="text"
+              maxLength={255}
+              value={descricao}
+              onChange={(e) => setDescricao(e.target.value)}
+            ></input>
+          </label>
+          <div id="inputData">
+            <label id="label">
+              Data de Início
+              <input
+                className="inputDataInicio"
+                id="inputCampos"
+                placeholder="dd/mm/aaaa"
+                type="date"
+                value={dataInicio}
+                onChange={(e) => setDataInicio(e.target.value)}
+              ></input>
+            </label>
+            <label className="campoDataTermino" id="label">
+              Data de Término
+              <input
+                className="inputDataInicio"
+                id="inputCampos"
+                placeholder="dd/mm/aaaa"
+                type="date"
+                value={dataFim}
+                onChange={(e) => setDataFim(e.target.value)}
+              ></input>
+            </label>
+          </div>
+        </form>
         <div>
-          <button>Salvar Mudanças</button>
-          <button>Cancelar</button>
-        </div> 
+          <button
+            className="botaoSalvar"
+            type="submit"
+            onClick={handleSubmit}
+          >
+            Salvar Mudanças
+          </button>
+          <button className="botaoCancelar" type="button">
+            Cancelar
+          </button>
+        </div>
       </div>
-    </div>
     </>
   );
 }

src/style/components/editContractForm.css

@@ -0,0 +1,92 @@
+#padraoPagina{
+    color: #0D3D6D;
+    margin-left: 100px;
+    margin-top: 50px;
+}
+
+#titulo{
+    border-bottom: #0D3D6D;
+    border-bottom-style: solid;
+    width: fit-content;
+    padding-bottom: 15px;
+}
+
+#label{
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    margin-bottom: 40px;
+    font-size: 25px;
+}
+
+.ContratoStatus{
+    display: flex;
+    justify-content: space-between;
+    width: 61vw;
+
+}
+
+
+#inputData{
+    display: flex;
+}
+
+#inputDescricao{
+    width: 900px;
+    margin-top: 5px;
+    height: 35px;
+    border-radius: 10px;
+    border-color: #0D3D6D;
+    border-style: solid;
+    padding-left: 20px;
+}
+
+#inputCampos{
+    margin-top: 5px;
+    height: 35px;
+    border-radius: 10px;
+    border-color: #0D3D6D;
+    border-style: solid;
+    padding-inline: 20px;
+}
+
+::placeholder{
+    font-size: 18px;
+    opacity: 0.6;
+    font-family: Jost;
+}
+
+.campoDataTermino{
+    margin-left: 105px;
+}
+
+.botaoSalvar{
+    background-color: #006633;
+    height: 40px;
+    width: 20vw;
+    color: white;
+    font-size: 20px;
+    border-radius: 20px;
+    border-style: none;
+    font-family: Jost;
+    font-weight: 700;
+}
+
+.botaoCancelar{
+    background-color: red;
+    height: 40px;
+    width: 10vw;
+    margin-left: 100px;
+    font-size: 20px;
+    border-radius: 20px;
+    color: white;
+    border-style: none;
+    font-weight: 700;
+    font-family: Jost;
+}
+
+.inputDataInicio{
+    font-size: 18px;
+    opacity: 0.6;
+    font-family: Jost;
+}