Merge branch 'US02T2-TelaDeCadastroDoProdutoFinal' into 'develop'

US02T2-TelaDeCadastroDoProdutoFinal

See merge request !19

src/app/config/final-product/page.tsx

@@ -4,6 +4,7 @@ import GenericList from '@/src/components/common/GenericList';
 import Header from '@/src/components/common/header';
 import SimpleModal from '@/src/components/common/SimpleModal';
 import ImageExample from '@/public/config-image-example.svg';
+import FinalProductModal from '@/src/components/common/modals/FinalProductModal';
 
 export default function createFinalProduct() {
   // Função que retorna os itens da lista
@@ -29,7 +30,7 @@ export default function createFinalProduct() {
             }
           ]}
           getItems={getFinalProduct} // Função que busca os itens
-          AddModal={SimpleModal} // Abre modal de adicionar
+          AddModal={FinalProductModal} // Abre modal de adicionar
           EditModal={SimpleModal} // Abre modal de editar
           DeleteModal={SimpleModal} // Abre modal de deletar
         />

src/components/common/inputs/SelectInput.tsx

@@ -3,7 +3,7 @@ interface SelectInputProps {
   placeholder: string;
   options: string[];
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  value?: string;
+  value?: string | number;
 }
 
 const selectInput: React.FC<SelectInputProps> = ({

src/components/common/lists/DefaultListItems.tsx

+type Props<T> = {
+  items: T[]; // Array de itens do tipo genérico
+  renderItem: (item: T) => React.ReactNode; // Função para renderizar cada item
+  editable?: boolean;
+  onRemove?: (index: number) => void;
+  header?: boolean;
+  extraStyle?: string;
+  scrollable?: boolean;
+};
+
+export default function DefaultListItems<T>({
+  items,
+  renderItem,
+  editable = false,
+  onRemove,
+  header = false,
+  extraStyle = '',
+  scrollable = false
+}: Props<T>) {
+  return (
+    <div>
+      {header && editable && (
+        <div className={'grid grid-cols-9 my-4 gap-4'}>
+          <span className="text-black font-bold col-span-3 text-center truncate">
+            Lote
+          </span>
+          <span className="text-black font-bold col-span-3 truncate">
+            Matéria Prima
+          </span>
+          <span className="text-black font-bold col-span-3 truncate">
+            Quantidade
+          </span>
+        </div>
+      )}
+      {editable && onRemove && (
+        <div
+          className={`h-auto max-h-28 ${extraStyle} ${scrollable ? 'overflow-auto' : 'overflow-hidden'}`}
+        >
+          {items?.map((item, index) => (
+            <div
+              key={index}
+              className="grid grid-cols-10 gap-4 items-center mb-4 pb-2 w-full"
+            >
+              <div className="col-span-9">
+                <div className="text-black font-semibold w-full grid grid-cols-1">
+                  <div
+                    className="col-span-3 align-middle"
+                    title={String(renderItem(item))}
+                  >
+                    {' '}
+                    {renderItem(item)}
+                  </div>
+                </div>
+              </div>
+              <div className="flex justify-center padding-right-2">
+                <button
+                  className="text-red-600 font-semibold border border-red-600 rounded-full py-0.5 px-1.5 hover:bg-red-600 hover:text-white transition-colors"
+                  onClick={() => onRemove(index)}
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {!editable && (
+        <div
+          className={`h-auto max-h-64 ${extraStyle} ${scrollable ? 'overflow-auto' : 'overflow-hidden'}`}
+        >
+          {items?.map((item, index) => (
+            <div key={index} className="mb-4 border-b pb-2 w-full">
+              <div className="flex justify-between items-center text-black font-semibold w-full">
+                <div
+                  className="truncate w-1/3 text-center"
+                  title={String(renderItem(item))}
+                >
+                  {renderItem(item)}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/common/modals/FinalProductModal.tsx

+import { useState } from 'react';
+import { Button } from '@headlessui/react';
+import DynamicBox from '@/src/components/common/DynamicBox';
+import Image from 'next/image';
+import GenericModal from '@/src/components/common/modals/GenericModal';
+import SelectInput from '../inputs/SelectInput';
+import DefaultInput from '../inputs/DefaultInput';
+import DefaultListItems from '../lists/DefaultListItems';
+
+const FinalProductModal: React.FC = () => {
+  const [rawMateriaCategory, setRawMaterialCategory] = useState('');
+  const [category, setCategory] = useState('');
+  const [step, setSteps] = useState('');
+
+  const [categorys, setCategorys] = useState<{ category: string }[]>([]);
+  const [stepsType, setStepsType] = useState<{ step: string }[]>([]);
+
+  // rever esses pontos:
+  // const openModal = () => setIsModalOpen(true);
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const closeModal = () => setIsModalOpen(false);
+  const isFormValidAddType = category != '';
+  const isFormValidAddSteps = step != '';
+
+  const handleAddCategory = (category: string) => {
+    setCategorys([...categorys, { category }]);
+    setCategory('');
+  };
+
+  const handleAddSteps = (step: string) => {
+    setStepsType([...stepsType, { step }]);
+    setSteps('');
+  };
+
+  const handleRemoveCategory = (indexToRemove: number) => {
+    setCategorys(categorys.filter((_, index) => index !== indexToRemove));
+  };
+
+  const handleRemoveSteps = (indexToRemove: number) => {
+    setStepsType(stepsType.filter((_, index) => index !== indexToRemove));
+  };
+
+  return (
+    <GenericModal
+      isOpen={isModalOpen} //ajustar esse ponto
+      onClose={closeModal}
+      title="Cadastrar Produto Final"
+    >
+      <DynamicBox extraStyle="mb-5">
+        <DefaultInput label="Descricao" placeholder="Descricao" />
+        <SelectInput
+          label="Categoria"
+          value={rawMateriaCategory}
+          placeholder="Selecione a categoria"
+          onChange={e => setRawMaterialCategory(e.target.value)}
+          options={['batata', 'cenoura']}
+        />
+        <SelectInput
+          label="Tipo de Materia Prima"
+          value={category}
+          onChange={e => setCategory(e.target.value)}
+          placeholder="Selecione o tipo"
+          options={[
+            'Batata Inglesa Media',
+            'Batata Inglesa Pequena',
+            'Batata Inglesa Grande'
+          ]}
+        />
+        <Button
+          className={`border rounded-lg w-full p-2 mt-2 mb-4 ${
+            isFormValidAddType
+              ? 'bg-greenHortti text-white'
+              : 'bg-gray-100 text-black cursor-not-allowed border-x-gray-300'
+          }`}
+          disabled={!isFormValidAddType}
+          onClick={() => handleAddCategory(category)}
+        >
+          Adicionar
+        </Button>
+        <DefaultListItems
+          items={categorys}
+          renderItem={item => <span>{item.category}</span>}
+          editable
+          scrollable
+          onRemove={handleRemoveCategory}
+        />
+      </DynamicBox>
+      <DynamicBox extraStyle="mb-5">
+        <SelectInput
+          label="Etapa"
+          value={step}
+          onChange={e => setSteps(e.target.value)}
+          placeholder="Selecione a etapa"
+          options={[
+            'Batata Inglesa Media',
+            'Batata Inglesa Pequena',
+            'Batata Inglesa Grande'
+          ]}
+        />
+        <Button
+          className={`border rounded-lg w-full p-2 mt-2 mb-4 ${
+            isFormValidAddSteps
+              ? 'bg-greenHortti text-white'
+              : 'bg-gray-100 text-black cursor-not-allowed border-x-gray-300'
+          }`}
+          disabled={!isFormValidAddSteps}
+          onClick={() => handleAddSteps(step)}
+        >
+          Adicionar
+        </Button>
+        <DefaultListItems
+          items={stepsType}
+          renderItem={item => <span>{item.step}</span>}
+          editable
+          scrollable
+          onRemove={handleRemoveSteps}
+        />
+      </DynamicBox>
+      <DynamicBox extraStyle="mb-5">
+        <p className="text-black text-2xl font-bold">Adicionar Imagem</p>
+        <p className="text-gray-400">Selecione uma Imagem de no máximo 20mb</p>
+        <div className="h-40 w-full">
+          <Image
+            src="/fruits.svg"
+            alt="Imagem do Produto"
+            className="mt-2 w-full h-full object-cover rounded-xl"
+            layout="fixed"
+            width={500}
+            height={500}
+          />
+        </div>
+      </DynamicBox>
+    </GenericModal>
+  );
+};
+
+export default FinalProductModal;

src/components/common/modals/GenericModal.tsx

+import React from 'react';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  isOpen?: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-lg shadow-lg w-full max-w-2xl h-auto max-h-[90vh] overflow-y-auto p-12 relative">
+        <div className="flex justify-between items-center border-b pb-3 mb-4">
+          <h2 className="text-xl font-bold text-black">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-red-600 font-semibold text-xl"
+          >
+            ✕
+          </button>
+        </div>
+        {/* Conteúdo Dinâmico (Children) */}
+        <div>{children}</div>
+        <div className="mt-6 flex justify-end space-x-3">
+          <button
+            onClick={onClose}
+            className="border rounded-lg px-4 py-2 text-white bg-greenHortti"
+          >
+            Adicionar
+          </button>
+          <button
+            onClick={onClose}
+            className="border rounded-lg px-4 py-2 text-white bg-gray-700"
+          >
+            Fechar
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body // Renderiza fora da árvore principal de componentes
+  );
+};
+
+export default Modal;

src/components/order/BatchListComponent.tsx

@@ -56,7 +56,7 @@ export default function BatchListComponent({
           {itens.map((item, index) => (
             <div
               key={index}
-              className="grid grid-cols-10 gap-4 items-center mb-4 border-b pb-2 w-full"
+              className="grid grid-cols-10 items-center mb-4 border-b pb-2 w-full"
             >
               <div className="col-span-9">
                 <div className="text-black font-semibold w-full grid grid-cols-9">
@@ -81,7 +81,7 @@ export default function BatchListComponent({
               </div>
               <div className="flex justify-center">
                 <button
-                  className="text-red-600 font-semibold border border-red-600 rounded-full py-1 px-2 hover:bg-red-600 hover:text-white transition-colors"
+                  className="text-red-600 font-semibold border border-red-600 rounded-full py-0.4 px-1.5 hover:bg-red-600 hover:text-white transition-colors"
                   onClick={() => onRemove(index)}
                 >
                   ✕